From c073e2cf4db2fa7913301a94dcba32d08b778691 Mon Sep 17 00:00:00 2001 From: Pranesh Date: Fri, 14 Mar 2025 20:54:24 +0530 Subject: [PATCH 1/5] Add core design system functionality --- apps/gitness/package.json | 1 + apps/gitness/src/test-component.tsx | 102 + packages/core-design-system/README.md | 63 + .../export-tokens-js/build.js | 202 + .../export-tokens-js/complete-log.js | 24 + .../export-tokens-js/constants.js | 12 + .../export-tokens-js/sd-file-generators.js | 79 + .../export-tokens-js/sd-filters.js | 30 + .../core-design-system/export-tokens/build.js | 175 + .../export-tokens/complete-log.js | 24 + .../export-tokens/constants.js | 12 + .../export-tokens/sd-file-generators.js | 79 + .../export-tokens/sd-filters.js | 30 + packages/core-design-system/package.json | 31 + .../core-design-system/src/core-styles-esm.ts | 1 + .../core-design-system/src/core-styles.css | 6 + .../src/styles-esm/breakpoint.ts | 663 ++ .../src/styles-esm/colors.ts | 2933 ++++++ .../src/styles-esm/components.ts | 1751 ++++ .../core-design-system/src/styles-esm/core.ts | 6809 +++++++++++++ .../src/styles-esm/index.ts | 115 + .../styles-esm/source-dark-desktop-gitness.ts | 8863 ++++++++++++++++ .../styles-esm/source-dark-desktop-harness.ts | 8863 ++++++++++++++++ ...ource-dark-deuteranopia-desktop-gitness.ts | 8840 ++++++++++++++++ ...ource-dark-deuteranopia-desktop-harness.ts | 8840 ++++++++++++++++ .../source-dark-dimmer-desktop-gitness.ts | 8822 ++++++++++++++++ .../source-dark-dimmer-desktop-harness.ts | 8822 ++++++++++++++++ ...ark-dimmer-deuteranopia-desktop-gitness.ts | 8822 ++++++++++++++++ ...ark-dimmer-deuteranopia-desktop-harness.ts | 8822 ++++++++++++++++ ...-dark-dimmer-protanopia-desktop-gitness.ts | 8822 ++++++++++++++++ ...-dark-dimmer-protanopia-desktop-harness.ts | 8822 ++++++++++++++++ ...-dark-dimmer-tritanopia-desktop-gitness.ts | 8819 ++++++++++++++++ ...-dark-dimmer-tritanopia-desktop-harness.ts | 8819 ++++++++++++++++ ...urce-dark-high-contrast-desktop-gitness.ts | 8840 ++++++++++++++++ ...urce-dark-high-contrast-desktop-harness.ts | 8840 ++++++++++++++++ ...h-contrast-deuteranopia-desktop-gitness.ts | 8845 ++++++++++++++++ ...h-contrast-deuteranopia-desktop-harness.ts | 8845 ++++++++++++++++ ...igh-contrast-protanopia-desktop-gitness.ts | 8840 ++++++++++++++++ ...igh-contrast-protanopia-desktop-harness.ts | 8840 ++++++++++++++++ ...igh-contrast-tritanopia-desktop-gitness.ts | 8840 ++++++++++++++++ ...igh-contrast-tritanopia-desktop-harness.ts | 8840 ++++++++++++++++ .../source-dark-protanopia-desktop-gitness.ts | 8840 ++++++++++++++++ .../source-dark-protanopia-desktop-harness.ts | 8840 ++++++++++++++++ .../source-dark-tritanopia-desktop-gitness.ts | 8840 ++++++++++++++++ .../source-dark-tritanopia-desktop-harness.ts | 8840 ++++++++++++++++ .../source-light-desktop-gitness.ts | 8854 ++++++++++++++++ .../source-light-desktop-harness.ts | 8854 ++++++++++++++++ ...urce-light-deuteranopia-desktop-gitness.ts | 8854 ++++++++++++++++ ...urce-light-deuteranopia-desktop-harness.ts | 8854 ++++++++++++++++ .../source-light-dimmer-desktop-gitness.ts | 8871 ++++++++++++++++ .../source-light-dimmer-desktop-harness.ts | 8871 ++++++++++++++++ ...ght-dimmer-deuteranopia-desktop-gitness.ts | 8871 ++++++++++++++++ ...ght-dimmer-deuteranopia-desktop-harness.ts | 8871 ++++++++++++++++ ...light-dimmer-protanopia-desktop-gitness.ts | 8877 ++++++++++++++++ ...light-dimmer-protanopia-desktop-harness.ts | 8877 ++++++++++++++++ ...light-dimmer-tritanopia-desktop-gitness.ts | 8871 ++++++++++++++++ ...light-dimmer-tritanopia-desktop-harness.ts | 8871 ++++++++++++++++ ...rce-light-high-contrast-desktop-gitness.ts | 8853 ++++++++++++++++ ...rce-light-high-contrast-desktop-harness.ts | 8853 ++++++++++++++++ ...h-contrast-deuteranopia-desktop-gitness.ts | 8900 +++++++++++++++++ ...h-contrast-deuteranopia-desktop-harness.ts | 8900 +++++++++++++++++ ...igh-contrast-protanopia-desktop-gitness.ts | 8866 ++++++++++++++++ ...igh-contrast-protanopia-desktop-harness.ts | 8866 ++++++++++++++++ ...igh-contrast-tritanopia-desktop-gitness.ts | 8858 ++++++++++++++++ ...igh-contrast-tritanopia-desktop-harness.ts | 8858 ++++++++++++++++ ...source-light-protanopia-desktop-gitness.ts | 8860 ++++++++++++++++ ...source-light-protanopia-desktop-harness.ts | 8860 ++++++++++++++++ ...source-light-tritanopia-desktop-gitness.ts | 8854 ++++++++++++++++ ...source-light-tritanopia-desktop-harness.ts | 8854 ++++++++++++++++ .../src/styles/breakpoint.css | 36 + .../core-design-system/src/styles/colors.css | 179 + .../src/styles/components.css | 86 + .../core-design-system/src/styles/core.css | 263 + .../core-design-system/src/styles/index.css | 64 + .../styles/source-dark-desktop-gitness.css | 492 + .../styles/source-dark-desktop-harness.css | 492 + ...urce-dark-deuteranopia-desktop-gitness.css | 491 + ...urce-dark-deuteranopia-desktop-harness.css | 491 + .../source-dark-dimmer-desktop-gitness.css | 491 + .../source-dark-dimmer-desktop-harness.css | 491 + ...rk-dimmer-deuteranopia-desktop-gitness.css | 491 + ...rk-dimmer-deuteranopia-desktop-harness.css | 491 + ...dark-dimmer-protanopia-desktop-gitness.css | 491 + ...dark-dimmer-protanopia-desktop-harness.css | 491 + ...dark-dimmer-tritanopia-desktop-gitness.css | 491 + ...dark-dimmer-tritanopia-desktop-harness.css | 491 + ...rce-dark-high-contrast-desktop-gitness.css | 491 + ...rce-dark-high-contrast-desktop-harness.css | 491 + ...-contrast-deuteranopia-desktop-gitness.css | 491 + ...-contrast-deuteranopia-desktop-harness.css | 491 + ...gh-contrast-protanopia-desktop-gitness.css | 491 + ...gh-contrast-protanopia-desktop-harness.css | 491 + ...gh-contrast-tritanopia-desktop-gitness.css | 491 + ...gh-contrast-tritanopia-desktop-harness.css | 491 + ...source-dark-protanopia-desktop-gitness.css | 491 + ...source-dark-protanopia-desktop-harness.css | 491 + ...source-dark-tritanopia-desktop-gitness.css | 491 + ...source-dark-tritanopia-desktop-harness.css | 491 + .../styles/source-light-desktop-gitness.css | 490 + .../styles/source-light-desktop-harness.css | 490 + ...rce-light-deuteranopia-desktop-gitness.css | 490 + ...rce-light-deuteranopia-desktop-harness.css | 490 + .../source-light-dimmer-desktop-gitness.css | 490 + .../source-light-dimmer-desktop-harness.css | 490 + ...ht-dimmer-deuteranopia-desktop-gitness.css | 490 + ...ht-dimmer-deuteranopia-desktop-harness.css | 490 + ...ight-dimmer-protanopia-desktop-gitness.css | 490 + ...ight-dimmer-protanopia-desktop-harness.css | 490 + ...ight-dimmer-tritanopia-desktop-gitness.css | 490 + ...ight-dimmer-tritanopia-desktop-harness.css | 490 + ...ce-light-high-contrast-desktop-gitness.css | 490 + ...ce-light-high-contrast-desktop-harness.css | 490 + ...-contrast-deuteranopia-desktop-gitness.css | 490 + ...-contrast-deuteranopia-desktop-harness.css | 490 + ...gh-contrast-protanopia-desktop-gitness.css | 490 + ...gh-contrast-protanopia-desktop-harness.css | 490 + ...gh-contrast-tritanopia-desktop-gitness.css | 490 + ...gh-contrast-tritanopia-desktop-harness.css | 490 + ...ource-light-protanopia-desktop-gitness.css | 490 + ...ource-light-protanopia-desktop-harness.css | 490 + ...ource-light-tritanopia-desktop-gitness.css | 490 + ...ource-light-tritanopia-desktop-harness.css | 490 + packages/ui/package.json | 1 + packages/ui/src/components/badge/badge.tsx | 16 +- packages/ui/src/styles.css | 5 +- packages/ui/tailwind-design-system.ts | 377 + pnpm-lock.yaml | 384 + 127 files changed, 462940 insertions(+), 3 deletions(-) create mode 100644 apps/gitness/src/test-component.tsx create mode 100644 packages/core-design-system/README.md create mode 100644 packages/core-design-system/export-tokens-js/build.js create mode 100644 packages/core-design-system/export-tokens-js/complete-log.js create mode 100644 packages/core-design-system/export-tokens-js/constants.js create mode 100644 packages/core-design-system/export-tokens-js/sd-file-generators.js create mode 100644 packages/core-design-system/export-tokens-js/sd-filters.js create mode 100644 packages/core-design-system/export-tokens/build.js create mode 100644 packages/core-design-system/export-tokens/complete-log.js create mode 100644 packages/core-design-system/export-tokens/constants.js create mode 100644 packages/core-design-system/export-tokens/sd-file-generators.js create mode 100644 packages/core-design-system/export-tokens/sd-filters.js create mode 100644 packages/core-design-system/package.json create mode 100644 packages/core-design-system/src/core-styles-esm.ts create mode 100644 packages/core-design-system/src/core-styles.css create mode 100644 packages/core-design-system/src/styles-esm/breakpoint.ts create mode 100644 packages/core-design-system/src/styles-esm/colors.ts create mode 100644 packages/core-design-system/src/styles-esm/components.ts create mode 100644 packages/core-design-system/src/styles-esm/core.ts create mode 100644 packages/core-design-system/src/styles-esm/index.ts create mode 100644 packages/core-design-system/src/styles-esm/source-dark-desktop-gitness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-dark-desktop-harness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-dark-deuteranopia-desktop-gitness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-dark-deuteranopia-desktop-harness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-dark-dimmer-desktop-gitness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-dark-dimmer-desktop-harness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-dark-dimmer-deuteranopia-desktop-gitness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-dark-dimmer-deuteranopia-desktop-harness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-dark-dimmer-protanopia-desktop-gitness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-dark-dimmer-protanopia-desktop-harness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-dark-dimmer-tritanopia-desktop-gitness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-dark-dimmer-tritanopia-desktop-harness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-dark-high-contrast-desktop-gitness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-dark-high-contrast-desktop-harness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-dark-high-contrast-deuteranopia-desktop-gitness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-dark-high-contrast-deuteranopia-desktop-harness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-dark-high-contrast-protanopia-desktop-gitness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-dark-high-contrast-protanopia-desktop-harness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-dark-high-contrast-tritanopia-desktop-gitness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-dark-high-contrast-tritanopia-desktop-harness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-dark-protanopia-desktop-gitness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-dark-protanopia-desktop-harness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-dark-tritanopia-desktop-gitness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-dark-tritanopia-desktop-harness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-light-desktop-gitness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-light-desktop-harness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-light-deuteranopia-desktop-gitness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-light-deuteranopia-desktop-harness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-light-dimmer-desktop-gitness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-light-dimmer-desktop-harness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-light-dimmer-deuteranopia-desktop-gitness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-light-dimmer-deuteranopia-desktop-harness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-light-dimmer-protanopia-desktop-gitness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-light-dimmer-protanopia-desktop-harness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-light-dimmer-tritanopia-desktop-gitness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-light-dimmer-tritanopia-desktop-harness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-light-high-contrast-desktop-gitness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-light-high-contrast-desktop-harness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-light-high-contrast-deuteranopia-desktop-gitness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-light-high-contrast-deuteranopia-desktop-harness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-light-high-contrast-protanopia-desktop-gitness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-light-high-contrast-protanopia-desktop-harness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-light-high-contrast-tritanopia-desktop-gitness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-light-high-contrast-tritanopia-desktop-harness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-light-protanopia-desktop-gitness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-light-protanopia-desktop-harness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-light-tritanopia-desktop-gitness.ts create mode 100644 packages/core-design-system/src/styles-esm/source-light-tritanopia-desktop-harness.ts create mode 100644 packages/core-design-system/src/styles/breakpoint.css create mode 100644 packages/core-design-system/src/styles/colors.css create mode 100644 packages/core-design-system/src/styles/components.css create mode 100644 packages/core-design-system/src/styles/core.css create mode 100644 packages/core-design-system/src/styles/index.css create mode 100644 packages/core-design-system/src/styles/source-dark-desktop-gitness.css create mode 100644 packages/core-design-system/src/styles/source-dark-desktop-harness.css create mode 100644 packages/core-design-system/src/styles/source-dark-deuteranopia-desktop-gitness.css create mode 100644 packages/core-design-system/src/styles/source-dark-deuteranopia-desktop-harness.css create mode 100644 packages/core-design-system/src/styles/source-dark-dimmer-desktop-gitness.css create mode 100644 packages/core-design-system/src/styles/source-dark-dimmer-desktop-harness.css create mode 100644 packages/core-design-system/src/styles/source-dark-dimmer-deuteranopia-desktop-gitness.css create mode 100644 packages/core-design-system/src/styles/source-dark-dimmer-deuteranopia-desktop-harness.css create mode 100644 packages/core-design-system/src/styles/source-dark-dimmer-protanopia-desktop-gitness.css create mode 100644 packages/core-design-system/src/styles/source-dark-dimmer-protanopia-desktop-harness.css create mode 100644 packages/core-design-system/src/styles/source-dark-dimmer-tritanopia-desktop-gitness.css create mode 100644 packages/core-design-system/src/styles/source-dark-dimmer-tritanopia-desktop-harness.css create mode 100644 packages/core-design-system/src/styles/source-dark-high-contrast-desktop-gitness.css create mode 100644 packages/core-design-system/src/styles/source-dark-high-contrast-desktop-harness.css create mode 100644 packages/core-design-system/src/styles/source-dark-high-contrast-deuteranopia-desktop-gitness.css create mode 100644 packages/core-design-system/src/styles/source-dark-high-contrast-deuteranopia-desktop-harness.css create mode 100644 packages/core-design-system/src/styles/source-dark-high-contrast-protanopia-desktop-gitness.css create mode 100644 packages/core-design-system/src/styles/source-dark-high-contrast-protanopia-desktop-harness.css create mode 100644 packages/core-design-system/src/styles/source-dark-high-contrast-tritanopia-desktop-gitness.css create mode 100644 packages/core-design-system/src/styles/source-dark-high-contrast-tritanopia-desktop-harness.css create mode 100644 packages/core-design-system/src/styles/source-dark-protanopia-desktop-gitness.css create mode 100644 packages/core-design-system/src/styles/source-dark-protanopia-desktop-harness.css create mode 100644 packages/core-design-system/src/styles/source-dark-tritanopia-desktop-gitness.css create mode 100644 packages/core-design-system/src/styles/source-dark-tritanopia-desktop-harness.css create mode 100644 packages/core-design-system/src/styles/source-light-desktop-gitness.css create mode 100644 packages/core-design-system/src/styles/source-light-desktop-harness.css create mode 100644 packages/core-design-system/src/styles/source-light-deuteranopia-desktop-gitness.css create mode 100644 packages/core-design-system/src/styles/source-light-deuteranopia-desktop-harness.css create mode 100644 packages/core-design-system/src/styles/source-light-dimmer-desktop-gitness.css create mode 100644 packages/core-design-system/src/styles/source-light-dimmer-desktop-harness.css create mode 100644 packages/core-design-system/src/styles/source-light-dimmer-deuteranopia-desktop-gitness.css create mode 100644 packages/core-design-system/src/styles/source-light-dimmer-deuteranopia-desktop-harness.css create mode 100644 packages/core-design-system/src/styles/source-light-dimmer-protanopia-desktop-gitness.css create mode 100644 packages/core-design-system/src/styles/source-light-dimmer-protanopia-desktop-harness.css create mode 100644 packages/core-design-system/src/styles/source-light-dimmer-tritanopia-desktop-gitness.css create mode 100644 packages/core-design-system/src/styles/source-light-dimmer-tritanopia-desktop-harness.css create mode 100644 packages/core-design-system/src/styles/source-light-high-contrast-desktop-gitness.css create mode 100644 packages/core-design-system/src/styles/source-light-high-contrast-desktop-harness.css create mode 100644 packages/core-design-system/src/styles/source-light-high-contrast-deuteranopia-desktop-gitness.css create mode 100644 packages/core-design-system/src/styles/source-light-high-contrast-deuteranopia-desktop-harness.css create mode 100644 packages/core-design-system/src/styles/source-light-high-contrast-protanopia-desktop-gitness.css create mode 100644 packages/core-design-system/src/styles/source-light-high-contrast-protanopia-desktop-harness.css create mode 100644 packages/core-design-system/src/styles/source-light-high-contrast-tritanopia-desktop-gitness.css create mode 100644 packages/core-design-system/src/styles/source-light-high-contrast-tritanopia-desktop-harness.css create mode 100644 packages/core-design-system/src/styles/source-light-protanopia-desktop-gitness.css create mode 100644 packages/core-design-system/src/styles/source-light-protanopia-desktop-harness.css create mode 100644 packages/core-design-system/src/styles/source-light-tritanopia-desktop-gitness.css create mode 100644 packages/core-design-system/src/styles/source-light-tritanopia-desktop-harness.css create mode 100644 packages/ui/tailwind-design-system.ts diff --git a/apps/gitness/package.json b/apps/gitness/package.json index 2b2195dfbd..24ad037907 100644 --- a/apps/gitness/package.json +++ b/apps/gitness/package.json @@ -25,6 +25,7 @@ "@harnessio/code-service-client": "3.5.0", "@harnessio/forms": "workspace:*", "@harnessio/pipeline-graph": "workspace:*", + "@harnessio/core-design-system": "workspace:*", "@harnessio/ui": "workspace:*", "@harnessio/views": "workspace:*", "@harnessio/yaml-editor": "workspace:*", diff --git a/apps/gitness/src/test-component.tsx b/apps/gitness/src/test-component.tsx new file mode 100644 index 0000000000..d6ac785fbd --- /dev/null +++ b/apps/gitness/src/test-component.tsx @@ -0,0 +1,102 @@ +import { useMemo } from 'react' + +import * as styles from '@harnessio/core-design-system/styles-esm' +import { Badge, Text, Tooltip, TooltipContent, TooltipTrigger } from '@harnessio/ui/components' + +export default function TestComponent() { + const colorPalette = useMemo(() => { + const shades = Object.keys(styles.colors.colors.blue) + + return { shades } + }, []) + + return ( +
+
+ + Badge + + + Different Badge variations + + +
+ Default + Success + warning + danger + running + merged + ai + {/* Danger */} +
+
+ +
+ +
+ + Core color palette + + + The main color used to define the brand or highlight key elements. + + + {/* Shades */} +
+
{/* Empty space for color name column */} + {colorPalette.shades.map(shade => ( +
+ {shade} +
+ ))} +
+ + {/* Colors */} +
+ {Object.keys(styles.colors.colors).map(colorName => { + const colorGroup = styles.colors.colors[colorName as keyof typeof styles.colors.colors] + + return ( +
+
{colorName}
+ + {colorPalette.shades.map(shade => { + const color = colorGroup[shade as keyof typeof colorGroup] + const colorValue = color?.$value || '' + + return ( +
+ {/* */} + {/* */} +
+ {/* */} + {/* + --{color?.name}: {colorValue} + */} + {/* */} + {/*
*/} +
+ ) + })} +
+ ) + })} +
+
+
+ ) +} diff --git a/packages/core-design-system/README.md b/packages/core-design-system/README.md new file mode 100644 index 0000000000..b5c9a2bc79 --- /dev/null +++ b/packages/core-design-system/README.md @@ -0,0 +1,63 @@ +# Harness Design System + +This package provides the core design system for Harness UI components. + +## Installation + +```bash +npm install @harnessio/core-design-system +``` + +## Usage + +### Importing CSS Styles + +To import all design system styles: + +```js +import '@harnessio/core-design-system/styles' +``` + +### Importing JavaScript Tokens + +To import JavaScript tokens for programmatic usage: + +```js +import { colors, spacing, typography } from '@harnessio/core-design-system/styles-esm' + +// Example usage +console.log(colors.primary) +console.log(spacing.md) +``` + +Or import everything: + +```js +import * as designTokens from '@harnessio/core-design-system/styles-esm' +``` + +### Importing Individual Components + +You can also import the main package: + +```js +import * as designSystem from '@harnessio/core-design-system' +``` + +## Building + +To build the design system: + +```bash +npm run build +``` + +This will: + +1. Build the CSS styles (`npm run build:styles`) +2. Build the JavaScript ESM exports (`npm run build:styles:esm`) + +## Development + +- `src/styles/` - Contains all CSS stylesheets +- `src/styles-js/` - Contains all JavaScript values for the design system diff --git a/packages/core-design-system/export-tokens-js/build.js b/packages/core-design-system/export-tokens-js/build.js new file mode 100644 index 0000000000..fdd4a5422f --- /dev/null +++ b/packages/core-design-system/export-tokens-js/build.js @@ -0,0 +1,202 @@ +import fs from 'node:fs/promises' + +import { permutateThemes, register } from '@tokens-studio/sd-transforms' +import StyleDictionary from 'style-dictionary' +import { getReferences, usesReferences } from 'style-dictionary/utils' + +import { harnessLog } from './complete-log.js' +import { DESIGN_SYSTEM_PREFIX, STYLE_FILE_PATH } from './constants.js' +import { generateCoreFiles, generateThemeFiles } from './sd-file-generators.js' + +register(StyleDictionary) + +async function run() { + const $themes = JSON.parse(await fs.readFile('design-tokens/$themes.json')) + const themes = permutateThemes($themes) + // collect all tokensets for all themes and dedupe + const tokensets = [...new Set(Object.values(themes).reduce((acc, sets) => [...acc, ...sets], []))] + + // figure out which tokensets are theme-specific + // this is determined by checking if a certain tokenset is used for EVERY theme dimension variant + // if it is, then it is not theme-specific + const themeableSets = tokensets.filter(set => { + return !Object.values(themes).every(sets => sets.includes(set)) + }) + + const configs = Object.entries(themes).map(([theme, sets]) => { + return { + source: sets.map(tokenset => `design-tokens/${tokenset}.json`), + preprocessors: ['tokens-studio'], + platforms: { + js: { + transformGroup: 'tokens-studio', + prefix: DESIGN_SYSTEM_PREFIX, + options: { + fileHeader: () => { + return [ + 'Harness Design System', + 'Generated style tokens - DO NOT EDIT DIRECTLY', + `Generated on ${new Date().toUTCString()}`, + 'Copyright (c) Harness.' + ] + } + }, + transforms: ['name/kebab', 'attribute/themeable', 'ts/transform/alpha'], + files: [ + // core tokens (colors, typography, dimensions, components) + ...generateCoreFiles(), + // semantic tokens, e.g. for application developer + ...generateThemeFiles(theme) + ] + } + } + } + }) + + for (const cfg of configs) { + const sd = new StyleDictionary(cfg, { + // verbosity: 'verbose' + }) + + /** + * This transform checks for each token whether that token's value could change + * due to Tokens Studio theming. + * Any tokenset from Tokens Studio marked as "enabled" in the $themes.json is considered + * a set in which any token could change if the theme changes. + * Any token that is inside such a set or is a reference with a token in that reference chain + * that is inside such a set, is considered "themeable", + * which means it could change by theme switching. + * + * This metadata is applied to the token so we can use it as a way of filtering outputs + * later in the "format" stage. + */ + sd.registerTransform({ + name: 'attribute/themeable', + type: 'attribute', + transform: token => { + function isPartOfEnabledSet(token) { + const set = token.filePath.replace(/^design-tokens\//g, '').replace(/.json$/g, '') + return themeableSets.includes(set) + } + + // Set token to themeable if it's part of an enabled set + if (isPartOfEnabledSet(token)) { + return { + themeable: true + } + } + + // Set token to themeable if it's using a reference and inside the reference chain + // any one of them is from a themeable set + if (usesReferences(token.original.$value)) { + const refs = getReferences(token.original.$value, sd.tokens) + + if (refs.some(ref => isPartOfEnabledSet(ref))) { + return { + themeable: true + } + } + } + } + }) + + sd.registerTransform({ + name: 'ts/transform/alpha', + type: 'value', + filter: prop => { + return ( + prop.$extensions?.['studio.tokens']?.modify?.type === 'alpha' && + prop.$extensions?.['studio.tokens']?.modify?.space === 'lch' + ) + }, + transitive: true, + transform: prop => { + const baseColor = prop.original.$value.replace(/[{}]/g, '').replace(/\./g, '-') + const alphaValue = prop.$extensions['studio.tokens'].modify.value + return `lch(from var(--${DESIGN_SYSTEM_PREFIX}-${baseColor}) l c h / ${alphaValue})` + } + }) + + await sd.cleanAllPlatforms() + await sd.buildAllPlatforms() + } + + console.log('\n\x1b[1m\x1b[32m%s\x1b[0m', '✔︎ Generated style tokens successfully!') + + // Create index.ts that imports all generated files + await createIndexFile() +} + +async function createIndexFile() { + console.log('\n\x1b[34mCreating styles/index.css import file...\x1b[0m') + + // Get list of all JS files + const styleValueFiles = (await fs.readdir(STYLE_FILE_PATH.DESIGN_SYSTEM)) + .filter(file => file.endsWith('.ts') && file !== 'index.ts') + .sort() + + // Organize files by type + const coreFiles = styleValueFiles.filter(file => !file.startsWith('source-')) + const darkFiles = styleValueFiles.filter(file => file.includes('-dark-')) + const lightFiles = styleValueFiles.filter(file => file.includes('-light-')) + + console.log('\n=== Theme File Summary ===') + console.table({ + 'Dark Theme Files': { count: darkFiles.length }, + 'Light Theme Files': { count: lightFiles.length } + }) + console.log('\n') + + // Generate content + const content = `/** + * Harness Design System + * DO NOT UPDATE IT MANUALLY + * Generated on ${new Date().toUTCString()} + */ + + /* Theme files - Combined */ +export const designSystemThemeMap = { +${[...darkFiles, ...lightFiles] + .map(file => { + const name = file.replace('.ts', '') + return `'${name}': '${name}',` + }) + .join('\n')} +} + +/* Core tokens */ +${coreFiles + .map(file => { + const fileName = file.replace('.ts', '') + const name = fileName.replace(/-./g, x => x[1].toUpperCase()) + return `export { default as ${name} } from './${fileName}';` + }) + .join('\n')} + +/* Theme files - Dark */ +${darkFiles + .map(file => { + const fileName = file.replace('.ts', '') + const name = fileName.replace(/-./g, x => x[1].toUpperCase()) + return `export { default as ${name} } from './${fileName}';` + }) + .join('\n')} + +/* Theme files - Light */ +${lightFiles + .map(file => { + const fileName = file.replace('.ts', '') + const name = fileName.replace(/-./g, x => x[1].toUpperCase()) + return `export { default as ${name} } from './${fileName}';` + }) + .join('\n')}; +` + + // Write file + await fs.writeFile(STYLE_FILE_PATH.INDEX, content) + + console.log('\n\x1b[1m\x1b[32m%s\x1b[0m', `✔︎ Created ${STYLE_FILE_PATH.INDEX} with imports to all token files`) + harnessLog() +} + +run() diff --git a/packages/core-design-system/export-tokens-js/complete-log.js b/packages/core-design-system/export-tokens-js/complete-log.js new file mode 100644 index 0000000000..7710379e40 --- /dev/null +++ b/packages/core-design-system/export-tokens-js/complete-log.js @@ -0,0 +1,24 @@ +import figlet from 'figlet' +import { summer } from 'gradient-string' + +export function harnessLog() { + console.log('\n') + figlet( + 'Harness Design Values!!', + { + font: 'Big', + horizontalLayout: 'default', + verticalLayout: 'default', + width: 120, + whitespaceBreak: true + }, + function (err, data) { + if (err) { + console.log('Something went wrong...') + console.dir(err) + return + } + console.log(summer(data)) + } + ) +} diff --git a/packages/core-design-system/export-tokens-js/constants.js b/packages/core-design-system/export-tokens-js/constants.js new file mode 100644 index 0000000000..c81254c10b --- /dev/null +++ b/packages/core-design-system/export-tokens-js/constants.js @@ -0,0 +1,12 @@ +const DESIGN_SYSTEM_ROOT = 'src/styles-esm' + +export const STYLE_FILE_PATH = { + DESIGN_SYSTEM: DESIGN_SYSTEM_ROOT, + INDEX: `${DESIGN_SYSTEM_ROOT}/index.ts`, + CORE: `${DESIGN_SYSTEM_ROOT}/core.ts`, + COLORS: `${DESIGN_SYSTEM_ROOT}/colors.ts`, + BREAKPOINT: `${DESIGN_SYSTEM_ROOT}/breakpoint.ts`, + COMPONENTS: `${DESIGN_SYSTEM_ROOT}/components.ts` +} + +export const DESIGN_SYSTEM_PREFIX = 'canary' diff --git a/packages/core-design-system/export-tokens-js/sd-file-generators.js b/packages/core-design-system/export-tokens-js/sd-file-generators.js new file mode 100644 index 0000000000..732dc5992a --- /dev/null +++ b/packages/core-design-system/export-tokens-js/sd-file-generators.js @@ -0,0 +1,79 @@ +import { STYLE_FILE_PATH } from './constants.js' +import { breakpointFilter, componentsFilter, coreFilter, lchColorsFilter, semanticFilter } from './sd-filters.js' + +const format = 'javascript/esm' + +// ✨ Building core tokens +export const generateCoreFiles = () => [ + { + destination: STYLE_FILE_PATH.CORE, + format, + filter: coreFilter, + options: { + outputReferences: true + } + }, + { + destination: STYLE_FILE_PATH.COLORS, + format, + filter: lchColorsFilter, + options: { + outputReferences: true + } + }, + { + destination: STYLE_FILE_PATH.BREAKPOINT, + format, + filter: breakpointFilter, + options: { + outputReferences: true + } + }, + { + destination: STYLE_FILE_PATH.COMPONENTS, + format, + filter: componentsFilter, + options: { + outputReferences: true + } + } +] + +// ✨ Building theme-specific tokens +export const generateThemeFiles = theme => { + const filesArr = [] + // theme-specific outputs + filesArr.push({ + format, + filter: semanticFilter(true), + destination: `${STYLE_FILE_PATH.DESIGN_SYSTEM}/${theme.toLowerCase()}.ts`, + options: { + outputReferences: token => { + // ADD REFERENCE ONLY TO NON-ALPHA TOKENS, ALPHA TOKENS ARE TRANSFORMED AND REFERENCED MANUALLY + return token?.$extensions?.['studio.tokens']?.modify?.type !== 'alpha' + }, + selector: `.${theme.toLowerCase()}` + } + }) + return filesArr +} + +// for each component (currently only button), filter those specific component tokens and output them +// to the component folder where the component source code will live +// export const generateComponentFiles = components => { +// const filesArr = [] + +// for (const comp of components) { +// filesArr.push({ +// format, +// filter: componentFilter(comp, true), +// options: { +// // since these will be used in ShadowDOM +// selector: ':host', +// outputReferences: outputReferencesTransformed +// }, +// destination: `components/${comp}/${comp}.css` +// }) +// } +// return filesArr +// } diff --git a/packages/core-design-system/export-tokens-js/sd-filters.js b/packages/core-design-system/export-tokens-js/sd-filters.js new file mode 100644 index 0000000000..b0f2b3635f --- /dev/null +++ b/packages/core-design-system/export-tokens-js/sd-filters.js @@ -0,0 +1,30 @@ +/** + * filters only tokens originating from core folder, except colors.json + * All the colors will be updated manually. + * 🚨 TODO: UPDATE THE COLORS FILE NAME HERE 🚨 + * */ +// && !token.filePath.startsWith('design-tokens/core/colors.json') +export const coreFilter = token => + token.filePath.startsWith('design-tokens/core/') && !token.filePath.startsWith('design-tokens/core/colors_') + +export const lchColorsFilter = token => + token.filePath.startsWith('design-tokens/core/') && token.filePath.startsWith('design-tokens/core/colors_lch') + +// filters only tokens originating from breakpoint folder +export const breakpointFilter = token => token.filePath.startsWith('design-tokens/breakpoint/') + +// filters only tokens originating from components folder +export const componentsFilter = token => token.filePath.startsWith('design-tokens/components/') + +// filters only tokens originating from semantic sets (not core, not components) and also check themeable or not +export const semanticFilter = + (themeable = false) => + token => { + const themeDimensions = ['mode', 'brand'] + const tokenThemable = Boolean(token.attributes.themeable) + // return true; + return ( + themeable === tokenThemable && + [...themeDimensions].some(cat => token.filePath.startsWith(`design-tokens/${cat}/`)) + ) + } diff --git a/packages/core-design-system/export-tokens/build.js b/packages/core-design-system/export-tokens/build.js new file mode 100644 index 0000000000..76b566a9a2 --- /dev/null +++ b/packages/core-design-system/export-tokens/build.js @@ -0,0 +1,175 @@ +import fs from 'node:fs/promises' + +import { permutateThemes, register } from '@tokens-studio/sd-transforms' +import StyleDictionary from 'style-dictionary' +import { getReferences, usesReferences } from 'style-dictionary/utils' + +import { harnessLog } from './complete-log.js' +import { DESIGN_SYSTEM_PREFIX, STYLE_FILE_PATH } from './constants.js' +import { generateCoreFiles, generateThemeFiles } from './sd-file-generators.js' + +register(StyleDictionary) + +async function run() { + const $themes = JSON.parse(await fs.readFile('design-tokens/$themes.json')) + const themes = permutateThemes($themes) + // collect all tokensets for all themes and dedupe + const tokensets = [...new Set(Object.values(themes).reduce((acc, sets) => [...acc, ...sets], []))] + + // figure out which tokensets are theme-specific + // this is determined by checking if a certain tokenset is used for EVERY theme dimension variant + // if it is, then it is not theme-specific + const themeableSets = tokensets.filter(set => { + return !Object.values(themes).every(sets => sets.includes(set)) + }) + + const configs = Object.entries(themes).map(([theme, sets]) => { + return { + source: sets.map(tokenset => `design-tokens/${tokenset}.json`), + preprocessors: ['tokens-studio'], + platforms: { + css: { + transformGroup: 'tokens-studio', + prefix: DESIGN_SYSTEM_PREFIX, + options: { + fileHeader: () => { + return [ + 'Harness Design System', + 'Generated style tokens - DO NOT EDIT DIRECTLY', + `Generated on ${new Date().toUTCString()}`, + 'Copyright (c) Harness.' + ] + } + }, + transforms: ['name/kebab', 'attribute/themeable', 'ts/transform/alpha'], + files: [ + // core tokens (colors, typography, dimensions, components) + ...generateCoreFiles(), + // semantic tokens, e.g. for application developer + ...generateThemeFiles(theme) + ] + } + } + } + }) + + for (const cfg of configs) { + const sd = new StyleDictionary(cfg, { + // verbosity: 'verbose' + }) + + /** + * This transform checks for each token whether that token's value could change + * due to Tokens Studio theming. + * Any tokenset from Tokens Studio marked as "enabled" in the $themes.json is considered + * a set in which any token could change if the theme changes. + * Any token that is inside such a set or is a reference with a token in that reference chain + * that is inside such a set, is considered "themeable", + * which means it could change by theme switching. + * + * This metadata is applied to the token so we can use it as a way of filtering outputs + * later in the "format" stage. + */ + sd.registerTransform({ + name: 'attribute/themeable', + type: 'attribute', + transform: token => { + function isPartOfEnabledSet(token) { + const set = token.filePath.replace(/^design-tokens\//g, '').replace(/.json$/g, '') + return themeableSets.includes(set) + } + + // Set token to themeable if it's part of an enabled set + if (isPartOfEnabledSet(token)) { + return { + themeable: true + } + } + + // Set token to themeable if it's using a reference and inside the reference chain + // any one of them is from a themeable set + if (usesReferences(token.original.$value)) { + const refs = getReferences(token.original.$value, sd.tokens) + + if (refs.some(ref => isPartOfEnabledSet(ref))) { + return { + themeable: true + } + } + } + } + }) + + sd.registerTransform({ + name: 'ts/transform/alpha', + type: 'value', + filter: prop => { + return ( + prop.$extensions?.['studio.tokens']?.modify?.type === 'alpha' && + prop.$extensions?.['studio.tokens']?.modify?.space === 'lch' + ) + }, + transitive: true, + transform: prop => { + const baseColor = prop.original.$value.replace(/[{}]/g, '').replace(/\./g, '-') + const alphaValue = prop.$extensions['studio.tokens'].modify.value + return `lch(from var(--${DESIGN_SYSTEM_PREFIX}-${baseColor}) l c h / ${alphaValue})` + } + }) + + await sd.cleanAllPlatforms() + await sd.buildAllPlatforms() + } + + console.log('\n\x1b[1m\x1b[32m%s\x1b[0m', '✔︎ Generated style tokens successfully!') + + // Create index.css that imports all generated files + await createIndexFile() +} + +async function createIndexFile() { + console.log('\n\x1b[34mCreating styles/index.css import file...\x1b[0m') + + // Get list of all CSS files + const cssFiles = (await fs.readdir(STYLE_FILE_PATH.DESIGN_SYSTEM)) + .filter(file => file.endsWith('.css') && file !== 'index.css') + .sort() + + // Organize files by type + const coreFiles = cssFiles.filter(file => !file.startsWith('source-')) + const darkFiles = cssFiles.filter(file => file.includes('-dark-')) + const lightFiles = cssFiles.filter(file => file.includes('-light-')) + + console.log('\n=== Theme File Summary ===') + console.table({ + 'Dark Theme Files': { count: darkFiles.length }, + 'Light Theme Files': { count: lightFiles.length } + }) + console.log('\n') + + // Generate content + const content = `/** + * Harness Design System + * Main stylesheet importing all token files + * DO NOT UPDATE IT MANUALLY + * Generated on ${new Date().toUTCString()} + */ + +/* Core tokens */ +${coreFiles.map(file => `@import './${file}';`).join('\n')} + +/* Theme files - Dark */ +${darkFiles.map(file => `@import './${file}';`).join('\n')} + +/* Theme files - Light */ +${lightFiles.map(file => `@import './${file}';`).join('\n')}; +` + + // Write file + await fs.writeFile(STYLE_FILE_PATH.INDEX, content) + + console.log('\n\x1b[1m\x1b[32m%s\x1b[0m', `✔︎ Created ${STYLE_FILE_PATH.INDEX} with imports to all token files`) + harnessLog() +} + +run() diff --git a/packages/core-design-system/export-tokens/complete-log.js b/packages/core-design-system/export-tokens/complete-log.js new file mode 100644 index 0000000000..ebb1f5a346 --- /dev/null +++ b/packages/core-design-system/export-tokens/complete-log.js @@ -0,0 +1,24 @@ +import figlet from 'figlet' +import { summer } from 'gradient-string' + +export function harnessLog() { + console.log('\n') + figlet( + 'Harness Design System!!', + { + font: 'Big', + horizontalLayout: 'default', + verticalLayout: 'default', + width: 120, + whitespaceBreak: true + }, + function (err, data) { + if (err) { + console.log('Something went wrong...') + console.dir(err) + return + } + console.log(summer(data)) + } + ) +} diff --git a/packages/core-design-system/export-tokens/constants.js b/packages/core-design-system/export-tokens/constants.js new file mode 100644 index 0000000000..3aae965a3b --- /dev/null +++ b/packages/core-design-system/export-tokens/constants.js @@ -0,0 +1,12 @@ +const DESIGN_SYSTEM_ROOT = 'src/styles' + +export const STYLE_FILE_PATH = { + DESIGN_SYSTEM: DESIGN_SYSTEM_ROOT, + INDEX: `${DESIGN_SYSTEM_ROOT}/index.css`, + CORE: `${DESIGN_SYSTEM_ROOT}/core.css`, + COLORS: `${DESIGN_SYSTEM_ROOT}/colors.css`, + BREAKPOINT: `${DESIGN_SYSTEM_ROOT}/breakpoint.css`, + COMPONENTS: `${DESIGN_SYSTEM_ROOT}/components.css` +} + +export const DESIGN_SYSTEM_PREFIX = 'canary' diff --git a/packages/core-design-system/export-tokens/sd-file-generators.js b/packages/core-design-system/export-tokens/sd-file-generators.js new file mode 100644 index 0000000000..2ad2b24131 --- /dev/null +++ b/packages/core-design-system/export-tokens/sd-file-generators.js @@ -0,0 +1,79 @@ +import { STYLE_FILE_PATH } from './constants.js' +import { breakpointFilter, componentsFilter, coreFilter, lchColorsFilter, semanticFilter } from './sd-filters.js' + +const format = 'css/variables' + +// ✨ Building core tokens +export const generateCoreFiles = () => [ + { + destination: STYLE_FILE_PATH.CORE, + format, + filter: coreFilter, + options: { + outputReferences: true + } + }, + { + destination: STYLE_FILE_PATH.COLORS, + format, + filter: lchColorsFilter, + options: { + outputReferences: true + } + }, + { + destination: STYLE_FILE_PATH.BREAKPOINT, + format, + filter: breakpointFilter, + options: { + outputReferences: true + } + }, + { + destination: STYLE_FILE_PATH.COMPONENTS, + format, + filter: componentsFilter, + options: { + outputReferences: true + } + } +] + +// ✨ Building theme-specific tokens +export const generateThemeFiles = theme => { + const filesArr = [] + // theme-specific outputs + filesArr.push({ + format, + filter: semanticFilter(true), + destination: `${STYLE_FILE_PATH.DESIGN_SYSTEM}/${theme.toLowerCase()}.css`, + options: { + outputReferences: token => { + // ADD REFERENCE ONLY TO NON-ALPHA TOKENS, ALPHA TOKENS ARE TRANSFORMED AND REFERENCED MANUALLY + return token?.$extensions?.['studio.tokens']?.modify?.type !== 'alpha' + }, + selector: `.${theme.toLowerCase()}` + } + }) + return filesArr +} + +// for each component (currently only button), filter those specific component tokens and output them +// to the component folder where the component source code will live +// export const generateComponentFiles = components => { +// const filesArr = [] + +// for (const comp of components) { +// filesArr.push({ +// format, +// filter: componentFilter(comp, true), +// options: { +// // since these will be used in ShadowDOM +// selector: ':host', +// outputReferences: outputReferencesTransformed +// }, +// destination: `components/${comp}/${comp}.css` +// }) +// } +// return filesArr +// } diff --git a/packages/core-design-system/export-tokens/sd-filters.js b/packages/core-design-system/export-tokens/sd-filters.js new file mode 100644 index 0000000000..b0f2b3635f --- /dev/null +++ b/packages/core-design-system/export-tokens/sd-filters.js @@ -0,0 +1,30 @@ +/** + * filters only tokens originating from core folder, except colors.json + * All the colors will be updated manually. + * 🚨 TODO: UPDATE THE COLORS FILE NAME HERE 🚨 + * */ +// && !token.filePath.startsWith('design-tokens/core/colors.json') +export const coreFilter = token => + token.filePath.startsWith('design-tokens/core/') && !token.filePath.startsWith('design-tokens/core/colors_') + +export const lchColorsFilter = token => + token.filePath.startsWith('design-tokens/core/') && token.filePath.startsWith('design-tokens/core/colors_lch') + +// filters only tokens originating from breakpoint folder +export const breakpointFilter = token => token.filePath.startsWith('design-tokens/breakpoint/') + +// filters only tokens originating from components folder +export const componentsFilter = token => token.filePath.startsWith('design-tokens/components/') + +// filters only tokens originating from semantic sets (not core, not components) and also check themeable or not +export const semanticFilter = + (themeable = false) => + token => { + const themeDimensions = ['mode', 'brand'] + const tokenThemable = Boolean(token.attributes.themeable) + // return true; + return ( + themeable === tokenThemable && + [...themeDimensions].some(cat => token.filePath.startsWith(`design-tokens/${cat}/`)) + ) + } diff --git a/packages/core-design-system/package.json b/packages/core-design-system/package.json new file mode 100644 index 0000000000..dbbd8e3af9 --- /dev/null +++ b/packages/core-design-system/package.json @@ -0,0 +1,31 @@ +{ + "name": "@harnessio/core-design-system", + "version": "1.0.0", + "description": "Harness Design System", + "type": "module", + "main": "src/core-style-esm.js", + "exports": { + "./styles": "./src/core-styles.css", + "./styles-esm": "./src/core-styles-esm.ts" + }, + "scripts": { + "build:styles": "rm -rf src/styles/design-system && node export-tokens/build.js", + "build:styles:esm": "rm -rf src/styles/design-system && node export-tokens-js/build.js", + "build": " pnpm clean && npm run build:styles && npm run build:styles:esm", + "clean": "rimraf ./src/styles && rimraf ./src/styles-esm" + }, + "keywords": [ + "design-system", + "css", + "styles" + ], + "author": "", + "license": "ISC", + "devDependencies": { + "@tokens-studio/sd-transforms": "^1.2.9", + "figlet": "^1.8.0", + "gradient-string": "^3.0.0", + "rimraf": "^6.0.1", + "style-dictionary": "^4.1.4" + } +} diff --git a/packages/core-design-system/src/core-styles-esm.ts b/packages/core-design-system/src/core-styles-esm.ts new file mode 100644 index 0000000000..26c6bf8586 --- /dev/null +++ b/packages/core-design-system/src/core-styles-esm.ts @@ -0,0 +1 @@ +export * from './styles-esm' diff --git a/packages/core-design-system/src/core-styles.css b/packages/core-design-system/src/core-styles.css new file mode 100644 index 0000000000..ebd777781e --- /dev/null +++ b/packages/core-design-system/src/core-styles.css @@ -0,0 +1,6 @@ +/* Do not add any Custom CSS rules */ + +/* Design System */ +@import './styles/index.css'; + +/* ======= 🚨 PROTECTED ZONE - END ======= */ diff --git a/packages/core-design-system/src/styles-esm/breakpoint.ts b/packages/core-design-system/src/styles-esm/breakpoint.ts new file mode 100644 index 0000000000..20f3344511 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/breakpoint.ts @@ -0,0 +1,663 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:54 GMT + * Copyright (c) Harness. + */ + +export default { + component: { + "markdown-editor": { + title: { + h1: { + $type: "typography", + $value: "600 1.875rem/2.8125rem Inter", + $description: "Article main heading.", + filePath: "design-tokens/breakpoint/desktop.json", + isSource: true, + original: { + $type: "typography", + $value: { + fontFamily: "{fontFamily.default}", + fontWeight: "{fontWeight.default.normal.600}", + fontSize: "{fontSize.7}", + lineHeight: "{lineHeight.7.normal}", + letterSpacing: "{tracking.tight}", + }, + $description: "Article main heading.", + }, + name: "canary-component-markdown-editor-title-h1", + attributes: { + category: "component", + type: "markdown-editor", + item: "title", + subitem: "h1", + }, + path: ["component", "markdown-editor", "title", "h1"], + }, + h2: { + $type: "typography", + $value: "600 1.5rem/2.25rem Inter", + $description: "Article section heading.", + filePath: "design-tokens/breakpoint/desktop.json", + isSource: true, + original: { + $type: "typography", + $value: { + fontFamily: "{fontFamily.default}", + fontWeight: "{fontWeight.default.normal.600}", + fontSize: "{fontSize.6}", + lineHeight: "{lineHeight.6.normal}", + letterSpacing: "{tracking.tight}", + }, + $description: "Article section heading.", + }, + name: "canary-component-markdown-editor-title-h2", + attributes: { + category: "component", + type: "markdown-editor", + item: "title", + subitem: "h2", + }, + path: ["component", "markdown-editor", "title", "h2"], + }, + h3: { + $type: "typography", + $value: "600 1rem/1.5rem Inter", + $description: "Article subsection heading.", + filePath: "design-tokens/breakpoint/desktop.json", + isSource: true, + original: { + $type: "typography", + $value: { + fontFamily: "{fontFamily.default}", + fontWeight: "{fontWeight.default.normal.600}", + fontSize: "{fontSize.3}", + lineHeight: "{lineHeight.3.normal}", + letterSpacing: "{tracking.normal}", + }, + $description: "Article subsection heading.", + }, + name: "canary-component-markdown-editor-title-h3", + attributes: { + category: "component", + type: "markdown-editor", + item: "title", + subitem: "h3", + }, + path: ["component", "markdown-editor", "title", "h3"], + }, + }, + content: { + lead: { + $type: "typography", + $value: "400 1.25rem/1.875rem Inter", + $description: "Article introduction paragraph.", + filePath: "design-tokens/breakpoint/desktop.json", + isSource: true, + original: { + $type: "typography", + $value: { + fontFamily: "{fontFamily.default}", + fontWeight: "{fontWeight.default.normal.400}", + fontSize: "{fontSize.5}", + lineHeight: "{lineHeight.5.normal}", + letterSpacing: "{tracking.tight}", + }, + $description: "Article introduction paragraph.", + }, + name: "canary-component-markdown-editor-content-lead", + attributes: { + category: "component", + type: "markdown-editor", + item: "content", + subitem: "lead", + }, + path: ["component", "markdown-editor", "content", "lead"], + }, + paragraph: { + $type: "typography", + $value: "400 1rem/1.625rem Inter", + $description: "Article paragraph text.", + filePath: "design-tokens/breakpoint/desktop.json", + isSource: true, + original: { + $type: "typography", + $value: { + fontFamily: "{fontFamily.default}", + fontWeight: "{fontWeight.default.normal.400}", + fontSize: "{fontSize.3}", + lineHeight: "{lineHeight.3.relaxed}", + letterSpacing: "{tracking.normal}", + }, + $description: "Article paragraph text.", + }, + name: "canary-component-markdown-editor-content-paragraph", + attributes: { + category: "component", + type: "markdown-editor", + item: "content", + subitem: "paragraph", + }, + path: ["component", "markdown-editor", "content", "paragraph"], + }, + emphasized: { + $type: "typography", + $value: "500 1rem/1.625rem Inter", + $description: "Emphasized paragraph text.", + filePath: "design-tokens/breakpoint/desktop.json", + isSource: true, + original: { + $type: "typography", + $value: { + fontFamily: "{fontFamily.default}", + fontWeight: "{fontWeight.default.normal.500}", + fontSize: "{fontSize.3}", + lineHeight: "{lineHeight.3.relaxed}", + letterSpacing: "{tracking.tight}", + }, + $description: "Emphasized paragraph text.", + }, + name: "canary-component-markdown-editor-content-emphasized", + attributes: { + category: "component", + type: "markdown-editor", + item: "content", + subitem: "emphasized", + }, + path: ["component", "markdown-editor", "content", "emphasized"], + }, + }, + }, + }, + breakpoint: { + viewport: { + $type: "number", + $value: "1440", + filePath: "design-tokens/breakpoint/desktop.json", + isSource: true, + original: { + $type: "number", + $value: "1440", + }, + name: "canary-breakpoint-viewport", + attributes: { + category: "breakpoint", + type: "viewport", + }, + path: ["breakpoint", "viewport"], + }, + viewportMin: { + $type: "number", + $value: "1080", + filePath: "design-tokens/breakpoint/desktop.json", + isSource: true, + original: { + $type: "number", + $value: "1080", + }, + name: "canary-breakpoint-viewport-min", + attributes: { + category: "breakpoint", + type: "viewportMin", + }, + path: ["breakpoint", "viewportMin"], + }, + viewportMax: { + $type: "number", + $value: "1919", + filePath: "design-tokens/breakpoint/desktop.json", + isSource: true, + original: { + $type: "number", + $value: "1919", + }, + name: "canary-breakpoint-viewport-max", + attributes: { + category: "breakpoint", + type: "viewportMax", + }, + path: ["breakpoint", "viewportMax"], + }, + container: { + $type: "number", + $value: "32px", + filePath: "design-tokens/breakpoint/desktop.json", + isSource: true, + original: { + $type: "number", + $value: "{spacing.8}", + }, + name: "canary-breakpoint-container", + attributes: { + category: "breakpoint", + type: "container", + }, + path: ["breakpoint", "container"], + }, + }, + heading: { + hero: { + $type: "typography", + $value: "500 3rem/3.75rem Inter", + $description: "Large headlines with extra emphasis.", + filePath: "design-tokens/breakpoint/desktop.json", + isSource: true, + original: { + $type: "typography", + $value: { + fontFamily: "{fontFamily.default}", + fontWeight: "{fontWeight.default.normal.500}", + fontSize: "{fontSize.9}", + lineHeight: "{lineHeight.9.tight}", + letterSpacing: "{tracking.tight}", + textCase: "{textCase.none}", + }, + $description: "Large headlines with extra emphasis.", + }, + name: "canary-heading-hero", + attributes: { + category: "heading", + type: "hero", + }, + path: ["heading", "hero"], + }, + section: { + $type: "typography", + $value: "500 1.875rem/2.3438rem Inter", + $description: "Large headlines, hero sections.", + filePath: "design-tokens/breakpoint/desktop.json", + isSource: true, + original: { + $type: "typography", + $value: { + fontFamily: "{fontFamily.default}", + fontWeight: "{fontWeight.default.normal.500}", + fontSize: "{fontSize.7}", + lineHeight: "{lineHeight.7.tight}", + letterSpacing: "{tracking.tight}", + textCase: "{textCase.none}", + }, + $description: "Large headlines, hero sections.", + }, + name: "canary-heading-section", + attributes: { + category: "heading", + type: "section", + }, + path: ["heading", "section"], + }, + subsection: { + $type: "typography", + $value: "500 1.5rem/1.875rem Inter", + $description: "Emphasized section headers.", + filePath: "design-tokens/breakpoint/desktop.json", + isSource: true, + original: { + $type: "typography", + $value: { + fontFamily: "{fontFamily.default}", + fontWeight: "{fontWeight.default.normal.500}", + fontSize: "{fontSize.6}", + lineHeight: "{lineHeight.6.tight}", + letterSpacing: "{tracking.normal}", + }, + $description: "Emphasized section headers.", + }, + name: "canary-heading-subsection", + attributes: { + category: "heading", + type: "subsection", + }, + path: ["heading", "subsection"], + }, + dialog: { + $type: "typography", + $value: "500 1.25rem/1.5625rem Inter", + $description: "Dialog headers.", + filePath: "design-tokens/breakpoint/desktop.json", + isSource: true, + original: { + $type: "typography", + $value: { + fontFamily: "{fontFamily.default}", + fontWeight: "{fontWeight.default.normal.500}", + fontSize: "{fontSize.5}", + lineHeight: "{lineHeight.5.tight}", + letterSpacing: "{tracking.tight}", + }, + $description: "Dialog headers.", + }, + name: "canary-heading-dialog", + attributes: { + category: "heading", + type: "dialog", + }, + path: ["heading", "dialog"], + }, + base: { + $type: "typography", + $value: "500 1rem/1.25rem Inter", + $description: "Section headers.", + filePath: "design-tokens/breakpoint/desktop.json", + isSource: true, + original: { + $type: "typography", + $value: { + fontFamily: "{fontFamily.default}", + fontWeight: "{fontWeight.default.normal.500}", + fontSize: "{fontSize.3}", + lineHeight: "{lineHeight.3.tight}", + letterSpacing: "{tracking.normal}", + }, + $description: "Section headers.", + }, + name: "canary-heading-base", + attributes: { + category: "heading", + type: "base", + }, + path: ["heading", "base"], + }, + small: { + $type: "typography", + $value: "600 0.875rem/1.2031rem Inter", + $description: "Section headers.", + filePath: "design-tokens/breakpoint/desktop.json", + isSource: true, + original: { + $type: "typography", + $value: { + fontFamily: "{fontFamily.default}", + fontWeight: "{fontWeight.default.normal.600}", + fontSize: "{fontSize.2}", + lineHeight: "{lineHeight.2.snug}", + letterSpacing: "{tracking.normal}", + }, + $description: "Section headers.", + }, + name: "canary-heading-small", + attributes: { + category: "heading", + type: "small", + }, + path: ["heading", "small"], + }, + }, + body: { + normal: { + $type: "typography", + $value: "400 0.875rem/1.2031rem Inter", + $description: "Primary text style for UI and content.", + filePath: "design-tokens/breakpoint/desktop.json", + isSource: true, + original: { + $type: "typography", + $value: { + fontFamily: "{fontFamily.default}", + fontWeight: "{fontWeight.default.normal.400}", + fontSize: "{fontSize.2}", + lineHeight: "{lineHeight.2.snug}", + letterSpacing: "{tracking.tight}", + }, + $description: "Primary text style for UI and content.", + }, + name: "canary-body-normal", + attributes: { + category: "body", + type: "normal", + }, + path: ["body", "normal"], + }, + strong: { + $type: "typography", + $value: "500 0.875rem/1.2031rem Inter", + $description: "Primary text style for UI and content.", + filePath: "design-tokens/breakpoint/desktop.json", + isSource: true, + original: { + $type: "typography", + $value: { + fontFamily: "{fontFamily.default}", + fontWeight: "{fontWeight.default.normal.500}", + fontSize: "{fontSize.2}", + lineHeight: "{lineHeight.2.snug}", + letterSpacing: "{tracking.normal}", + }, + $description: "Primary text style for UI and content.", + }, + name: "canary-body-strong", + attributes: { + category: "body", + type: "strong", + }, + path: ["body", "strong"], + }, + code: { + $type: "typography", + $value: "400 0.875rem/1.3125rem 'JetBrains Mono'", + $description: "Code blocks and larger code snippets.", + filePath: "design-tokens/breakpoint/desktop.json", + isSource: true, + original: { + $type: "typography", + $value: { + fontFamily: "{fontFamily.mono}", + fontWeight: "{fontWeight.default.normal.400}", + fontSize: "{fontSize.2}", + lineHeight: "{lineHeight.2.normal}", + letterSpacing: "{tracking.tight}", + }, + $description: "Code blocks and larger code snippets.", + }, + name: "canary-body-code", + attributes: { + category: "body", + type: "code", + }, + path: ["body", "code"], + }, + none: { + normal: { + $type: "typography", + $value: "400 0.875rem/0.875rem Inter", + $description: "Primary text style for UI and content.", + filePath: "design-tokens/breakpoint/desktop.json", + isSource: true, + original: { + $type: "typography", + $value: { + fontFamily: "{fontFamily.default}", + fontWeight: "{fontWeight.default.normal.400}", + fontSize: "{fontSize.2}", + lineHeight: "{lineHeight.2.none}", + letterSpacing: "{tracking.tight}", + }, + $description: "Primary text style for UI and content.", + }, + name: "canary-body-none-normal", + attributes: { + category: "body", + type: "none", + item: "normal", + }, + path: ["body", "none", "normal"], + }, + strong: { + $type: "typography", + $value: "500 0.875rem/0.875rem Inter", + filePath: "design-tokens/breakpoint/desktop.json", + isSource: true, + original: { + $type: "typography", + $value: { + fontFamily: "{fontFamily.default}", + fontWeight: "{fontWeight.default.normal.500}", + fontSize: "{fontSize.2}", + lineHeight: "{lineHeight.2.none}", + letterSpacing: "{tracking.normal}", + }, + }, + name: "canary-body-none-strong", + attributes: { + category: "body", + type: "none", + item: "strong", + }, + path: ["body", "none", "strong"], + }, + }, + tight: { + normal: { + $type: "typography", + $value: "400 0.875rem/1.0938rem Inter", + $description: "Primary text style for UI and content.", + filePath: "design-tokens/breakpoint/desktop.json", + isSource: true, + original: { + $type: "typography", + $value: { + fontFamily: "{fontFamily.default}", + fontWeight: "{fontWeight.default.normal.400}", + fontSize: "{fontSize.2}", + lineHeight: "{lineHeight.2.tight}", + letterSpacing: "{tracking.tight}", + }, + $description: "Primary text style for UI and content.", + }, + name: "canary-body-tight-normal", + attributes: { + category: "body", + type: "tight", + item: "normal", + }, + path: ["body", "tight", "normal"], + }, + strong: { + $type: "typography", + $value: "500 0.875rem/1.0938rem Inter", + filePath: "design-tokens/breakpoint/desktop.json", + isSource: true, + original: { + $type: "typography", + $value: { + fontFamily: "{fontFamily.default}", + fontWeight: "{fontWeight.default.normal.500}", + fontSize: "{fontSize.2}", + lineHeight: "{lineHeight.2.tight}", + letterSpacing: "{tracking.normal}", + }, + }, + name: "canary-body-tight-strong", + attributes: { + category: "body", + type: "tight", + item: "strong", + }, + path: ["body", "tight", "strong"], + }, + }, + }, + caption: { + normal: { + $type: "typography", + $value: "500 0.75rem/1.0313rem Inter", + $description: "Primary caption style, small but important text.", + filePath: "design-tokens/breakpoint/desktop.json", + isSource: true, + original: { + $type: "typography", + $value: { + fontFamily: "{fontFamily.default}", + fontWeight: "{fontWeight.default.normal.500}", + fontSize: "{fontSize.1}", + lineHeight: "{lineHeight.1.snug}", + letterSpacing: "{tracking.normal}", + }, + $description: "Primary caption style, small but important text.", + }, + name: "canary-caption-normal", + attributes: { + category: "caption", + type: "normal", + }, + path: ["caption", "normal"], + }, + soft: { + $type: "typography", + $value: "400 0.75rem/1.0313rem Inter", + $description: "Helper text, meta information.", + filePath: "design-tokens/breakpoint/desktop.json", + isSource: true, + original: { + $type: "typography", + $value: { + fontFamily: "{fontFamily.default}", + fontWeight: "{fontWeight.default.normal.400}", + fontSize: "{fontSize.1}", + lineHeight: "{lineHeight.1.snug}", + letterSpacing: "{tracking.normal}", + }, + $description: "Helper text, meta information.", + }, + name: "canary-caption-soft", + attributes: { + category: "caption", + type: "soft", + }, + path: ["caption", "soft"], + }, + none: { + normal: { + $type: "typography", + $value: "500 0.75rem/0.75rem Inter", + $description: "Primary caption style, small but important text.", + filePath: "design-tokens/breakpoint/desktop.json", + isSource: true, + original: { + $type: "typography", + $value: { + fontFamily: "{fontFamily.default}", + fontWeight: "{fontWeight.default.normal.500}", + fontSize: "{fontSize.1}", + lineHeight: "{lineHeight.1.none}", + letterSpacing: "{tracking.normal}", + }, + $description: "Primary caption style, small but important text.", + }, + name: "canary-caption-none-normal", + attributes: { + category: "caption", + type: "none", + item: "normal", + }, + path: ["caption", "none", "normal"], + }, + soft: { + $type: "typography", + $value: "400 0.75rem/0.75rem Inter", + $description: "Helper text, meta information.", + filePath: "design-tokens/breakpoint/desktop.json", + isSource: true, + original: { + $type: "typography", + $value: { + fontFamily: "{fontFamily.default}", + fontWeight: "{fontWeight.default.normal.400}", + fontSize: "{fontSize.1}", + lineHeight: "{lineHeight.1.none}", + letterSpacing: "{tracking.normal}", + }, + $description: "Helper text, meta information.", + }, + name: "canary-caption-none-soft", + attributes: { + category: "caption", + type: "none", + item: "soft", + }, + path: ["caption", "none", "soft"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/colors.ts b/packages/core-design-system/src/styles-esm/colors.ts new file mode 100644 index 0000000000..4af41efebc --- /dev/null +++ b/packages/core-design-system/src/styles-esm/colors.ts @@ -0,0 +1,2933 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:54 GMT + * Copyright (c) Harness. + */ + +export default { + colors: { + pure: { + white: { + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(100% 0 134.54)", + $type: "color", + }, + name: "canary-colors-pure-white", + attributes: { + category: "colors", + type: "pure", + item: "white", + }, + path: ["colors", "pure", "white"], + }, + black: { + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(2.44% 1.49 285.81)", + $type: "color", + }, + name: "canary-colors-pure-black", + attributes: { + category: "colors", + type: "pure", + item: "black", + }, + path: ["colors", "pure", "black"], + }, + }, + chrome: { + 50: { + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(98.27% 0.36 135.2)", + $type: "color", + }, + name: "canary-colors-chrome-50", + attributes: { + category: "colors", + type: "chrome", + item: "50", + }, + path: ["colors", "chrome", "50"], + }, + 100: { + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(90.71% 0.38 284.93)", + $type: "color", + }, + name: "canary-colors-chrome-100", + attributes: { + category: "colors", + type: "chrome", + item: "100", + }, + path: ["colors", "chrome", "100"], + }, + 150: { + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(85.99% 3.77 285.34)", + $type: "color", + }, + name: "canary-colors-chrome-150", + attributes: { + category: "colors", + type: "chrome", + item: "150", + }, + path: ["colors", "chrome", "150"], + }, + 200: { + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(81.33% 4.52 285.46)", + $type: "color", + }, + name: "canary-colors-chrome-200", + attributes: { + category: "colors", + type: "chrome", + item: "200", + }, + path: ["colors", "chrome", "200"], + }, + 300: { + $value: "lch(74.37% 4.52 285.5)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(74.37% 4.52 285.5)", + $type: "color", + }, + name: "canary-colors-chrome-300", + attributes: { + category: "colors", + type: "chrome", + item: "300", + }, + path: ["colors", "chrome", "300"], + }, + 400: { + $value: "lch(67.41% 4.51 285.56)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(67.41% 4.51 285.56)", + $type: "color", + }, + name: "canary-colors-chrome-400", + attributes: { + category: "colors", + type: "chrome", + item: "400", + }, + path: ["colors", "chrome", "400"], + }, + 500: { + $value: "lch(58.08% 6.76 286.02)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(58.08% 6.76 286.02)", + $type: "color", + }, + name: "canary-colors-chrome-500", + attributes: { + category: "colors", + type: "chrome", + item: "500", + }, + path: ["colors", "chrome", "500"], + }, + 600: { + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(46.46% 7.5 286.37)", + $type: "color", + }, + name: "canary-colors-chrome-600", + attributes: { + category: "colors", + type: "chrome", + item: "600", + }, + path: ["colors", "chrome", "600"], + }, + 700: { + $value: "lch(39.46% 8.98 286.89)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(39.46% 8.98 286.89)", + $type: "color", + }, + name: "canary-colors-chrome-700", + attributes: { + category: "colors", + type: "chrome", + item: "700", + }, + path: ["colors", "chrome", "700"], + }, + 800: { + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(26.73% 7.48 287.06)", + $type: "color", + }, + name: "canary-colors-chrome-800", + attributes: { + category: "colors", + type: "chrome", + item: "800", + }, + path: ["colors", "chrome", "800"], + }, + 850: { + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(18.63% 6.73 287.29)", + $type: "color", + }, + name: "canary-colors-chrome-850", + attributes: { + category: "colors", + type: "chrome", + item: "850", + }, + path: ["colors", "chrome", "850"], + }, + 900: { + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(8.25% 4.49 287.18)", + $type: "color", + }, + name: "canary-colors-chrome-900", + attributes: { + category: "colors", + type: "chrome", + item: "900", + }, + path: ["colors", "chrome", "900"], + }, + 950: { + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(5.2% 3.07 285.78)", + $type: "color", + }, + name: "canary-colors-chrome-950", + attributes: { + category: "colors", + type: "chrome", + item: "950", + }, + path: ["colors", "chrome", "950"], + }, + 1000: { + $value: "lch(3.66% 1.93 285.7)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(3.66% 1.93 285.7)", + $type: "color", + }, + name: "canary-colors-chrome-1000", + attributes: { + category: "colors", + type: "chrome", + item: "1000", + }, + path: ["colors", "chrome", "1000"], + }, + }, + blue: { + 50: { + $value: "lch(95.27% 4.16 280.86)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(95.27% 4.16 280.86)", + $type: "color", + }, + name: "canary-colors-blue-50", + attributes: { + category: "colors", + type: "blue", + item: "50", + }, + path: ["colors", "blue", "50"], + }, + 100: { + $value: "lch(89.92% 10.91 279.8)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(89.92% 10.91 279.8)", + $type: "color", + }, + name: "canary-colors-blue-100", + attributes: { + category: "colors", + type: "blue", + item: "100", + }, + path: ["colors", "blue", "100"], + }, + 200: { + $value: "lch(73.08% 34.81 281.21)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(73.08% 34.81 281.21)", + $type: "color", + }, + name: "canary-colors-blue-200", + attributes: { + category: "colors", + type: "blue", + item: "200", + }, + path: ["colors", "blue", "200"], + }, + 300: { + $value: "lch(63.4% 48.44 281.2)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(63.4% 48.44 281.2)", + $type: "color", + }, + name: "canary-colors-blue-300", + attributes: { + category: "colors", + type: "blue", + item: "300", + }, + path: ["colors", "blue", "300"], + }, + 400: { + $value: "lch(54.29% 60.55 281.11)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(54.29% 60.55 281.11)", + $type: "color", + }, + name: "canary-colors-blue-400", + attributes: { + category: "colors", + type: "blue", + item: "400", + }, + path: ["colors", "blue", "400"], + }, + 500: { + $value: "lch(47.04% 69.94 279.78)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(47.04% 69.94 279.78)", + $type: "color", + }, + name: "canary-colors-blue-500", + attributes: { + category: "colors", + type: "blue", + item: "500", + }, + path: ["colors", "blue", "500"], + }, + 600: { + $value: "lch(35.67% 59.7 280.58)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(35.67% 59.7 280.58)", + $type: "color", + }, + name: "canary-colors-blue-600", + attributes: { + category: "colors", + type: "blue", + item: "600", + }, + path: ["colors", "blue", "600"], + }, + 700: { + $value: "lch(27.25% 49.8 280.51)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(27.25% 49.8 280.51)", + $type: "color", + }, + name: "canary-colors-blue-700", + attributes: { + category: "colors", + type: "blue", + item: "700", + }, + path: ["colors", "blue", "700"], + }, + 800: { + $value: "lch(18.28% 39.2 280.4)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(18.28% 39.2 280.4)", + $type: "color", + }, + name: "canary-colors-blue-800", + attributes: { + category: "colors", + type: "blue", + item: "800", + }, + path: ["colors", "blue", "800"], + }, + 900: { + $value: "lch(9.63% 33.17 284.31)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(9.63% 33.17 284.31)", + $type: "color", + }, + name: "canary-colors-blue-900", + attributes: { + category: "colors", + type: "blue", + item: "900", + }, + path: ["colors", "blue", "900"], + }, + 950: { + $value: "lch(2.52% 22.28 283.9)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(2.52% 22.28 283.9)", + $type: "color", + }, + name: "canary-colors-blue-950", + attributes: { + category: "colors", + type: "blue", + item: "950", + }, + path: ["colors", "blue", "950"], + }, + }, + cyan: { + 50: { + $value: "lch(95.4% 5 238.5)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(95.4% 5 238.5)", + $type: "color", + }, + name: "canary-colors-cyan-50", + attributes: { + category: "colors", + type: "cyan", + item: "50", + }, + path: ["colors", "cyan", "50"], + }, + 100: { + $value: "lch(90.24% 13.5 239.5)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(90.24% 13.5 239.5)", + $type: "color", + }, + name: "canary-colors-cyan-100", + attributes: { + category: "colors", + type: "cyan", + item: "100", + }, + path: ["colors", "cyan", "100"], + }, + 200: { + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(74.15% 29 241)", + $type: "color", + }, + name: "canary-colors-cyan-200", + attributes: { + category: "colors", + type: "cyan", + item: "200", + }, + path: ["colors", "cyan", "200"], + }, + 300: { + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(65.49% 45.28 239)", + $type: "color", + }, + name: "canary-colors-cyan-300", + attributes: { + category: "colors", + type: "cyan", + item: "300", + }, + path: ["colors", "cyan", "300"], + }, + 400: { + $value: "lch(56.15% 44.5 246.5)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(56.15% 44.5 246.5)", + $type: "color", + }, + name: "canary-colors-cyan-400", + attributes: { + category: "colors", + type: "cyan", + item: "400", + }, + path: ["colors", "cyan", "400"], + }, + 500: { + $value: "lch(46.84% 41.5 250)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(46.84% 41.5 250)", + $type: "color", + }, + name: "canary-colors-cyan-500", + attributes: { + category: "colors", + type: "cyan", + item: "500", + }, + path: ["colors", "cyan", "500"], + }, + 600: { + $value: "lch(37.53% 36.5 254)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(37.53% 36.5 254)", + $type: "color", + }, + name: "canary-colors-cyan-600", + attributes: { + category: "colors", + type: "cyan", + item: "600", + }, + path: ["colors", "cyan", "600"], + }, + 700: { + $value: "lch(28.81% 30 257.5)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(28.81% 30 257.5)", + $type: "color", + }, + name: "canary-colors-cyan-700", + attributes: { + category: "colors", + type: "cyan", + item: "700", + }, + path: ["colors", "cyan", "700"], + }, + 800: { + $value: "lch(19.49% 23 261.5)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(19.49% 23 261.5)", + $type: "color", + }, + name: "canary-colors-cyan-800", + attributes: { + category: "colors", + type: "cyan", + item: "800", + }, + path: ["colors", "cyan", "800"], + }, + 900: { + $value: "lch(10.76% 15.5 265)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(10.76% 15.5 265)", + $type: "color", + }, + name: "canary-colors-cyan-900", + attributes: { + category: "colors", + type: "cyan", + item: "900", + }, + path: ["colors", "cyan", "900"], + }, + 950: { + $value: "lch(3.09% 7.5 268)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(3.09% 7.5 268)", + $type: "color", + }, + name: "canary-colors-cyan-950", + attributes: { + category: "colors", + type: "cyan", + item: "950", + }, + path: ["colors", "cyan", "950"], + }, + }, + red: { + 50: { + $value: "lch(95.23% 5.25 32.59)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(95.23% 5.25 32.59)", + $type: "color", + }, + name: "canary-colors-red-50", + attributes: { + category: "colors", + type: "red", + item: "50", + }, + path: ["colors", "red", "50"], + }, + 100: { + $value: "lch(89.81% 13.4 32.67)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(89.81% 13.4 32.67)", + $type: "color", + }, + name: "canary-colors-red-100", + attributes: { + category: "colors", + type: "red", + item: "100", + }, + path: ["colors", "red", "100"], + }, + 200: { + $value: "lch(72.7% 48.17 33.53)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(72.7% 48.17 33.53)", + $type: "color", + }, + name: "canary-colors-red-200", + attributes: { + category: "colors", + type: "red", + item: "200", + }, + path: ["colors", "red", "200"], + }, + 300: { + $value: "lch(65.59% 65.99 34.56)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(65.59% 65.99 34.56)", + $type: "color", + }, + name: "canary-colors-red-300", + attributes: { + category: "colors", + type: "red", + item: "300", + }, + path: ["colors", "red", "300"], + }, + 400: { + $value: "lch(53.74% 88.37 37.69)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(53.74% 88.37 37.69)", + $type: "color", + }, + name: "canary-colors-red-400", + attributes: { + category: "colors", + type: "red", + item: "400", + }, + path: ["colors", "red", "400"], + }, + 500: { + $value: "lch(44.74% 76.92 37.68)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(44.74% 76.92 37.68)", + $type: "color", + }, + name: "canary-colors-red-500", + attributes: { + category: "colors", + type: "red", + item: "500", + }, + path: ["colors", "red", "500"], + }, + 600: { + $value: "lch(35.74% 65.47 37.67)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(35.74% 65.47 37.67)", + $type: "color", + }, + name: "canary-colors-red-600", + attributes: { + category: "colors", + type: "red", + item: "600", + }, + path: ["colors", "red", "600"], + }, + 700: { + $value: "lch(27.3% 54.82 37.68)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(27.3% 54.82 37.68)", + $type: "color", + }, + name: "canary-colors-red-700", + attributes: { + category: "colors", + type: "red", + item: "700", + }, + path: ["colors", "red", "700"], + }, + 800: { + $value: "lch(18.31% 42.35 35.83)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(18.31% 42.35 35.83)", + $type: "color", + }, + name: "canary-colors-red-800", + attributes: { + category: "colors", + type: "red", + item: "800", + }, + path: ["colors", "red", "800"], + }, + 900: { + $value: "lch(9.87% 29.51 28.59)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(9.87% 29.51 28.59)", + $type: "color", + }, + name: "canary-colors-red-900", + attributes: { + category: "colors", + type: "red", + item: "900", + }, + path: ["colors", "red", "900"], + }, + 950: { + $value: "lch(2.8% 10.22 21.65)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(2.8% 10.22 21.65)", + $type: "color", + }, + name: "canary-colors-red-950", + attributes: { + category: "colors", + type: "red", + item: "950", + }, + path: ["colors", "red", "950"], + }, + }, + pink: { + 50: { + $value: "lch(95.15% 5.42 350.29)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(95.15% 5.42 350.29)", + $type: "color", + }, + name: "canary-colors-pink-50", + attributes: { + category: "colors", + type: "pink", + item: "50", + }, + path: ["colors", "pink", "50"], + }, + 100: { + $value: "lch(89.61% 13.47 350.26)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(89.61% 13.47 350.26)", + $type: "color", + }, + name: "canary-colors-pink-100", + attributes: { + category: "colors", + type: "pink", + item: "100", + }, + path: ["colors", "pink", "100"], + }, + 200: { + $value: "lch(72% 46.72 350.11)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(72% 46.72 350.11)", + $type: "color", + }, + name: "canary-colors-pink-200", + attributes: { + category: "colors", + type: "pink", + item: "200", + }, + path: ["colors", "pink", "200"], + }, + 300: { + $value: "lch(61.26% 69.37 350)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(61.26% 69.37 350)", + $type: "color", + }, + name: "canary-colors-pink-300", + attributes: { + category: "colors", + type: "pink", + item: "300", + }, + path: ["colors", "pink", "300"], + }, + 400: { + $value: "lch(53.21% 65.17 349.99)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(53.21% 65.17 349.99)", + $type: "color", + }, + name: "canary-colors-pink-400", + attributes: { + category: "colors", + type: "pink", + item: "400", + }, + path: ["colors", "pink", "400"], + }, + 500: { + $value: "lch(44.27% 56.78 349.99)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(44.27% 56.78 349.99)", + $type: "color", + }, + name: "canary-colors-pink-500", + attributes: { + category: "colors", + type: "pink", + item: "500", + }, + path: ["colors", "pink", "500"], + }, + 600: { + $value: "lch(35.34% 48.39 349.99)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(35.34% 48.39 349.99)", + $type: "color", + }, + name: "canary-colors-pink-600", + attributes: { + category: "colors", + type: "pink", + item: "600", + }, + path: ["colors", "pink", "600"], + }, + 700: { + $value: "lch(26.98% 40.34 349.99)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(26.98% 40.34 349.99)", + $type: "color", + }, + name: "canary-colors-pink-700", + attributes: { + category: "colors", + type: "pink", + item: "700", + }, + path: ["colors", "pink", "700"], + }, + 800: { + $value: "lch(18.05% 31.95 349.99)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(18.05% 31.95 349.99)", + $type: "color", + }, + name: "canary-colors-pink-800", + attributes: { + category: "colors", + type: "pink", + item: "800", + }, + path: ["colors", "pink", "800"], + }, + 900: { + $value: "lch(9.69% 23.89 349.99)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(9.69% 23.89 349.99)", + $type: "color", + }, + name: "canary-colors-pink-900", + attributes: { + category: "colors", + type: "pink", + item: "900", + }, + path: ["colors", "pink", "900"], + }, + 950: { + $value: "lch(2.74% 8.62 350.99)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(2.74% 8.62 350.99)", + $type: "color", + }, + name: "canary-colors-pink-950", + attributes: { + category: "colors", + type: "pink", + item: "950", + }, + path: ["colors", "pink", "950"], + }, + }, + peach: { + 50: { + $value: "lch(95.22% 5.2 27.21)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(95.22% 5.2 27.21)", + $type: "color", + }, + name: "canary-colors-peach-50", + attributes: { + category: "colors", + type: "peach", + item: "50", + }, + path: ["colors", "peach", "50"], + }, + 100: { + $value: "lch(89.79% 12.88 27.31)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(89.79% 12.88 27.31)", + $type: "color", + }, + name: "canary-colors-peach-100", + attributes: { + category: "colors", + type: "peach", + item: "100", + }, + path: ["colors", "peach", "100"], + }, + 200: { + $value: "lch(72.22% 46.73 23.25)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(72.22% 46.73 23.25)", + $type: "color", + }, + name: "canary-colors-peach-200", + attributes: { + category: "colors", + type: "peach", + item: "200", + }, + path: ["colors", "peach", "200"], + }, + 300: { + $value: "lch(62.66% 70.81 29.46)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(62.66% 70.81 29.46)", + $type: "color", + }, + name: "canary-colors-peach-300", + attributes: { + category: "colors", + type: "peach", + item: "300", + }, + path: ["colors", "peach", "300"], + }, + 400: { + $value: "lch(53.64% 82.24 30.93)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(53.64% 82.24 30.93)", + $type: "color", + }, + name: "canary-colors-peach-400", + attributes: { + category: "colors", + type: "peach", + item: "400", + }, + path: ["colors", "peach", "400"], + }, + 500: { + $value: "lch(44.66% 71.48 30.92)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(44.66% 71.48 30.92)", + $type: "color", + }, + name: "canary-colors-peach-500", + attributes: { + category: "colors", + type: "peach", + item: "500", + }, + path: ["colors", "peach", "500"], + }, + 600: { + $value: "lch(35.68% 60.73 30.9)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(35.68% 60.73 30.9)", + $type: "color", + }, + name: "canary-colors-peach-600", + attributes: { + category: "colors", + type: "peach", + item: "600", + }, + path: ["colors", "peach", "600"], + }, + 700: { + $value: "lch(27.25% 50.72 30.88)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(27.25% 50.72 30.88)", + $type: "color", + }, + name: "canary-colors-peach-700", + attributes: { + category: "colors", + type: "peach", + item: "700", + }, + path: ["colors", "peach", "700"], + }, + 800: { + $value: "lch(18.26% 40.26 30.65)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(18.26% 40.26 30.65)", + $type: "color", + }, + name: "canary-colors-peach-800", + attributes: { + category: "colors", + type: "peach", + item: "800", + }, + path: ["colors", "peach", "800"], + }, + 900: { + $value: "lch(9.84% 28.78 25.16)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(9.84% 28.78 25.16)", + $type: "color", + }, + name: "canary-colors-peach-900", + attributes: { + category: "colors", + type: "peach", + item: "900", + }, + path: ["colors", "peach", "900"], + }, + 950: { + $value: "lch(2.79% 10.24 18.76)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(2.79% 10.24 18.76)", + $type: "color", + }, + name: "canary-colors-peach-950", + attributes: { + category: "colors", + type: "peach", + item: "950", + }, + path: ["colors", "peach", "950"], + }, + }, + yellow: { + 50: { + $value: "lch(95.62% 18.31 92.87)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(95.62% 18.31 92.87)", + $type: "color", + }, + name: "canary-colors-yellow-50", + attributes: { + category: "colors", + type: "yellow", + item: "50", + }, + path: ["colors", "yellow", "50"], + }, + 100: { + $value: "lch(90.23% 26.34 77.18)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(90.23% 26.34 77.18)", + $type: "color", + }, + name: "canary-colors-yellow-100", + attributes: { + category: "colors", + type: "yellow", + item: "100", + }, + path: ["colors", "yellow", "100"], + }, + 200: { + $value: "lch(73.82% 74.92 75.35)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(73.82% 74.92 75.35)", + $type: "color", + }, + name: "canary-colors-yellow-200", + attributes: { + category: "colors", + type: "yellow", + item: "200", + }, + path: ["colors", "yellow", "200"], + }, + 300: { + $value: "lch(64.58% 68.1 76.07)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(64.58% 68.1 76.07)", + $type: "color", + }, + name: "canary-colors-yellow-300", + attributes: { + category: "colors", + type: "yellow", + item: "300", + }, + path: ["colors", "yellow", "300"], + }, + 400: { + $value: "lch(55.9% 60.21 76.41)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(55.9% 60.21 76.41)", + $type: "color", + }, + name: "canary-colors-yellow-400", + attributes: { + category: "colors", + type: "yellow", + item: "400", + }, + path: ["colors", "yellow", "400"], + }, + 500: { + $value: "lch(46.64% 52.59 77.11)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(46.64% 52.59 77.11)", + $type: "color", + }, + name: "canary-colors-yellow-500", + attributes: { + category: "colors", + type: "yellow", + item: "500", + }, + path: ["colors", "yellow", "500"], + }, + 600: { + $value: "lch(37.37% 44.92 77.47)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(37.37% 44.92 77.47)", + $type: "color", + }, + name: "canary-colors-yellow-600", + attributes: { + category: "colors", + type: "yellow", + item: "600", + }, + path: ["colors", "yellow", "600"], + }, + 700: { + $value: "lch(28.67% 36.97 77.45)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(28.67% 36.97 77.45)", + $type: "color", + }, + name: "canary-colors-yellow-700", + attributes: { + category: "colors", + type: "yellow", + item: "700", + }, + path: ["colors", "yellow", "700"], + }, + 800: { + $value: "lch(19.4% 27.53 77.01)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(19.4% 27.53 77.01)", + $type: "color", + }, + name: "canary-colors-yellow-800", + attributes: { + category: "colors", + type: "yellow", + item: "800", + }, + path: ["colors", "yellow", "800"], + }, + 900: { + $value: "lch(10.69% 16.28 73.34)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(10.69% 16.28 73.34)", + $type: "color", + }, + name: "canary-colors-yellow-900", + attributes: { + category: "colors", + type: "yellow", + item: "900", + }, + path: ["colors", "yellow", "900"], + }, + 950: { + $value: "lch(3.06% 4.5 71.6)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(3.06% 4.5 71.6)", + $type: "color", + }, + name: "canary-colors-yellow-950", + attributes: { + category: "colors", + type: "yellow", + item: "950", + }, + path: ["colors", "yellow", "950"], + }, + }, + orange: { + 50: { + $value: "lch(95.42% 10.03 79.83)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(95.42% 10.03 79.83)", + $type: "color", + }, + name: "canary-colors-orange-50", + attributes: { + category: "colors", + type: "orange", + item: "50", + }, + path: ["colors", "orange", "50"], + }, + 100: { + $value: "lch(90.02% 17.62 61.56)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(90.02% 17.62 61.56)", + $type: "color", + }, + name: "canary-colors-orange-100", + attributes: { + category: "colors", + type: "orange", + item: "100", + }, + path: ["colors", "orange", "100"], + }, + 200: { + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(74.82% 51.93 49.87)", + $type: "color", + }, + name: "canary-colors-orange-200", + attributes: { + category: "colors", + type: "orange", + item: "200", + }, + path: ["colors", "orange", "200"], + }, + 300: { + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(63.38% 78.04 52.26)", + $type: "color", + }, + name: "canary-colors-orange-300", + attributes: { + category: "colors", + type: "orange", + item: "300", + }, + path: ["colors", "orange", "300"], + }, + 400: { + $value: "lch(54.81% 69.74 52.27)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(54.81% 69.74 52.27)", + $type: "color", + }, + name: "canary-colors-orange-400", + attributes: { + category: "colors", + type: "orange", + item: "400", + }, + path: ["colors", "orange", "400"], + }, + 500: { + $value: "lch(45.68% 60.45 52.23)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(45.68% 60.45 52.23)", + $type: "color", + }, + name: "canary-colors-orange-500", + attributes: { + category: "colors", + type: "orange", + item: "500", + }, + path: ["colors", "orange", "500"], + }, + 600: { + $value: "lch(36.54% 51.77 52.28)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(36.54% 51.77 52.28)", + $type: "color", + }, + name: "canary-colors-orange-600", + attributes: { + category: "colors", + type: "orange", + item: "600", + }, + path: ["colors", "orange", "600"], + }, + 700: { + $value: "lch(27.78% 46.26 47.39)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(27.78% 46.26 47.39)", + $type: "color", + }, + name: "canary-colors-orange-700", + attributes: { + category: "colors", + type: "orange", + item: "700", + }, + path: ["colors", "orange", "700"], + }, + 800: { + $value: "lch(18.69% 35.31 45.59)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(18.69% 35.31 45.59)", + $type: "color", + }, + name: "canary-colors-orange-800", + attributes: { + category: "colors", + type: "orange", + item: "800", + }, + path: ["colors", "orange", "800"], + }, + 900: { + $value: "lch(10.26% 21.63 42.58)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(10.26% 21.63 42.58)", + $type: "color", + }, + name: "canary-colors-orange-900", + attributes: { + category: "colors", + type: "orange", + item: "900", + }, + path: ["colors", "orange", "900"], + }, + 950: { + $value: "lch(2.93% 6.64 36.42)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(2.93% 6.64 36.42)", + $type: "color", + }, + name: "canary-colors-orange-950", + attributes: { + category: "colors", + type: "orange", + item: "950", + }, + path: ["colors", "orange", "950"], + }, + }, + brown: { + 50: { + $value: "lch(95.55% 12.75 93.47)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(95.55% 12.75 93.47)", + $type: "color", + }, + name: "canary-colors-brown-50", + attributes: { + category: "colors", + type: "brown", + item: "50", + }, + path: ["colors", "brown", "50"], + }, + 100: { + $value: "lch(90.24% 19.27 79.52)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(90.24% 19.27 79.52)", + $type: "color", + }, + name: "canary-colors-brown-100", + attributes: { + category: "colors", + type: "brown", + item: "100", + }, + path: ["colors", "brown", "100"], + }, + 200: { + $value: "lch(73.38% 45.67 56.65)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(73.38% 45.67 56.65)", + $type: "color", + }, + name: "canary-colors-brown-200", + attributes: { + category: "colors", + type: "brown", + item: "200", + }, + path: ["colors", "brown", "200"], + }, + 300: { + $value: "lch(64.06% 48.96 57.29)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(64.06% 48.96 57.29)", + $type: "color", + }, + name: "canary-colors-brown-300", + attributes: { + category: "colors", + type: "brown", + item: "300", + }, + path: ["colors", "brown", "300"], + }, + 400: { + $value: "lch(57.17% 44.39 57.69)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(57.17% 44.39 57.69)", + $type: "color", + }, + name: "canary-colors-brown-400", + attributes: { + category: "colors", + type: "brown", + item: "400", + }, + path: ["colors", "brown", "400"], + }, + 500: { + $value: "lch(46.22% 37.68 57.68)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(46.22% 37.68 57.68)", + $type: "color", + }, + name: "canary-colors-brown-500", + attributes: { + category: "colors", + type: "brown", + item: "500", + }, + path: ["colors", "brown", "500"], + }, + 600: { + $value: "lch(37.01% 31.77 57.67)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(37.01% 31.77 57.67)", + $type: "color", + }, + name: "canary-colors-brown-600", + attributes: { + category: "colors", + type: "brown", + item: "600", + }, + path: ["colors", "brown", "600"], + }, + 700: { + $value: "lch(28.37% 26.84 58.1)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(28.37% 26.84 58.1)", + $type: "color", + }, + name: "canary-colors-brown-700", + attributes: { + category: "colors", + type: "brown", + item: "700", + }, + path: ["colors", "brown", "700"], + }, + 800: { + $value: "lch(19.16% 20.96 58.49)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(19.16% 20.96 58.49)", + $type: "color", + }, + name: "canary-colors-brown-800", + attributes: { + category: "colors", + type: "brown", + item: "800", + }, + path: ["colors", "brown", "800"], + }, + 900: { + $value: "lch(10.55% 13.64 57.69)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(10.55% 13.64 57.69)", + $type: "color", + }, + name: "canary-colors-brown-900", + attributes: { + category: "colors", + type: "brown", + item: "900", + }, + path: ["colors", "brown", "900"], + }, + 950: { + $value: "lch(3% 4.01 51.14)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(3% 4.01 51.14)", + $type: "color", + }, + name: "canary-colors-brown-950", + attributes: { + category: "colors", + type: "brown", + item: "950", + }, + path: ["colors", "brown", "950"], + }, + }, + green: { + 50: { + $value: "lch(95.82% 11.79 156.15)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(95.82% 11.79 156.15)", + $type: "color", + }, + name: "canary-colors-green-50", + attributes: { + category: "colors", + type: "green", + item: "50", + }, + path: ["colors", "green", "50"], + }, + 100: { + $value: "lch(91.19% 27.27 156.17)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(91.19% 27.27 156.17)", + $type: "color", + }, + name: "canary-colors-green-100", + attributes: { + category: "colors", + type: "green", + item: "100", + }, + path: ["colors", "green", "100"], + }, + 200: { + $value: "lch(73.78% 60.44 156.25)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(73.78% 60.44 156.25)", + $type: "color", + }, + name: "canary-colors-green-200", + attributes: { + category: "colors", + type: "green", + item: "200", + }, + path: ["colors", "green", "200"], + }, + 300: { + $value: "lch(66.65% 55.77 156.25)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(66.65% 55.77 156.25)", + $type: "color", + }, + name: "canary-colors-green-300", + attributes: { + category: "colors", + type: "green", + item: "300", + }, + path: ["colors", "green", "300"], + }, + 400: { + $value: "lch(57.73% 49.65 156.25)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(57.73% 49.65 156.25)", + $type: "color", + }, + name: "canary-colors-green-400", + attributes: { + category: "colors", + type: "green", + item: "400", + }, + path: ["colors", "green", "400"], + }, + 500: { + $value: "lch(48.21% 43.17 156.25)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(48.21% 43.17 156.25)", + $type: "color", + }, + name: "canary-colors-green-500", + attributes: { + category: "colors", + type: "green", + item: "500", + }, + path: ["colors", "green", "500"], + }, + 600: { + $value: "lch(38.71% 37.07 156.25)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(38.71% 37.07 156.25)", + $type: "color", + }, + name: "canary-colors-green-600", + attributes: { + category: "colors", + type: "green", + item: "600", + }, + path: ["colors", "green", "600"], + }, + 700: { + $value: "lch(29.79% 30.94 156.25)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(29.79% 30.94 156.25)", + $type: "color", + }, + name: "canary-colors-green-700", + attributes: { + category: "colors", + type: "green", + item: "700", + }, + path: ["colors", "green", "700"], + }, + 800: { + $value: "lch(20.26% 24.09 156.25)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(20.26% 24.09 156.25)", + $type: "color", + }, + name: "canary-colors-green-800", + attributes: { + category: "colors", + type: "green", + item: "800", + }, + path: ["colors", "green", "800"], + }, + 900: { + $value: "lch(11.35% 18.27 156.36)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(11.35% 18.27 156.36)", + $type: "color", + }, + name: "canary-colors-green-900", + attributes: { + category: "colors", + type: "green", + item: "900", + }, + path: ["colors", "green", "900"], + }, + 950: { + $value: "lch(3.27% 5.33 156.53)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(3.27% 5.33 156.53)", + $type: "color", + }, + name: "canary-colors-green-950", + attributes: { + category: "colors", + type: "green", + item: "950", + }, + path: ["colors", "green", "950"], + }, + }, + mint: { + 50: { + $value: "lch(95.82% 11.97 171.06)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(95.82% 11.97 171.06)", + $type: "color", + }, + name: "canary-colors-mint-50", + attributes: { + category: "colors", + type: "mint", + item: "50", + }, + path: ["colors", "mint", "50"], + }, + 100: { + $value: "lch(91.09% 25.48 176.08)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(91.09% 25.48 176.08)", + $type: "color", + }, + name: "canary-colors-mint-100", + attributes: { + category: "colors", + type: "mint", + item: "100", + }, + path: ["colors", "mint", "100"], + }, + 200: { + $value: "lch(73.4% 50.15 176.67)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(73.4% 50.15 176.67)", + $type: "color", + }, + name: "canary-colors-mint-200", + attributes: { + category: "colors", + type: "mint", + item: "200", + }, + path: ["colors", "mint", "200"], + }, + 300: { + $value: "lch(66.3% 46.27 176.67)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(66.3% 46.27 176.67)", + $type: "color", + }, + name: "canary-colors-mint-300", + attributes: { + category: "colors", + type: "mint", + item: "300", + }, + path: ["colors", "mint", "300"], + }, + 400: { + $value: "lch(57.46% 42.15 174.53)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(57.46% 42.15 174.53)", + $type: "color", + }, + name: "canary-colors-mint-400", + attributes: { + category: "colors", + type: "mint", + item: "400", + }, + path: ["colors", "mint", "400"], + }, + 500: { + $value: "lch(48.03% 37.67 171.84)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(48.03% 37.67 171.84)", + $type: "color", + }, + name: "canary-colors-mint-500", + attributes: { + category: "colors", + type: "mint", + item: "500", + }, + path: ["colors", "mint", "500"], + }, + 600: { + $value: "lch(38.59% 33.16 169.14)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(38.59% 33.16 169.14)", + $type: "color", + }, + name: "canary-colors-mint-600", + attributes: { + category: "colors", + type: "mint", + item: "600", + }, + path: ["colors", "mint", "600"], + }, + 700: { + $value: "lch(29.72% 28.6 166.42)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(29.72% 28.6 166.42)", + $type: "color", + }, + name: "canary-colors-mint-700", + attributes: { + category: "colors", + type: "mint", + item: "700", + }, + path: ["colors", "mint", "700"], + }, + 800: { + $value: "lch(20.24% 23.29 164.22)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(20.24% 23.29 164.22)", + $type: "color", + }, + name: "canary-colors-mint-800", + attributes: { + category: "colors", + type: "mint", + item: "800", + }, + path: ["colors", "mint", "800"], + }, + 900: { + $value: "lch(11.35% 18.26 160.23)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(11.35% 18.26 160.23)", + $type: "color", + }, + name: "canary-colors-mint-900", + attributes: { + category: "colors", + type: "mint", + item: "900", + }, + path: ["colors", "mint", "900"], + }, + 950: { + $value: "lch(3.26% 5.16 160.96)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(3.26% 5.16 160.96)", + $type: "color", + }, + name: "canary-colors-mint-950", + attributes: { + category: "colors", + type: "mint", + item: "950", + }, + path: ["colors", "mint", "950"], + }, + }, + lime: { + 50: { + $value: "lch(95.86% 15.3 127.41)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(95.86% 15.3 127.41)", + $type: "color", + }, + name: "canary-colors-lime-50", + attributes: { + category: "colors", + type: "lime", + item: "50", + }, + path: ["colors", "lime", "50"], + }, + 100: { + $value: "lch(91.05% 29.33 126.46)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(91.05% 29.33 126.46)", + $type: "color", + }, + name: "canary-colors-lime-100", + attributes: { + category: "colors", + type: "lime", + item: "100", + }, + path: ["colors", "lime", "100"], + }, + 200: { + $value: "lch(74.24% 53.56 123.85)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(74.24% 53.56 123.85)", + $type: "color", + }, + name: "canary-colors-lime-200", + attributes: { + category: "colors", + type: "lime", + item: "200", + }, + path: ["colors", "lime", "200"], + }, + 300: { + $value: "lch(65.98% 48.66 123.85)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(65.98% 48.66 123.85)", + $type: "color", + }, + name: "canary-colors-lime-300", + attributes: { + category: "colors", + type: "lime", + item: "300", + }, + path: ["colors", "lime", "300"], + }, + 400: { + $value: "lch(57.13% 43.37 123.85)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(57.13% 43.37 123.85)", + $type: "color", + }, + name: "canary-colors-lime-400", + attributes: { + category: "colors", + type: "lime", + item: "400", + }, + path: ["colors", "lime", "400"], + }, + 500: { + $value: "lch(47.69% 37.71 123.86)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(47.69% 37.71 123.86)", + $type: "color", + }, + name: "canary-colors-lime-500", + attributes: { + category: "colors", + type: "lime", + item: "500", + }, + path: ["colors", "lime", "500"], + }, + 600: { + $value: "lch(38.26% 32.05 123.88)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(38.26% 32.05 123.88)", + $type: "color", + }, + name: "canary-colors-lime-600", + attributes: { + category: "colors", + type: "lime", + item: "600", + }, + path: ["colors", "lime", "600"], + }, + 700: { + $value: "lch(29.42% 27.17 123.81)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(29.42% 27.17 123.81)", + $type: "color", + }, + name: "canary-colors-lime-700", + attributes: { + category: "colors", + type: "lime", + item: "700", + }, + path: ["colors", "lime", "700"], + }, + 800: { + $value: "lch(19.97% 21.1 123.91)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(19.97% 21.1 123.91)", + $type: "color", + }, + name: "canary-colors-lime-800", + attributes: { + category: "colors", + type: "lime", + item: "800", + }, + path: ["colors", "lime", "800"], + }, + 900: { + $value: "lch(11.12% 14.71 126.9)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(11.12% 14.71 126.9)", + $type: "color", + }, + name: "canary-colors-lime-900", + attributes: { + category: "colors", + type: "lime", + item: "900", + }, + path: ["colors", "lime", "900"], + }, + 950: { + $value: "lch(3.2% 4.34 131.4)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(3.2% 4.34 131.4)", + $type: "color", + }, + name: "canary-colors-lime-950", + attributes: { + category: "colors", + type: "lime", + item: "950", + }, + path: ["colors", "lime", "950"], + }, + }, + purple: { + 50: { + $value: "lch(95.14% 7 301.11)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(95.14% 7 301.11)", + $type: "color", + }, + name: "canary-colors-purple-50", + attributes: { + category: "colors", + type: "purple", + item: "50", + }, + path: ["colors", "purple", "50"], + }, + 100: { + $value: "lch(89.58% 17.29 301.92)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(89.58% 17.29 301.92)", + $type: "color", + }, + name: "canary-colors-purple-100", + attributes: { + category: "colors", + type: "purple", + item: "100", + }, + path: ["colors", "purple", "100"], + }, + 200: { + $value: "lch(72.4% 55.68 305.19)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(72.4% 55.68 305.19)", + $type: "color", + }, + name: "canary-colors-purple-200", + attributes: { + category: "colors", + type: "purple", + item: "200", + }, + path: ["colors", "purple", "200"], + }, + 300: { + $value: "lch(61.28% 80.51 307.53)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(61.28% 80.51 307.53)", + $type: "color", + }, + name: "canary-colors-purple-300", + attributes: { + category: "colors", + type: "purple", + item: "300", + }, + path: ["colors", "purple", "300"], + }, + 400: { + $value: "lch(50.99% 105.85 309.98)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(50.99% 105.85 309.98)", + $type: "color", + }, + name: "canary-colors-purple-400", + attributes: { + category: "colors", + type: "purple", + item: "400", + }, + path: ["colors", "purple", "400"], + }, + 500: { + $value: "lch(40.58% 118.62 311.84)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(40.58% 118.62 311.84)", + $type: "color", + }, + name: "canary-colors-purple-500", + attributes: { + category: "colors", + type: "purple", + item: "500", + }, + path: ["colors", "purple", "500"], + }, + 600: { + $value: "lch(32.21% 100.98 311.83)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(32.21% 100.98 311.83)", + $type: "color", + }, + name: "canary-colors-purple-600", + attributes: { + category: "colors", + type: "purple", + item: "600", + }, + path: ["colors", "purple", "600"], + }, + 700: { + $value: "lch(24.34% 84.56 311.84)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(24.34% 84.56 311.84)", + $type: "color", + }, + name: "canary-colors-purple-700", + attributes: { + category: "colors", + type: "purple", + item: "700", + }, + path: ["colors", "purple", "700"], + }, + 800: { + $value: "lch(15.97% 66.91 311.83)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(15.97% 66.91 311.83)", + $type: "color", + }, + name: "canary-colors-purple-800", + attributes: { + category: "colors", + type: "purple", + item: "800", + }, + path: ["colors", "purple", "800"], + }, + 900: { + $value: "lch(8.1% 50.49 311.83)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(8.1% 50.49 311.83)", + $type: "color", + }, + name: "canary-colors-purple-900", + attributes: { + category: "colors", + type: "purple", + item: "900", + }, + path: ["colors", "purple", "900"], + }, + 950: { + $value: "lch(2.32% 21.96 302.37)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(2.32% 21.96 302.37)", + $type: "color", + }, + name: "canary-colors-purple-950", + attributes: { + category: "colors", + type: "purple", + item: "950", + }, + path: ["colors", "purple", "950"], + }, + }, + violet: { + 50: { + $value: "lch(95.18% 6.31 296.62)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(95.18% 6.31 296.62)", + $type: "color", + }, + name: "canary-colors-violet-50", + attributes: { + category: "colors", + type: "violet", + item: "50", + }, + path: ["colors", "violet", "50"], + }, + 100: { + $value: "lch(89.64% 16.29 297.99)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(89.64% 16.29 297.99)", + $type: "color", + }, + name: "canary-colors-violet-100", + attributes: { + category: "colors", + type: "violet", + item: "100", + }, + path: ["colors", "violet", "100"], + }, + 200: { + $value: "lch(72.11% 52.02 298.43)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(72.11% 52.02 298.43)", + $type: "color", + }, + name: "canary-colors-violet-200", + attributes: { + category: "colors", + type: "violet", + item: "200", + }, + path: ["colors", "violet", "200"], + }, + 300: { + $value: "lch(65.15% 65.45 298.5)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(65.15% 65.45 298.5)", + $type: "color", + }, + name: "canary-colors-violet-300", + attributes: { + category: "colors", + type: "violet", + item: "300", + }, + path: ["colors", "violet", "300"], + }, + 400: { + $value: "lch(51.98% 93.37 301.42)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(51.98% 93.37 301.42)", + $type: "color", + }, + name: "canary-colors-violet-400", + attributes: { + category: "colors", + type: "violet", + item: "400", + }, + path: ["colors", "violet", "400"], + }, + 500: { + $value: "lch(40.56% 121.68 305.61)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(40.56% 121.68 305.61)", + $type: "color", + }, + name: "canary-colors-violet-500", + attributes: { + category: "colors", + type: "violet", + item: "500", + }, + path: ["colors", "violet", "500"], + }, + 600: { + $value: "lch(31.46% 113.1 306.9)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(31.46% 113.1 306.9)", + $type: "color", + }, + name: "canary-colors-violet-600", + attributes: { + category: "colors", + type: "violet", + item: "600", + }, + path: ["colors", "violet", "600"], + }, + 700: { + $value: "lch(23.77% 93.78 307.37)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(23.77% 93.78 307.37)", + $type: "color", + }, + name: "canary-colors-violet-700", + attributes: { + category: "colors", + type: "violet", + item: "700", + }, + path: ["colors", "violet", "700"], + }, + 800: { + $value: "lch(15.62% 72.5 308.3)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(15.62% 72.5 308.3)", + $type: "color", + }, + name: "canary-colors-violet-800", + attributes: { + category: "colors", + type: "violet", + item: "800", + }, + path: ["colors", "violet", "800"], + }, + 900: { + $value: "lch(8.15% 49.81 312.23)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(8.15% 49.81 312.23)", + $type: "color", + }, + name: "canary-colors-violet-900", + attributes: { + category: "colors", + type: "violet", + item: "900", + }, + path: ["colors", "violet", "900"], + }, + 950: { + $value: "lch(2.33% 21.62 302.28)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(2.33% 21.62 302.28)", + $type: "color", + }, + name: "canary-colors-violet-950", + attributes: { + category: "colors", + type: "violet", + item: "950", + }, + path: ["colors", "violet", "950"], + }, + }, + indigo: { + 50: { + $value: "lch(95.23% 6.03 283.32)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(95.23% 6.03 283.32)", + $type: "color", + }, + name: "canary-colors-indigo-50", + attributes: { + category: "colors", + type: "indigo", + item: "50", + }, + path: ["colors", "indigo", "50"], + }, + 100: { + $value: "lch(89.8% 14.62 283.7)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(89.8% 14.62 283.7)", + $type: "color", + }, + name: "canary-colors-indigo-100", + attributes: { + category: "colors", + type: "indigo", + item: "100", + }, + path: ["colors", "indigo", "100"], + }, + 200: { + $value: "lch(72.68% 45.97 284.36)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(72.68% 45.97 284.36)", + $type: "color", + }, + name: "canary-colors-indigo-200", + attributes: { + category: "colors", + type: "indigo", + item: "200", + }, + path: ["colors", "indigo", "200"], + }, + 300: { + $value: "lch(65.79% 58.29 283.92)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(65.79% 58.29 283.92)", + $type: "color", + }, + name: "canary-colors-indigo-300", + attributes: { + category: "colors", + type: "indigo", + item: "300", + }, + path: ["colors", "indigo", "300"], + }, + 400: { + $value: "lch(53.15% 81.87 288.43)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(53.15% 81.87 288.43)", + $type: "color", + }, + name: "canary-colors-indigo-400", + attributes: { + category: "colors", + type: "indigo", + item: "400", + }, + path: ["colors", "indigo", "400"], + }, + 500: { + $value: "lch(42.04% 107.17 295.8)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(42.04% 107.17 295.8)", + $type: "color", + }, + name: "canary-colors-indigo-500", + attributes: { + category: "colors", + type: "indigo", + item: "500", + }, + path: ["colors", "indigo", "500"], + }, + 600: { + $value: "lch(30.63% 128.3 302.36)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(30.63% 128.3 302.36)", + $type: "color", + }, + name: "canary-colors-indigo-600", + attributes: { + category: "colors", + type: "indigo", + item: "600", + }, + path: ["colors", "indigo", "600"], + }, + 700: { + $value: "lch(23.02% 107.52 302.38)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(23.02% 107.52 302.38)", + $type: "color", + }, + name: "canary-colors-indigo-700", + attributes: { + category: "colors", + type: "indigo", + item: "700", + }, + path: ["colors", "indigo", "700"], + }, + 800: { + $value: "lch(14.93% 84.93 302.33)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(14.93% 84.93 302.33)", + $type: "color", + }, + name: "canary-colors-indigo-800", + attributes: { + category: "colors", + type: "indigo", + item: "800", + }, + path: ["colors", "indigo", "800"], + }, + 900: { + $value: "lch(7.38% 63.51 302.14)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(7.38% 63.51 302.14)", + $type: "color", + }, + name: "canary-colors-indigo-900", + attributes: { + category: "colors", + type: "indigo", + item: "900", + }, + path: ["colors", "indigo", "900"], + }, + 950: { + $value: "lch(2.17% 29.85 290.49)", + filePath: "design-tokens/core/colors_lch.json", + isSource: true, + $type: "color", + original: { + $value: "lch(2.17% 29.85 290.49)", + $type: "color", + }, + name: "canary-colors-indigo-950", + attributes: { + category: "colors", + type: "indigo", + item: "950", + }, + path: ["colors", "indigo", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/components.ts b/packages/core-design-system/src/styles-esm/components.ts new file mode 100644 index 0000000000..e40b400365 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/components.ts @@ -0,0 +1,1751 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:54 GMT + * Copyright (c) Harness. + */ + +export default { + input: { + size: { + sm: { + $type: "dimension", + $value: "32px", + $description: "32px", + filePath: "design-tokens/components/desktop/base/input.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "{size.8}", + $description: "32px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-input-size-sm", + attributes: { + category: "input", + type: "size", + item: "sm", + }, + path: ["input", "size", "sm"], + }, + default: { + $type: "dimension", + $value: "36px", + $description: "36px\n", + filePath: "design-tokens/components/desktop/base/input.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "{size.9}", + $description: "36px\n", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-input-size-default", + attributes: { + category: "input", + type: "size", + item: "default", + }, + path: ["input", "size", "default"], + }, + }, + radius: { + $type: "dimension", + $value: "6px", + $description: "6px", + filePath: "design-tokens/components/desktop/base/input.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + original: { + $type: "dimension", + $value: "{rounded.3}", + $description: "6px", + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + }, + name: "canary-input-radius", + attributes: { + category: "input", + type: "radius", + }, + path: ["input", "radius"], + }, + gap: { + $type: "dimension", + $value: "6px", + filePath: "design-tokens/components/desktop/base/input.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.1-half}", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-input-gap", + attributes: { + category: "input", + type: "gap", + }, + path: ["input", "gap"], + }, + px: { + $type: "dimension", + $value: "12px", + $description: "12px horizontal padding", + filePath: "design-tokens/components/desktop/base/input.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.3}", + $description: "12px horizontal padding", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-input-px", + attributes: { + category: "input", + type: "px", + }, + path: ["input", "px"], + }, + py: { + $type: "dimension", + $value: "8px", + $description: "8px vertical padding", + filePath: "design-tokens/components/desktop/base/input.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.2}", + $description: "8px vertical padding", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-input-py", + attributes: { + category: "input", + type: "py", + }, + path: ["input", "py"], + }, + }, + dropdown: { + item: { + px: { + $type: "dimension", + $value: "4px", + $description: "4px\n", + filePath: "design-tokens/components/desktop/base/dropdown menu.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.1}", + $description: "4px\n", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-dropdown-item-px", + attributes: { + category: "dropdown", + type: "item", + item: "px", + }, + path: ["dropdown", "item", "px"], + }, + gap: { + $type: "dimension", + $value: "10px", + $description: "8px", + filePath: "design-tokens/components/desktop/base/dropdown menu.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.2-half}", + $description: "8px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-dropdown-item-gap", + attributes: { + category: "dropdown", + type: "item", + item: "gap", + }, + path: ["dropdown", "item", "gap"], + }, + radius: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/components/desktop/base/dropdown menu.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + original: { + $type: "dimension", + $value: "{dropdown.sub-item.radius}", + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + }, + name: "canary-dropdown-item-radius", + attributes: { + category: "dropdown", + type: "item", + item: "radius", + }, + path: ["dropdown", "item", "radius"], + }, + }, + "sub-item": { + px: { + $type: "dimension", + $value: "12px", + $description: "12px", + filePath: "design-tokens/components/desktop/base/dropdown menu.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.3}", + $description: "12px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-dropdown-sub-item-px", + attributes: { + category: "dropdown", + type: "sub-item", + item: "px", + }, + path: ["dropdown", "sub-item", "px"], + }, + py: { + $type: "dimension", + $value: "8px", + $description: "8px", + filePath: "design-tokens/components/desktop/base/dropdown menu.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.2}", + $description: "8px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-dropdown-sub-item-py", + attributes: { + category: "dropdown", + type: "sub-item", + item: "py", + }, + path: ["dropdown", "sub-item", "py"], + }, + gap: { + $type: "dimension", + $value: "10px", + filePath: "design-tokens/components/desktop/base/dropdown menu.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.2-half}", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-dropdown-sub-item-gap", + attributes: { + category: "dropdown", + type: "sub-item", + item: "gap", + }, + path: ["dropdown", "sub-item", "gap"], + }, + radius: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/components/desktop/base/dropdown menu.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + original: { + $type: "dimension", + $value: "{rounded.1}", + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + }, + name: "canary-dropdown-sub-item-radius", + attributes: { + category: "dropdown", + type: "sub-item", + item: "radius", + }, + path: ["dropdown", "sub-item", "radius"], + }, + size: { + $type: "dimension", + $value: "32px", + filePath: "design-tokens/components/desktop/base/dropdown menu.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "{size.8}", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-dropdown-sub-item-size", + attributes: { + category: "dropdown", + type: "sub-item", + item: "size", + }, + path: ["dropdown", "sub-item", "size"], + }, + "gap-y": { + $type: "dimension", + $value: "4px", + $description: "4px gap between text", + filePath: "design-tokens/components/desktop/base/dropdown menu.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.1}", + $description: "4px gap between text", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-dropdown-sub-item-gap-y", + attributes: { + category: "dropdown", + type: "sub-item", + item: "gap-y", + }, + path: ["dropdown", "sub-item", "gap-y"], + }, + }, + container: { + py: { + $type: "dimension", + $value: "4px", + $description: "4px\n", + filePath: "design-tokens/components/desktop/base/dropdown menu.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.1}", + $description: "4px\n", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-dropdown-container-py", + attributes: { + category: "dropdown", + type: "container", + item: "py", + }, + path: ["dropdown", "container", "py"], + }, + radius: { + $type: "dimension", + $value: "6px", + $description: "6px", + filePath: "design-tokens/components/desktop/base/dropdown menu.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + original: { + $type: "dimension", + $value: "{rounded.3}", + $description: "6px", + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + }, + name: "canary-dropdown-container-radius", + attributes: { + category: "dropdown", + type: "container", + item: "radius", + }, + path: ["dropdown", "container", "radius"], + }, + "min-w": { + $type: "dimension", + $value: "320px", + filePath: "design-tokens/components/desktop/base/dropdown menu.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "320px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-dropdown-container-min-w", + attributes: { + category: "dropdown", + type: "container", + item: "min-w", + }, + path: ["dropdown", "container", "min-w"], + }, + }, + "menu-item-branch-selector": { + tag: { + px: { + $type: "dimension", + $value: "8px", + $description: "8px horizontal padding", + filePath: "design-tokens/components/desktop/base/dropdown menu.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.2}", + $description: "8px horizontal padding", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-dropdown-menu-item-branch-selector-tag-px", + attributes: { + category: "dropdown", + type: "menu-item-branch-selector", + item: "tag", + subitem: "px", + }, + path: ["dropdown", "menu-item-branch-selector", "tag", "px"], + }, + size: { + $type: "dimension", + $value: "20px", + $description: "20px height\n", + filePath: "design-tokens/components/desktop/base/dropdown menu.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "{size.5}", + $description: "20px height\n", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-dropdown-menu-item-branch-selector-tag-size", + attributes: { + category: "dropdown", + type: "menu-item-branch-selector", + item: "tag", + subitem: "size", + }, + path: ["dropdown", "menu-item-branch-selector", "tag", "size"], + }, + }, + }, + "menu-items": { + "header-footer": { + px: { + $type: "dimension", + $value: "16px", + $description: "16px horizontal padding", + filePath: "design-tokens/components/desktop/base/dropdown menu.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.4}", + $description: "16px horizontal padding", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-dropdown-menu-items-header-footer-px", + attributes: { + category: "dropdown", + type: "menu-items", + item: "header-footer", + subitem: "px", + }, + path: ["dropdown", "menu-items", "header-footer", "px"], + }, + py: { + $type: "dimension", + $value: "10px", + $description: "10px vertical padding", + filePath: "design-tokens/components/desktop/base/dropdown menu.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.2-half}", + $description: "10px vertical padding", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-dropdown-menu-items-header-footer-py", + attributes: { + category: "dropdown", + type: "menu-items", + item: "header-footer", + subitem: "py", + }, + path: ["dropdown", "menu-items", "header-footer", "py"], + }, + }, + }, + }, + btn: { + size: { + sm: { + $type: "dimension", + $value: "28px", + filePath: "design-tokens/components/desktop/base/btn.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "{size.7}", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-btn-size-sm", + attributes: { + category: "btn", + type: "size", + item: "sm", + }, + path: ["btn", "size", "sm"], + }, + default: { + $type: "dimension", + $value: "32px", + filePath: "design-tokens/components/desktop/base/btn.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "{size.8}", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-btn-size-default", + attributes: { + category: "btn", + type: "size", + item: "default", + }, + path: ["btn", "size", "default"], + }, + icon: { + $type: "dimension", + $value: "32px", + filePath: "design-tokens/components/desktop/base/btn.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "{size.8}", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-btn-size-icon", + attributes: { + category: "btn", + type: "size", + item: "icon", + }, + path: ["btn", "size", "icon"], + }, + lg: { + $type: "dimension", + $value: "40px", + filePath: "design-tokens/components/desktop/base/btn.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "{size.10}", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-btn-size-lg", + attributes: { + category: "btn", + type: "size", + item: "lg", + }, + path: ["btn", "size", "lg"], + }, + }, + gap: { + sm: { + $type: "dimension", + $value: "6px", + filePath: "design-tokens/components/desktop/base/btn.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.1-half}", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-btn-gap-sm", + attributes: { + category: "btn", + type: "gap", + item: "sm", + }, + path: ["btn", "gap", "sm"], + }, + default: { + $type: "dimension", + $value: "10px", + filePath: "design-tokens/components/desktop/base/btn.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.2-half}", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-btn-gap-default", + attributes: { + category: "btn", + type: "gap", + item: "default", + }, + path: ["btn", "gap", "default"], + }, + lg: { + $type: "dimension", + $value: "10px", + filePath: "design-tokens/components/desktop/base/btn.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.2-half}", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-btn-gap-lg", + attributes: { + category: "btn", + type: "gap", + item: "lg", + }, + path: ["btn", "gap", "lg"], + }, + }, + default: { + radius: { + $type: "dimension", + $value: "4px", + filePath: "design-tokens/components/desktop/base/btn.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + original: { + $type: "dimension", + $value: "{rounded.2}", + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + }, + name: "canary-btn-default-radius", + attributes: { + category: "btn", + type: "default", + item: "radius", + }, + path: ["btn", "default", "radius"], + }, + }, + rounded: { + radius: { + $type: "dimension", + $value: "9999px", + filePath: "design-tokens/components/desktop/base/btn.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + original: { + $type: "dimension", + $value: "{rounded.full}", + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + }, + name: "canary-btn-rounded-radius", + attributes: { + category: "btn", + type: "rounded", + item: "radius", + }, + path: ["btn", "rounded", "radius"], + }, + }, + border: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/components/desktop/base/btn.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "{borderWidth.1}", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-btn-border", + attributes: { + category: "btn", + type: "border", + }, + path: ["btn", "border"], + }, + px: { + sm: { + $type: "dimension", + $value: "20px", + filePath: "design-tokens/components/desktop/base/btn.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.5}", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-btn-px-sm", + attributes: { + category: "btn", + type: "px", + item: "sm", + }, + path: ["btn", "px", "sm"], + }, + default: { + $type: "dimension", + $value: "20px", + filePath: "design-tokens/components/desktop/base/btn.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.5}", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-btn-px-default", + attributes: { + category: "btn", + type: "px", + item: "default", + }, + path: ["btn", "px", "default"], + }, + lg: { + $type: "dimension", + $value: "24px", + filePath: "design-tokens/components/desktop/base/btn.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.6}", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-btn-px-lg", + attributes: { + category: "btn", + type: "px", + item: "lg", + }, + path: ["btn", "px", "lg"], + }, + }, + py: { + sm: { + $type: "dimension", + $value: "6px", + filePath: "design-tokens/components/desktop/base/btn.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.1-half}", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-btn-py-sm", + attributes: { + category: "btn", + type: "py", + item: "sm", + }, + path: ["btn", "py", "sm"], + }, + default: { + $type: "dimension", + $value: "8px", + filePath: "design-tokens/components/desktop/base/btn.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.2}", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-btn-py-default", + attributes: { + category: "btn", + type: "py", + item: "default", + }, + path: ["btn", "py", "default"], + }, + lg: { + $type: "dimension", + $value: "12px", + filePath: "design-tokens/components/desktop/base/btn.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.3}", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-btn-py-lg", + attributes: { + category: "btn", + type: "py", + item: "lg", + }, + path: ["btn", "py", "lg"], + }, + }, + }, + "btn-link": { + size: { + sm: { + $type: "dimension", + $value: "16px", + filePath: "design-tokens/components/desktop/base/btn.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "{size.4}", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-btn-link-size-sm", + attributes: { + category: "btn-link", + type: "size", + item: "sm", + }, + path: ["btn-link", "size", "sm"], + }, + default: { + $type: "dimension", + $value: "16px", + filePath: "design-tokens/components/desktop/base/btn.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "{size.4}", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-btn-link-size-default", + attributes: { + category: "btn-link", + type: "size", + item: "default", + }, + path: ["btn-link", "size", "default"], + }, + }, + gap: { + sm: { + $type: "dimension", + $value: "8px", + filePath: "design-tokens/components/desktop/base/btn.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.2}", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-btn-link-gap-sm", + attributes: { + category: "btn-link", + type: "gap", + item: "sm", + }, + path: ["btn-link", "gap", "sm"], + }, + default: { + $type: "dimension", + $value: "10px", + filePath: "design-tokens/components/desktop/base/btn.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.2-half}", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-btn-link-gap-default", + attributes: { + category: "btn-link", + type: "gap", + item: "default", + }, + path: ["btn-link", "gap", "default"], + }, + }, + }, + badge: { + size: { + sm: { + $type: "dimension", + $value: "20px", + filePath: "design-tokens/components/desktop/base/badge.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "{size.5}", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-badge-size-sm", + attributes: { + category: "badge", + type: "size", + item: "sm", + }, + path: ["badge", "size", "sm"], + }, + default: { + $type: "dimension", + $value: "24px", + filePath: "design-tokens/components/desktop/base/badge.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "{size.6}", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-badge-size-default", + attributes: { + category: "badge", + type: "size", + item: "default", + }, + path: ["badge", "size", "default"], + }, + }, + default: { + gap: { + $type: "dimension", + $value: "4px", + filePath: "design-tokens/components/desktop/base/badge.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.1}", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-badge-default-gap", + attributes: { + category: "badge", + type: "default", + item: "gap", + }, + path: ["badge", "default", "gap"], + }, + py: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/components/desktop/base/badge.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.half}", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-badge-default-py", + attributes: { + category: "badge", + type: "default", + item: "py", + }, + path: ["badge", "default", "py"], + }, + px: { + $type: "dimension", + $value: "8px", + filePath: "design-tokens/components/desktop/base/badge.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.2}", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-badge-default-px", + attributes: { + category: "badge", + type: "default", + item: "px", + }, + path: ["badge", "default", "px"], + }, + radius: { + $type: "dimension", + $value: "4px", + filePath: "design-tokens/components/desktop/base/badge.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + original: { + $type: "dimension", + $value: "{rounded.2}", + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + }, + name: "canary-badge-default-radius", + attributes: { + category: "badge", + type: "default", + item: "radius", + }, + path: ["badge", "default", "radius"], + }, + }, + rounded: { + radius: { + $type: "dimension", + $value: "9999px", + filePath: "design-tokens/components/desktop/base/badge.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + original: { + $type: "dimension", + $value: "{rounded.full}", + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + }, + name: "canary-badge-rounded-radius", + attributes: { + category: "badge", + type: "rounded", + item: "radius", + }, + path: ["badge", "rounded", "radius"], + }, + px: { + $type: "dimension", + $value: "10px", + filePath: "design-tokens/components/desktop/base/badge.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.2-half}", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-badge-rounded-px", + attributes: { + category: "badge", + type: "rounded", + item: "px", + }, + path: ["badge", "rounded", "px"], + }, + }, + border: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/components/desktop/base/badge.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "{borderWidth.1}", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-badge-border", + attributes: { + category: "badge", + type: "border", + }, + path: ["badge", "border"], + }, + }, + tag: { + size: { + $type: "dimension", + $value: "20px", + filePath: "design-tokens/components/desktop/base/tag.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "{size.5}", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-tag-size", + attributes: { + category: "tag", + type: "size", + }, + path: ["tag", "size"], + }, + gap: { + $type: "dimension", + $value: "4px", + filePath: "design-tokens/components/desktop/base/tag.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.1}", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-tag-gap", + attributes: { + category: "tag", + type: "gap", + }, + path: ["tag", "gap"], + }, + py: { + $type: "dimension", + $value: "4px", + filePath: "design-tokens/components/desktop/base/tag.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.1}", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-tag-py", + attributes: { + category: "tag", + type: "py", + }, + path: ["tag", "py"], + }, + px: { + $type: "dimension", + $value: "8px", + filePath: "design-tokens/components/desktop/base/tag.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "{spacing.2}", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-tag-px", + attributes: { + category: "tag", + type: "px", + }, + path: ["tag", "px"], + }, + default: { + radius: { + $type: "dimension", + $value: "4px", + filePath: "design-tokens/components/desktop/base/tag.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + original: { + $type: "dimension", + $value: "{rounded.2}", + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + }, + name: "canary-tag-default-radius", + attributes: { + category: "tag", + type: "default", + item: "radius", + }, + path: ["tag", "default", "radius"], + }, + }, + split: { + right: { + radius: { + r: { + $type: "dimension", + $value: "4px", + filePath: "design-tokens/components/desktop/base/tag.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + original: { + $type: "dimension", + $value: "{rounded.2}", + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + }, + name: "canary-tag-split-right-radius-r", + attributes: { + category: "tag", + type: "split", + item: "right", + subitem: "radius", + state: "r", + }, + path: ["tag", "split", "right", "radius", "r"], + }, + l: { + $type: "dimension", + $value: "0px", + filePath: "design-tokens/components/desktop/base/tag.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + original: { + $type: "dimension", + $value: "{rounded.none}", + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + }, + name: "canary-tag-split-right-radius-l", + attributes: { + category: "tag", + type: "split", + item: "right", + subitem: "radius", + state: "l", + }, + path: ["tag", "split", "right", "radius", "l"], + }, + }, + }, + left: { + radius: { + r: { + $type: "dimension", + $value: "0px", + filePath: "design-tokens/components/desktop/base/tag.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + original: { + $type: "dimension", + $value: "{rounded.none}", + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + }, + name: "canary-tag-split-left-radius-r", + attributes: { + category: "tag", + type: "split", + item: "left", + subitem: "radius", + state: "r", + }, + path: ["tag", "split", "left", "radius", "r"], + }, + l: { + $type: "dimension", + $value: "4px", + filePath: "design-tokens/components/desktop/base/tag.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + original: { + $type: "dimension", + $value: "{rounded.2}", + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + }, + name: "canary-tag-split-left-radius-l", + attributes: { + category: "tag", + type: "split", + item: "left", + subitem: "radius", + state: "l", + }, + path: ["tag", "split", "left", "radius", "l"], + }, + }, + }, + }, + border: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/components/desktop/base/tag.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "{borderWidth.1}", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-tag-border", + attributes: { + category: "tag", + type: "border", + }, + path: ["tag", "border"], + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/core.ts b/packages/core-design-system/src/styles-esm/core.ts new file mode 100644 index 0000000000..499ac431ad --- /dev/null +++ b/packages/core-design-system/src/styles-esm/core.ts @@ -0,0 +1,6809 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:54 GMT + * Copyright (c) Harness. + */ + +export default { + tracking: { + tighter: { + $type: "dimension", + $value: "-0.05em", + $description: "Very tight, display text", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "letterSpacing", + }, + }, + original: { + $type: "dimension", + $value: "-0.05em", + $description: "Very tight, display text", + $extensions: { + "studio.tokens": { + originalType: "letterSpacing", + }, + }, + }, + name: "canary-tracking-tighter", + attributes: { + category: "tracking", + type: "tighter", + }, + path: ["tracking", "tighter"], + }, + tight: { + $type: "dimension", + $value: "-0.02em", + $description: "Headings", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "letterSpacing", + }, + }, + original: { + $type: "dimension", + $value: "-0.02em", + $description: "Headings", + $extensions: { + "studio.tokens": { + originalType: "letterSpacing", + }, + }, + }, + name: "canary-tracking-tight", + attributes: { + category: "tracking", + type: "tight", + }, + path: ["tracking", "tight"], + }, + normal: { + $type: "dimension", + $value: "0em", + $description: "Default body text", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "letterSpacing", + }, + }, + original: { + $type: "dimension", + $value: "0em", + $description: "Default body text", + $extensions: { + "studio.tokens": { + originalType: "letterSpacing", + }, + }, + }, + name: "canary-tracking-normal", + attributes: { + category: "tracking", + type: "normal", + }, + path: ["tracking", "normal"], + }, + wide: { + $type: "dimension", + $value: "0.025em", + $description: "Improved readability", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "letterSpacing", + }, + }, + original: { + $type: "dimension", + $value: "0.025em", + $description: "Improved readability", + $extensions: { + "studio.tokens": { + originalType: "letterSpacing", + }, + }, + }, + name: "canary-tracking-wide", + attributes: { + category: "tracking", + type: "wide", + }, + path: ["tracking", "wide"], + }, + wider: { + $type: "dimension", + $value: "0.05em", + $description: "Spaced text", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "letterSpacing", + }, + }, + original: { + $type: "dimension", + $value: "0.05em", + $description: "Spaced text", + $extensions: { + "studio.tokens": { + originalType: "letterSpacing", + }, + }, + }, + name: "canary-tracking-wider", + attributes: { + category: "tracking", + type: "wider", + }, + path: ["tracking", "wider"], + }, + widest: { + $type: "dimension", + $value: "0.1em", + $description: "All caps text", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "letterSpacing", + }, + }, + original: { + $type: "dimension", + $value: "0.1em", + $description: "All caps text", + $extensions: { + "studio.tokens": { + originalType: "letterSpacing", + }, + }, + }, + name: "canary-tracking-widest", + attributes: { + category: "tracking", + type: "widest", + }, + path: ["tracking", "widest"], + }, + }, + fontWeight: { + default: { + normal: { + 100: { + $type: "fontWeight", + $value: 100, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "Thin", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-default-normal-100", + attributes: { + category: "fontWeight", + type: "default", + item: "normal", + subitem: "100", + }, + path: ["fontWeight", "default", "normal", "100"], + }, + 200: { + $type: "fontWeight", + $value: 200, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "ExtraLight", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-default-normal-200", + attributes: { + category: "fontWeight", + type: "default", + item: "normal", + subitem: "200", + }, + path: ["fontWeight", "default", "normal", "200"], + }, + 300: { + $type: "fontWeight", + $value: 300, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "Light", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-default-normal-300", + attributes: { + category: "fontWeight", + type: "default", + item: "normal", + subitem: "300", + }, + path: ["fontWeight", "default", "normal", "300"], + }, + 400: { + $type: "fontWeight", + $value: 400, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "Regular", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-default-normal-400", + attributes: { + category: "fontWeight", + type: "default", + item: "normal", + subitem: "400", + }, + path: ["fontWeight", "default", "normal", "400"], + }, + 500: { + $type: "fontWeight", + $value: 500, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "Medium", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-default-normal-500", + attributes: { + category: "fontWeight", + type: "default", + item: "normal", + subitem: "500", + }, + path: ["fontWeight", "default", "normal", "500"], + }, + 600: { + $type: "fontWeight", + $value: 600, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "SemiBold", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-default-normal-600", + attributes: { + category: "fontWeight", + type: "default", + item: "normal", + subitem: "600", + }, + path: ["fontWeight", "default", "normal", "600"], + }, + 700: { + $type: "fontWeight", + $value: 700, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "Bold", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-default-normal-700", + attributes: { + category: "fontWeight", + type: "default", + item: "normal", + subitem: "700", + }, + path: ["fontWeight", "default", "normal", "700"], + }, + 800: { + $type: "fontWeight", + $value: 800, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "ExtraBold", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-default-normal-800", + attributes: { + category: "fontWeight", + type: "default", + item: "normal", + subitem: "800", + }, + path: ["fontWeight", "default", "normal", "800"], + }, + 900: { + $type: "fontWeight", + $value: 900, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "Black", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-default-normal-900", + attributes: { + category: "fontWeight", + type: "default", + item: "normal", + subitem: "900", + }, + path: ["fontWeight", "default", "normal", "900"], + }, + }, + italic: { + 100: { + weight: { + $type: "fontWeight", + $value: 100, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "Thin", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-default-italic-100-weight", + attributes: { + category: "fontWeight", + type: "default", + item: "italic", + subitem: "100", + state: "weight", + }, + path: ["fontWeight", "default", "italic", "100", "weight"], + }, + style: { + $type: "fontStyle", + $value: "italic", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontStyle", + $value: "italic", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-default-italic-100-style", + attributes: { + category: "fontWeight", + type: "default", + item: "italic", + subitem: "100", + state: "style", + }, + path: ["fontWeight", "default", "italic", "100", "style"], + }, + }, + 200: { + weight: { + $type: "fontWeight", + $value: 200, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "ExtraLight", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-default-italic-200-weight", + attributes: { + category: "fontWeight", + type: "default", + item: "italic", + subitem: "200", + state: "weight", + }, + path: ["fontWeight", "default", "italic", "200", "weight"], + }, + style: { + $type: "fontStyle", + $value: "italic", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontStyle", + $value: "italic", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-default-italic-200-style", + attributes: { + category: "fontWeight", + type: "default", + item: "italic", + subitem: "200", + state: "style", + }, + path: ["fontWeight", "default", "italic", "200", "style"], + }, + }, + 300: { + weight: { + $type: "fontWeight", + $value: 300, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "Light", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-default-italic-300-weight", + attributes: { + category: "fontWeight", + type: "default", + item: "italic", + subitem: "300", + state: "weight", + }, + path: ["fontWeight", "default", "italic", "300", "weight"], + }, + style: { + $type: "fontStyle", + $value: "italic", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontStyle", + $value: "italic", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-default-italic-300-style", + attributes: { + category: "fontWeight", + type: "default", + item: "italic", + subitem: "300", + state: "style", + }, + path: ["fontWeight", "default", "italic", "300", "style"], + }, + }, + 400: { + weight: { + $type: "fontWeight", + $value: 400, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "Regular", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-default-italic-400-weight", + attributes: { + category: "fontWeight", + type: "default", + item: "italic", + subitem: "400", + state: "weight", + }, + path: ["fontWeight", "default", "italic", "400", "weight"], + }, + style: { + $type: "fontStyle", + $value: "italic", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontStyle", + $value: "italic", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-default-italic-400-style", + attributes: { + category: "fontWeight", + type: "default", + item: "italic", + subitem: "400", + state: "style", + }, + path: ["fontWeight", "default", "italic", "400", "style"], + }, + }, + 500: { + weight: { + $type: "fontWeight", + $value: 500, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "Medium", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-default-italic-500-weight", + attributes: { + category: "fontWeight", + type: "default", + item: "italic", + subitem: "500", + state: "weight", + }, + path: ["fontWeight", "default", "italic", "500", "weight"], + }, + style: { + $type: "fontStyle", + $value: "italic", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontStyle", + $value: "italic", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-default-italic-500-style", + attributes: { + category: "fontWeight", + type: "default", + item: "italic", + subitem: "500", + state: "style", + }, + path: ["fontWeight", "default", "italic", "500", "style"], + }, + }, + 600: { + weight: { + $type: "fontWeight", + $value: 600, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "SemiBold", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-default-italic-600-weight", + attributes: { + category: "fontWeight", + type: "default", + item: "italic", + subitem: "600", + state: "weight", + }, + path: ["fontWeight", "default", "italic", "600", "weight"], + }, + style: { + $type: "fontStyle", + $value: "italic", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontStyle", + $value: "italic", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-default-italic-600-style", + attributes: { + category: "fontWeight", + type: "default", + item: "italic", + subitem: "600", + state: "style", + }, + path: ["fontWeight", "default", "italic", "600", "style"], + }, + }, + 700: { + weight: { + $type: "fontWeight", + $value: 700, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "Bold", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-default-italic-700-weight", + attributes: { + category: "fontWeight", + type: "default", + item: "italic", + subitem: "700", + state: "weight", + }, + path: ["fontWeight", "default", "italic", "700", "weight"], + }, + style: { + $type: "fontStyle", + $value: "italic", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontStyle", + $value: "italic", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-default-italic-700-style", + attributes: { + category: "fontWeight", + type: "default", + item: "italic", + subitem: "700", + state: "style", + }, + path: ["fontWeight", "default", "italic", "700", "style"], + }, + }, + 800: { + weight: { + $type: "fontWeight", + $value: 800, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "ExtraBold", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-default-italic-800-weight", + attributes: { + category: "fontWeight", + type: "default", + item: "italic", + subitem: "800", + state: "weight", + }, + path: ["fontWeight", "default", "italic", "800", "weight"], + }, + style: { + $type: "fontStyle", + $value: "italic", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontStyle", + $value: "italic", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-default-italic-800-style", + attributes: { + category: "fontWeight", + type: "default", + item: "italic", + subitem: "800", + state: "style", + }, + path: ["fontWeight", "default", "italic", "800", "style"], + }, + }, + 900: { + weight: { + $type: "fontWeight", + $value: 900, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "Black", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-default-italic-900-weight", + attributes: { + category: "fontWeight", + type: "default", + item: "italic", + subitem: "900", + state: "weight", + }, + path: ["fontWeight", "default", "italic", "900", "weight"], + }, + style: { + $type: "fontStyle", + $value: "italic", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontStyle", + $value: "italic", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-default-italic-900-style", + attributes: { + category: "fontWeight", + type: "default", + item: "italic", + subitem: "900", + state: "style", + }, + path: ["fontWeight", "default", "italic", "900", "style"], + }, + }, + }, + }, + mono: { + normal: { + 100: { + $type: "fontWeight", + $value: 100, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "Thin", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-mono-normal-100", + attributes: { + category: "fontWeight", + type: "mono", + item: "normal", + subitem: "100", + }, + path: ["fontWeight", "mono", "normal", "100"], + }, + 200: { + $type: "fontWeight", + $value: 200, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "ExtraLight", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-mono-normal-200", + attributes: { + category: "fontWeight", + type: "mono", + item: "normal", + subitem: "200", + }, + path: ["fontWeight", "mono", "normal", "200"], + }, + 300: { + $type: "fontWeight", + $value: 300, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "Light", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-mono-normal-300", + attributes: { + category: "fontWeight", + type: "mono", + item: "normal", + subitem: "300", + }, + path: ["fontWeight", "mono", "normal", "300"], + }, + 400: { + $type: "fontWeight", + $value: 400, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "Regular", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-mono-normal-400", + attributes: { + category: "fontWeight", + type: "mono", + item: "normal", + subitem: "400", + }, + path: ["fontWeight", "mono", "normal", "400"], + }, + 500: { + $type: "fontWeight", + $value: 500, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "Medium", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-mono-normal-500", + attributes: { + category: "fontWeight", + type: "mono", + item: "normal", + subitem: "500", + }, + path: ["fontWeight", "mono", "normal", "500"], + }, + 700: { + $type: "fontWeight", + $value: 700, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "Bold", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-mono-normal-700", + attributes: { + category: "fontWeight", + type: "mono", + item: "normal", + subitem: "700", + }, + path: ["fontWeight", "mono", "normal", "700"], + }, + 800: { + $type: "fontWeight", + $value: 800, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "ExtraBold", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-mono-normal-800", + attributes: { + category: "fontWeight", + type: "mono", + item: "normal", + subitem: "800", + }, + path: ["fontWeight", "mono", "normal", "800"], + }, + }, + italic: { + 100: { + weight: { + $type: "fontWeight", + $value: 100, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "Thin", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-mono-italic-100-weight", + attributes: { + category: "fontWeight", + type: "mono", + item: "italic", + subitem: "100", + state: "weight", + }, + path: ["fontWeight", "mono", "italic", "100", "weight"], + }, + style: { + $type: "fontStyle", + $value: "italic", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontStyle", + $value: "italic", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-mono-italic-100-style", + attributes: { + category: "fontWeight", + type: "mono", + item: "italic", + subitem: "100", + state: "style", + }, + path: ["fontWeight", "mono", "italic", "100", "style"], + }, + }, + 200: { + weight: { + $type: "fontWeight", + $value: 200, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "ExtraLight", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-mono-italic-200-weight", + attributes: { + category: "fontWeight", + type: "mono", + item: "italic", + subitem: "200", + state: "weight", + }, + path: ["fontWeight", "mono", "italic", "200", "weight"], + }, + style: { + $type: "fontStyle", + $value: "italic", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontStyle", + $value: "italic", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-mono-italic-200-style", + attributes: { + category: "fontWeight", + type: "mono", + item: "italic", + subitem: "200", + state: "style", + }, + path: ["fontWeight", "mono", "italic", "200", "style"], + }, + }, + 300: { + weight: { + $type: "fontWeight", + $value: 300, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "Light", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-mono-italic-300-weight", + attributes: { + category: "fontWeight", + type: "mono", + item: "italic", + subitem: "300", + state: "weight", + }, + path: ["fontWeight", "mono", "italic", "300", "weight"], + }, + style: { + $type: "fontStyle", + $value: "italic", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontStyle", + $value: "italic", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-mono-italic-300-style", + attributes: { + category: "fontWeight", + type: "mono", + item: "italic", + subitem: "300", + state: "style", + }, + path: ["fontWeight", "mono", "italic", "300", "style"], + }, + }, + 400: { + weight: { + $type: "fontWeight", + $value: 400, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "Regular", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-mono-italic-400-weight", + attributes: { + category: "fontWeight", + type: "mono", + item: "italic", + subitem: "400", + state: "weight", + }, + path: ["fontWeight", "mono", "italic", "400", "weight"], + }, + style: { + $type: "fontStyle", + $value: "italic", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontStyle", + $value: "italic", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-mono-italic-400-style", + attributes: { + category: "fontWeight", + type: "mono", + item: "italic", + subitem: "400", + state: "style", + }, + path: ["fontWeight", "mono", "italic", "400", "style"], + }, + }, + 500: { + weight: { + $type: "fontWeight", + $value: 500, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "Medium", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-mono-italic-500-weight", + attributes: { + category: "fontWeight", + type: "mono", + item: "italic", + subitem: "500", + state: "weight", + }, + path: ["fontWeight", "mono", "italic", "500", "weight"], + }, + style: { + $type: "fontStyle", + $value: "italic", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontStyle", + $value: "italic", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-mono-italic-500-style", + attributes: { + category: "fontWeight", + type: "mono", + item: "italic", + subitem: "500", + state: "style", + }, + path: ["fontWeight", "mono", "italic", "500", "style"], + }, + }, + 700: { + weight: { + $type: "fontWeight", + $value: 700, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "Bold", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-mono-italic-700-weight", + attributes: { + category: "fontWeight", + type: "mono", + item: "italic", + subitem: "700", + state: "weight", + }, + path: ["fontWeight", "mono", "italic", "700", "weight"], + }, + style: { + $type: "fontStyle", + $value: "italic", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontStyle", + $value: "italic", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-mono-italic-700-style", + attributes: { + category: "fontWeight", + type: "mono", + item: "italic", + subitem: "700", + state: "style", + }, + path: ["fontWeight", "mono", "italic", "700", "style"], + }, + }, + 800: { + weight: { + $type: "fontWeight", + $value: 800, + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontWeight", + $value: "ExtraBold", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-mono-italic-800-weight", + attributes: { + category: "fontWeight", + type: "mono", + item: "italic", + subitem: "800", + state: "weight", + }, + path: ["fontWeight", "mono", "italic", "800", "weight"], + }, + style: { + $type: "fontStyle", + $value: "italic", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + original: { + $type: "fontStyle", + $value: "italic", + $extensions: { + "studio.tokens": { + originalType: "fontWeights", + }, + }, + }, + name: "canary-font-weight-mono-italic-800-style", + attributes: { + category: "fontWeight", + type: "mono", + item: "italic", + subitem: "800", + state: "style", + }, + path: ["fontWeight", "mono", "italic", "800", "style"], + }, + }, + }, + }, + }, + fontFamily: { + default: { + $type: "fontFamily", + $value: "Inter", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontFamilies", + }, + }, + original: { + $type: "fontFamily", + $value: "Inter", + $extensions: { + "studio.tokens": { + originalType: "fontFamilies", + }, + }, + }, + name: "canary-font-family-default", + attributes: { + category: "fontFamily", + type: "default", + }, + path: ["fontFamily", "default"], + }, + mono: { + $type: "fontFamily", + $value: "'JetBrains Mono'", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontFamilies", + }, + }, + original: { + $type: "fontFamily", + $value: "JetBrains Mono", + $extensions: { + "studio.tokens": { + originalType: "fontFamilies", + }, + }, + }, + name: "canary-font-family-mono", + attributes: { + category: "fontFamily", + type: "mono", + }, + path: ["fontFamily", "mono"], + }, + }, + textDecoration: { + none: { + $type: "textDecoration", + $value: "none", + filePath: "design-tokens/core/typography.json", + isSource: true, + original: { + $type: "textDecoration", + $value: "none", + }, + name: "canary-text-decoration-none", + attributes: { + category: "textDecoration", + type: "none", + }, + path: ["textDecoration", "none"], + }, + underline: { + $type: "textDecoration", + $value: "underline", + filePath: "design-tokens/core/typography.json", + isSource: true, + original: { + $type: "textDecoration", + $value: "underline", + }, + name: "canary-text-decoration-underline", + attributes: { + category: "textDecoration", + type: "underline", + }, + path: ["textDecoration", "underline"], + }, + "line-through": { + $type: "textDecoration", + $value: "line-through", + filePath: "design-tokens/core/typography.json", + isSource: true, + original: { + $type: "textDecoration", + $value: "line-through", + }, + name: "canary-text-decoration-line-through", + attributes: { + category: "textDecoration", + type: "line-through", + }, + path: ["textDecoration", "line-through"], + }, + }, + textCase: { + none: { + $type: "textCase", + $value: "none", + filePath: "design-tokens/core/typography.json", + isSource: true, + original: { + $type: "textCase", + $value: "none", + }, + name: "canary-text-case-none", + attributes: { + category: "textCase", + type: "none", + }, + path: ["textCase", "none"], + }, + uppercase: { + $type: "textCase", + $value: "uppercase", + filePath: "design-tokens/core/typography.json", + isSource: true, + original: { + $type: "textCase", + $value: "uppercase", + }, + name: "canary-text-case-uppercase", + attributes: { + category: "textCase", + type: "uppercase", + }, + path: ["textCase", "uppercase"], + }, + lowercase: { + $type: "textCase", + $value: "lowercase", + filePath: "design-tokens/core/typography.json", + isSource: true, + original: { + $type: "textCase", + $value: "lowercase", + }, + name: "canary-text-case-lowercase", + attributes: { + category: "textCase", + type: "lowercase", + }, + path: ["textCase", "lowercase"], + }, + capitalize: { + $type: "textCase", + $value: "capitalize", + filePath: "design-tokens/core/typography.json", + isSource: true, + original: { + $type: "textCase", + $value: "capitalize", + }, + name: "canary-text-case-capitalize", + attributes: { + category: "textCase", + type: "capitalize", + }, + path: ["textCase", "capitalize"], + }, + }, + fontSize: { + 1: { + $type: "fontSize", + $value: "0.75rem", + $description: "12px", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontSizes", + }, + }, + original: { + $type: "fontSize", + $value: "0.75rem", + $description: "12px", + $extensions: { + "studio.tokens": { + originalType: "fontSizes", + }, + }, + }, + name: "canary-font-size-1", + attributes: { + category: "fontSize", + type: "1", + }, + path: ["fontSize", "1"], + }, + 2: { + $type: "fontSize", + $value: "0.875rem", + $description: "14px", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontSizes", + }, + }, + original: { + $type: "fontSize", + $value: "0.875rem", + $description: "14px", + $extensions: { + "studio.tokens": { + originalType: "fontSizes", + }, + }, + }, + name: "canary-font-size-2", + attributes: { + category: "fontSize", + type: "2", + }, + path: ["fontSize", "2"], + }, + 3: { + $type: "fontSize", + $value: "1rem", + $description: "16px", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontSizes", + }, + }, + original: { + $type: "fontSize", + $value: "1rem", + $description: "16px", + $extensions: { + "studio.tokens": { + originalType: "fontSizes", + }, + }, + }, + name: "canary-font-size-3", + attributes: { + category: "fontSize", + type: "3", + }, + path: ["fontSize", "3"], + }, + 4: { + $type: "fontSize", + $value: "1.125rem", + $description: "18px", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontSizes", + }, + }, + original: { + $type: "fontSize", + $value: "1.125rem", + $description: "18px", + $extensions: { + "studio.tokens": { + originalType: "fontSizes", + }, + }, + }, + name: "canary-font-size-4", + attributes: { + category: "fontSize", + type: "4", + }, + path: ["fontSize", "4"], + }, + 5: { + $type: "fontSize", + $value: "1.25rem", + $description: "20px", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontSizes", + }, + }, + original: { + $type: "fontSize", + $value: "1.25rem", + $description: "20px", + $extensions: { + "studio.tokens": { + originalType: "fontSizes", + }, + }, + }, + name: "canary-font-size-5", + attributes: { + category: "fontSize", + type: "5", + }, + path: ["fontSize", "5"], + }, + 6: { + $type: "fontSize", + $value: "1.5rem", + $description: "24px", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontSizes", + }, + }, + original: { + $type: "fontSize", + $value: "1.5rem", + $description: "24px", + $extensions: { + "studio.tokens": { + originalType: "fontSizes", + }, + }, + }, + name: "canary-font-size-6", + attributes: { + category: "fontSize", + type: "6", + }, + path: ["fontSize", "6"], + }, + 7: { + $type: "fontSize", + $value: "1.875rem", + $description: "30px", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontSizes", + }, + }, + original: { + $type: "fontSize", + $value: "1.875rem", + $description: "30px", + $extensions: { + "studio.tokens": { + originalType: "fontSizes", + }, + }, + }, + name: "canary-font-size-7", + attributes: { + category: "fontSize", + type: "7", + }, + path: ["fontSize", "7"], + }, + 8: { + $type: "fontSize", + $value: "2.25rem", + $description: "36px", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontSizes", + }, + }, + original: { + $type: "fontSize", + $value: "2.25rem", + $description: "36px", + $extensions: { + "studio.tokens": { + originalType: "fontSizes", + }, + }, + }, + name: "canary-font-size-8", + attributes: { + category: "fontSize", + type: "8", + }, + path: ["fontSize", "8"], + }, + 9: { + $type: "fontSize", + $value: "3rem", + $description: "48px", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontSizes", + }, + }, + original: { + $type: "fontSize", + $value: "3rem", + $description: "48px", + $extensions: { + "studio.tokens": { + originalType: "fontSizes", + }, + }, + }, + name: "canary-font-size-9", + attributes: { + category: "fontSize", + type: "9", + }, + path: ["fontSize", "9"], + }, + 10: { + $type: "fontSize", + $value: "3.75rem", + $description: "60px", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontSizes", + }, + }, + original: { + $type: "fontSize", + $value: "3.75rem", + $description: "60px", + $extensions: { + "studio.tokens": { + originalType: "fontSizes", + }, + }, + }, + name: "canary-font-size-10", + attributes: { + category: "fontSize", + type: "10", + }, + path: ["fontSize", "10"], + }, + 11: { + $type: "fontSize", + $value: "4.5rem", + $description: "72px", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontSizes", + }, + }, + original: { + $type: "fontSize", + $value: "4.5rem", + $description: "72px", + $extensions: { + "studio.tokens": { + originalType: "fontSizes", + }, + }, + }, + name: "canary-font-size-11", + attributes: { + category: "fontSize", + type: "11", + }, + path: ["fontSize", "11"], + }, + 12: { + $type: "fontSize", + $value: "6rem", + $description: "96px", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontSizes", + }, + }, + original: { + $type: "fontSize", + $value: "6rem", + $description: "96px", + $extensions: { + "studio.tokens": { + originalType: "fontSizes", + }, + }, + }, + name: "canary-font-size-12", + attributes: { + category: "fontSize", + type: "12", + }, + path: ["fontSize", "12"], + }, + 13: { + $type: "fontSize", + $value: "8rem", + $description: "128px", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "fontSizes", + }, + }, + original: { + $type: "fontSize", + $value: "8rem", + $description: "128px", + $extensions: { + "studio.tokens": { + originalType: "fontSizes", + }, + }, + }, + name: "canary-font-size-13", + attributes: { + category: "fontSize", + type: "13", + }, + path: ["fontSize", "13"], + }, + }, + lineHeight: { + 1: { + none: { + $type: "lineHeight", + $value: "0.75rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.1}*{lineHeight.none}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-1-none", + attributes: { + category: "lineHeight", + type: "1", + item: "none", + }, + path: ["lineHeight", "1", "none"], + }, + tight: { + $type: "lineHeight", + $value: "0.9375rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.1}*{lineHeight.tight}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-1-tight", + attributes: { + category: "lineHeight", + type: "1", + item: "tight", + }, + path: ["lineHeight", "1", "tight"], + }, + snug: { + $type: "lineHeight", + $value: "1.0313rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.1}*{lineHeight.snug}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-1-snug", + attributes: { + category: "lineHeight", + type: "1", + item: "snug", + }, + path: ["lineHeight", "1", "snug"], + }, + normal: { + $type: "lineHeight", + $value: "1.125rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.1}*{lineHeight.normal}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-1-normal", + attributes: { + category: "lineHeight", + type: "1", + item: "normal", + }, + path: ["lineHeight", "1", "normal"], + }, + relaxed: { + $type: "lineHeight", + $value: "1.2188rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.1}*{lineHeight.relaxed}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-1-relaxed", + attributes: { + category: "lineHeight", + type: "1", + item: "relaxed", + }, + path: ["lineHeight", "1", "relaxed"], + }, + loose: { + $type: "lineHeight", + $value: "1.5rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.1}*{lineHeight.loose}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-1-loose", + attributes: { + category: "lineHeight", + type: "1", + item: "loose", + }, + path: ["lineHeight", "1", "loose"], + }, + }, + 2: { + none: { + $type: "lineHeight", + $value: "0.875rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.2}*{lineHeight.none}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-2-none", + attributes: { + category: "lineHeight", + type: "2", + item: "none", + }, + path: ["lineHeight", "2", "none"], + }, + tight: { + $type: "lineHeight", + $value: "1.0938rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.2}*{lineHeight.tight}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-2-tight", + attributes: { + category: "lineHeight", + type: "2", + item: "tight", + }, + path: ["lineHeight", "2", "tight"], + }, + snug: { + $type: "lineHeight", + $value: "1.2031rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.2}*{lineHeight.snug}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-2-snug", + attributes: { + category: "lineHeight", + type: "2", + item: "snug", + }, + path: ["lineHeight", "2", "snug"], + }, + normal: { + $type: "lineHeight", + $value: "1.3125rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.2}*{lineHeight.normal}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-2-normal", + attributes: { + category: "lineHeight", + type: "2", + item: "normal", + }, + path: ["lineHeight", "2", "normal"], + }, + relaxed: { + $type: "lineHeight", + $value: "1.4219rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.2}*{lineHeight.relaxed}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-2-relaxed", + attributes: { + category: "lineHeight", + type: "2", + item: "relaxed", + }, + path: ["lineHeight", "2", "relaxed"], + }, + loose: { + $type: "lineHeight", + $value: "1.75rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.2}*{lineHeight.loose}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-2-loose", + attributes: { + category: "lineHeight", + type: "2", + item: "loose", + }, + path: ["lineHeight", "2", "loose"], + }, + }, + 3: { + none: { + $type: "lineHeight", + $value: "1rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.3}*{lineHeight.none}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-3-none", + attributes: { + category: "lineHeight", + type: "3", + item: "none", + }, + path: ["lineHeight", "3", "none"], + }, + tight: { + $type: "lineHeight", + $value: "1.25rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.3}*{lineHeight.tight}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-3-tight", + attributes: { + category: "lineHeight", + type: "3", + item: "tight", + }, + path: ["lineHeight", "3", "tight"], + }, + snug: { + $type: "lineHeight", + $value: "1.375rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.3}*{lineHeight.snug}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-3-snug", + attributes: { + category: "lineHeight", + type: "3", + item: "snug", + }, + path: ["lineHeight", "3", "snug"], + }, + normal: { + $type: "lineHeight", + $value: "1.5rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.3}*{lineHeight.normal}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-3-normal", + attributes: { + category: "lineHeight", + type: "3", + item: "normal", + }, + path: ["lineHeight", "3", "normal"], + }, + relaxed: { + $type: "lineHeight", + $value: "1.625rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.3}*{lineHeight.relaxed}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-3-relaxed", + attributes: { + category: "lineHeight", + type: "3", + item: "relaxed", + }, + path: ["lineHeight", "3", "relaxed"], + }, + loose: { + $type: "lineHeight", + $value: "2rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.3}*{lineHeight.loose}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-3-loose", + attributes: { + category: "lineHeight", + type: "3", + item: "loose", + }, + path: ["lineHeight", "3", "loose"], + }, + }, + 4: { + none: { + $type: "lineHeight", + $value: "1.125rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.4}*{lineHeight.none}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-4-none", + attributes: { + category: "lineHeight", + type: "4", + item: "none", + }, + path: ["lineHeight", "4", "none"], + }, + tight: { + $type: "lineHeight", + $value: "1.4063rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.4}*{lineHeight.tight}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-4-tight", + attributes: { + category: "lineHeight", + type: "4", + item: "tight", + }, + path: ["lineHeight", "4", "tight"], + }, + snug: { + $type: "lineHeight", + $value: "1.5469rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.4}*{lineHeight.snug}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-4-snug", + attributes: { + category: "lineHeight", + type: "4", + item: "snug", + }, + path: ["lineHeight", "4", "snug"], + }, + normal: { + $type: "lineHeight", + $value: "1.6875rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.4}*{lineHeight.normal}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-4-normal", + attributes: { + category: "lineHeight", + type: "4", + item: "normal", + }, + path: ["lineHeight", "4", "normal"], + }, + relaxed: { + $type: "lineHeight", + $value: "1.8281rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.4}*{lineHeight.relaxed}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-4-relaxed", + attributes: { + category: "lineHeight", + type: "4", + item: "relaxed", + }, + path: ["lineHeight", "4", "relaxed"], + }, + loose: { + $type: "lineHeight", + $value: "2.25rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.4}*{lineHeight.loose}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-4-loose", + attributes: { + category: "lineHeight", + type: "4", + item: "loose", + }, + path: ["lineHeight", "4", "loose"], + }, + }, + 5: { + none: { + $type: "lineHeight", + $value: "1.25rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.5}*{lineHeight.none}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-5-none", + attributes: { + category: "lineHeight", + type: "5", + item: "none", + }, + path: ["lineHeight", "5", "none"], + }, + tight: { + $type: "lineHeight", + $value: "1.5625rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.5}*{lineHeight.tight}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-5-tight", + attributes: { + category: "lineHeight", + type: "5", + item: "tight", + }, + path: ["lineHeight", "5", "tight"], + }, + snug: { + $type: "lineHeight", + $value: "1.7188rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.5}*{lineHeight.snug}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-5-snug", + attributes: { + category: "lineHeight", + type: "5", + item: "snug", + }, + path: ["lineHeight", "5", "snug"], + }, + normal: { + $type: "lineHeight", + $value: "1.875rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.5}*{lineHeight.normal}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-5-normal", + attributes: { + category: "lineHeight", + type: "5", + item: "normal", + }, + path: ["lineHeight", "5", "normal"], + }, + relaxed: { + $type: "lineHeight", + $value: "2.0313rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.5}*{lineHeight.relaxed}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-5-relaxed", + attributes: { + category: "lineHeight", + type: "5", + item: "relaxed", + }, + path: ["lineHeight", "5", "relaxed"], + }, + loose: { + $type: "lineHeight", + $value: "2.5rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.5}*{lineHeight.loose}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-5-loose", + attributes: { + category: "lineHeight", + type: "5", + item: "loose", + }, + path: ["lineHeight", "5", "loose"], + }, + }, + 6: { + none: { + $type: "lineHeight", + $value: "1.5rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.6}*{lineHeight.none}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-6-none", + attributes: { + category: "lineHeight", + type: "6", + item: "none", + }, + path: ["lineHeight", "6", "none"], + }, + tight: { + $type: "lineHeight", + $value: "1.875rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.6}*{lineHeight.tight}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-6-tight", + attributes: { + category: "lineHeight", + type: "6", + item: "tight", + }, + path: ["lineHeight", "6", "tight"], + }, + snug: { + $type: "lineHeight", + $value: "2.0625rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.6}*{lineHeight.snug}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-6-snug", + attributes: { + category: "lineHeight", + type: "6", + item: "snug", + }, + path: ["lineHeight", "6", "snug"], + }, + normal: { + $type: "lineHeight", + $value: "2.25rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.6}*{lineHeight.normal}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-6-normal", + attributes: { + category: "lineHeight", + type: "6", + item: "normal", + }, + path: ["lineHeight", "6", "normal"], + }, + relaxed: { + $type: "lineHeight", + $value: "2.4375rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.6}*{lineHeight.relaxed}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-6-relaxed", + attributes: { + category: "lineHeight", + type: "6", + item: "relaxed", + }, + path: ["lineHeight", "6", "relaxed"], + }, + loose: { + $type: "lineHeight", + $value: "3rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.6}*{lineHeight.loose}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-6-loose", + attributes: { + category: "lineHeight", + type: "6", + item: "loose", + }, + path: ["lineHeight", "6", "loose"], + }, + }, + 7: { + none: { + $type: "lineHeight", + $value: "1.875rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.7}*{lineHeight.none}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-7-none", + attributes: { + category: "lineHeight", + type: "7", + item: "none", + }, + path: ["lineHeight", "7", "none"], + }, + tight: { + $type: "lineHeight", + $value: "2.3438rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.7}*{lineHeight.tight}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-7-tight", + attributes: { + category: "lineHeight", + type: "7", + item: "tight", + }, + path: ["lineHeight", "7", "tight"], + }, + snug: { + $type: "lineHeight", + $value: "2.5781rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.7}*{lineHeight.snug}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-7-snug", + attributes: { + category: "lineHeight", + type: "7", + item: "snug", + }, + path: ["lineHeight", "7", "snug"], + }, + normal: { + $type: "lineHeight", + $value: "2.8125rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.7}*{lineHeight.normal}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-7-normal", + attributes: { + category: "lineHeight", + type: "7", + item: "normal", + }, + path: ["lineHeight", "7", "normal"], + }, + relaxed: { + $type: "lineHeight", + $value: "3.0469rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.7}*{lineHeight.relaxed}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-7-relaxed", + attributes: { + category: "lineHeight", + type: "7", + item: "relaxed", + }, + path: ["lineHeight", "7", "relaxed"], + }, + loose: { + $type: "lineHeight", + $value: "3.75rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.7}*{lineHeight.loose}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-7-loose", + attributes: { + category: "lineHeight", + type: "7", + item: "loose", + }, + path: ["lineHeight", "7", "loose"], + }, + }, + 8: { + none: { + $type: "lineHeight", + $value: "2.25rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.8}*{lineHeight.none}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-8-none", + attributes: { + category: "lineHeight", + type: "8", + item: "none", + }, + path: ["lineHeight", "8", "none"], + }, + tight: { + $type: "lineHeight", + $value: "2.8125rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.8}*{lineHeight.tight}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-8-tight", + attributes: { + category: "lineHeight", + type: "8", + item: "tight", + }, + path: ["lineHeight", "8", "tight"], + }, + snug: { + $type: "lineHeight", + $value: "3.0938rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.8}*{lineHeight.snug}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-8-snug", + attributes: { + category: "lineHeight", + type: "8", + item: "snug", + }, + path: ["lineHeight", "8", "snug"], + }, + normal: { + $type: "lineHeight", + $value: "3.375rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.8}*{lineHeight.normal}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-8-normal", + attributes: { + category: "lineHeight", + type: "8", + item: "normal", + }, + path: ["lineHeight", "8", "normal"], + }, + relaxed: { + $type: "lineHeight", + $value: "3.6563rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.8}*{lineHeight.relaxed}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-8-relaxed", + attributes: { + category: "lineHeight", + type: "8", + item: "relaxed", + }, + path: ["lineHeight", "8", "relaxed"], + }, + loose: { + $type: "lineHeight", + $value: "4.5rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.8}*{lineHeight.loose}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-8-loose", + attributes: { + category: "lineHeight", + type: "8", + item: "loose", + }, + path: ["lineHeight", "8", "loose"], + }, + }, + 9: { + none: { + $type: "lineHeight", + $value: "3rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.9}*{lineHeight.none}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-9-none", + attributes: { + category: "lineHeight", + type: "9", + item: "none", + }, + path: ["lineHeight", "9", "none"], + }, + tight: { + $type: "lineHeight", + $value: "3.75rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.9}*{lineHeight.tight}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-9-tight", + attributes: { + category: "lineHeight", + type: "9", + item: "tight", + }, + path: ["lineHeight", "9", "tight"], + }, + snug: { + $type: "lineHeight", + $value: "4.125rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.9}*{lineHeight.snug}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-9-snug", + attributes: { + category: "lineHeight", + type: "9", + item: "snug", + }, + path: ["lineHeight", "9", "snug"], + }, + normal: { + $type: "lineHeight", + $value: "4.5rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.9}*{lineHeight.normal}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-9-normal", + attributes: { + category: "lineHeight", + type: "9", + item: "normal", + }, + path: ["lineHeight", "9", "normal"], + }, + relaxed: { + $type: "lineHeight", + $value: "4.875rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.9}*{lineHeight.relaxed}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-9-relaxed", + attributes: { + category: "lineHeight", + type: "9", + item: "relaxed", + }, + path: ["lineHeight", "9", "relaxed"], + }, + loose: { + $type: "lineHeight", + $value: "6rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.9}*{lineHeight.loose}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-9-loose", + attributes: { + category: "lineHeight", + type: "9", + item: "loose", + }, + path: ["lineHeight", "9", "loose"], + }, + }, + 10: { + none: { + $type: "lineHeight", + $value: "3.75rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.10}*{lineHeight.none}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-10-none", + attributes: { + category: "lineHeight", + type: "10", + item: "none", + }, + path: ["lineHeight", "10", "none"], + }, + tight: { + $type: "lineHeight", + $value: "4.6875rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.10}*{lineHeight.tight}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-10-tight", + attributes: { + category: "lineHeight", + type: "10", + item: "tight", + }, + path: ["lineHeight", "10", "tight"], + }, + snug: { + $type: "lineHeight", + $value: "5.1563rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.10}*{lineHeight.snug}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-10-snug", + attributes: { + category: "lineHeight", + type: "10", + item: "snug", + }, + path: ["lineHeight", "10", "snug"], + }, + normal: { + $type: "lineHeight", + $value: "5.625rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.10}*{lineHeight.normal}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-10-normal", + attributes: { + category: "lineHeight", + type: "10", + item: "normal", + }, + path: ["lineHeight", "10", "normal"], + }, + relaxed: { + $type: "lineHeight", + $value: "6.0938rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.10}*{lineHeight.relaxed}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-10-relaxed", + attributes: { + category: "lineHeight", + type: "10", + item: "relaxed", + }, + path: ["lineHeight", "10", "relaxed"], + }, + loose: { + $type: "lineHeight", + $value: "7.5rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.10}*{lineHeight.loose}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-10-loose", + attributes: { + category: "lineHeight", + type: "10", + item: "loose", + }, + path: ["lineHeight", "10", "loose"], + }, + }, + 11: { + none: { + $type: "lineHeight", + $value: "4.5rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.11}*{lineHeight.none}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-11-none", + attributes: { + category: "lineHeight", + type: "11", + item: "none", + }, + path: ["lineHeight", "11", "none"], + }, + tight: { + $type: "lineHeight", + $value: "5.625rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.11}*{lineHeight.tight}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-11-tight", + attributes: { + category: "lineHeight", + type: "11", + item: "tight", + }, + path: ["lineHeight", "11", "tight"], + }, + snug: { + $type: "lineHeight", + $value: "6.1875rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.11}*{lineHeight.snug}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-11-snug", + attributes: { + category: "lineHeight", + type: "11", + item: "snug", + }, + path: ["lineHeight", "11", "snug"], + }, + normal: { + $type: "lineHeight", + $value: "6.75rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.11}*{lineHeight.normal}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-11-normal", + attributes: { + category: "lineHeight", + type: "11", + item: "normal", + }, + path: ["lineHeight", "11", "normal"], + }, + relaxed: { + $type: "lineHeight", + $value: "7.3125rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.11}*{lineHeight.relaxed}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-11-relaxed", + attributes: { + category: "lineHeight", + type: "11", + item: "relaxed", + }, + path: ["lineHeight", "11", "relaxed"], + }, + loose: { + $type: "lineHeight", + $value: "9rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.11}*{lineHeight.loose}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-11-loose", + attributes: { + category: "lineHeight", + type: "11", + item: "loose", + }, + path: ["lineHeight", "11", "loose"], + }, + }, + 12: { + none: { + $type: "lineHeight", + $value: "6rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.12}*{lineHeight.none}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-12-none", + attributes: { + category: "lineHeight", + type: "12", + item: "none", + }, + path: ["lineHeight", "12", "none"], + }, + tight: { + $type: "lineHeight", + $value: "7.5rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.12}*{lineHeight.tight}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-12-tight", + attributes: { + category: "lineHeight", + type: "12", + item: "tight", + }, + path: ["lineHeight", "12", "tight"], + }, + snug: { + $type: "lineHeight", + $value: "8.25rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.12}*{lineHeight.snug}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-12-snug", + attributes: { + category: "lineHeight", + type: "12", + item: "snug", + }, + path: ["lineHeight", "12", "snug"], + }, + normal: { + $type: "lineHeight", + $value: "9rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.12}*{lineHeight.normal}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-12-normal", + attributes: { + category: "lineHeight", + type: "12", + item: "normal", + }, + path: ["lineHeight", "12", "normal"], + }, + relaxed: { + $type: "lineHeight", + $value: "9.75rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.12}*{lineHeight.relaxed}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-12-relaxed", + attributes: { + category: "lineHeight", + type: "12", + item: "relaxed", + }, + path: ["lineHeight", "12", "relaxed"], + }, + loose: { + $type: "lineHeight", + $value: "12rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.12}*{lineHeight.loose}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-12-loose", + attributes: { + category: "lineHeight", + type: "12", + item: "loose", + }, + path: ["lineHeight", "12", "loose"], + }, + }, + 13: { + none: { + $type: "lineHeight", + $value: "8rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.13}*{lineHeight.none}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-13-none", + attributes: { + category: "lineHeight", + type: "13", + item: "none", + }, + path: ["lineHeight", "13", "none"], + }, + tight: { + $type: "lineHeight", + $value: "10rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.13}*{lineHeight.tight}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-13-tight", + attributes: { + category: "lineHeight", + type: "13", + item: "tight", + }, + path: ["lineHeight", "13", "tight"], + }, + snug: { + $type: "lineHeight", + $value: "11rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.13}*{lineHeight.snug}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-13-snug", + attributes: { + category: "lineHeight", + type: "13", + item: "snug", + }, + path: ["lineHeight", "13", "snug"], + }, + normal: { + $type: "lineHeight", + $value: "12rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.13}*{lineHeight.normal}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-13-normal", + attributes: { + category: "lineHeight", + type: "13", + item: "normal", + }, + path: ["lineHeight", "13", "normal"], + }, + relaxed: { + $type: "lineHeight", + $value: "13rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.13}*{lineHeight.relaxed}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-13-relaxed", + attributes: { + category: "lineHeight", + type: "13", + item: "relaxed", + }, + path: ["lineHeight", "13", "relaxed"], + }, + loose: { + $type: "lineHeight", + $value: "16rem", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "{fontSize.13}*{lineHeight.loose}", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-13-loose", + attributes: { + category: "lineHeight", + type: "13", + item: "loose", + }, + path: ["lineHeight", "13", "loose"], + }, + }, + none: { + $type: "lineHeight", + $value: "1", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-none", + attributes: { + category: "lineHeight", + type: "none", + }, + path: ["lineHeight", "none"], + }, + tight: { + $type: "lineHeight", + $value: "1.25", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "1.25", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-tight", + attributes: { + category: "lineHeight", + type: "tight", + }, + path: ["lineHeight", "tight"], + }, + snug: { + $type: "lineHeight", + $value: "1.375", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "1.375", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-snug", + attributes: { + category: "lineHeight", + type: "snug", + }, + path: ["lineHeight", "snug"], + }, + normal: { + $type: "lineHeight", + $value: "1.5", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "1.5", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-normal", + attributes: { + category: "lineHeight", + type: "normal", + }, + path: ["lineHeight", "normal"], + }, + relaxed: { + $type: "lineHeight", + $value: "1.625", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "1.625", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-relaxed", + attributes: { + category: "lineHeight", + type: "relaxed", + }, + path: ["lineHeight", "relaxed"], + }, + loose: { + $type: "lineHeight", + $value: "2", + filePath: "design-tokens/core/typography.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + original: { + $type: "lineHeight", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "lineHeights", + }, + }, + }, + name: "canary-line-height-loose", + attributes: { + category: "lineHeight", + type: "loose", + }, + path: ["lineHeight", "loose"], + }, + }, + spacing: { + 0: { + $type: "dimension", + $value: "0px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "0px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-0", + attributes: { + category: "spacing", + type: "0", + }, + path: ["spacing", "0"], + }, + 1: { + $type: "dimension", + $value: "4px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "4px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-1", + attributes: { + category: "spacing", + type: "1", + }, + path: ["spacing", "1"], + }, + 2: { + $type: "dimension", + $value: "8px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "8px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-2", + attributes: { + category: "spacing", + type: "2", + }, + path: ["spacing", "2"], + }, + 3: { + $type: "dimension", + $value: "12px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "12px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-3", + attributes: { + category: "spacing", + type: "3", + }, + path: ["spacing", "3"], + }, + 4: { + $type: "dimension", + $value: "16px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "16px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-4", + attributes: { + category: "spacing", + type: "4", + }, + path: ["spacing", "4"], + }, + 5: { + $type: "dimension", + $value: "20px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "20px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-5", + attributes: { + category: "spacing", + type: "5", + }, + path: ["spacing", "5"], + }, + 6: { + $type: "dimension", + $value: "24px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "24px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-6", + attributes: { + category: "spacing", + type: "6", + }, + path: ["spacing", "6"], + }, + 7: { + $type: "dimension", + $value: "28px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "28px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-7", + attributes: { + category: "spacing", + type: "7", + }, + path: ["spacing", "7"], + }, + 8: { + $type: "dimension", + $value: "32px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "32px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-8", + attributes: { + category: "spacing", + type: "8", + }, + path: ["spacing", "8"], + }, + 9: { + $type: "dimension", + $value: "36px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "36px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-9", + attributes: { + category: "spacing", + type: "9", + }, + path: ["spacing", "9"], + }, + 10: { + $type: "dimension", + $value: "40px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "40px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-10", + attributes: { + category: "spacing", + type: "10", + }, + path: ["spacing", "10"], + }, + 11: { + $type: "dimension", + $value: "44px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "44px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-11", + attributes: { + category: "spacing", + type: "11", + }, + path: ["spacing", "11"], + }, + 12: { + $type: "dimension", + $value: "48px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "48px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-12", + attributes: { + category: "spacing", + type: "12", + }, + path: ["spacing", "12"], + }, + 14: { + $type: "dimension", + $value: "56px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "56px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-14", + attributes: { + category: "spacing", + type: "14", + }, + path: ["spacing", "14"], + }, + 16: { + $type: "dimension", + $value: "64px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "64px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-16", + attributes: { + category: "spacing", + type: "16", + }, + path: ["spacing", "16"], + }, + 20: { + $type: "dimension", + $value: "80px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "80px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-20", + attributes: { + category: "spacing", + type: "20", + }, + path: ["spacing", "20"], + }, + 24: { + $type: "dimension", + $value: "96px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "96px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-24", + attributes: { + category: "spacing", + type: "24", + }, + path: ["spacing", "24"], + }, + 28: { + $type: "dimension", + $value: "112px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "112px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-28", + attributes: { + category: "spacing", + type: "28", + }, + path: ["spacing", "28"], + }, + 32: { + $type: "dimension", + $value: "128px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "128px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-32", + attributes: { + category: "spacing", + type: "32", + }, + path: ["spacing", "32"], + }, + 36: { + $type: "dimension", + $value: "144px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "144px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-36", + attributes: { + category: "spacing", + type: "36", + }, + path: ["spacing", "36"], + }, + 40: { + $type: "dimension", + $value: "160px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "160px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-40", + attributes: { + category: "spacing", + type: "40", + }, + path: ["spacing", "40"], + }, + 44: { + $type: "dimension", + $value: "176px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "176px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-44", + attributes: { + category: "spacing", + type: "44", + }, + path: ["spacing", "44"], + }, + 48: { + $type: "dimension", + $value: "192px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "192px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-48", + attributes: { + category: "spacing", + type: "48", + }, + path: ["spacing", "48"], + }, + 52: { + $type: "dimension", + $value: "208px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "208px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-52", + attributes: { + category: "spacing", + type: "52", + }, + path: ["spacing", "52"], + }, + 56: { + $type: "dimension", + $value: "224px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "224px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-56", + attributes: { + category: "spacing", + type: "56", + }, + path: ["spacing", "56"], + }, + 60: { + $type: "dimension", + $value: "240px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "240px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-60", + attributes: { + category: "spacing", + type: "60", + }, + path: ["spacing", "60"], + }, + 64: { + $type: "dimension", + $value: "256px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "256px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-64", + attributes: { + category: "spacing", + type: "64", + }, + path: ["spacing", "64"], + }, + 72: { + $type: "dimension", + $value: "288px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "288px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-72", + attributes: { + category: "spacing", + type: "72", + }, + path: ["spacing", "72"], + }, + 80: { + $type: "dimension", + $value: "320px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "320px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-80", + attributes: { + category: "spacing", + type: "80", + }, + path: ["spacing", "80"], + }, + 96: { + $type: "dimension", + $value: "384px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "384px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-96", + attributes: { + category: "spacing", + type: "96", + }, + path: ["spacing", "96"], + }, + px: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "1px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-px", + attributes: { + category: "spacing", + type: "px", + }, + path: ["spacing", "px"], + }, + half: { + $type: "dimension", + $value: "2px", + $description: "0.5", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "2px", + $description: "0.5", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-half", + attributes: { + category: "spacing", + type: "half", + }, + path: ["spacing", "half"], + }, + "1-half": { + $type: "dimension", + $value: "6px", + $description: "1.5", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "6px", + $description: "1.5", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-1-half", + attributes: { + category: "spacing", + type: "1-half", + }, + path: ["spacing", "1-half"], + }, + "2-half": { + $type: "dimension", + $value: "10px", + $description: "2.5", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "10px", + $description: "2.5", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-2-half", + attributes: { + category: "spacing", + type: "2-half", + }, + path: ["spacing", "2-half"], + }, + "3-half": { + $type: "dimension", + $value: "14px", + $description: "3.5", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { + $type: "dimension", + $value: "14px", + $description: "3.5", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-spacing-3-half", + attributes: { + category: "spacing", + type: "3-half", + }, + path: ["spacing", "3-half"], + }, + }, + rounded: { + 1: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + original: { + $type: "dimension", + $value: "2px", + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + }, + name: "canary-rounded-1", + attributes: { + category: "rounded", + type: "1", + }, + path: ["rounded", "1"], + }, + 2: { + $type: "dimension", + $value: "4px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + original: { + $type: "dimension", + $value: "4px", + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + }, + name: "canary-rounded-2", + attributes: { + category: "rounded", + type: "2", + }, + path: ["rounded", "2"], + }, + 3: { + $type: "dimension", + $value: "6px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + original: { + $type: "dimension", + $value: "6px", + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + }, + name: "canary-rounded-3", + attributes: { + category: "rounded", + type: "3", + }, + path: ["rounded", "3"], + }, + 4: { + $type: "dimension", + $value: "8px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + original: { + $type: "dimension", + $value: "8px", + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + }, + name: "canary-rounded-4", + attributes: { + category: "rounded", + type: "4", + }, + path: ["rounded", "4"], + }, + 5: { + $type: "dimension", + $value: "12px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + original: { + $type: "dimension", + $value: "12px", + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + }, + name: "canary-rounded-5", + attributes: { + category: "rounded", + type: "5", + }, + path: ["rounded", "5"], + }, + 6: { + $type: "dimension", + $value: "16px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + original: { + $type: "dimension", + $value: "16px", + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + }, + name: "canary-rounded-6", + attributes: { + category: "rounded", + type: "6", + }, + path: ["rounded", "6"], + }, + 7: { + $type: "dimension", + $value: "24px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + original: { + $type: "dimension", + $value: "24px", + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + }, + name: "canary-rounded-7", + attributes: { + category: "rounded", + type: "7", + }, + path: ["rounded", "7"], + }, + none: { + $type: "dimension", + $value: "0px", + $description: "No border radius", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + original: { + $type: "dimension", + $value: "0px", + $description: "No border radius", + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + }, + name: "canary-rounded-none", + attributes: { + category: "rounded", + type: "none", + }, + path: ["rounded", "none"], + }, + full: { + $type: "dimension", + $value: "9999px", + $description: "Fully rounded corners (circular)", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + original: { + $type: "dimension", + $value: "9999px", + $description: "Fully rounded corners (circular)", + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + }, + name: "canary-rounded-full", + attributes: { + category: "rounded", + type: "full", + }, + path: ["rounded", "full"], + }, + }, + size: { + 0: { + $type: "dimension", + $value: "0px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "0px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-0", + attributes: { + category: "size", + type: "0", + }, + path: ["size", "0"], + }, + 1: { + $type: "dimension", + $value: "4px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "4px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-1", + attributes: { + category: "size", + type: "1", + }, + path: ["size", "1"], + }, + 2: { + $type: "dimension", + $value: "8px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "8px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-2", + attributes: { + category: "size", + type: "2", + }, + path: ["size", "2"], + }, + 3: { + $type: "dimension", + $value: "12px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "12px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-3", + attributes: { + category: "size", + type: "3", + }, + path: ["size", "3"], + }, + 4: { + $type: "dimension", + $value: "16px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "16px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-4", + attributes: { + category: "size", + type: "4", + }, + path: ["size", "4"], + }, + 5: { + $type: "dimension", + $value: "20px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "20px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-5", + attributes: { + category: "size", + type: "5", + }, + path: ["size", "5"], + }, + 6: { + $type: "dimension", + $value: "24px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "24px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-6", + attributes: { + category: "size", + type: "6", + }, + path: ["size", "6"], + }, + 7: { + $type: "dimension", + $value: "28px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "28px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-7", + attributes: { + category: "size", + type: "7", + }, + path: ["size", "7"], + }, + 8: { + $type: "dimension", + $value: "32px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "32px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-8", + attributes: { + category: "size", + type: "8", + }, + path: ["size", "8"], + }, + 9: { + $type: "dimension", + $value: "36px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "36px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-9", + attributes: { + category: "size", + type: "9", + }, + path: ["size", "9"], + }, + 10: { + $type: "dimension", + $value: "40px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "40px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-10", + attributes: { + category: "size", + type: "10", + }, + path: ["size", "10"], + }, + 11: { + $type: "dimension", + $value: "44px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "44px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-11", + attributes: { + category: "size", + type: "11", + }, + path: ["size", "11"], + }, + 12: { + $type: "dimension", + $value: "48px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "48px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-12", + attributes: { + category: "size", + type: "12", + }, + path: ["size", "12"], + }, + 14: { + $type: "dimension", + $value: "56px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "56px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-14", + attributes: { + category: "size", + type: "14", + }, + path: ["size", "14"], + }, + 16: { + $type: "dimension", + $value: "64px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "64px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-16", + attributes: { + category: "size", + type: "16", + }, + path: ["size", "16"], + }, + 20: { + $type: "dimension", + $value: "80px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "80px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-20", + attributes: { + category: "size", + type: "20", + }, + path: ["size", "20"], + }, + 24: { + $type: "dimension", + $value: "96px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "96px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-24", + attributes: { + category: "size", + type: "24", + }, + path: ["size", "24"], + }, + 28: { + $type: "dimension", + $value: "112px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "112px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-28", + attributes: { + category: "size", + type: "28", + }, + path: ["size", "28"], + }, + 32: { + $type: "dimension", + $value: "128px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "128px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-32", + attributes: { + category: "size", + type: "32", + }, + path: ["size", "32"], + }, + 36: { + $type: "dimension", + $value: "144px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "144px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-36", + attributes: { + category: "size", + type: "36", + }, + path: ["size", "36"], + }, + 40: { + $type: "dimension", + $value: "160px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "160px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-40", + attributes: { + category: "size", + type: "40", + }, + path: ["size", "40"], + }, + 44: { + $type: "dimension", + $value: "176px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "176px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-44", + attributes: { + category: "size", + type: "44", + }, + path: ["size", "44"], + }, + 48: { + $type: "dimension", + $value: "192px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "192px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-48", + attributes: { + category: "size", + type: "48", + }, + path: ["size", "48"], + }, + 52: { + $type: "dimension", + $value: "208px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "208px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-52", + attributes: { + category: "size", + type: "52", + }, + path: ["size", "52"], + }, + 56: { + $type: "dimension", + $value: "224px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "224px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-56", + attributes: { + category: "size", + type: "56", + }, + path: ["size", "56"], + }, + 60: { + $type: "dimension", + $value: "240px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "240px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-60", + attributes: { + category: "size", + type: "60", + }, + path: ["size", "60"], + }, + 64: { + $type: "dimension", + $value: "256px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "256px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-64", + attributes: { + category: "size", + type: "64", + }, + path: ["size", "64"], + }, + 72: { + $type: "dimension", + $value: "288px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "288px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-72", + attributes: { + category: "size", + type: "72", + }, + path: ["size", "72"], + }, + 80: { + $type: "dimension", + $value: "320px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "320px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-80", + attributes: { + category: "size", + type: "80", + }, + path: ["size", "80"], + }, + 96: { + $type: "dimension", + $value: "384px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "384px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-96", + attributes: { + category: "size", + type: "96", + }, + path: ["size", "96"], + }, + px: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "1px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-px", + attributes: { + category: "size", + type: "px", + }, + path: ["size", "px"], + }, + half: { + $type: "dimension", + $value: "2px", + $description: "0.5", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "2px", + $description: "0.5", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-half", + attributes: { + category: "size", + type: "half", + }, + path: ["size", "half"], + }, + "1-half": { + $type: "dimension", + $value: "6px", + $description: "1.5", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "6px", + $description: "1.5", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-1-half", + attributes: { + category: "size", + type: "1-half", + }, + path: ["size", "1-half"], + }, + "2-half": { + $type: "dimension", + $value: "10px", + $description: "2.5", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "10px", + $description: "2.5", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-2-half", + attributes: { + category: "size", + type: "2-half", + }, + path: ["size", "2-half"], + }, + "3-half": { + $type: "dimension", + $value: "14px", + $description: "3.5", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "14px", + $description: "3.5", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-size-3-half", + attributes: { + category: "size", + type: "3-half", + }, + path: ["size", "3-half"], + }, + }, + borderWidth: { + 0: { + $type: "dimension", + $value: "0rem", + $description: "No border (border-0)", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "0rem", + $description: "No border (border-0)", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-border-width-0", + attributes: { + category: "borderWidth", + type: "0", + }, + path: ["borderWidth", "0"], + }, + 1: { + $type: "dimension", + $value: "1px", + $description: "Default border width (border)", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1px", + $description: "Default border width (border)", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-border-width-1", + attributes: { + category: "borderWidth", + type: "1", + }, + path: ["borderWidth", "1"], + }, + 2: { + $type: "dimension", + $value: "2px", + $description: "Medium border width (border-2)", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2px", + $description: "Medium border width (border-2)", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-border-width-2", + attributes: { + category: "borderWidth", + type: "2", + }, + path: ["borderWidth", "2"], + }, + 4: { + $type: "dimension", + $value: "4px", + $description: "Thick border width (border-4)", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "4px", + $description: "Thick border width (border-4)", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-border-width-4", + attributes: { + category: "borderWidth", + type: "4", + }, + path: ["borderWidth", "4"], + }, + 8: { + $type: "dimension", + $value: "8px", + $description: "Extra thick border width (border-8)", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "8px", + $description: "Extra thick border width (border-8)", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-border-width-8", + attributes: { + category: "borderWidth", + type: "8", + }, + path: ["borderWidth", "8"], + }, + }, + iconSize: { + xxs: { + $type: "dimension", + $value: "8px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "{size.2}", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-icon-size-xxs", + attributes: { + category: "iconSize", + type: "xxs", + }, + path: ["iconSize", "xxs"], + }, + xs: { + $type: "dimension", + $value: "12px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "{size.3}", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-icon-size-xs", + attributes: { + category: "iconSize", + type: "xs", + }, + path: ["iconSize", "xs"], + }, + sm: { + $type: "dimension", + $value: "14px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "{size.3-half}", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-icon-size-sm", + attributes: { + category: "iconSize", + type: "sm", + }, + path: ["iconSize", "sm"], + }, + default: { + $type: "dimension", + $value: "16px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "{size.4}", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-icon-size-default", + attributes: { + category: "iconSize", + type: "default", + }, + path: ["iconSize", "default"], + }, + md: { + $type: "dimension", + $value: "20px", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "{size.5}", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-icon-size-md", + attributes: { + category: "iconSize", + type: "md", + }, + path: ["iconSize", "md"], + }, + lg: { + $type: "dimension", + $value: "32px", + $description: "\n", + filePath: "design-tokens/core/dimensions.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "{size.8}", + $description: "\n", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-icon-size-lg", + attributes: { + category: "iconSize", + type: "lg", + }, + path: ["iconSize", "lg"], + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/index.ts b/packages/core-design-system/src/styles-esm/index.ts new file mode 100644 index 0000000000..7672fc6c71 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/index.ts @@ -0,0 +1,115 @@ +/** + * Harness Design System + * DO NOT UPDATE IT MANUALLY + * Generated on Fri, 14 Mar 2025 15:14:55 GMT + */ + + /* Theme files - Combined */ +export const designSystemThemeMap = { +'source-dark-desktop-gitness': 'source-dark-desktop-gitness', +'source-dark-desktop-harness': 'source-dark-desktop-harness', +'source-dark-deuteranopia-desktop-gitness': 'source-dark-deuteranopia-desktop-gitness', +'source-dark-deuteranopia-desktop-harness': 'source-dark-deuteranopia-desktop-harness', +'source-dark-dimmer-desktop-gitness': 'source-dark-dimmer-desktop-gitness', +'source-dark-dimmer-desktop-harness': 'source-dark-dimmer-desktop-harness', +'source-dark-dimmer-deuteranopia-desktop-gitness': 'source-dark-dimmer-deuteranopia-desktop-gitness', +'source-dark-dimmer-deuteranopia-desktop-harness': 'source-dark-dimmer-deuteranopia-desktop-harness', +'source-dark-dimmer-protanopia-desktop-gitness': 'source-dark-dimmer-protanopia-desktop-gitness', +'source-dark-dimmer-protanopia-desktop-harness': 'source-dark-dimmer-protanopia-desktop-harness', +'source-dark-dimmer-tritanopia-desktop-gitness': 'source-dark-dimmer-tritanopia-desktop-gitness', +'source-dark-dimmer-tritanopia-desktop-harness': 'source-dark-dimmer-tritanopia-desktop-harness', +'source-dark-high-contrast-desktop-gitness': 'source-dark-high-contrast-desktop-gitness', +'source-dark-high-contrast-desktop-harness': 'source-dark-high-contrast-desktop-harness', +'source-dark-high-contrast-deuteranopia-desktop-gitness': 'source-dark-high-contrast-deuteranopia-desktop-gitness', +'source-dark-high-contrast-deuteranopia-desktop-harness': 'source-dark-high-contrast-deuteranopia-desktop-harness', +'source-dark-high-contrast-protanopia-desktop-gitness': 'source-dark-high-contrast-protanopia-desktop-gitness', +'source-dark-high-contrast-protanopia-desktop-harness': 'source-dark-high-contrast-protanopia-desktop-harness', +'source-dark-high-contrast-tritanopia-desktop-gitness': 'source-dark-high-contrast-tritanopia-desktop-gitness', +'source-dark-high-contrast-tritanopia-desktop-harness': 'source-dark-high-contrast-tritanopia-desktop-harness', +'source-dark-protanopia-desktop-gitness': 'source-dark-protanopia-desktop-gitness', +'source-dark-protanopia-desktop-harness': 'source-dark-protanopia-desktop-harness', +'source-dark-tritanopia-desktop-gitness': 'source-dark-tritanopia-desktop-gitness', +'source-dark-tritanopia-desktop-harness': 'source-dark-tritanopia-desktop-harness', +'source-light-desktop-gitness': 'source-light-desktop-gitness', +'source-light-desktop-harness': 'source-light-desktop-harness', +'source-light-deuteranopia-desktop-gitness': 'source-light-deuteranopia-desktop-gitness', +'source-light-deuteranopia-desktop-harness': 'source-light-deuteranopia-desktop-harness', +'source-light-dimmer-desktop-gitness': 'source-light-dimmer-desktop-gitness', +'source-light-dimmer-desktop-harness': 'source-light-dimmer-desktop-harness', +'source-light-dimmer-deuteranopia-desktop-gitness': 'source-light-dimmer-deuteranopia-desktop-gitness', +'source-light-dimmer-deuteranopia-desktop-harness': 'source-light-dimmer-deuteranopia-desktop-harness', +'source-light-dimmer-protanopia-desktop-gitness': 'source-light-dimmer-protanopia-desktop-gitness', +'source-light-dimmer-protanopia-desktop-harness': 'source-light-dimmer-protanopia-desktop-harness', +'source-light-dimmer-tritanopia-desktop-gitness': 'source-light-dimmer-tritanopia-desktop-gitness', +'source-light-dimmer-tritanopia-desktop-harness': 'source-light-dimmer-tritanopia-desktop-harness', +'source-light-high-contrast-desktop-gitness': 'source-light-high-contrast-desktop-gitness', +'source-light-high-contrast-desktop-harness': 'source-light-high-contrast-desktop-harness', +'source-light-high-contrast-deuteranopia-desktop-gitness': 'source-light-high-contrast-deuteranopia-desktop-gitness', +'source-light-high-contrast-deuteranopia-desktop-harness': 'source-light-high-contrast-deuteranopia-desktop-harness', +'source-light-high-contrast-protanopia-desktop-gitness': 'source-light-high-contrast-protanopia-desktop-gitness', +'source-light-high-contrast-protanopia-desktop-harness': 'source-light-high-contrast-protanopia-desktop-harness', +'source-light-high-contrast-tritanopia-desktop-gitness': 'source-light-high-contrast-tritanopia-desktop-gitness', +'source-light-high-contrast-tritanopia-desktop-harness': 'source-light-high-contrast-tritanopia-desktop-harness', +'source-light-protanopia-desktop-gitness': 'source-light-protanopia-desktop-gitness', +'source-light-protanopia-desktop-harness': 'source-light-protanopia-desktop-harness', +'source-light-tritanopia-desktop-gitness': 'source-light-tritanopia-desktop-gitness', +'source-light-tritanopia-desktop-harness': 'source-light-tritanopia-desktop-harness', +} + +/* Core tokens */ +export { default as breakpoint } from './breakpoint'; +export { default as colors } from './colors'; +export { default as components } from './components'; +export { default as core } from './core'; + +/* Theme files - Dark */ +export { default as sourceDarkDesktopGitness } from './source-dark-desktop-gitness'; +export { default as sourceDarkDesktopHarness } from './source-dark-desktop-harness'; +export { default as sourceDarkDeuteranopiaDesktopGitness } from './source-dark-deuteranopia-desktop-gitness'; +export { default as sourceDarkDeuteranopiaDesktopHarness } from './source-dark-deuteranopia-desktop-harness'; +export { default as sourceDarkDimmerDesktopGitness } from './source-dark-dimmer-desktop-gitness'; +export { default as sourceDarkDimmerDesktopHarness } from './source-dark-dimmer-desktop-harness'; +export { default as sourceDarkDimmerDeuteranopiaDesktopGitness } from './source-dark-dimmer-deuteranopia-desktop-gitness'; +export { default as sourceDarkDimmerDeuteranopiaDesktopHarness } from './source-dark-dimmer-deuteranopia-desktop-harness'; +export { default as sourceDarkDimmerProtanopiaDesktopGitness } from './source-dark-dimmer-protanopia-desktop-gitness'; +export { default as sourceDarkDimmerProtanopiaDesktopHarness } from './source-dark-dimmer-protanopia-desktop-harness'; +export { default as sourceDarkDimmerTritanopiaDesktopGitness } from './source-dark-dimmer-tritanopia-desktop-gitness'; +export { default as sourceDarkDimmerTritanopiaDesktopHarness } from './source-dark-dimmer-tritanopia-desktop-harness'; +export { default as sourceDarkHighContrastDesktopGitness } from './source-dark-high-contrast-desktop-gitness'; +export { default as sourceDarkHighContrastDesktopHarness } from './source-dark-high-contrast-desktop-harness'; +export { default as sourceDarkHighContrastDeuteranopiaDesktopGitness } from './source-dark-high-contrast-deuteranopia-desktop-gitness'; +export { default as sourceDarkHighContrastDeuteranopiaDesktopHarness } from './source-dark-high-contrast-deuteranopia-desktop-harness'; +export { default as sourceDarkHighContrastProtanopiaDesktopGitness } from './source-dark-high-contrast-protanopia-desktop-gitness'; +export { default as sourceDarkHighContrastProtanopiaDesktopHarness } from './source-dark-high-contrast-protanopia-desktop-harness'; +export { default as sourceDarkHighContrastTritanopiaDesktopGitness } from './source-dark-high-contrast-tritanopia-desktop-gitness'; +export { default as sourceDarkHighContrastTritanopiaDesktopHarness } from './source-dark-high-contrast-tritanopia-desktop-harness'; +export { default as sourceDarkProtanopiaDesktopGitness } from './source-dark-protanopia-desktop-gitness'; +export { default as sourceDarkProtanopiaDesktopHarness } from './source-dark-protanopia-desktop-harness'; +export { default as sourceDarkTritanopiaDesktopGitness } from './source-dark-tritanopia-desktop-gitness'; +export { default as sourceDarkTritanopiaDesktopHarness } from './source-dark-tritanopia-desktop-harness'; + +/* Theme files - Light */ +export { default as sourceLightDesktopGitness } from './source-light-desktop-gitness'; +export { default as sourceLightDesktopHarness } from './source-light-desktop-harness'; +export { default as sourceLightDeuteranopiaDesktopGitness } from './source-light-deuteranopia-desktop-gitness'; +export { default as sourceLightDeuteranopiaDesktopHarness } from './source-light-deuteranopia-desktop-harness'; +export { default as sourceLightDimmerDesktopGitness } from './source-light-dimmer-desktop-gitness'; +export { default as sourceLightDimmerDesktopHarness } from './source-light-dimmer-desktop-harness'; +export { default as sourceLightDimmerDeuteranopiaDesktopGitness } from './source-light-dimmer-deuteranopia-desktop-gitness'; +export { default as sourceLightDimmerDeuteranopiaDesktopHarness } from './source-light-dimmer-deuteranopia-desktop-harness'; +export { default as sourceLightDimmerProtanopiaDesktopGitness } from './source-light-dimmer-protanopia-desktop-gitness'; +export { default as sourceLightDimmerProtanopiaDesktopHarness } from './source-light-dimmer-protanopia-desktop-harness'; +export { default as sourceLightDimmerTritanopiaDesktopGitness } from './source-light-dimmer-tritanopia-desktop-gitness'; +export { default as sourceLightDimmerTritanopiaDesktopHarness } from './source-light-dimmer-tritanopia-desktop-harness'; +export { default as sourceLightHighContrastDesktopGitness } from './source-light-high-contrast-desktop-gitness'; +export { default as sourceLightHighContrastDesktopHarness } from './source-light-high-contrast-desktop-harness'; +export { default as sourceLightHighContrastDeuteranopiaDesktopGitness } from './source-light-high-contrast-deuteranopia-desktop-gitness'; +export { default as sourceLightHighContrastDeuteranopiaDesktopHarness } from './source-light-high-contrast-deuteranopia-desktop-harness'; +export { default as sourceLightHighContrastProtanopiaDesktopGitness } from './source-light-high-contrast-protanopia-desktop-gitness'; +export { default as sourceLightHighContrastProtanopiaDesktopHarness } from './source-light-high-contrast-protanopia-desktop-harness'; +export { default as sourceLightHighContrastTritanopiaDesktopGitness } from './source-light-high-contrast-tritanopia-desktop-gitness'; +export { default as sourceLightHighContrastTritanopiaDesktopHarness } from './source-light-high-contrast-tritanopia-desktop-harness'; +export { default as sourceLightProtanopiaDesktopGitness } from './source-light-protanopia-desktop-gitness'; +export { default as sourceLightProtanopiaDesktopHarness } from './source-light-protanopia-desktop-harness'; +export { default as sourceLightTritanopiaDesktopGitness } from './source-light-tritanopia-desktop-gitness'; +export { default as sourceLightTritanopiaDesktopHarness } from './source-light-tritanopia-desktop-harness';; diff --git a/packages/core-design-system/src/styles-esm/source-dark-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-dark-desktop-gitness.ts new file mode 100644 index 0000000000..fcb61b9506 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-dark-desktop-gitness.ts @@ -0,0 +1,8863 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:42 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.1000}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.200}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(73.78% 60.44 156.25)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.200}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(57.73% 49.65 156.25)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.400}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.05", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.05)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.05", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.white}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.white}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(73.78% 60.44 156.25)", + $description: + "Text color for success badges. Communicates positive status through readable green text.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.200}", + $description: + "Text color for success badges. Communicates positive status through readable green text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-300) l c h / 0.2)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.2)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(72.4% 55.68 305.19)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.200}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-300) l c h / 0.2)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-500) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.500}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.600}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(73.78% 60.44 156.25)", + $description: + "Text color for success buttons. Communicates positive actions through readable green text.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.200}", + $description: + "Text color for success buttons. Communicates positive actions through readable green text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.1)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-300) l c h / 0.2)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-title", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "title", + themeable: true, + }, + path: ["component", "dropdown", "item", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-description", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "description", + themeable: true, + }, + path: ["component", "dropdown", "item", "description"], + }, + delete: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.12)", + $description: + "Green background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Green background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(100% 0 134.54) 0%, lch(63.4% 48.44 281.2) 50%, lch(74.37% 4.52 285.5) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(18.63% 6.73 287.29) 10%, lch(8.25% 4.49 287.18) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(26.73% 7.48 287.06) 10%, lch(18.63% 6.73 287.29) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(66.65% 55.77 156.25)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.300}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.05)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{state.hover}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{state.selected}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.sidebar.background}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(18.63% 6.73 287.29) 0%, lch(26.73% 7.48 287.06) 50%, lch(18.63% 6.73 287.29) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.800}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(66.65% 55.77 156.25)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.300}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(73.08% 34.81 281.21)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.200}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.900}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: "Border color for blue tags. ", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags. ", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(73.38% 45.67 56.65)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.200}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.900}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3% 4.01 51.14)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.950}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: "Border color for brown tags. ", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags. ", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(73.78% 60.44 156.25)", + $description: + "Text color for green tags. Ensures readability while maintaining the green color theme.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.200}", + $description: + "Text color for green tags. Ensures readability while maintaining the green color theme.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(11.35% 18.27 156.36)", + $description: + "Background color for green tags. Creates a distinct surface with green theme styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.900}", + $description: + "Background color for green tags. Creates a distinct surface with green theme styling.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.27% 5.33 156.53)", + $description: + "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.950}", + $description: + "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.35% 18.27 156.36)", + $description: "Border color for green tags.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(72.68% 45.97 284.36)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.200}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.900}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.17% 29.85 290.49)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.950}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(74.24% 53.56 123.85)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.200}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.900}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.2% 4.34 131.4)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.950}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(73.4% 50.15 176.67)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.200}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.900}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.26% 5.16 160.96)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.950}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.900}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(72% 46.72 350.11)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.200}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.900}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.74% 8.62 350.99)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.950}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(72.4% 55.68 305.19)", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.200}", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(8.1% 50.49 311.83)", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.900}", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.32% 21.96 302.37)", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.950}", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(8.1% 50.49 311.83)", + $description: "Border color for purple tags.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(9.87% 29.51 28.59)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.900}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.8% 10.22 21.65)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.950}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.87% 29.51 28.59)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(72.11% 52.02 298.43)", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.200}", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(8.15% 49.81 312.23)", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.900}", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.33% 21.62 302.28)", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.950}", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(8.15% 49.81 312.23)", + $description: "Border color for violet tags.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(10.69% 16.28 73.34)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.900}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.06% 4.5 71.6)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.950}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.69% 16.28 73.34)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-border", + attributes: { + category: "component", + type: "tooltip", + item: "border", + themeable: true, + }, + path: ["component", "tooltip", "border"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.white}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(3.66% 1.93 285.7), 0 0 0 4px lch(85.99% 3.77 285.34)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(72% 46.72 350.11)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.200}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-dark-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-dark-desktop-harness.ts new file mode 100644 index 0000000000..b2a160ee2d --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-dark-desktop-harness.ts @@ -0,0 +1,8863 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:42 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.1000}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.200}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(73.78% 60.44 156.25)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.200}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(57.73% 49.65 156.25)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.400}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.05", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.05)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.05", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.white}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.white}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(73.78% 60.44 156.25)", + $description: + "Text color for success badges. Communicates positive status through readable green text.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.200}", + $description: + "Text color for success badges. Communicates positive status through readable green text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-300) l c h / 0.2)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.2)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(72.4% 55.68 305.19)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.200}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-300) l c h / 0.2)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-500) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.500}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.600}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(73.78% 60.44 156.25)", + $description: + "Text color for success buttons. Communicates positive actions through readable green text.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.200}", + $description: + "Text color for success buttons. Communicates positive actions through readable green text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.1)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-300) l c h / 0.2)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-title", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "title", + themeable: true, + }, + path: ["component", "dropdown", "item", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-description", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "description", + themeable: true, + }, + path: ["component", "dropdown", "item", "description"], + }, + delete: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.12)", + $description: + "Green background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Green background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(100% 0 134.54) 0%, lch(63.4% 48.44 281.2) 50%, lch(74.37% 4.52 285.5) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(18.63% 6.73 287.29) 10%, lch(8.25% 4.49 287.18) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(26.73% 7.48 287.06) 10%, lch(18.63% 6.73 287.29) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(66.65% 55.77 156.25)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.300}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.05)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{state.hover}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{state.selected}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.sidebar.background}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(18.63% 6.73 287.29) 0%, lch(26.73% 7.48 287.06) 50%, lch(18.63% 6.73 287.29) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.800}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(66.65% 55.77 156.25)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.300}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(73.08% 34.81 281.21)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.200}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.900}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: "Border color for blue tags. ", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags. ", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(73.38% 45.67 56.65)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.200}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.900}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3% 4.01 51.14)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.950}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: "Border color for brown tags. ", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags. ", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(73.78% 60.44 156.25)", + $description: + "Text color for green tags. Ensures readability while maintaining the green color theme.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.200}", + $description: + "Text color for green tags. Ensures readability while maintaining the green color theme.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(11.35% 18.27 156.36)", + $description: + "Background color for green tags. Creates a distinct surface with green theme styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.900}", + $description: + "Background color for green tags. Creates a distinct surface with green theme styling.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.27% 5.33 156.53)", + $description: + "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.950}", + $description: + "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.35% 18.27 156.36)", + $description: "Border color for green tags.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(72.68% 45.97 284.36)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.200}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.900}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.17% 29.85 290.49)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.950}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(74.24% 53.56 123.85)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.200}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.900}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.2% 4.34 131.4)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.950}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(73.4% 50.15 176.67)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.200}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.900}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.26% 5.16 160.96)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.950}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.900}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(72% 46.72 350.11)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.200}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.900}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.74% 8.62 350.99)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.950}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(72.4% 55.68 305.19)", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.200}", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(8.1% 50.49 311.83)", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.900}", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.32% 21.96 302.37)", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.950}", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(8.1% 50.49 311.83)", + $description: "Border color for purple tags.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(9.87% 29.51 28.59)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.900}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.8% 10.22 21.65)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.950}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.87% 29.51 28.59)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(72.11% 52.02 298.43)", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.200}", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(8.15% 49.81 312.23)", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.900}", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.33% 21.62 302.28)", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.950}", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(8.15% 49.81 312.23)", + $description: "Border color for violet tags.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(10.69% 16.28 73.34)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.900}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.06% 4.5 71.6)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.950}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.69% 16.28 73.34)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-border", + attributes: { + category: "component", + type: "tooltip", + item: "border", + themeable: true, + }, + path: ["component", "tooltip", "border"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.white}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(3.66% 1.93 285.7), 0 0 0 4px lch(56.15% 44.5 246.5)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(72% 46.72 350.11)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.200}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(95.4% 5 238.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(3.09% 7.5 268)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-dark-deuteranopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-dark-deuteranopia-desktop-gitness.ts new file mode 100644 index 0000000000..cab8b8a80a --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-dark-deuteranopia-desktop-gitness.ts @@ -0,0 +1,8840 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:46 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.1000}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.200}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast text.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.2)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(74.82% 51.93 49.87) 35%, lch(65.49% 45.28 239) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.600}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast text.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(74.82% 51.93 49.87) 35%, lch(65.49% 45.28 239) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.12)", + $description: + "Orange background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Orange background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(100% 0 134.54) 0%, lch(63.4% 48.44 281.2) 50%, lch(74.37% 4.52 285.5) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(18.63% 6.73 287.29) 10%, lch(8.25% 4.49 287.18) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(26.73% 7.48 287.06) 10%, lch(18.63% 6.73 287.29) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.hover}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.selected}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.sidebar.background}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(18.63% 6.73 287.29) 0%, lch(26.73% 7.48 287.06) 50%, lch(18.63% 6.73 287.29) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.800}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(73.08% 34.81 281.21)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.200}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.900}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(73.38% 45.67 56.65)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.200}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.900}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3% 4.01 51.14)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.950}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for green tags, replaced with cyan.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags, replaced with cyan.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(72.68% 45.97 284.36)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.200}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.900}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.17% 29.85 290.49)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.950}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(74.24% 53.56 123.85)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.200}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.900}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.2% 4.34 131.4)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.950}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(73.4% 50.15 176.67)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.200}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.900}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.26% 5.16 160.96)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.950}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.900}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(72% 46.72 350.11)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.200}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.900}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.74% 8.62 350.99)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.950}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for purple tags, replaced with cyan.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags, replaced with cyan.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: + "Background color for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.900}", + $description: + "Background color for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: "Border color for red tags, replaced with orange.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags, replaced with orange.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(73.08% 34.81 281.21)", + $description: + "Text color for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.200}", + $description: + "Text color for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: + "Background color for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.900}", + $description: + "Background color for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: "Border color for violet tags, replaced with blue.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags, replaced with blue.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(10.69% 16.28 73.34)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.900}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.06% 4.5 71.6)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.950}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.69% 16.28 73.34)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-border", + attributes: { + category: "component", + type: "tooltip", + item: "border", + themeable: true, + }, + path: ["component", "tooltip", "border"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.white}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(3.66% 1.93 285.7), 0 0 0 4px lch(85.99% 3.77 285.34)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-dark-deuteranopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-dark-deuteranopia-desktop-harness.ts new file mode 100644 index 0000000000..60c39593ba --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-dark-deuteranopia-desktop-harness.ts @@ -0,0 +1,8840 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:46 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.1000}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.200}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast text.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.2)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(74.82% 51.93 49.87) 35%, lch(65.49% 45.28 239) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.600}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast text.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(74.82% 51.93 49.87) 35%, lch(65.49% 45.28 239) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.12)", + $description: + "Orange background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Orange background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(100% 0 134.54) 0%, lch(63.4% 48.44 281.2) 50%, lch(74.37% 4.52 285.5) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(18.63% 6.73 287.29) 10%, lch(8.25% 4.49 287.18) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(26.73% 7.48 287.06) 10%, lch(18.63% 6.73 287.29) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.hover}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.selected}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.sidebar.background}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(18.63% 6.73 287.29) 0%, lch(26.73% 7.48 287.06) 50%, lch(18.63% 6.73 287.29) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.800}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(73.08% 34.81 281.21)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.200}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.900}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(73.38% 45.67 56.65)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.200}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.900}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3% 4.01 51.14)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.950}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for green tags, replaced with cyan.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags, replaced with cyan.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(72.68% 45.97 284.36)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.200}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.900}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.17% 29.85 290.49)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.950}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(74.24% 53.56 123.85)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.200}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.900}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.2% 4.34 131.4)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.950}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(73.4% 50.15 176.67)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.200}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.900}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.26% 5.16 160.96)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.950}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.900}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(72% 46.72 350.11)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.200}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.900}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.74% 8.62 350.99)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.950}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for purple tags, replaced with cyan.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags, replaced with cyan.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: + "Background color for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.900}", + $description: + "Background color for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: "Border color for red tags, replaced with orange.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags, replaced with orange.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(73.08% 34.81 281.21)", + $description: + "Text color for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.200}", + $description: + "Text color for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: + "Background color for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.900}", + $description: + "Background color for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: "Border color for violet tags, replaced with blue.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags, replaced with blue.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(10.69% 16.28 73.34)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.900}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.06% 4.5 71.6)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.950}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.69% 16.28 73.34)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-border", + attributes: { + category: "component", + type: "tooltip", + item: "border", + themeable: true, + }, + path: ["component", "tooltip", "border"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.white}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(3.66% 1.93 285.7), 0 0 0 4px lch(56.15% 44.5 246.5)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(95.4% 5 238.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(3.09% 7.5 268)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-dark-dimmer-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-dark-dimmer-desktop-gitness.ts new file mode 100644 index 0000000000..5d1a9da522 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-dark-dimmer-desktop-gitness.ts @@ -0,0 +1,8822 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:43 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.1000}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(66.65% 55.77 156.25)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.300}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(48.21% 43.17 156.25)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.500}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(37.37% 44.92 77.47)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.600}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(66.65% 55.77 156.25)", + $description: + "Text color for success badges. Communicates positive status through readable green text.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.300}", + $description: + "Text color for success badges. Communicates positive status through readable green text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-300) l c h / 0.2)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.2)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-300) l c h / 0.2)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-500) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.500}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.600}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "1px", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{borderWidth.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(66.65% 55.77 156.25)", + $description: + "Text color for success buttons. Communicates positive actions through readable green text.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.300}", + $description: + "Text color for success buttons. Communicates positive actions through readable green text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.1)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-300) l c h / 0.2)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.12)", + $description: + "Green background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Green background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(50.99% 105.85 309.98)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.400}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(100% 0 134.54) 0%, lch(63.4% 48.44 281.2) 50%, lch(58.08% 6.76 286.02) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(18.63% 6.73 287.29) 10%, lch(8.25% 4.49 287.18) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(26.73% 7.48 287.06) 10%, lch(18.63% 6.73 287.29) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(66.65% 55.77 156.25)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.300}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{state.hover}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{state.selected}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.sidebar.background}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(18.63% 6.73 287.29) 0%, lch(26.73% 7.48 287.06) 50%, lch(18.63% 6.73 287.29) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.800}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(57.73% 49.65 156.25)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.400}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(55.9% 60.21 76.41)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(50.99% 105.85 309.98)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.400}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.900}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: "Border color for blue tags. ", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags. ", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(64.06% 48.96 57.29)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.300}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.900}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3% 4.01 51.14)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.950}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: "Border color for brown tags. ", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags. ", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(66.65% 55.77 156.25)", + $description: + "Text color for green tags. Ensures readability while maintaining the green color theme.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.300}", + $description: + "Text color for green tags. Ensures readability while maintaining the green color theme.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(11.35% 18.27 156.36)", + $description: + "Background color for green tags. Creates a distinct surface with green theme styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.900}", + $description: + "Background color for green tags. Creates a distinct surface with green theme styling.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.27% 5.33 156.53)", + $description: + "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.950}", + $description: + "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.35% 18.27 156.36)", + $description: "Border color for green tags.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(65.79% 58.29 283.92)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.300}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.900}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.17% 29.85 290.49)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.950}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(65.98% 48.66 123.85)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.300}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.900}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.2% 4.34 131.4)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.950}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(66.3% 46.27 176.67)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.300}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.900}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.26% 5.16 160.96)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.950}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.900}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(61.26% 69.37 350)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.300}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.900}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.74% 8.62 350.99)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.950}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(8.1% 50.49 311.83)", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.900}", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.32% 21.96 302.37)", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.950}", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(8.1% 50.49 311.83)", + $description: "Border color for purple tags.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(9.87% 29.51 28.59)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.900}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.8% 10.22 21.65)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.950}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.87% 29.51 28.59)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(65.15% 65.45 298.5)", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.300}", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(8.15% 49.81 312.23)", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.900}", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.33% 21.62 302.28)", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.950}", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(8.15% 49.81 312.23)", + $description: "Border color for violet tags.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(10.69% 16.28 73.34)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.900}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.06% 4.5 71.6)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.950}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.69% 16.28 73.34)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-border", + attributes: { + category: "component", + type: "tooltip", + item: "border", + themeable: true, + }, + path: ["component", "tooltip", "border"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.white}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(2.44% 1.49 285.81), 0 0 0 4px lch(85.99% 3.77 285.34)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(72% 46.72 350.11)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.200}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-dark-dimmer-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-dark-dimmer-desktop-harness.ts new file mode 100644 index 0000000000..c35c8fab9a --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-dark-dimmer-desktop-harness.ts @@ -0,0 +1,8822 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:43 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.1000}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(66.65% 55.77 156.25)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.300}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(48.21% 43.17 156.25)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.500}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(37.37% 44.92 77.47)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.600}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(66.65% 55.77 156.25)", + $description: + "Text color for success badges. Communicates positive status through readable green text.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.300}", + $description: + "Text color for success badges. Communicates positive status through readable green text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-300) l c h / 0.2)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.2)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-300) l c h / 0.2)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-500) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.500}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.600}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "1px", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{borderWidth.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(66.65% 55.77 156.25)", + $description: + "Text color for success buttons. Communicates positive actions through readable green text.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.300}", + $description: + "Text color for success buttons. Communicates positive actions through readable green text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.1)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-300) l c h / 0.2)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.12)", + $description: + "Green background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Green background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(50.99% 105.85 309.98)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.400}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(100% 0 134.54) 0%, lch(63.4% 48.44 281.2) 50%, lch(58.08% 6.76 286.02) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(18.63% 6.73 287.29) 10%, lch(8.25% 4.49 287.18) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(26.73% 7.48 287.06) 10%, lch(18.63% 6.73 287.29) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(66.65% 55.77 156.25)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.300}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{state.hover}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{state.selected}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.sidebar.background}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(18.63% 6.73 287.29) 0%, lch(26.73% 7.48 287.06) 50%, lch(18.63% 6.73 287.29) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.800}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(57.73% 49.65 156.25)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.400}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(55.9% 60.21 76.41)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(50.99% 105.85 309.98)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.400}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.900}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: "Border color for blue tags. ", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags. ", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(64.06% 48.96 57.29)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.300}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.900}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3% 4.01 51.14)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.950}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: "Border color for brown tags. ", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags. ", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(66.65% 55.77 156.25)", + $description: + "Text color for green tags. Ensures readability while maintaining the green color theme.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.300}", + $description: + "Text color for green tags. Ensures readability while maintaining the green color theme.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(11.35% 18.27 156.36)", + $description: + "Background color for green tags. Creates a distinct surface with green theme styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.900}", + $description: + "Background color for green tags. Creates a distinct surface with green theme styling.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.27% 5.33 156.53)", + $description: + "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.950}", + $description: + "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.35% 18.27 156.36)", + $description: "Border color for green tags.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(65.79% 58.29 283.92)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.300}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.900}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.17% 29.85 290.49)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.950}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(65.98% 48.66 123.85)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.300}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.900}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.2% 4.34 131.4)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.950}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(66.3% 46.27 176.67)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.300}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.900}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.26% 5.16 160.96)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.950}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.900}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(61.26% 69.37 350)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.300}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.900}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.74% 8.62 350.99)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.950}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(8.1% 50.49 311.83)", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.900}", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.32% 21.96 302.37)", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.950}", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(8.1% 50.49 311.83)", + $description: "Border color for purple tags.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(9.87% 29.51 28.59)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.900}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.8% 10.22 21.65)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.950}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.87% 29.51 28.59)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(65.15% 65.45 298.5)", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.300}", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(8.15% 49.81 312.23)", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.900}", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.33% 21.62 302.28)", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.950}", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(8.15% 49.81 312.23)", + $description: "Border color for violet tags.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(10.69% 16.28 73.34)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.900}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.06% 4.5 71.6)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.950}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.69% 16.28 73.34)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-border", + attributes: { + category: "component", + type: "tooltip", + item: "border", + themeable: true, + }, + path: ["component", "tooltip", "border"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.white}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(2.44% 1.49 285.81), 0 0 0 4px lch(37.53% 36.5 254)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(72% 46.72 350.11)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.200}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(95.4% 5 238.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(3.09% 7.5 268)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-dark-dimmer-deuteranopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-dark-dimmer-deuteranopia-desktop-gitness.ts new file mode 100644 index 0000000000..0c0a99ff47 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-dark-dimmer-deuteranopia-desktop-gitness.ts @@ -0,0 +1,8822 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:47 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.1000}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(37.37% 44.92 77.47)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.600}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast text.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.2)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(74.82% 51.93 49.87) 35%, lch(65.49% 45.28 239) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.600}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(74.82% 51.93 49.87) 35%, lch(65.49% 45.28 239) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.12)", + $description: + "Orange background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Orange background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(63.4% 48.44 281.2) 50%, lch(58.08% 6.76 286.02) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(18.63% 6.73 287.29) 10%, lch(8.25% 4.49 287.18) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(26.73% 7.48 287.06) 10%, lch(18.63% 6.73 287.29) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.hover}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.selected}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.sidebar.background}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(18.63% 6.73 287.29) 0%, lch(26.73% 7.48 287.06) 50%, lch(18.63% 6.73 287.29) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.800}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Color for success status indicators. Communicates completed or positive states using cyan for deuteranopia accessibility.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Color for success status indicators. Communicates completed or positive states using cyan for deuteranopia accessibility.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Color for danger status indicators. Communicates error or critical warning states using orange for deuteranopia accessibility.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Color for danger status indicators. Communicates error or critical warning states using orange for deuteranopia accessibility.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(55.9% 60.21 76.41)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.900}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(64.06% 48.96 57.29)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.300}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.900}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3% 4.01 51.14)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.950}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Text color for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Text color for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for green tags, replaced with cyan.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags, replaced with cyan.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(65.79% 58.29 283.92)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.300}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.900}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.17% 29.85 290.49)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.950}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(65.98% 48.66 123.85)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.300}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.900}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.2% 4.34 131.4)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.950}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(66.3% 46.27 176.67)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.300}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.900}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.26% 5.16 160.96)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.950}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.900}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(61.26% 69.37 350)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.300}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.900}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.74% 8.62 350.99)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.950}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Text color for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Text color for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for purple tags, replaced with cyan.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags, replaced with cyan.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Text color for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Text color for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: + "Background color for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.900}", + $description: + "Background color for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: "Border color for red tags, replaced with orange.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags, replaced with orange.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Text color for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Text color for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: + "Background color for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.900}", + $description: + "Background color for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: "Border color for violet tags, replaced with blue.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags, replaced with blue.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(10.69% 16.28 73.34)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.900}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.06% 4.5 71.6)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.950}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.69% 16.28 73.34)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-border", + attributes: { + category: "component", + type: "tooltip", + item: "border", + themeable: true, + }, + path: ["component", "tooltip", "border"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.white}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(2.44% 1.49 285.81), 0 0 0 4px lch(85.99% 3.77 285.34)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-dark-dimmer-deuteranopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-dark-dimmer-deuteranopia-desktop-harness.ts new file mode 100644 index 0000000000..c82447aac9 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-dark-dimmer-deuteranopia-desktop-harness.ts @@ -0,0 +1,8822 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:46 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.1000}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(37.37% 44.92 77.47)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.600}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast text.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.2)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(74.82% 51.93 49.87) 35%, lch(65.49% 45.28 239) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.600}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(74.82% 51.93 49.87) 35%, lch(65.49% 45.28 239) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.12)", + $description: + "Orange background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Orange background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(63.4% 48.44 281.2) 50%, lch(58.08% 6.76 286.02) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(18.63% 6.73 287.29) 10%, lch(8.25% 4.49 287.18) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(26.73% 7.48 287.06) 10%, lch(18.63% 6.73 287.29) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.hover}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.selected}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.sidebar.background}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(18.63% 6.73 287.29) 0%, lch(26.73% 7.48 287.06) 50%, lch(18.63% 6.73 287.29) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.800}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Color for success status indicators. Communicates completed or positive states using cyan for deuteranopia accessibility.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Color for success status indicators. Communicates completed or positive states using cyan for deuteranopia accessibility.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Color for danger status indicators. Communicates error or critical warning states using orange for deuteranopia accessibility.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Color for danger status indicators. Communicates error or critical warning states using orange for deuteranopia accessibility.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(55.9% 60.21 76.41)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.900}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(64.06% 48.96 57.29)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.300}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.900}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3% 4.01 51.14)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.950}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Text color for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Text color for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for green tags, replaced with cyan.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags, replaced with cyan.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(65.79% 58.29 283.92)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.300}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.900}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.17% 29.85 290.49)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.950}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(65.98% 48.66 123.85)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.300}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.900}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.2% 4.34 131.4)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.950}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(66.3% 46.27 176.67)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.300}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.900}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.26% 5.16 160.96)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.950}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.900}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(61.26% 69.37 350)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.300}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.900}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.74% 8.62 350.99)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.950}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Text color for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Text color for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for purple tags, replaced with cyan.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags, replaced with cyan.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Text color for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Text color for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: + "Background color for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.900}", + $description: + "Background color for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: "Border color for red tags, replaced with orange.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags, replaced with orange.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Text color for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Text color for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: + "Background color for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.900}", + $description: + "Background color for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: "Border color for violet tags, replaced with blue.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags, replaced with blue.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(10.69% 16.28 73.34)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.900}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.06% 4.5 71.6)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.950}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.69% 16.28 73.34)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-border", + attributes: { + category: "component", + type: "tooltip", + item: "border", + themeable: true, + }, + path: ["component", "tooltip", "border"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.white}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(2.44% 1.49 285.81), 0 0 0 4px lch(37.53% 36.5 254)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(95.4% 5 238.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(3.09% 7.5 268)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-dark-dimmer-protanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-dark-dimmer-protanopia-desktop-gitness.ts new file mode 100644 index 0000000000..985bace731 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-dark-dimmer-protanopia-desktop-gitness.ts @@ -0,0 +1,8822 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:45 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.1000}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(37.37% 44.92 77.47)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.600}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Text color for success badges. Communicates positive status through readable blue text.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Text color for success badges. Communicates positive status through readable blue text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.2)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.2)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-300) l c h / 0.2)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-500) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.500}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.600}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Text color for success buttons. Communicates positive actions through readable blue text.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Text color for success buttons. Communicates positive actions through readable blue text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.1)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.2)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Blue background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Blue background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(50.99% 105.85 309.98)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.400}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(100% 0 134.54) 0%, lch(63.4% 48.44 281.2) 50%, lch(58.08% 6.76 286.02) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(18.63% 6.73 287.29) 10%, lch(8.25% 4.49 287.18) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(26.73% 7.48 287.06) 10%, lch(18.63% 6.73 287.29) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.hover}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.selected}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.sidebar.background}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(18.63% 6.73 287.29) 0%, lch(26.73% 7.48 287.06) 50%, lch(18.63% 6.73 287.29) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.800}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(55.9% 60.21 76.41)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(50.99% 105.85 309.98)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.400}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.900}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(64.06% 48.96 57.29)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.300}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.900}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3% 4.01 51.14)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.950}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Text color for green tags. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Text color for green tags. Adjusted for protanopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: + "Background color for green tags. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.900}", + $description: + "Background color for green tags. Adjusted for protanopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for green tags. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for green tags. Adjusted for protanopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: "Border color for green tags.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(65.79% 58.29 283.92)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.300}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.900}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.17% 29.85 290.49)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.950}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(65.98% 48.66 123.85)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.300}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.900}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.2% 4.34 131.4)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.950}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(66.3% 46.27 176.67)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.300}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.900}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.26% 5.16 160.96)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.950}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.900}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(61.26% 69.37 350)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.300}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.900}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.74% 8.62 350.99)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.950}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(8.1% 50.49 311.83)", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.900}", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.32% 21.96 302.37)", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.950}", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(8.1% 50.49 311.83)", + $description: "Border color for purple tags.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(9.87% 29.51 28.59)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.900}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.8% 10.22 21.65)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.950}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.87% 29.51 28.59)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(65.15% 65.45 298.5)", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.300}", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(8.15% 49.81 312.23)", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.900}", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.33% 21.62 302.28)", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.950}", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(8.15% 49.81 312.23)", + $description: "Border color for violet tags.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(10.69% 16.28 73.34)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.900}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.06% 4.5 71.6)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.950}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.69% 16.28 73.34)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-border", + attributes: { + category: "component", + type: "tooltip", + item: "border", + themeable: true, + }, + path: ["component", "tooltip", "border"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.white}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(2.44% 1.49 285.81), 0 0 0 4px lch(85.99% 3.77 285.34)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(72% 46.72 350.11)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.200}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-dark-dimmer-protanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-dark-dimmer-protanopia-desktop-harness.ts new file mode 100644 index 0000000000..5a07067575 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-dark-dimmer-protanopia-desktop-harness.ts @@ -0,0 +1,8822 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:45 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.1000}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(37.37% 44.92 77.47)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.600}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Text color for success badges. Communicates positive status through readable blue text.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Text color for success badges. Communicates positive status through readable blue text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.2)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.2)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-300) l c h / 0.2)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-500) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.500}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.600}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Text color for success buttons. Communicates positive actions through readable blue text.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Text color for success buttons. Communicates positive actions through readable blue text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.1)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.2)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Blue background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Blue background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(50.99% 105.85 309.98)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.400}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(100% 0 134.54) 0%, lch(63.4% 48.44 281.2) 50%, lch(58.08% 6.76 286.02) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(18.63% 6.73 287.29) 10%, lch(8.25% 4.49 287.18) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(26.73% 7.48 287.06) 10%, lch(18.63% 6.73 287.29) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.hover}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.selected}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.sidebar.background}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(18.63% 6.73 287.29) 0%, lch(26.73% 7.48 287.06) 50%, lch(18.63% 6.73 287.29) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.800}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(55.9% 60.21 76.41)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(50.99% 105.85 309.98)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.400}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.900}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(64.06% 48.96 57.29)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.300}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.900}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3% 4.01 51.14)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.950}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Text color for green tags. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Text color for green tags. Adjusted for protanopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: + "Background color for green tags. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.900}", + $description: + "Background color for green tags. Adjusted for protanopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for green tags. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for green tags. Adjusted for protanopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: "Border color for green tags.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(65.79% 58.29 283.92)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.300}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.900}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.17% 29.85 290.49)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.950}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(65.98% 48.66 123.85)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.300}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.900}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.2% 4.34 131.4)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.950}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(66.3% 46.27 176.67)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.300}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.900}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.26% 5.16 160.96)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.950}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.900}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(61.26% 69.37 350)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.300}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.900}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.74% 8.62 350.99)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.950}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(8.1% 50.49 311.83)", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.900}", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.32% 21.96 302.37)", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.950}", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(8.1% 50.49 311.83)", + $description: "Border color for purple tags.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(9.87% 29.51 28.59)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.900}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.8% 10.22 21.65)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.950}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.87% 29.51 28.59)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(65.15% 65.45 298.5)", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.300}", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(8.15% 49.81 312.23)", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.900}", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.33% 21.62 302.28)", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.950}", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(8.15% 49.81 312.23)", + $description: "Border color for violet tags.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(10.69% 16.28 73.34)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.900}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.06% 4.5 71.6)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.950}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.69% 16.28 73.34)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-border", + attributes: { + category: "component", + type: "tooltip", + item: "border", + themeable: true, + }, + path: ["component", "tooltip", "border"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.white}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(2.44% 1.49 285.81), 0 0 0 4px lch(37.53% 36.5 254)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(72% 46.72 350.11)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.200}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(95.4% 5 238.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(3.09% 7.5 268)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-dark-dimmer-tritanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-dark-dimmer-tritanopia-desktop-gitness.ts new file mode 100644 index 0000000000..1fd3d1c0c1 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-dark-dimmer-tritanopia-desktop-gitness.ts @@ -0,0 +1,8819 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:48 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.1000}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Text color for warning badges. Signals caution states with readable orange text.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Text color for warning badges. Signals caution states with readable orange text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(63.38% 78.04 52.26) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.600}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(63.38% 78.04 52.26) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(100% 0 134.54) 0%, lch(63.4% 48.44 281.2) 50%, lch(58.08% 6.76 286.02) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(18.63% 6.73 287.29) 10%, lch(8.25% 4.49 287.18) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(26.73% 7.48 287.06) 10%, lch(18.63% 6.73 287.29) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed"], + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.hover}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.selected}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.sidebar.background}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(18.63% 6.73 287.29) 0%, lch(26.73% 7.48 287.06) 50%, lch(18.63% 6.73 287.29) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.800}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.900}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(64.06% 48.96 57.29)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.300}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.900}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3% 4.01 51.14)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.950}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Text color for green tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Text color for green tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for green tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for green tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for green tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for green tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for green tags, replaced with cyan.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags, replaced with cyan.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(65.79% 58.29 283.92)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.300}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.900}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.17% 29.85 290.49)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.950}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(65.98% 48.66 123.85)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.300}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.900}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.2% 4.34 131.4)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.950}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(66.3% 46.27 176.67)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.300}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.900}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.26% 5.16 160.96)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.950}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.900}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(61.26% 69.37 350)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.300}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.900}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.74% 8.62 350.99)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.950}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Text color for purple tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Text color for purple tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for purple tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for purple tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for purple tags, replaced with cyan.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags, replaced with cyan.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(9.87% 29.51 28.59)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.900}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.8% 10.22 21.65)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.950}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.87% 29.51 28.59)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Text color for violet tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Text color for violet tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for violet tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for violet tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for violet tags, replaced with cyan.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags, replaced with cyan.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Text color for yellow tags, replaced with orange for tritanopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Text color for yellow tags, replaced with orange for tritanopia visibility.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: + "Background color for yellow tags, replaced with orange for tritanopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.900}", + $description: + "Background color for yellow tags, replaced with orange for tritanopia visibility.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: "Border color for yellow tags, replaced with orange.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags, replaced with orange.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-border", + attributes: { + category: "component", + type: "tooltip", + item: "border", + themeable: true, + }, + path: ["component", "tooltip", "border"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.white}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(2.44% 1.49 285.81), 0 0 0 4px lch(85.99% 3.77 285.34)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(72% 46.72 350.11)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.200}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-dark-dimmer-tritanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-dark-dimmer-tritanopia-desktop-harness.ts new file mode 100644 index 0000000000..962feb6c14 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-dark-dimmer-tritanopia-desktop-harness.ts @@ -0,0 +1,8819 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:48 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.1000}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Text color for warning badges. Signals caution states with readable orange text.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Text color for warning badges. Signals caution states with readable orange text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(63.38% 78.04 52.26) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.600}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(63.38% 78.04 52.26) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(100% 0 134.54) 0%, lch(63.4% 48.44 281.2) 50%, lch(58.08% 6.76 286.02) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(18.63% 6.73 287.29) 10%, lch(8.25% 4.49 287.18) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(26.73% 7.48 287.06) 10%, lch(18.63% 6.73 287.29) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed"], + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.hover}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.selected}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.sidebar.background}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(18.63% 6.73 287.29) 0%, lch(26.73% 7.48 287.06) 50%, lch(18.63% 6.73 287.29) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.800}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.900}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(64.06% 48.96 57.29)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.300}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.900}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3% 4.01 51.14)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.950}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Text color for green tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Text color for green tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for green tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for green tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for green tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for green tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for green tags, replaced with cyan.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags, replaced with cyan.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(65.79% 58.29 283.92)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.300}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.900}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.17% 29.85 290.49)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.950}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(65.98% 48.66 123.85)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.300}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.900}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.2% 4.34 131.4)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.950}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(66.3% 46.27 176.67)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.300}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.900}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.26% 5.16 160.96)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.950}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.900}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(61.26% 69.37 350)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.300}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.900}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.74% 8.62 350.99)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.950}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Text color for purple tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Text color for purple tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for purple tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for purple tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for purple tags, replaced with cyan.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags, replaced with cyan.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(9.87% 29.51 28.59)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.900}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.8% 10.22 21.65)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.950}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.87% 29.51 28.59)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Text color for violet tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Text color for violet tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for violet tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for violet tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for violet tags, replaced with cyan.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags, replaced with cyan.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Text color for yellow tags, replaced with orange for tritanopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Text color for yellow tags, replaced with orange for tritanopia visibility.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: + "Background color for yellow tags, replaced with orange for tritanopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.900}", + $description: + "Background color for yellow tags, replaced with orange for tritanopia visibility.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: "Border color for yellow tags, replaced with orange.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags, replaced with orange.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-border", + attributes: { + category: "component", + type: "tooltip", + item: "border", + themeable: true, + }, + path: ["component", "tooltip", "border"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.white}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(2.44% 1.49 285.81), 0 0 0 4px lch(37.53% 36.5 254)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(72% 46.72 350.11)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.200}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(95.4% 5 238.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(3.09% 7.5 268)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-desktop-gitness.ts new file mode 100644 index 0000000000..3403f9e485 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-desktop-gitness.ts @@ -0,0 +1,8840 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:44 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.1000}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.200}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(73.78% 60.44 156.25)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.200}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(66.65% 55.77 156.25)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.300}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(73.78% 60.44 156.25)", + $description: + "Text color for success badges. Communicates positive status through readable green text.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.200}", + $description: + "Text color for success badges. Communicates positive status through readable green text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-300) l c h / 0.6)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.6)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.6)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.6)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(72.4% 55.68 305.19)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.200}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-300) l c h / 0.6)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-500) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.500}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.600}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(73.78% 60.44 156.25)", + $description: + "Text color for success buttons. Communicates positive actions through readable green text.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.200}", + $description: + "Text color for success buttons. Communicates positive actions through readable green text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.1)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-300) l c h / 0.6)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.6)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.12)", + $description: + "Green background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Green background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(100% 0 134.54) 0%, lch(63.4% 48.44 281.2) 50%, lch(81.33% 4.52 285.46) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(18.63% 6.73 287.29) 10%, lch(8.25% 4.49 287.18) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(26.73% 7.48 287.06) 10%, lch(18.63% 6.73 287.29) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(66.65% 55.77 156.25)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.300}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{state.hover}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{state.selected}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.sidebar.background}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(18.63% 6.73 287.29) 0%, lch(26.73% 7.48 287.06) 50%, lch(18.63% 6.73 287.29) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.800}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(66.65% 55.77 156.25)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.300}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(18.28% 39.2 280.4)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.800}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.28% 39.2 280.4)", + $description: "Border color for blue tags. ", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags. ", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(19.16% 20.96 58.49)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.800}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3% 4.01 51.14)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.950}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.16% 20.96 58.49)", + $description: "Border color for brown tags. ", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags. ", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(91.19% 27.27 156.17)", + $description: + "Text color for green tags. Ensures readability while maintaining the green color theme.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.100}", + $description: + "Text color for green tags. Ensures readability while maintaining the green color theme.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(20.26% 24.09 156.25)", + $description: + "Background color for green tags. Creates a distinct surface with green theme styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.800}", + $description: + "Background color for green tags. Creates a distinct surface with green theme styling.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.27% 5.33 156.53)", + $description: + "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.950}", + $description: + "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(20.26% 24.09 156.25)", + $description: "Border color for green tags.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(14.93% 84.93 302.33)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.800}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.17% 29.85 290.49)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.950}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(14.93% 84.93 302.33)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.100}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(19.97% 21.1 123.91)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.800}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.2% 4.34 131.4)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.950}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.97% 21.1 123.91)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.100}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(20.24% 23.29 164.22)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.800}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.26% 5.16 160.96)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.950}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(20.24% 23.29 164.22)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(18.69% 35.31 45.59)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.800}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.69% 35.31 45.59)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(18.05% 31.95 349.99)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.800}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.74% 8.62 350.99)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.950}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.05% 31.95 349.99)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(89.58% 17.29 301.92)", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.100}", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(15.97% 66.91 311.83)", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.800}", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.32% 21.96 302.37)", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.950}", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(15.97% 66.91 311.83)", + $description: "Border color for purple tags.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(18.31% 42.35 35.83)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.800}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.8% 10.22 21.65)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.950}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.31% 42.35 35.83)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(89.64% 16.29 297.99)", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.100}", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(15.62% 72.5 308.3)", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.800}", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.33% 21.62 302.28)", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.950}", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(15.62% 72.5 308.3)", + $description: "Border color for violet tags.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(19.4% 27.53 77.01)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.800}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.06% 4.5 71.6)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.950}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.4% 27.53 77.01)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-border", + attributes: { + category: "component", + type: "tooltip", + item: "border", + themeable: true, + }, + path: ["component", "tooltip", "border"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.white}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(3.66% 1.93 285.7), 0 0 0 4px lch(85.99% 3.77 285.34)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(72% 46.72 350.11)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.200}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-desktop-harness.ts new file mode 100644 index 0000000000..7c1f4d7490 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-desktop-harness.ts @@ -0,0 +1,8840 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:44 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.1000}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.200}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(73.78% 60.44 156.25)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.200}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(66.65% 55.77 156.25)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.300}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(73.78% 60.44 156.25)", + $description: + "Text color for success badges. Communicates positive status through readable green text.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.200}", + $description: + "Text color for success badges. Communicates positive status through readable green text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-300) l c h / 0.6)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.6)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.6)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.6)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(72.4% 55.68 305.19)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.200}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-300) l c h / 0.6)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-500) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.500}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.600}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(73.78% 60.44 156.25)", + $description: + "Text color for success buttons. Communicates positive actions through readable green text.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.200}", + $description: + "Text color for success buttons. Communicates positive actions through readable green text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.1)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-300) l c h / 0.6)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.6)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.12)", + $description: + "Green background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Green background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(100% 0 134.54) 0%, lch(63.4% 48.44 281.2) 50%, lch(81.33% 4.52 285.46) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(18.63% 6.73 287.29) 10%, lch(8.25% 4.49 287.18) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(26.73% 7.48 287.06) 10%, lch(18.63% 6.73 287.29) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(66.65% 55.77 156.25)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.300}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{state.hover}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{state.selected}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.sidebar.background}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(18.63% 6.73 287.29) 0%, lch(26.73% 7.48 287.06) 50%, lch(18.63% 6.73 287.29) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.800}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(66.65% 55.77 156.25)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.300}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(18.28% 39.2 280.4)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.800}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.28% 39.2 280.4)", + $description: "Border color for blue tags. ", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags. ", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(19.16% 20.96 58.49)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.800}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3% 4.01 51.14)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.950}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.16% 20.96 58.49)", + $description: "Border color for brown tags. ", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags. ", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(91.19% 27.27 156.17)", + $description: + "Text color for green tags. Ensures readability while maintaining the green color theme.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.100}", + $description: + "Text color for green tags. Ensures readability while maintaining the green color theme.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(20.26% 24.09 156.25)", + $description: + "Background color for green tags. Creates a distinct surface with green theme styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.800}", + $description: + "Background color for green tags. Creates a distinct surface with green theme styling.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.27% 5.33 156.53)", + $description: + "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.950}", + $description: + "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(20.26% 24.09 156.25)", + $description: "Border color for green tags.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(14.93% 84.93 302.33)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.800}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.17% 29.85 290.49)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.950}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(14.93% 84.93 302.33)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.100}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(19.97% 21.1 123.91)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.800}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.2% 4.34 131.4)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.950}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.97% 21.1 123.91)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.100}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(20.24% 23.29 164.22)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.800}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.26% 5.16 160.96)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.950}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(20.24% 23.29 164.22)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(18.69% 35.31 45.59)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.800}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.69% 35.31 45.59)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(18.05% 31.95 349.99)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.800}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.74% 8.62 350.99)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.950}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.05% 31.95 349.99)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(89.58% 17.29 301.92)", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.100}", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(15.97% 66.91 311.83)", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.800}", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.32% 21.96 302.37)", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.950}", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(15.97% 66.91 311.83)", + $description: "Border color for purple tags.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(18.31% 42.35 35.83)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.800}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.8% 10.22 21.65)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.950}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.31% 42.35 35.83)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(89.64% 16.29 297.99)", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.100}", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(15.62% 72.5 308.3)", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.800}", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.33% 21.62 302.28)", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.950}", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(15.62% 72.5 308.3)", + $description: "Border color for violet tags.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(19.4% 27.53 77.01)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.800}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.06% 4.5 71.6)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.950}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.4% 27.53 77.01)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-border", + attributes: { + category: "component", + type: "tooltip", + item: "border", + themeable: true, + }, + path: ["component", "tooltip", "border"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.white}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(3.66% 1.93 285.7), 0 0 0 4px lch(65.49% 45.28 239)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(72% 46.72 350.11)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.200}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(95.4% 5 238.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(3.09% 7.5 268)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-deuteranopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-deuteranopia-desktop-gitness.ts new file mode 100644 index 0000000000..d880a5d491 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-deuteranopia-desktop-gitness.ts @@ -0,0 +1,8845 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:47 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.1000}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.200}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast orange text.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast orange text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.6)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.6)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.6)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.6)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.6)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(74.82% 51.93 49.87) 35%, lch(65.49% 45.28 239) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.600}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.6)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.6)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(74.82% 51.93 49.87) 35%, lch(65.49% 45.28 239) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: + "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.12)", + $description: + "Orange background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Orange background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(100% 0 134.54) 0%, lch(63.4% 48.44 281.2) 50%, lch(81.33% 4.52 285.46) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(18.63% 6.73 287.29) 10%, lch(8.25% 4.49 287.18) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(26.73% 7.48 287.06) 10%, lch(18.63% 6.73 287.29) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.hover}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.selected}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.sidebar.background}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(18.63% 6.73 287.29) 0%, lch(26.73% 7.48 287.06) 50%, lch(18.63% 6.73 287.29) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.800}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(18.28% 39.2 280.4)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.800}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.28% 39.2 280.4)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(19.16% 20.96 58.49)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.800}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3% 4.01 51.14)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.950}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.16% 20.96 58.49)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Text color for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Text color for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: + "Background color for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + $description: + "Background color for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: "Border color for green tags, replaced with cyan.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags, replaced with cyan.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(14.93% 84.93 302.33)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.800}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.17% 29.85 290.49)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.950}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(14.93% 84.93 302.33)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.100}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(19.97% 21.1 123.91)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.800}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.2% 4.34 131.4)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.950}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.97% 21.1 123.91)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.100}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(20.24% 23.29 164.22)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.800}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.26% 5.16 160.96)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.950}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(20.24% 23.29 164.22)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(18.69% 35.31 45.59)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.800}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.69% 35.31 45.59)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(18.05% 31.95 349.99)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.800}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.74% 8.62 350.99)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.950}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.05% 31.95 349.99)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Text color for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Text color for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: + "Background color for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + $description: + "Background color for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: "Border color for purple tags, replaced with cyan.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags, replaced with cyan.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Text color for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Text color for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(18.69% 35.31 45.59)", + $description: + "Background color for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.800}", + $description: + "Background color for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.69% 35.31 45.59)", + $description: "Border color for red tags, replaced with orange.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags, replaced with orange.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Text color for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Text color for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(18.28% 39.2 280.4)", + $description: + "Background color for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.800}", + $description: + "Background color for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.28% 39.2 280.4)", + $description: "Border color for violet tags, replaced with blue.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags, replaced with blue.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(19.4% 27.53 77.01)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.800}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.06% 4.5 71.6)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.950}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.4% 27.53 77.01)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-border", + attributes: { + category: "component", + type: "tooltip", + item: "border", + themeable: true, + }, + path: ["component", "tooltip", "border"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.white}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(3.66% 1.93 285.7), 0 0 0 4px lch(85.99% 3.77 285.34)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: + "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: + "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: + "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: + "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-deuteranopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-deuteranopia-desktop-harness.ts new file mode 100644 index 0000000000..b99b9b2ee2 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-deuteranopia-desktop-harness.ts @@ -0,0 +1,8845 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:47 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.1000}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.200}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast orange text.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast orange text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.6)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.6)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.6)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.6)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.6)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(74.82% 51.93 49.87) 35%, lch(65.49% 45.28 239) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.600}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.6)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.6)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(74.82% 51.93 49.87) 35%, lch(65.49% 45.28 239) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: + "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.12)", + $description: + "Orange background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Orange background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(100% 0 134.54) 0%, lch(63.4% 48.44 281.2) 50%, lch(81.33% 4.52 285.46) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(18.63% 6.73 287.29) 10%, lch(8.25% 4.49 287.18) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(26.73% 7.48 287.06) 10%, lch(18.63% 6.73 287.29) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.hover}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.selected}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.sidebar.background}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(18.63% 6.73 287.29) 0%, lch(26.73% 7.48 287.06) 50%, lch(18.63% 6.73 287.29) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.800}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(18.28% 39.2 280.4)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.800}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.28% 39.2 280.4)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(19.16% 20.96 58.49)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.800}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3% 4.01 51.14)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.950}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.16% 20.96 58.49)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Text color for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Text color for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: + "Background color for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + $description: + "Background color for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: "Border color for green tags, replaced with cyan.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags, replaced with cyan.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(14.93% 84.93 302.33)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.800}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.17% 29.85 290.49)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.950}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(14.93% 84.93 302.33)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.100}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(19.97% 21.1 123.91)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.800}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.2% 4.34 131.4)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.950}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.97% 21.1 123.91)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.100}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(20.24% 23.29 164.22)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.800}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.26% 5.16 160.96)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.950}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(20.24% 23.29 164.22)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(18.69% 35.31 45.59)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.800}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.69% 35.31 45.59)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(18.05% 31.95 349.99)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.800}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.74% 8.62 350.99)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.950}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.05% 31.95 349.99)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Text color for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Text color for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: + "Background color for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + $description: + "Background color for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: "Border color for purple tags, replaced with cyan.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags, replaced with cyan.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Text color for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Text color for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(18.69% 35.31 45.59)", + $description: + "Background color for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.800}", + $description: + "Background color for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.69% 35.31 45.59)", + $description: "Border color for red tags, replaced with orange.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags, replaced with orange.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Text color for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Text color for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(18.28% 39.2 280.4)", + $description: + "Background color for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.800}", + $description: + "Background color for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.28% 39.2 280.4)", + $description: "Border color for violet tags, replaced with blue.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags, replaced with blue.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(19.4% 27.53 77.01)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.800}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.06% 4.5 71.6)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.950}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.4% 27.53 77.01)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-border", + attributes: { + category: "component", + type: "tooltip", + item: "border", + themeable: true, + }, + path: ["component", "tooltip", "border"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.white}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(3.66% 1.93 285.7), 0 0 0 4px lch(65.49% 45.28 239)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: + "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: + "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: + "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: + "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(95.4% 5 238.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(3.09% 7.5 268)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-protanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-protanopia-desktop-gitness.ts new file mode 100644 index 0000000000..9fde989d42 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-protanopia-desktop-gitness.ts @@ -0,0 +1,8840 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:46 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.1000}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.200}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(73.08% 34.81 281.21)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.200}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(73.08% 34.81 281.21)", + $description: + "Text color for success badges. Communicates positive status through readable blue text.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.200}", + $description: + "Text color for success badges. Communicates positive status through readable blue text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.6)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.6)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.6)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.6)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(72.4% 55.68 305.19)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.200}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-300) l c h / 0.6)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-500) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.500}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.600}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(73.08% 34.81 281.21)", + $description: + "Text color for success buttons. Communicates positive actions through readable blue text.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.200}", + $description: + "Text color for success buttons. Communicates positive actions through readable blue text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.1)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.6)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.6)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Blue background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Blue background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(100% 0 134.54) 0%, lch(63.4% 48.44 281.2) 50%, lch(81.33% 4.52 285.46) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(18.63% 6.73 287.29) 10%, lch(8.25% 4.49 287.18) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(26.73% 7.48 287.06) 10%, lch(18.63% 6.73 287.29) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.hover}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.selected}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.sidebar.background}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(18.63% 6.73 287.29) 0%, lch(26.73% 7.48 287.06) 50%, lch(18.63% 6.73 287.29) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.800}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(18.28% 39.2 280.4)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.800}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.28% 39.2 280.4)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(19.16% 20.96 58.49)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.800}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3% 4.01 51.14)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.950}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.16% 20.96 58.49)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Text color for green tags. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Text color for green tags. Adjusted for protanopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(18.28% 39.2 280.4)", + $description: + "Background color for green tags. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.800}", + $description: + "Background color for green tags. Adjusted for protanopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for green tags. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for green tags. Adjusted for protanopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.28% 39.2 280.4)", + $description: "Border color for green tags.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(14.93% 84.93 302.33)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.800}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.17% 29.85 290.49)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.950}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(14.93% 84.93 302.33)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.100}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(19.97% 21.1 123.91)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.800}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.2% 4.34 131.4)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.950}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.97% 21.1 123.91)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.100}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(20.24% 23.29 164.22)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.800}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.26% 5.16 160.96)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.950}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(20.24% 23.29 164.22)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(18.69% 35.31 45.59)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.800}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.69% 35.31 45.59)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(18.05% 31.95 349.99)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.800}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.74% 8.62 350.99)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.950}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.05% 31.95 349.99)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(89.58% 17.29 301.92)", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.100}", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(15.97% 66.91 311.83)", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.800}", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.32% 21.96 302.37)", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.950}", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(15.97% 66.91 311.83)", + $description: "Border color for purple tags.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(18.31% 42.35 35.83)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.800}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.8% 10.22 21.65)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.950}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.31% 42.35 35.83)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(89.64% 16.29 297.99)", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.100}", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(15.62% 72.5 308.3)", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.800}", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.33% 21.62 302.28)", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.950}", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(15.62% 72.5 308.3)", + $description: "Border color for violet tags.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(19.4% 27.53 77.01)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.800}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.06% 4.5 71.6)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.950}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.4% 27.53 77.01)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-border", + attributes: { + category: "component", + type: "tooltip", + item: "border", + themeable: true, + }, + path: ["component", "tooltip", "border"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.white}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(3.66% 1.93 285.7), 0 0 0 4px lch(85.99% 3.77 285.34)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(72% 46.72 350.11)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.200}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-protanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-protanopia-desktop-harness.ts new file mode 100644 index 0000000000..ea90c184d6 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-protanopia-desktop-harness.ts @@ -0,0 +1,8840 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:45 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.1000}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.200}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(73.08% 34.81 281.21)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.200}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(73.08% 34.81 281.21)", + $description: + "Text color for success badges. Communicates positive status through readable blue text.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.200}", + $description: + "Text color for success badges. Communicates positive status through readable blue text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.6)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.6)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.6)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.6)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(72.4% 55.68 305.19)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.200}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-300) l c h / 0.6)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-500) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.500}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.600}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(73.08% 34.81 281.21)", + $description: + "Text color for success buttons. Communicates positive actions through readable blue text.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.200}", + $description: + "Text color for success buttons. Communicates positive actions through readable blue text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.1)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.6)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.6)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Blue background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Blue background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(100% 0 134.54) 0%, lch(63.4% 48.44 281.2) 50%, lch(81.33% 4.52 285.46) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(18.63% 6.73 287.29) 10%, lch(8.25% 4.49 287.18) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(26.73% 7.48 287.06) 10%, lch(18.63% 6.73 287.29) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.hover}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.selected}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.sidebar.background}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(18.63% 6.73 287.29) 0%, lch(26.73% 7.48 287.06) 50%, lch(18.63% 6.73 287.29) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.800}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(18.28% 39.2 280.4)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.800}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.28% 39.2 280.4)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(19.16% 20.96 58.49)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.800}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3% 4.01 51.14)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.950}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.16% 20.96 58.49)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Text color for green tags. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Text color for green tags. Adjusted for protanopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(18.28% 39.2 280.4)", + $description: + "Background color for green tags. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.800}", + $description: + "Background color for green tags. Adjusted for protanopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for green tags. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for green tags. Adjusted for protanopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.28% 39.2 280.4)", + $description: "Border color for green tags.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(14.93% 84.93 302.33)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.800}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.17% 29.85 290.49)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.950}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(14.93% 84.93 302.33)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.100}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(19.97% 21.1 123.91)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.800}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.2% 4.34 131.4)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.950}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.97% 21.1 123.91)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.100}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(20.24% 23.29 164.22)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.800}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.26% 5.16 160.96)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.950}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(20.24% 23.29 164.22)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(18.69% 35.31 45.59)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.800}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.69% 35.31 45.59)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(18.05% 31.95 349.99)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.800}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.74% 8.62 350.99)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.950}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.05% 31.95 349.99)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(89.58% 17.29 301.92)", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.100}", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(15.97% 66.91 311.83)", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.800}", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.32% 21.96 302.37)", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.950}", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(15.97% 66.91 311.83)", + $description: "Border color for purple tags.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(18.31% 42.35 35.83)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.800}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.8% 10.22 21.65)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.950}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.31% 42.35 35.83)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(89.64% 16.29 297.99)", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.100}", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(15.62% 72.5 308.3)", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.800}", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.33% 21.62 302.28)", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.950}", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(15.62% 72.5 308.3)", + $description: "Border color for violet tags.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(19.4% 27.53 77.01)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.800}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.06% 4.5 71.6)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.950}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.4% 27.53 77.01)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-border", + attributes: { + category: "component", + type: "tooltip", + item: "border", + themeable: true, + }, + path: ["component", "tooltip", "border"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.white}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(3.66% 1.93 285.7), 0 0 0 4px lch(65.49% 45.28 239)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(72% 46.72 350.11)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.200}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(95.4% 5 238.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(3.09% 7.5 268)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-tritanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-tritanopia-desktop-gitness.ts new file mode 100644 index 0000000000..40abea4615 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-tritanopia-desktop-gitness.ts @@ -0,0 +1,8840 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:49 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.1000}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.6)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.6)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for warning badges. Signals caution states with readable orange text.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for warning badges. Signals caution states with readable orange text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.6)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.6)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.6)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.02% 17.62 61.56) 0%, lch(72% 46.72 350.11) 35%, lch(65.49% 45.28 239) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.600}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.6)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.6)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.02% 17.62 61.56) 0%, lch(72% 46.72 350.11) 35%, lch(65.49% 45.28 239) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(100% 0 134.54) 0%, lch(63.4% 48.44 281.2) 50%, lch(81.33% 4.52 285.46) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(18.63% 6.73 287.29) 10%, lch(8.25% 4.49 287.18) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(26.73% 7.48 287.06) 10%, lch(18.63% 6.73 287.29) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.hover}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.selected}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.sidebar.background}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(18.63% 6.73 287.29) 0%, lch(26.73% 7.48 287.06) 50%, lch(18.63% 6.73 287.29) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(18.28% 39.2 280.4)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.800}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.28% 39.2 280.4)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(19.16% 20.96 58.49)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.800}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3% 4.01 51.14)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.950}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.16% 20.96 58.49)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Text color for green tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Text color for green tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: + "Background color for green tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + $description: + "Background color for green tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for green tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for green tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: "Border color for green tags, replaced with cyan.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags, replaced with cyan.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(14.93% 84.93 302.33)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.800}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.17% 29.85 290.49)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.950}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(14.93% 84.93 302.33)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.100}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(19.97% 21.1 123.91)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.800}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.2% 4.34 131.4)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.950}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.97% 21.1 123.91)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.100}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(20.24% 23.29 164.22)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.800}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.26% 5.16 160.96)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.950}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(20.24% 23.29 164.22)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(18.69% 35.31 45.59)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.800}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.69% 35.31 45.59)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(18.05% 31.95 349.99)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.800}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.74% 8.62 350.99)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.950}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.05% 31.95 349.99)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Text color for purple tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Text color for purple tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: + "Background color for purple tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + $description: + "Background color for purple tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: "Border color for purple tags, replaced with cyan.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags, replaced with cyan.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(18.31% 42.35 35.83)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.800}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.8% 10.22 21.65)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.950}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.31% 42.35 35.83)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Text color for violet tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Text color for violet tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: + "Background color for violet tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + $description: + "Background color for violet tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: "Border color for violet tags, replaced with cyan.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags, replaced with cyan.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Text color for yellow tags, replaced with orange for tritanopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Text color for yellow tags, replaced with orange for tritanopia visibility.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(18.69% 35.31 45.59)", + $description: + "Background color for yellow tags, replaced with orange for tritanopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.800}", + $description: + "Background color for yellow tags, replaced with orange for tritanopia visibility.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.69% 35.31 45.59)", + $description: "Border color for yellow tags, replaced with orange.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags, replaced with orange.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-border", + attributes: { + category: "component", + type: "tooltip", + item: "border", + themeable: true, + }, + path: ["component", "tooltip", "border"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.white}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(2.44% 1.49 285.81), 0 0 0 4px lch(65.49% 45.28 239)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(72% 46.72 350.11)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.200}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-tritanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-tritanopia-desktop-harness.ts new file mode 100644 index 0000000000..b5933efac9 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-tritanopia-desktop-harness.ts @@ -0,0 +1,8840 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:49 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.1000}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.6)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.6)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for warning badges. Signals caution states with readable orange text.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for warning badges. Signals caution states with readable orange text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.6)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.6)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.6)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.02% 17.62 61.56) 0%, lch(72% 46.72 350.11) 35%, lch(65.49% 45.28 239) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.600}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.6)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.6)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.02% 17.62 61.56) 0%, lch(72% 46.72 350.11) 35%, lch(65.49% 45.28 239) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(100% 0 134.54) 0%, lch(63.4% 48.44 281.2) 50%, lch(81.33% 4.52 285.46) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(18.63% 6.73 287.29) 10%, lch(8.25% 4.49 287.18) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(26.73% 7.48 287.06) 10%, lch(18.63% 6.73 287.29) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.hover}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.selected}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.sidebar.background}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(18.63% 6.73 287.29) 0%, lch(26.73% 7.48 287.06) 50%, lch(18.63% 6.73 287.29) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(18.28% 39.2 280.4)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.800}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.28% 39.2 280.4)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(19.16% 20.96 58.49)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.800}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3% 4.01 51.14)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.950}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.16% 20.96 58.49)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Text color for green tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Text color for green tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: + "Background color for green tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + $description: + "Background color for green tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for green tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for green tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: "Border color for green tags, replaced with cyan.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags, replaced with cyan.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(14.93% 84.93 302.33)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.800}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.17% 29.85 290.49)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.950}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(14.93% 84.93 302.33)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.100}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(19.97% 21.1 123.91)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.800}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.2% 4.34 131.4)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.950}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.97% 21.1 123.91)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.100}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(20.24% 23.29 164.22)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.800}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.26% 5.16 160.96)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.950}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(20.24% 23.29 164.22)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(18.69% 35.31 45.59)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.800}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.69% 35.31 45.59)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(18.05% 31.95 349.99)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.800}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.74% 8.62 350.99)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.950}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.05% 31.95 349.99)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Text color for purple tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Text color for purple tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: + "Background color for purple tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + $description: + "Background color for purple tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: "Border color for purple tags, replaced with cyan.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags, replaced with cyan.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(18.31% 42.35 35.83)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.800}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.8% 10.22 21.65)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.950}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.31% 42.35 35.83)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Text color for violet tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Text color for violet tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: + "Background color for violet tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + $description: + "Background color for violet tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: "Border color for violet tags, replaced with cyan.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags, replaced with cyan.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Text color for yellow tags, replaced with orange for tritanopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Text color for yellow tags, replaced with orange for tritanopia visibility.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(18.69% 35.31 45.59)", + $description: + "Background color for yellow tags, replaced with orange for tritanopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.800}", + $description: + "Background color for yellow tags, replaced with orange for tritanopia visibility.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.69% 35.31 45.59)", + $description: "Border color for yellow tags, replaced with orange.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags, replaced with orange.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-border", + attributes: { + category: "component", + type: "tooltip", + item: "border", + themeable: true, + }, + path: ["component", "tooltip", "border"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.white}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(2.44% 1.49 285.81), 0 0 0 4px lch(65.49% 45.28 239)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(72% 46.72 350.11)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.200}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(95.4% 5 238.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(3.09% 7.5 268)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-dark-protanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-dark-protanopia-desktop-gitness.ts new file mode 100644 index 0000000000..86baba1336 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-dark-protanopia-desktop-gitness.ts @@ -0,0 +1,8840 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:45 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.1000}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.200}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(73.08% 34.81 281.21)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.200}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(55.9% 60.21 76.41)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(73.08% 34.81 281.21)", + $description: + "Text color for success badges. Communicates positive status through readable blue text.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.200}", + $description: + "Text color for success badges. Communicates positive status through readable blue text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.2)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.2)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(72.4% 55.68 305.19)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.200}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-300) l c h / 0.2)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-500) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.500}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.600}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(73.08% 34.81 281.21)", + $description: + "Text color for success buttons. Communicates positive actions through readable blue text.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.200}", + $description: + "Text color for success buttons. Communicates positive actions through readable blue text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.1)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.2)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Blue background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Blue background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(100% 0 134.54) 0%, lch(63.4% 48.44 281.2) 50%, lch(74.37% 4.52 285.5) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(18.63% 6.73 287.29) 10%, lch(8.25% 4.49 287.18) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(26.73% 7.48 287.06) 10%, lch(18.63% 6.73 287.29) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.hover}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.selected}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.sidebar.background}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(18.63% 6.73 287.29) 0%, lch(26.73% 7.48 287.06) 50%, lch(18.63% 6.73 287.29) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.800}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(73.08% 34.81 281.21)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.200}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.900}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(73.38% 45.67 56.65)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.200}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.900}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3% 4.01 51.14)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.950}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(73.08% 34.81 281.21)", + $description: + "Text color for green tags. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.200}", + $description: + "Text color for green tags. Adjusted for protanopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: + "Background color for green tags. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.900}", + $description: + "Background color for green tags. Adjusted for protanopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for green tags. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for green tags. Adjusted for protanopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: "Border color for green tags.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(72.68% 45.97 284.36)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.200}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.900}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.17% 29.85 290.49)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.950}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(74.24% 53.56 123.85)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.200}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.900}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.2% 4.34 131.4)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.950}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(73.4% 50.15 176.67)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.200}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.900}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.26% 5.16 160.96)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.950}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.900}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(72% 46.72 350.11)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.200}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.900}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.74% 8.62 350.99)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.950}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(72.4% 55.68 305.19)", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.200}", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(8.1% 50.49 311.83)", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.900}", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.32% 21.96 302.37)", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.950}", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(8.1% 50.49 311.83)", + $description: "Border color for purple tags.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(9.87% 29.51 28.59)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.900}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.8% 10.22 21.65)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.950}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.87% 29.51 28.59)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(72.11% 52.02 298.43)", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.200}", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(8.15% 49.81 312.23)", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.900}", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.33% 21.62 302.28)", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.950}", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(8.15% 49.81 312.23)", + $description: "Border color for violet tags.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(10.69% 16.28 73.34)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.900}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.06% 4.5 71.6)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.950}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.69% 16.28 73.34)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-border", + attributes: { + category: "component", + type: "tooltip", + item: "border", + themeable: true, + }, + path: ["component", "tooltip", "border"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.white}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(3.66% 1.93 285.7), 0 0 0 4px lch(85.99% 3.77 285.34)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(72% 46.72 350.11)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.200}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-dark-protanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-dark-protanopia-desktop-harness.ts new file mode 100644 index 0000000000..eda6552b1c --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-dark-protanopia-desktop-harness.ts @@ -0,0 +1,8840 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:44 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.1000}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.200}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(73.08% 34.81 281.21)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.200}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(55.9% 60.21 76.41)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(73.08% 34.81 281.21)", + $description: + "Text color for success badges. Communicates positive status through readable blue text.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.200}", + $description: + "Text color for success badges. Communicates positive status through readable blue text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.2)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.2)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(72.4% 55.68 305.19)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.200}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-300) l c h / 0.2)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-500) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.500}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.600}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(73.08% 34.81 281.21)", + $description: + "Text color for success buttons. Communicates positive actions through readable blue text.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.200}", + $description: + "Text color for success buttons. Communicates positive actions through readable blue text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.1)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.2)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Blue background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Blue background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(100% 0 134.54) 0%, lch(63.4% 48.44 281.2) 50%, lch(74.37% 4.52 285.5) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(18.63% 6.73 287.29) 10%, lch(8.25% 4.49 287.18) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(26.73% 7.48 287.06) 10%, lch(18.63% 6.73 287.29) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.hover}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.selected}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.sidebar.background}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(18.63% 6.73 287.29) 0%, lch(26.73% 7.48 287.06) 50%, lch(18.63% 6.73 287.29) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.800}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(73.08% 34.81 281.21)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.200}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.900}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(73.38% 45.67 56.65)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.200}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.900}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3% 4.01 51.14)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.950}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(73.08% 34.81 281.21)", + $description: + "Text color for green tags. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.200}", + $description: + "Text color for green tags. Adjusted for protanopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: + "Background color for green tags. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.900}", + $description: + "Background color for green tags. Adjusted for protanopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for green tags. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for green tags. Adjusted for protanopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: "Border color for green tags.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(72.68% 45.97 284.36)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.200}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.900}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.17% 29.85 290.49)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.950}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(74.24% 53.56 123.85)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.200}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.900}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.2% 4.34 131.4)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.950}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(73.4% 50.15 176.67)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.200}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.900}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.26% 5.16 160.96)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.950}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.900}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(72% 46.72 350.11)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.200}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.900}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.74% 8.62 350.99)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.950}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(72.4% 55.68 305.19)", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.200}", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(8.1% 50.49 311.83)", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.900}", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.32% 21.96 302.37)", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.950}", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(8.1% 50.49 311.83)", + $description: "Border color for purple tags.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(9.87% 29.51 28.59)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.900}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.8% 10.22 21.65)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.950}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.87% 29.51 28.59)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(72.11% 52.02 298.43)", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.200}", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(8.15% 49.81 312.23)", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.900}", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.33% 21.62 302.28)", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.950}", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(8.15% 49.81 312.23)", + $description: "Border color for violet tags.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(10.69% 16.28 73.34)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.900}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.06% 4.5 71.6)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.950}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.69% 16.28 73.34)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-border", + attributes: { + category: "component", + type: "tooltip", + item: "border", + themeable: true, + }, + path: ["component", "tooltip", "border"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.white}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(3.66% 1.93 285.7), 0 0 0 4px lch(56.15% 44.5 246.5)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(72% 46.72 350.11)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.200}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(95.4% 5 238.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(3.09% 7.5 268)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-dark-tritanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-dark-tritanopia-desktop-gitness.ts new file mode 100644 index 0000000000..0f19924c28 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-dark-tritanopia-desktop-gitness.ts @@ -0,0 +1,8840 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:48 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.1000}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.200}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for warning badges. Signals caution states with readable orange text.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for warning badges. Signals caution states with readable orange text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(63.38% 78.04 52.26) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.600}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(63.38% 78.04 52.26) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(100% 0 134.54) 0%, lch(63.4% 48.44 281.2) 50%, lch(74.37% 4.52 285.5) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(18.63% 6.73 287.29) 10%, lch(8.25% 4.49 287.18) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(26.73% 7.48 287.06) 10%, lch(18.63% 6.73 287.29) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.hover}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.selected}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.sidebar.background}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(18.63% 6.73 287.29) 0%, lch(26.73% 7.48 287.06) 50%, lch(18.63% 6.73 287.29) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.800}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(73.08% 34.81 281.21)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.200}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.900}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(73.38% 45.67 56.65)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.200}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.900}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3% 4.01 51.14)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.950}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for green tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for green tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for green tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for green tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for green tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for green tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for green tags, replaced with cyan.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags, replaced with cyan.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(72.68% 45.97 284.36)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.200}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.900}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.17% 29.85 290.49)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.950}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(74.24% 53.56 123.85)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.200}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.900}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.2% 4.34 131.4)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.950}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(73.4% 50.15 176.67)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.200}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.900}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.26% 5.16 160.96)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.950}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.900}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(72% 46.72 350.11)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.200}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.900}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.74% 8.62 350.99)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.950}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for purple tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for purple tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for purple tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for purple tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for purple tags, replaced with cyan.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags, replaced with cyan.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(9.87% 29.51 28.59)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.900}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.8% 10.22 21.65)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.950}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.87% 29.51 28.59)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for violet tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for violet tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for violet tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for violet tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for violet tags, replaced with cyan.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags, replaced with cyan.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for yellow tags, replaced with orange for tritanopia visibility.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for yellow tags, replaced with orange for tritanopia visibility.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: + "Background color for yellow tags, replaced with orange for tritanopia visibility.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.900}", + $description: + "Background color for yellow tags, replaced with orange for tritanopia visibility.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: "Border color for yellow tags, replaced with orange.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags, replaced with orange.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-border", + attributes: { + category: "component", + type: "tooltip", + item: "border", + themeable: true, + }, + path: ["component", "tooltip", "border"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.white}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(3.66% 1.93 285.7), 0 0 0 4px lch(85.99% 3.77 285.34)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(72% 46.72 350.11)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.200}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-dark-tritanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-dark-tritanopia-desktop-harness.ts new file mode 100644 index 0000000000..381ca7ebd3 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-dark-tritanopia-desktop-harness.ts @@ -0,0 +1,8840 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:48 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.1000}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.200}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for warning badges. Signals caution states with readable orange text.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for warning badges. Signals caution states with readable orange text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(63.38% 78.04 52.26) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.600}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(90.23% 26.34 77.18) 0%, lch(72% 46.72 350.11) 35%, lch(63.38% 78.04 52.26) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(100% 0 134.54) 0%, lch(63.4% 48.44 281.2) 50%, lch(74.37% 4.52 285.5) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(18.63% 6.73 287.29) 10%, lch(8.25% 4.49 287.18) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(26.73% 7.48 287.06) 10%, lch(18.63% 6.73 287.29) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.hover}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.selected}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.sidebar.background}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(18.63% 6.73 287.29) 0%, lch(26.73% 7.48 287.06) 50%, lch(18.63% 6.73 287.29) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.800}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(73.08% 34.81 281.21)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.200}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.900}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.52% 22.28 283.9)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.950}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.63% 33.17 284.31)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(73.38% 45.67 56.65)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.200}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.900}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3% 4.01 51.14)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.950}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.55% 13.64 57.69)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for green tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for green tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for green tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for green tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for green tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for green tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for green tags, replaced with cyan.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags, replaced with cyan.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(72.68% 45.97 284.36)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.200}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.900}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.17% 29.85 290.49)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.950}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(7.38% 63.51 302.14)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(74.24% 53.56 123.85)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.200}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.900}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.2% 4.34 131.4)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.950}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.12% 14.71 126.9)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(73.4% 50.15 176.67)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.200}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.900}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.26% 5.16 160.96)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.950}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(11.35% 18.26 160.23)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.900}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(72% 46.72 350.11)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.200}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.900}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.74% 8.62 350.99)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.950}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.69% 23.89 349.99)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for purple tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for purple tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for purple tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for purple tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for purple tags, replaced with cyan.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags, replaced with cyan.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(9.87% 29.51 28.59)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.900}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.8% 10.22 21.65)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.950}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(9.87% 29.51 28.59)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(74.15% 29 241)", + $description: + "Text color for violet tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Text color for violet tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: + "Background color for violet tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + $description: + "Background color for violet tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(3.09% 7.5 268)", + $description: + "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + $description: + "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + $description: "Border color for violet tags, replaced with cyan.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags, replaced with cyan.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Text color for yellow tags, replaced with orange for tritanopia visibility.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Text color for yellow tags, replaced with orange for tritanopia visibility.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: + "Background color for yellow tags, replaced with orange for tritanopia visibility.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.900}", + $description: + "Background color for yellow tags, replaced with orange for tritanopia visibility.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(2.93% 6.64 36.42)", + $description: + "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.950}", + $description: + "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(10.26% 21.63 42.58)", + $description: "Border color for yellow tags, replaced with orange.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags, replaced with orange.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-border", + attributes: { + category: "component", + type: "tooltip", + item: "border", + themeable: true, + }, + path: ["component", "tooltip", "border"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.black}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.pure.white}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(3.66% 1.93 285.7), 0 0 0 4px lch(56.15% 44.5 246.5)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(72% 46.72 350.11)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.200}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(95.4% 5 238.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(3.09% 7.5 268)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-light-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-light-desktop-gitness.ts new file mode 100644 index 0000000000..9693ee2eea --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-light-desktop-gitness.ts @@ -0,0 +1,8854 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:43 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(38.71% 37.07 156.25)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.600}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(57.73% 49.65 156.25)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.400}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(18.31% 42.35 35.83)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.800}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.2)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(38.71% 37.07 156.25)", + $description: + "Text color for success badges. Communicates positive status through readable green text.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.600}", + $description: + "Text color for success badges. Communicates positive status through readable green text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-400) l c h / 0.2)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.400}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-200) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.200}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(37.37% 44.92 77.47)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.600}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-400) l c h / 0.2)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(32.21% 100.98 311.83)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.600}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-400) l c h / 0.2)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.400}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-300) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.300}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(61.26% 69.37 350) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.500}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(38.71% 37.07 156.25)", + $description: + "Text color for success buttons. Communicates positive actions through readable green text.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.600}", + $description: + "Text color for success buttons. Communicates positive actions through readable green text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-200) l c h / 0.12)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.200}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-400) l c h / 0.25)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.400}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-200) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.200}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-200) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.200}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.12)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(61.26% 69.37 350) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.12)", + $description: + "Green background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Green background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(32.21% 100.98 311.83)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.600}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(54.29% 60.55 281.11) 50%, lch(26.73% 7.48 287.06) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(100% 0 134.54) 10%, lch(98.27% 0.36 135.2) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(98.27% 0.36 135.2) 10%, lch(90.71% 0.38 284.93) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.4) 30%, lch(63.38% 78.04 52.26) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(57.73% 49.65 156.25)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.400}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "2px", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{borderWidth.2}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(100% 0 134.54) 50%, lch(90.71% 0.38 284.93) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.700}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(66.65% 55.77 156.25)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.300}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: "Border color for blue tags. ", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags. ", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(37.01% 31.77 57.67)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.600}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.55% 12.75 93.47)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.50}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: "Border color for brown tags. ", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags. ", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(38.71% 37.07 156.25)", + $description: + "Text color for green tags. Ensures readability while maintaining the green color theme.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.600}", + $description: + "Text color for green tags. Ensures readability while maintaining the green color theme.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(91.19% 27.27 156.17)", + $description: + "Background color for green tags. Creates a distinct surface with green theme styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.100}", + $description: + "Background color for green tags. Creates a distinct surface with green theme styling.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.82% 11.79 156.15)", + $description: + "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.50}", + $description: + "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.19% 27.27 156.17)", + $description: "Border color for green tags.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(30.63% 128.3 302.36)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.600}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 6.03 283.32)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.50}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(38.26% 32.05 123.88)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.600}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.100}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.86% 15.3 127.41)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.50}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(38.59% 33.16 169.14)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.600}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.100}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.82% 11.97 171.06)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.50}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(35.34% 48.39 349.99)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.600}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.15% 5.42 350.29)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.50}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(32.21% 100.98 311.83)", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.600}", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(89.58% 17.29 301.92)", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.100}", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.14% 7 301.11)", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.50}", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.58% 17.29 301.92)", + $description: "Border color for purple tags.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 5.25 32.59)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.50}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(31.46% 113.1 306.9)", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.600}", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(89.64% 16.29 297.99)", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.100}", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.18% 6.31 296.62)", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.50}", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.64% 16.29 297.99)", + $description: "Border color for violet tags.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(37.37% 44.92 77.47)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.600}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.62% 18.31 92.87)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.50}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(98.27% 0.36 135.2), 0 0 0 4px lch(8.25% 4.49 287.18)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(61.26% 69.37 350)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.300}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.4)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-light-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-light-desktop-harness.ts new file mode 100644 index 0000000000..7cfc379efe --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-light-desktop-harness.ts @@ -0,0 +1,8854 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:43 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(38.71% 37.07 156.25)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.600}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(57.73% 49.65 156.25)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.400}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(18.31% 42.35 35.83)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.800}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.2)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(38.71% 37.07 156.25)", + $description: + "Text color for success badges. Communicates positive status through readable green text.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.600}", + $description: + "Text color for success badges. Communicates positive status through readable green text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-400) l c h / 0.2)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.400}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-200) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.200}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(37.37% 44.92 77.47)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.600}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-400) l c h / 0.2)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(32.21% 100.98 311.83)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.600}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-400) l c h / 0.2)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.400}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-300) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.300}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(61.26% 69.37 350) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.500}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(38.71% 37.07 156.25)", + $description: + "Text color for success buttons. Communicates positive actions through readable green text.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.600}", + $description: + "Text color for success buttons. Communicates positive actions through readable green text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-200) l c h / 0.12)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.200}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-400) l c h / 0.25)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.400}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-200) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.200}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-200) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.200}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.12)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(61.26% 69.37 350) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.12)", + $description: + "Green background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Green background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(32.21% 100.98 311.83)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.600}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(54.29% 60.55 281.11) 50%, lch(26.73% 7.48 287.06) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(100% 0 134.54) 10%, lch(98.27% 0.36 135.2) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(98.27% 0.36 135.2) 10%, lch(90.71% 0.38 284.93) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.4) 30%, lch(63.38% 78.04 52.26) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(57.73% 49.65 156.25)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.400}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "2px", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{borderWidth.2}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(100% 0 134.54) 50%, lch(90.71% 0.38 284.93) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.700}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(66.65% 55.77 156.25)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.300}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: "Border color for blue tags. ", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags. ", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(37.01% 31.77 57.67)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.600}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.55% 12.75 93.47)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.50}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: "Border color for brown tags. ", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags. ", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(38.71% 37.07 156.25)", + $description: + "Text color for green tags. Ensures readability while maintaining the green color theme.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.600}", + $description: + "Text color for green tags. Ensures readability while maintaining the green color theme.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(91.19% 27.27 156.17)", + $description: + "Background color for green tags. Creates a distinct surface with green theme styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.100}", + $description: + "Background color for green tags. Creates a distinct surface with green theme styling.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.82% 11.79 156.15)", + $description: + "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.50}", + $description: + "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.19% 27.27 156.17)", + $description: "Border color for green tags.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(30.63% 128.3 302.36)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.600}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 6.03 283.32)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.50}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(38.26% 32.05 123.88)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.600}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.100}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.86% 15.3 127.41)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.50}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(38.59% 33.16 169.14)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.600}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.100}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.82% 11.97 171.06)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.50}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(35.34% 48.39 349.99)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.600}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.15% 5.42 350.29)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.50}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(32.21% 100.98 311.83)", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.600}", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(89.58% 17.29 301.92)", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.100}", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.14% 7 301.11)", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.50}", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.58% 17.29 301.92)", + $description: "Border color for purple tags.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 5.25 32.59)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.50}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(31.46% 113.1 306.9)", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.600}", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(89.64% 16.29 297.99)", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.100}", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.18% 6.31 296.62)", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.50}", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.64% 16.29 297.99)", + $description: "Border color for violet tags.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(37.37% 44.92 77.47)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.600}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.62% 18.31 92.87)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.50}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(98.27% 0.36 135.2), 0 0 0 4px lch(46.84% 41.5 250)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(61.26% 69.37 350)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.300}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.4)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(95.4% 5 238.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(3.09% 7.5 268)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-light-deuteranopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-light-deuteranopia-desktop-gitness.ts new file mode 100644 index 0000000000..66fd5dc7c5 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-light-deuteranopia-desktop-gitness.ts @@ -0,0 +1,8854 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:52 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(18.69% 35.31 45.59)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast orange text.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.800}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast orange text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.2)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.2)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(37.37% 44.92 77.47)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.600}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-400) l c h / 0.2)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.2)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(61.26% 69.37 350) 35%, lch(65.49% 45.28 239) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.500}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.12)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.25)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.12)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(61.26% 69.37 350) 35%, lch(65.49% 45.28 239) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.12)", + $description: + "Orange background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Orange background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(54.29% 60.55 281.11) 50%, lch(26.73% 7.48 287.06) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(100% 0 134.54) 10%, lch(98.27% 0.36 135.2) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(98.27% 0.36 135.2) 10%, lch(90.71% 0.38 284.93) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.4) 30%, lch(63.38% 78.04 52.26) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "2px", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{borderWidth.2}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(100% 0 134.54) 50%, lch(90.71% 0.38 284.93) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.700}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(37.01% 31.77 57.67)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.600}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.55% 12.75 93.47)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.50}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for green tags, replaced with cyan.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags, replaced with cyan.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(30.63% 128.3 302.36)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.600}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 6.03 283.32)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.50}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(38.26% 32.05 123.88)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.600}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.100}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.86% 15.3 127.41)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.50}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(38.59% 33.16 169.14)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.600}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.100}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.82% 11.97 171.06)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.50}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(35.34% 48.39 349.99)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.600}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.15% 5.42 350.29)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.50}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for purple tags, replaced with cyan.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags, replaced with cyan.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Text color for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Text color for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for red tags, replaced with orange.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags, replaced with orange.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Text color for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Text color for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: "Border color for violet tags, replaced with blue.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags, replaced with blue.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(37.37% 44.92 77.47)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.600}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.62% 18.31 92.87)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.50}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(98.27% 0.36 135.2), 0 0 0 4px lch(8.25% 4.49 287.18)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(61.26% 69.37 350)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.300}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.4)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-light-deuteranopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-light-deuteranopia-desktop-harness.ts new file mode 100644 index 0000000000..bcc1d01679 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-light-deuteranopia-desktop-harness.ts @@ -0,0 +1,8854 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:52 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(18.69% 35.31 45.59)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast orange text.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.800}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast orange text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.2)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.2)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(37.37% 44.92 77.47)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.600}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-400) l c h / 0.2)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.2)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(61.26% 69.37 350) 35%, lch(65.49% 45.28 239) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.500}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.12)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.25)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.12)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(61.26% 69.37 350) 35%, lch(65.49% 45.28 239) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.12)", + $description: + "Orange background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Orange background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(54.29% 60.55 281.11) 50%, lch(26.73% 7.48 287.06) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(100% 0 134.54) 10%, lch(98.27% 0.36 135.2) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(98.27% 0.36 135.2) 10%, lch(90.71% 0.38 284.93) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.4) 30%, lch(63.38% 78.04 52.26) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "2px", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{borderWidth.2}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(100% 0 134.54) 50%, lch(90.71% 0.38 284.93) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.700}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(37.01% 31.77 57.67)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.600}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.55% 12.75 93.47)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.50}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for green tags, replaced with cyan.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags, replaced with cyan.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(30.63% 128.3 302.36)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.600}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 6.03 283.32)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.50}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(38.26% 32.05 123.88)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.600}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.100}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.86% 15.3 127.41)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.50}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(38.59% 33.16 169.14)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.600}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.100}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.82% 11.97 171.06)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.50}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(35.34% 48.39 349.99)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.600}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.15% 5.42 350.29)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.50}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for purple tags, replaced with cyan.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags, replaced with cyan.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Text color for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Text color for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for red tags, replaced with orange.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags, replaced with orange.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Text color for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Text color for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: "Border color for violet tags, replaced with blue.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags, replaced with blue.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(37.37% 44.92 77.47)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.600}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.62% 18.31 92.87)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.50}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(98.27% 0.36 135.2), 0 0 0 4px lch(46.84% 41.5 250)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(61.26% 69.37 350)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.300}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.4)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(95.4% 5 238.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(3.09% 7.5 268)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-light-dimmer-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-light-dimmer-desktop-gitness.ts new file mode 100644 index 0000000000..2e15b9ea91 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-light-dimmer-desktop-gitness.ts @@ -0,0 +1,8871 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:49 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(48.21% 43.17 156.25)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.500}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(66.65% 55.77 156.25)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.300}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(55.9% 60.21 76.41)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.1)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.08)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.15)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.07)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.3)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(48.21% 43.17 156.25)", + $description: + "Text color for success badges. Communicates positive status through readable green text.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.500}", + $description: + "Text color for success badges. Communicates positive status through readable green text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-300) l c h / 0.3)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-200) l c h / 0.07)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.200}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.3)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.07)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.3)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.07)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.3)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.07)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(40.58% 118.62 311.84)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.500}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-300) l c h / 0.3)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-300) l c h / 0.07)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.300}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(61.26% 69.37 350) 35%, lch(61.28% 80.51 307.53) 65%, lch(65.49% 45.28 239) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.500}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(48.21% 43.17 156.25)", + $description: + "Text color for success buttons. Communicates positive actions through readable green text.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.500}", + $description: + "Text color for success buttons. Communicates positive actions through readable green text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-200) l c h / 0.08)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.200}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-300) l c h / 0.3)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-200) l c h / 0.1)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.200}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-200) l c h / 0.15)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.200}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.08)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.3)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(61.26% 69.37 350) 35%, lch(61.28% 80.51 307.53) 65%, lch(65.49% 45.28 239) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.07)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.08)", + $description: + "Green background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Green background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.12)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.15)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.08)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.08)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(40.58% 118.62 311.84)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.500}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(54.29% 60.55 281.11) 50%, lch(46.46% 7.5 286.37) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(100% 0 134.54) 10%, lch(98.27% 0.36 135.2) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(98.27% 0.36 135.2) 10%, lch(90.71% 0.38 284.93) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.3) 30%, lch(63.38% 78.04 52.26) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(66.65% 55.77 156.25)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.300}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(100% 0 134.54) 50%, lch(90.71% 0.38 284.93) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(66.65% 55.77 156.25)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.300}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.07)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: "Border color for blue tags. ", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags. ", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(37.01% 31.77 57.67)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.600}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.55% 12.75 93.47)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.50}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: "Border color for brown tags. ", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags. ", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(38.71% 37.07 156.25)", + $description: + "Text color for green tags. Ensures readability while maintaining the green color theme.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.600}", + $description: + "Text color for green tags. Ensures readability while maintaining the green color theme.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(91.19% 27.27 156.17)", + $description: + "Background color for green tags. Creates a distinct surface with green theme styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.100}", + $description: + "Background color for green tags. Creates a distinct surface with green theme styling.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.82% 11.79 156.15)", + $description: + "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.50}", + $description: + "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.19% 27.27 156.17)", + $description: "Border color for green tags.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(42.04% 107.17 295.8)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.500}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 6.03 283.32)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.50}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(38.26% 32.05 123.88)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.600}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.100}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.86% 15.3 127.41)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.50}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(38.59% 33.16 169.14)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.600}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.100}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.82% 11.97 171.06)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.50}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(44.27% 56.78 349.99)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.500}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.15% 5.42 350.29)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.50}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(40.58% 118.62 311.84)", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.500}", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(89.58% 17.29 301.92)", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.100}", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.14% 7 301.11)", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.50}", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.58% 17.29 301.92)", + $description: "Border color for purple tags.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 5.25 32.59)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.50}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(40.56% 121.68 305.61)", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.500}", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(89.64% 16.29 297.99)", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.100}", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.18% 6.31 296.62)", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.50}", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.64% 16.29 297.99)", + $description: "Border color for violet tags.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(37.37% 44.92 77.47)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.600}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.62% 18.31 92.87)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.50}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + $description: + "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: "0 0 0 2px lch(100% 0 134.54), 0 0 0 4px lch(8.25% 4.49 287.18)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(61.26% 69.37 350)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.300}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.3)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-light-dimmer-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-light-dimmer-desktop-harness.ts new file mode 100644 index 0000000000..8c917ce879 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-light-dimmer-desktop-harness.ts @@ -0,0 +1,8871 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:49 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(48.21% 43.17 156.25)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.500}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(66.65% 55.77 156.25)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.300}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(55.9% 60.21 76.41)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.1)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.08)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.15)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.07)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.3)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(48.21% 43.17 156.25)", + $description: + "Text color for success badges. Communicates positive status through readable green text.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.500}", + $description: + "Text color for success badges. Communicates positive status through readable green text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-300) l c h / 0.3)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-200) l c h / 0.07)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.200}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.3)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.07)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.3)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.07)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.3)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.07)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(40.58% 118.62 311.84)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.500}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-300) l c h / 0.3)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-300) l c h / 0.07)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.300}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(61.26% 69.37 350) 35%, lch(61.28% 80.51 307.53) 65%, lch(65.49% 45.28 239) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.500}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(48.21% 43.17 156.25)", + $description: + "Text color for success buttons. Communicates positive actions through readable green text.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.500}", + $description: + "Text color for success buttons. Communicates positive actions through readable green text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-200) l c h / 0.08)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.200}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-300) l c h / 0.3)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-200) l c h / 0.1)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.200}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-200) l c h / 0.15)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.200}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.08)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.3)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(61.26% 69.37 350) 35%, lch(61.28% 80.51 307.53) 65%, lch(65.49% 45.28 239) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.07)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.08)", + $description: + "Green background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Green background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.12)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-500) l c h / 0.15)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.08)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.08)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(40.58% 118.62 311.84)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.500}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(54.29% 60.55 281.11) 50%, lch(46.46% 7.5 286.37) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(100% 0 134.54) 10%, lch(98.27% 0.36 135.2) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(98.27% 0.36 135.2) 10%, lch(90.71% 0.38 284.93) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.3) 30%, lch(63.38% 78.04 52.26) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(66.65% 55.77 156.25)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.300}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(100% 0 134.54) 50%, lch(90.71% 0.38 284.93) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(66.65% 55.77 156.25)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.300}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.07)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: "Border color for blue tags. ", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags. ", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(37.01% 31.77 57.67)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.600}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.55% 12.75 93.47)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.50}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: "Border color for brown tags. ", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags. ", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(38.71% 37.07 156.25)", + $description: + "Text color for green tags. Ensures readability while maintaining the green color theme.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.600}", + $description: + "Text color for green tags. Ensures readability while maintaining the green color theme.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(91.19% 27.27 156.17)", + $description: + "Background color for green tags. Creates a distinct surface with green theme styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.100}", + $description: + "Background color for green tags. Creates a distinct surface with green theme styling.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.82% 11.79 156.15)", + $description: + "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.50}", + $description: + "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.19% 27.27 156.17)", + $description: "Border color for green tags.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(42.04% 107.17 295.8)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.500}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 6.03 283.32)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.50}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(38.26% 32.05 123.88)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.600}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.100}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.86% 15.3 127.41)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.50}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(38.59% 33.16 169.14)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.600}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.100}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.82% 11.97 171.06)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.50}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(44.27% 56.78 349.99)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.500}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.15% 5.42 350.29)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.50}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(40.58% 118.62 311.84)", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.500}", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(89.58% 17.29 301.92)", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.100}", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.14% 7 301.11)", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.50}", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.58% 17.29 301.92)", + $description: "Border color for purple tags.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 5.25 32.59)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.50}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(40.56% 121.68 305.61)", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.500}", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(89.64% 16.29 297.99)", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.100}", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.18% 6.31 296.62)", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.50}", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.64% 16.29 297.99)", + $description: "Border color for violet tags.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(37.37% 44.92 77.47)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.600}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.62% 18.31 92.87)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.50}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + $description: + "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: "0 0 0 2px lch(100% 0 134.54), 0 0 0 4px lch(46.84% 41.5 250)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(61.26% 69.37 350)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.300}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.3)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(95.4% 5 238.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(3.09% 7.5 268)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-light-dimmer-deuteranopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-light-dimmer-deuteranopia-desktop-gitness.ts new file mode 100644 index 0000000000..8bd357ea56 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-light-dimmer-deuteranopia-desktop-gitness.ts @@ -0,0 +1,8871 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:52 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(55.9% 60.21 76.41)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.1)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast orange text.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast orange text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.08)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.15)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.07)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.3)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.3)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.07)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.3)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.07)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.3)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.07)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.3)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.07)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.3)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.07)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(63.38% 78.04 52.26) 35%, lch(65.49% 45.28 239) 65%, lch(65.49% 45.28 239) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.500}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.08)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.3)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.1)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.15)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.08)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.3)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.15)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(63.38% 78.04 52.26) 35%, lch(65.49% 45.28 239) 65%, lch(65.49% 45.28 239) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.07)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.08)", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.08)", + $description: + "Orange background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Orange background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.12)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.15)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.08)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Visited state color for text links, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Visited state color for text links, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(54.29% 60.55 281.11) 50%, lch(46.46% 7.5 286.37) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(100% 0 134.54) 10%, lch(98.27% 0.36 135.2) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(98.27% 0.36 135.2) 10%, lch(90.71% 0.38 284.93) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.3) 30%, lch(63.38% 78.04 52.26) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(100% 0 134.54) 50%, lch(90.71% 0.38 284.93) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.07)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(37.01% 31.77 57.67)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.600}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.55% 12.75 93.47)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.50}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for green tags, replaced with cyan.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags, replaced with cyan.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(42.04% 107.17 295.8)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.500}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 6.03 283.32)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.50}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(38.26% 32.05 123.88)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.600}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.100}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.86% 15.3 127.41)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.50}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(38.59% 33.16 169.14)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.600}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.100}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.82% 11.97 171.06)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.50}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(44.27% 56.78 349.99)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.500}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.15% 5.42 350.29)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.50}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Text color for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Text color for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for purple tags, replaced with cyan.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags, replaced with cyan.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Text color for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Text color for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for red tags, replaced with orange.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags, replaced with orange.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Text color for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Text color for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: "Border color for violet tags, replaced with blue.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags, replaced with blue.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(37.37% 44.92 77.47)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.600}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.62% 18.31 92.87)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.50}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + $description: + "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: "0 0 0 2px lch(100% 0 134.54), 0 0 0 4px lch(8.25% 4.49 287.18)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.3)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-light-dimmer-deuteranopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-light-dimmer-deuteranopia-desktop-harness.ts new file mode 100644 index 0000000000..4d94213ae0 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-light-dimmer-deuteranopia-desktop-harness.ts @@ -0,0 +1,8871 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:52 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(55.9% 60.21 76.41)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.1)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast orange text.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast orange text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.08)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.15)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.07)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.3)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.3)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.07)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.3)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.07)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.3)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.07)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.3)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.07)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.3)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.07)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(63.38% 78.04 52.26) 35%, lch(65.49% 45.28 239) 65%, lch(65.49% 45.28 239) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.500}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.08)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.3)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.1)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.15)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.08)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.3)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.15)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(63.38% 78.04 52.26) 35%, lch(65.49% 45.28 239) 65%, lch(65.49% 45.28 239) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.07)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.08)", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.08)", + $description: + "Orange background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Orange background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.12)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.15)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.08)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Visited state color for text links, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Visited state color for text links, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(54.29% 60.55 281.11) 50%, lch(46.46% 7.5 286.37) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(100% 0 134.54) 10%, lch(98.27% 0.36 135.2) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(98.27% 0.36 135.2) 10%, lch(90.71% 0.38 284.93) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.3) 30%, lch(63.38% 78.04 52.26) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(100% 0 134.54) 50%, lch(90.71% 0.38 284.93) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.07)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(37.01% 31.77 57.67)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.600}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.55% 12.75 93.47)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.50}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for green tags, replaced with cyan.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags, replaced with cyan.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(42.04% 107.17 295.8)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.500}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 6.03 283.32)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.50}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(38.26% 32.05 123.88)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.600}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.100}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.86% 15.3 127.41)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.50}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(38.59% 33.16 169.14)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.600}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.100}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.82% 11.97 171.06)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.50}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(44.27% 56.78 349.99)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.500}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.15% 5.42 350.29)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.50}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Text color for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Text color for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for purple tags, replaced with cyan.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags, replaced with cyan.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Text color for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Text color for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for red tags, replaced with orange.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags, replaced with orange.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Text color for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Text color for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: "Border color for violet tags, replaced with blue.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags, replaced with blue.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(37.37% 44.92 77.47)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.600}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.62% 18.31 92.87)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.50}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + $description: + "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: "0 0 0 2px lch(100% 0 134.54), 0 0 0 4px lch(46.84% 41.5 250)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.3)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(95.4% 5 238.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(3.09% 7.5 268)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-light-dimmer-protanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-light-dimmer-protanopia-desktop-gitness.ts new file mode 100644 index 0000000000..f43c30ad3f --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-light-dimmer-protanopia-desktop-gitness.ts @@ -0,0 +1,8877 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:51 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states. Using blue instead of green for protanopia visibility.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states. Using blue instead of green for protanopia visibility.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Border color for success containers. Reinforces positive status through visual framing. Using blue instead of green for protanopia visibility.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Border color for success containers. Reinforces positive status through visual framing. Using blue instead of green for protanopia visibility.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(55.9% 60.21 76.41)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.1)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.08)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.15)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.07)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.3)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Text color for success badges. Communicates positive status through readable blue text. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Text color for success badges. Communicates positive status through readable blue text. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.3)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-200) l c h / 0.07)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.200}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.3)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.07)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.3)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.07)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.3)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.07)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(40.58% 118.62 311.84)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.500}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-300) l c h / 0.3)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-300) l c h / 0.07)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.300}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(61.26% 69.37 350) 35%, lch(61.28% 80.51 307.53) 65%, lch(65.49% 45.28 239) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.500}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Text color for success buttons. Communicates positive actions through readable blue text. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Text color for success buttons. Communicates positive actions through readable blue text. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-200) l c h / 0.08)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.200}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.3)", + $description: + "Border color for success buttons. Provides definition for positive action buttons. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-200) l c h / 0.1)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.200}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-200) l c h / 0.15)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.200}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.08)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.3)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(61.26% 69.37 350) 35%, lch(61.28% 80.51 307.53) 65%, lch(65.49% 45.28 239) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.07)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.08)", + $description: + "Blue background highlighting newly added code lines while maintaining readability. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Blue background highlighting newly added code lines while maintaining readability. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for line numbers of added code, providing visual connection to added content. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.15)", + $description: + "Stronger emphasis color for specific character changes within added lines. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Stronger emphasis color for specific character changes within added lines. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.08)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.08)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(40.58% 118.62 311.84)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.500}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(54.29% 60.55 281.11) 50%, lch(46.46% 7.5 286.37) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(100% 0 134.54) 10%, lch(98.27% 0.36 135.2) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(98.27% 0.36 135.2) 10%, lch(90.71% 0.38 284.93) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.3) 30%, lch(63.38% 78.04 52.26) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(100% 0 134.54) 50%, lch(90.71% 0.38 284.93) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Color for success status indicators. Communicates completed or positive states. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Color for success status indicators. Communicates completed or positive states. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.07)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(37.01% 31.77 57.67)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.600}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.55% 12.75 93.47)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.50}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Text color for green tags. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Text color for green tags. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for green tags. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for green tags. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for green tags. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for green tags. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Border color for green tags. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: + "Border color for green tags. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(42.04% 107.17 295.8)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.500}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 6.03 283.32)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.50}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Text color for lime tags. Using blue instead of lime/green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Text color for lime tags. Using blue instead of lime/green for protanopia visibility.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for lime tags. Using blue instead of lime/green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for lime tags. Using blue instead of lime/green for protanopia visibility.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for lime tags. Using blue instead of lime/green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for lime tags. Using blue instead of lime/green for protanopia visibility.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Border color for lime tags. Using blue instead of lime/green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: + "Border color for lime tags. Using blue instead of lime/green for protanopia visibility.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Text color for mint tags. Using blue instead of mint/green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Text color for mint tags. Using blue instead of mint/green for protanopia visibility.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for mint tags. Using blue instead of mint/green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for mint tags. Using blue instead of mint/green for protanopia visibility.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for mint tags. Using blue instead of mint/green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for mint tags. Using blue instead of mint/green for protanopia visibility.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Border color for mint tags. Using blue instead of mint/green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: + "Border color for mint tags. Using blue instead of mint/green for protanopia visibility.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(44.27% 56.78 349.99)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.500}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.15% 5.42 350.29)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.50}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(40.58% 118.62 311.84)", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.500}", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(89.58% 17.29 301.92)", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.100}", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.14% 7 301.11)", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.50}", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.58% 17.29 301.92)", + $description: "Border color for purple tags.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 5.25 32.59)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.50}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(40.56% 121.68 305.61)", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.500}", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(89.64% 16.29 297.99)", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.100}", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.18% 6.31 296.62)", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.50}", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.64% 16.29 297.99)", + $description: "Border color for violet tags.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(37.37% 44.92 77.47)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.600}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.62% 18.31 92.87)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.50}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + $description: + "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: "0 0 0 2px lch(100% 0 134.54), 0 0 0 4px lch(8.25% 4.49 287.18)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(61.26% 69.37 350)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.300}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.3)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-light-dimmer-protanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-light-dimmer-protanopia-desktop-harness.ts new file mode 100644 index 0000000000..3c574d1799 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-light-dimmer-protanopia-desktop-harness.ts @@ -0,0 +1,8877 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:51 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states. Using blue instead of green for protanopia visibility.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states. Using blue instead of green for protanopia visibility.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Border color for success containers. Reinforces positive status through visual framing. Using blue instead of green for protanopia visibility.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Border color for success containers. Reinforces positive status through visual framing. Using blue instead of green for protanopia visibility.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(55.9% 60.21 76.41)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.1)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.08)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.15)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.07)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.3)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Text color for success badges. Communicates positive status through readable blue text. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Text color for success badges. Communicates positive status through readable blue text. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.3)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-200) l c h / 0.07)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.200}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.3)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.07)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.3)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.07)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.3)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.07)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(40.58% 118.62 311.84)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.500}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-300) l c h / 0.3)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-300) l c h / 0.07)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.300}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(61.26% 69.37 350) 35%, lch(61.28% 80.51 307.53) 65%, lch(65.49% 45.28 239) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.500}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Text color for success buttons. Communicates positive actions through readable blue text. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Text color for success buttons. Communicates positive actions through readable blue text. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-200) l c h / 0.08)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.200}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.3)", + $description: + "Border color for success buttons. Provides definition for positive action buttons. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-200) l c h / 0.1)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.200}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-200) l c h / 0.15)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.200}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.08)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.3)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(61.26% 69.37 350) 35%, lch(61.28% 80.51 307.53) 65%, lch(65.49% 45.28 239) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.07)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.08)", + $description: + "Blue background highlighting newly added code lines while maintaining readability. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Blue background highlighting newly added code lines while maintaining readability. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for line numbers of added code, providing visual connection to added content. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.15)", + $description: + "Stronger emphasis color for specific character changes within added lines. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Stronger emphasis color for specific character changes within added lines. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.08)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.08)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(40.58% 118.62 311.84)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.500}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(54.29% 60.55 281.11) 50%, lch(46.46% 7.5 286.37) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(100% 0 134.54) 10%, lch(98.27% 0.36 135.2) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(98.27% 0.36 135.2) 10%, lch(90.71% 0.38 284.93) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.3) 30%, lch(63.38% 78.04 52.26) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(100% 0 134.54) 50%, lch(90.71% 0.38 284.93) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Color for success status indicators. Communicates completed or positive states. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Color for success status indicators. Communicates completed or positive states. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.07)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(37.01% 31.77 57.67)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.600}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.55% 12.75 93.47)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.50}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Text color for green tags. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Text color for green tags. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for green tags. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for green tags. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for green tags. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for green tags. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Border color for green tags. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: + "Border color for green tags. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(42.04% 107.17 295.8)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.500}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 6.03 283.32)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.50}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Text color for lime tags. Using blue instead of lime/green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Text color for lime tags. Using blue instead of lime/green for protanopia visibility.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for lime tags. Using blue instead of lime/green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for lime tags. Using blue instead of lime/green for protanopia visibility.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for lime tags. Using blue instead of lime/green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for lime tags. Using blue instead of lime/green for protanopia visibility.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Border color for lime tags. Using blue instead of lime/green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: + "Border color for lime tags. Using blue instead of lime/green for protanopia visibility.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Text color for mint tags. Using blue instead of mint/green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Text color for mint tags. Using blue instead of mint/green for protanopia visibility.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for mint tags. Using blue instead of mint/green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for mint tags. Using blue instead of mint/green for protanopia visibility.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for mint tags. Using blue instead of mint/green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for mint tags. Using blue instead of mint/green for protanopia visibility.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Border color for mint tags. Using blue instead of mint/green for protanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: + "Border color for mint tags. Using blue instead of mint/green for protanopia visibility.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(44.27% 56.78 349.99)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.500}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.15% 5.42 350.29)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.50}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(40.58% 118.62 311.84)", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.500}", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(89.58% 17.29 301.92)", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.100}", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.14% 7 301.11)", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.50}", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.58% 17.29 301.92)", + $description: "Border color for purple tags.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 5.25 32.59)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.50}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(40.56% 121.68 305.61)", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.500}", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(89.64% 16.29 297.99)", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.100}", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.18% 6.31 296.62)", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.50}", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.64% 16.29 297.99)", + $description: "Border color for violet tags.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(37.37% 44.92 77.47)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.600}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.62% 18.31 92.87)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.50}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + $description: + "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: "0 0 0 2px lch(100% 0 134.54), 0 0 0 4px lch(46.84% 41.5 250)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(61.26% 69.37 350)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.300}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.3)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(95.4% 5 238.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(3.09% 7.5 268)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-light-dimmer-tritanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-light-dimmer-tritanopia-desktop-gitness.ts new file mode 100644 index 0000000000..675dc18bb0 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-light-dimmer-tritanopia-desktop-gitness.ts @@ -0,0 +1,8871 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:54 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.1)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.08)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.15)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.07)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.3)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.3)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.07)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.3)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.07)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Text color for warning badges. Signals caution states with readable orange text.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Text color for warning badges. Signals caution states with readable orange text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.3)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-200) l c h / 0.07)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.200}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.3)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.07)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.3)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.07)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(74.82% 51.93 49.87) 0%, lch(61.26% 69.37 350) 35%, lch(65.49% 45.28 239) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.500}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.08)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.3)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.1)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.15)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.08)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.3)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(74.82% 51.93 49.87) 0%, lch(61.26% 69.37 350) 35%, lch(65.49% 45.28 239) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.07)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.08)", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.08)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.08)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(54.29% 60.55 281.11) 50%, lch(46.46% 7.5 286.37) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(100% 0 134.54) 10%, lch(98.27% 0.36 135.2) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(98.27% 0.36 135.2) 10%, lch(90.71% 0.38 284.93) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.3) 30%, lch(63.38% 78.04 52.26) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(100% 0 134.54) 50%, lch(90.71% 0.38 284.93) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.07)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: "Border color for blue tags. ", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags. ", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(37.01% 31.77 57.67)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.600}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.55% 12.75 93.47)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.50}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: "Border color for brown tags. ", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags. ", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for green tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for green tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for green tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for green tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for green tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for green tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for green tags, replaced with cyan.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags, replaced with cyan.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(42.04% 107.17 295.8)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.500}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 6.03 283.32)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.50}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(38.26% 32.05 123.88)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.600}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.100}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.86% 15.3 127.41)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.50}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(38.59% 33.16 169.14)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.600}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.100}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.82% 11.97 171.06)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.50}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(44.27% 56.78 349.99)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.500}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.15% 5.42 350.29)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.50}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for purple tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for purple tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for purple tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for purple tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for purple tags, replaced with cyan.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags, replaced with cyan.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 5.25 32.59)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.50}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for violet tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for violet tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for violet tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for violet tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for violet tags, replaced with cyan.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags, replaced with cyan.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Text color for yellow tags, replaced with orange for tritanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Text color for yellow tags, replaced with orange for tritanopia visibility.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for yellow tags, replaced with orange for tritanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for yellow tags, replaced with orange for tritanopia visibility.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for yellow tags, replaced with orange.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags, replaced with orange.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + $description: + "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: "0 0 0 2px lch(100% 0 134.54), 0 0 0 4px lch(8.25% 4.49 287.18)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(61.26% 69.37 350)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.300}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.3)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-light-dimmer-tritanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-light-dimmer-tritanopia-desktop-harness.ts new file mode 100644 index 0000000000..fed74e454f --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-light-dimmer-tritanopia-desktop-harness.ts @@ -0,0 +1,8871 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:54 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.1)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.08)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.15)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.07)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.3)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.3)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.07)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.3)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.07)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Text color for warning badges. Signals caution states with readable orange text.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Text color for warning badges. Signals caution states with readable orange text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.3)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-200) l c h / 0.07)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.200}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.3)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.07)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.3)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.07)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(74.82% 51.93 49.87) 0%, lch(61.26% 69.37 350) 35%, lch(65.49% 45.28 239) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.500}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.08)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.3)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.1)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.15)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.08)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.3)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(74.82% 51.93 49.87) 0%, lch(61.26% 69.37 350) 35%, lch(65.49% 45.28 239) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.07)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.08)", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.08)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.08)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.08", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(54.29% 60.55 281.11) 50%, lch(46.46% 7.5 286.37) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(100% 0 134.54) 10%, lch(98.27% 0.36 135.2) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(98.27% 0.36 135.2) 10%, lch(90.71% 0.38 284.93) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.3) 30%, lch(63.38% 78.04 52.26) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(65.59% 65.99 34.56)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.300}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(100% 0 134.54) 50%, lch(90.71% 0.38 284.93) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.400}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.600}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.07)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: "Border color for blue tags. ", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags. ", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(37.01% 31.77 57.67)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.600}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.55% 12.75 93.47)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.50}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: "Border color for brown tags. ", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags. ", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for green tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for green tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for green tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for green tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for green tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for green tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for green tags, replaced with cyan.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags, replaced with cyan.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(42.04% 107.17 295.8)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.500}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 6.03 283.32)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.50}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(38.26% 32.05 123.88)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.600}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.100}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.86% 15.3 127.41)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.50}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(38.59% 33.16 169.14)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.600}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.100}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.82% 11.97 171.06)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.50}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(44.27% 56.78 349.99)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.500}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.15% 5.42 350.29)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.50}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for purple tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for purple tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for purple tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for purple tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for purple tags, replaced with cyan.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags, replaced with cyan.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 5.25 32.59)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.50}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for violet tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for violet tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for violet tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for violet tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for violet tags, replaced with cyan.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags, replaced with cyan.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Text color for yellow tags, replaced with orange for tritanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Text color for yellow tags, replaced with orange for tritanopia visibility.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for yellow tags, replaced with orange for tritanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for yellow tags, replaced with orange for tritanopia visibility.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for yellow tags, replaced with orange.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags, replaced with orange.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $description: + "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.35", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $description: + "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + $description: + "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.07", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: "0 0 0 2px lch(100% 0 134.54), 0 0 0 4px lch(46.84% 41.5 250)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(61.26% 69.37 350)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.300}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.3)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.3", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(95.4% 5 238.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(3.09% 7.5 268)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-light-high-contrast-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-light-high-contrast-desktop-gitness.ts new file mode 100644 index 0000000000..d953be3bf8 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-light-high-contrast-desktop-gitness.ts @@ -0,0 +1,8853 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:50 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.700}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(38.71% 37.07 156.25)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.600}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(37.37% 44.92 77.47)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.600}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(48.21% 43.17 156.25)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.500}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.6)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(29.79% 30.94 156.25)", + $description: + "Text color for success badges. Communicates positive status through readable green text.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.700}", + $description: + "Text color for success badges. Communicates positive status through readable green text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-400) l c h / 0.6)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.400}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-300) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.300}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.6)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(28.67% 36.97 77.45)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.700}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-400) l c h / 0.6)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.6)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(24.34% 84.56 311.84)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.700}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-400) l c h / 0.6)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.400}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-300) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.300}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(53.21% 65.17 349.99) 35%, lch(50.99% 105.85 309.98) 65%, lch(65.49% 45.28 239) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.500}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(29.79% 30.94 156.25)", + $description: + "Text color for success buttons. Communicates positive actions through readable green text.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.700}", + $description: + "Text color for success buttons. Communicates positive actions through readable green text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-300) l c h / 0.1)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.300}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-400) l c h / 0.6)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.400}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-300) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.300}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-300) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.300}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.6)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(53.21% 65.17 349.99) 35%, lch(50.99% 105.85 309.98) 65%, lch(65.49% 45.28 239) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-400) l c h / 0.12)", + $description: + "Green background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.400}", + $description: + "Green background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-400) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.400}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-400) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.400}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.12)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-400) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.400}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-400) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.400}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(32.21% 100.98 311.83)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.600}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(74.37% 4.52 285.5) 0%, lch(47.04% 69.94 279.78) 50%, lch(39.46% 8.98 286.89) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(100% 0 134.54) 10%, lch(98.27% 0.36 135.2) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(90.71% 0.38 284.93) 10%, lch(81.33% 4.52 285.46) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(54.81% 69.74 52.27) 0%, lch(from var(--canary-colors-chrome-300) l c h / 0.4) 30%, lch(54.81% 69.74 52.27) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(48.21% 43.17 156.25)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.500}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(85.99% 3.77 285.34) 0%, lch(100% 0 134.54) 50%, lch(85.99% 3.77 285.34) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(27.25% 49.8 280.51)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.700}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(48.21% 43.17 156.25)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.500}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(55.9% 60.21 76.41)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(40.58% 118.62 311.84)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.500}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(27.25% 49.8 280.51)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.700}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: "Border color for blue tags. ", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags. ", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(28.37% 26.84 58.1)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.700}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.55% 12.75 93.47)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.50}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: "Border color for brown tags. ", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags. ", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(29.79% 30.94 156.25)", + $description: + "Text color for green tags. Ensures readability while maintaining the green color theme.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.700}", + $description: + "Text color for green tags. Ensures readability while maintaining the green color theme.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(91.19% 27.27 156.17)", + $description: + "Background color for green tags. Creates a distinct surface with green theme styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.100}", + $description: + "Background color for green tags. Creates a distinct surface with green theme styling.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.82% 11.79 156.15)", + $description: + "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.50}", + $description: + "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.19% 27.27 156.17)", + $description: "Border color for green tags.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(23.02% 107.52 302.38)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.700}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 6.03 283.32)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.50}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(29.42% 27.17 123.81)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.700}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.100}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.86% 15.3 127.41)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.50}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(29.72% 28.6 166.42)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.700}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.100}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.82% 11.97 171.06)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.50}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(26.98% 40.34 349.99)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.700}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.15% 5.42 350.29)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.50}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(24.34% 84.56 311.84)", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.700}", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(89.58% 17.29 301.92)", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.100}", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.14% 7 301.11)", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.50}", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.58% 17.29 301.92)", + $description: "Border color for purple tags.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 5.25 32.59)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.50}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(23.77% 93.78 307.37)", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.700}", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(89.64% 16.29 297.99)", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.100}", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.18% 6.31 296.62)", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.50}", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.64% 16.29 297.99)", + $description: "Border color for violet tags.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(28.67% 36.97 77.45)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.700}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.62% 18.31 92.87)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.50}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-chrome-950) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: "0 0 0 2px lch(100% 0 134.54), 0 0 0 4px lch(8.25% 4.49 287.18)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(53.21% 65.17 349.99)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.400}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(50.99% 105.85 309.98)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.400}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-light-high-contrast-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-light-high-contrast-desktop-harness.ts new file mode 100644 index 0000000000..8a7c86273f --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-light-high-contrast-desktop-harness.ts @@ -0,0 +1,8853 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:50 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.700}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(38.71% 37.07 156.25)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.600}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(37.37% 44.92 77.47)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.600}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(48.21% 43.17 156.25)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.500}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.6)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(29.79% 30.94 156.25)", + $description: + "Text color for success badges. Communicates positive status through readable green text.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.700}", + $description: + "Text color for success badges. Communicates positive status through readable green text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-400) l c h / 0.6)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.400}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-300) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.300}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.6)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(28.67% 36.97 77.45)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.700}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-400) l c h / 0.6)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.6)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(24.34% 84.56 311.84)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.700}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-400) l c h / 0.6)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.400}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-300) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.300}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(53.21% 65.17 349.99) 35%, lch(50.99% 105.85 309.98) 65%, lch(65.49% 45.28 239) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.500}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(29.79% 30.94 156.25)", + $description: + "Text color for success buttons. Communicates positive actions through readable green text.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.700}", + $description: + "Text color for success buttons. Communicates positive actions through readable green text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-300) l c h / 0.1)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.300}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-400) l c h / 0.6)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.400}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-300) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.300}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-300) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.300}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.6)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(53.21% 65.17 349.99) 35%, lch(50.99% 105.85 309.98) 65%, lch(65.49% 45.28 239) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-400) l c h / 0.12)", + $description: + "Green background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.400}", + $description: + "Green background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-400) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.400}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-green-400) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.green.400}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.12)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-400) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.400}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-400) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.400}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(32.21% 100.98 311.83)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.600}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(74.37% 4.52 285.5) 0%, lch(47.04% 69.94 279.78) 50%, lch(39.46% 8.98 286.89) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(100% 0 134.54) 10%, lch(98.27% 0.36 135.2) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(90.71% 0.38 284.93) 10%, lch(81.33% 4.52 285.46) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(54.81% 69.74 52.27) 0%, lch(from var(--canary-colors-chrome-300) l c h / 0.4) 30%, lch(54.81% 69.74 52.27) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(48.21% 43.17 156.25)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.500}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(85.99% 3.77 285.34) 0%, lch(100% 0 134.54) 50%, lch(85.99% 3.77 285.34) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(27.25% 49.8 280.51)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.700}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(48.21% 43.17 156.25)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.500}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(55.9% 60.21 76.41)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(40.58% 118.62 311.84)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.500}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(27.25% 49.8 280.51)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.700}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: "Border color for blue tags. ", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags. ", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(28.37% 26.84 58.1)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.700}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.55% 12.75 93.47)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.50}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: "Border color for brown tags. ", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags. ", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(29.79% 30.94 156.25)", + $description: + "Text color for green tags. Ensures readability while maintaining the green color theme.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.700}", + $description: + "Text color for green tags. Ensures readability while maintaining the green color theme.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(91.19% 27.27 156.17)", + $description: + "Background color for green tags. Creates a distinct surface with green theme styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.100}", + $description: + "Background color for green tags. Creates a distinct surface with green theme styling.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.82% 11.79 156.15)", + $description: + "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.green.50}", + $description: + "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.19% 27.27 156.17)", + $description: "Border color for green tags.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(23.02% 107.52 302.38)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.700}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 6.03 283.32)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.50}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(29.42% 27.17 123.81)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.700}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.100}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.86% 15.3 127.41)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.50}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(29.72% 28.6 166.42)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.700}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.100}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.82% 11.97 171.06)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.50}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(26.98% 40.34 349.99)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.700}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.15% 5.42 350.29)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.50}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(24.34% 84.56 311.84)", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.700}", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(89.58% 17.29 301.92)", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.100}", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.14% 7 301.11)", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.50}", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.58% 17.29 301.92)", + $description: "Border color for purple tags.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 5.25 32.59)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.50}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(23.77% 93.78 307.37)", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.700}", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(89.64% 16.29 297.99)", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.100}", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.18% 6.31 296.62)", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.50}", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.64% 16.29 297.99)", + $description: "Border color for violet tags.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(28.67% 36.97 77.45)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.700}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.62% 18.31 92.87)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.50}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-chrome-950) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: "0 0 0 2px lch(100% 0 134.54), 0 0 0 4px lch(46.84% 41.5 250)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(53.21% 65.17 349.99)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.400}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(50.99% 105.85 309.98)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.400}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(95.4% 5 238.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(3.09% 7.5 268)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-light-high-contrast-deuteranopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-light-high-contrast-deuteranopia-desktop-gitness.ts new file mode 100644 index 0000000000..8c1202be0f --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-light-high-contrast-deuteranopia-desktop-gitness.ts @@ -0,0 +1,8900 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:53 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.700}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(37.37% 44.92 77.47)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.600}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast orange text.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast orange text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.6)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.6)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.6)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(28.67% 36.97 77.45)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.700}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-400) l c h / 0.6)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.6)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.6)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(54.81% 69.74 52.27) 35%, lch(56.15% 44.5 246.5) 65%, lch(65.49% 45.28 239) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.500}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.6)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.6)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(54.81% 69.74 52.27) 35%, lch(56.15% 44.5 246.5) 65%, lch(65.49% 45.28 239) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: "Text color for dropdown menu delete-item.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.12)", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.12)", + $description: + "Orange background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Orange background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-400) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.400}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-400) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.400}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(74.37% 4.52 285.5) 0%, lch(47.04% 69.94 279.78) 50%, lch(39.46% 8.98 286.89) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(100% 0 134.54) 10%, lch(98.27% 0.36 135.2) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(90.71% 0.38 284.93) 10%, lch(81.33% 4.52 285.46) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(54.81% 69.74 52.27) 0%, lch(from var(--canary-colors-chrome-300) l c h / 0.4) 30%, lch(54.81% 69.74 52.27) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(85.99% 3.77 285.34) 0%, lch(100% 0 134.54) 50%, lch(85.99% 3.77 285.34) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(27.25% 49.8 280.51)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.700}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(55.9% 60.21 76.41)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(27.25% 49.8 280.51)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.700}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(28.37% 26.84 58.1)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.700}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.55% 12.75 93.47)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.50}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Text color for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Text color for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for green tags, replaced with cyan.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags, replaced with cyan.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(23.02% 107.52 302.38)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.700}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 6.03 283.32)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.50}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(29.42% 27.17 123.81)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.700}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.100}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.86% 15.3 127.41)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.50}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(29.72% 28.6 166.42)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.700}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.100}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.82% 11.97 171.06)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.50}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(26.98% 40.34 349.99)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.700}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.15% 5.42 350.29)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.50}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Text color for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Text color for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for purple tags, replaced with cyan.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags, replaced with cyan.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Text color for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Text color for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for red tags, replaced with orange.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags, replaced with orange.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(27.25% 49.8 280.51)", + $description: + "Text color for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.700}", + $description: + "Text color for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: "Border color for violet tags, replaced with blue.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags, replaced with blue.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(28.67% 36.97 77.45)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.700}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.62% 18.31 92.87)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.50}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-chrome-950) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: "0 0 0 2px lch(100% 0 134.54), 0 0 0 4px lch(8.25% 4.49 287.18)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-light-high-contrast-deuteranopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-light-high-contrast-deuteranopia-desktop-harness.ts new file mode 100644 index 0000000000..3890375f84 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-light-high-contrast-deuteranopia-desktop-harness.ts @@ -0,0 +1,8900 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:53 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.700}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(37.37% 44.92 77.47)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.600}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast orange text.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast orange text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-500) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.500}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.6)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.6)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.6)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(28.67% 36.97 77.45)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.700}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-400) l c h / 0.6)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.6)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.6)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(54.81% 69.74 52.27) 35%, lch(56.15% 44.5 246.5) 65%, lch(65.49% 45.28 239) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.500}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.6)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.6)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(54.81% 69.74 52.27) 35%, lch(56.15% 44.5 246.5) 65%, lch(65.49% 45.28 239) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: "Text color for dropdown menu delete-item.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.12)", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.12)", + $description: + "Orange background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Orange background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-400) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.400}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-400) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.400}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(74.37% 4.52 285.5) 0%, lch(47.04% 69.94 279.78) 50%, lch(39.46% 8.98 286.89) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(100% 0 134.54) 10%, lch(98.27% 0.36 135.2) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(90.71% 0.38 284.93) 10%, lch(81.33% 4.52 285.46) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(54.81% 69.74 52.27) 0%, lch(from var(--canary-colors-chrome-300) l c h / 0.4) 30%, lch(54.81% 69.74 52.27) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(85.99% 3.77 285.34) 0%, lch(100% 0 134.54) 50%, lch(85.99% 3.77 285.34) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(27.25% 49.8 280.51)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.700}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(55.9% 60.21 76.41)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(27.25% 49.8 280.51)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.700}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(28.37% 26.84 58.1)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.700}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.55% 12.75 93.47)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.50}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Text color for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Text color for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for green tags, replaced with cyan.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags, replaced with cyan.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(23.02% 107.52 302.38)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.700}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 6.03 283.32)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.50}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(29.42% 27.17 123.81)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.700}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.100}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.86% 15.3 127.41)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.50}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(29.72% 28.6 166.42)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.700}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.100}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.82% 11.97 171.06)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.50}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(26.98% 40.34 349.99)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.700}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.15% 5.42 350.29)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.50}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Text color for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Text color for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for purple tags, replaced with cyan.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags, replaced with cyan.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Text color for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Text color for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for red tags, replaced with orange.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags, replaced with orange.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(27.25% 49.8 280.51)", + $description: + "Text color for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.700}", + $description: + "Text color for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: "Border color for violet tags, replaced with blue.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags, replaced with blue.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(28.67% 36.97 77.45)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.700}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.62% 18.31 92.87)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.50}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-chrome-950) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: "0 0 0 2px lch(100% 0 134.54), 0 0 0 4px lch(46.84% 41.5 250)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: + "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(95.4% 5 238.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(3.09% 7.5 268)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-light-high-contrast-protanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-light-high-contrast-protanopia-desktop-gitness.ts new file mode 100644 index 0000000000..8af8088647 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-light-high-contrast-protanopia-desktop-gitness.ts @@ -0,0 +1,8866 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:51 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.700}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Primary color for text and icons in success content. Adjusted for protanopia using blue instead of green.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Primary color for text and icons in success content. Adjusted for protanopia using blue instead of green.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(37.37% 44.92 77.47)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.600}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Border color for success containers. Adjusted for protanopia using blue instead of green.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Border color for success containers. Adjusted for protanopia using blue instead of green.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.6)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(27.25% 49.8 280.51)", + $description: + "Text color for success badges. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.700}", + $description: + "Text color for success badges. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-400) l c h / 0.6)", + $description: + "Border color for success badges. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.400}", + $description: + "Border color for success badges. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.1)", + $description: + "Background color for success badges. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Background color for success badges. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.6)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(28.67% 36.97 77.45)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.700}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-400) l c h / 0.6)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.6)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(24.34% 84.56 311.84)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.700}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-400) l c h / 0.6)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.400}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-300) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.300}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(53.21% 65.17 349.99) 35%, lch(50.99% 105.85 309.98) 65%, lch(65.49% 45.28 239) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.500}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(27.25% 49.8 280.51)", + $description: + "Text color for success buttons. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.700}", + $description: + "Text color for success buttons. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.1)", + $description: + "Background color for success buttons. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Background color for success buttons. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-400) l c h / 0.6)", + $description: + "Border color for success buttons. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.400}", + $description: + "Border color for success buttons. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Hover state background color for success buttons. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.25)", + $description: + "Active state background color for success buttons. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Active state background color for success buttons. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.6)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(53.21% 65.17 349.99) 35%, lch(50.99% 105.85 309.98) 65%, lch(65.49% 45.28 239) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: + "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-400) l c h / 0.12)", + $description: + "Blue background highlighting newly added code lines. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.400}", + $description: + "Blue background highlighting newly added code lines. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-400) l c h / 0.2)", + $description: + "Background for line numbers of added code. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.400}", + $description: + "Background for line numbers of added code. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-400) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.400}", + $description: + "Stronger emphasis color for specific character changes within added lines. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.12)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-400) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.400}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-400) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.400}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(32.21% 100.98 311.83)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.600}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(74.37% 4.52 285.5) 0%, lch(47.04% 69.94 279.78) 50%, lch(39.46% 8.98 286.89) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(100% 0 134.54) 10%, lch(98.27% 0.36 135.2) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(90.71% 0.38 284.93) 10%, lch(81.33% 4.52 285.46) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(54.81% 69.74 52.27) 0%, lch(from var(--canary-colors-chrome-300) l c h / 0.4) 30%, lch(54.81% 69.74 52.27) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Border color for completed pipeline states. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Border color for completed pipeline states. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Icon color for Logo in sidebar navigation. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: + "Icon color for Logo in sidebar navigation. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(85.99% 3.77 285.34) 0%, lch(100% 0 134.54) 50%, lch(85.99% 3.77 285.34) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Filled portion color for slider tracks. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Filled portion color for slider tracks. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(27.25% 49.8 280.51)", + $description: + "Color for segment markers on the filled track portion. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.700}", + $description: + "Color for segment markers on the filled track portion. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Color for success status indicators. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Color for success status indicators. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(55.9% 60.21 76.41)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(40.58% 118.62 311.84)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.500}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Background color for the selected state of switch controls. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Background color for the selected state of switch controls. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(27.25% 49.8 280.51)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.700}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: "Border color for blue tags. ", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags. ", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(28.37% 26.84 58.1)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.700}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.55% 12.75 93.47)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.50}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: "Border color for brown tags. ", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags. ", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(27.25% 49.8 280.51)", + $description: + "Text color for green tags. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.700}", + $description: + "Text color for green tags. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for green tags. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for green tags. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for green tags. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for green tags. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Border color for green tags. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: + "Border color for green tags. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(23.02% 107.52 302.38)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.700}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 6.03 283.32)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.50}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(27.25% 49.8 280.51)", + $description: + "Text color for lime tags. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.700}", + $description: + "Text color for lime tags. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for lime tags. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for lime tags. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for lime tags. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for lime tags. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Border color for lime tags. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: + "Border color for lime tags. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(27.25% 49.8 280.51)", + $description: + "Text color for mint tags. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.700}", + $description: + "Text color for mint tags. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for mint tags. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for mint tags. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for mint tags. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for mint tags. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Border color for mint tags. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: + "Border color for mint tags. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(26.98% 40.34 349.99)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.700}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.15% 5.42 350.29)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.50}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(24.34% 84.56 311.84)", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.700}", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(89.58% 17.29 301.92)", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.100}", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.14% 7 301.11)", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.50}", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.58% 17.29 301.92)", + $description: "Border color for purple tags.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 5.25 32.59)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.50}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(23.77% 93.78 307.37)", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.700}", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(89.64% 16.29 297.99)", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.100}", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.18% 6.31 296.62)", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.50}", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.64% 16.29 297.99)", + $description: "Border color for violet tags.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(28.67% 36.97 77.45)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.700}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.62% 18.31 92.87)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.50}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-chrome-950) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: "0 0 0 2px lch(100% 0 134.54), 0 0 0 4px lch(8.25% 4.49 287.18)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(53.21% 65.17 349.99)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.400}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(50.99% 105.85 309.98)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.400}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: + "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: + "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: + "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: + "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-light-high-contrast-protanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-light-high-contrast-protanopia-desktop-harness.ts new file mode 100644 index 0000000000..aa4782474d --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-light-high-contrast-protanopia-desktop-harness.ts @@ -0,0 +1,8866 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:51 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.700}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Primary color for text and icons in success content. Adjusted for protanopia using blue instead of green.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Primary color for text and icons in success content. Adjusted for protanopia using blue instead of green.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(37.37% 44.92 77.47)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.600}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Border color for success containers. Adjusted for protanopia using blue instead of green.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Border color for success containers. Adjusted for protanopia using blue instead of green.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.6)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(27.25% 49.8 280.51)", + $description: + "Text color for success badges. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.700}", + $description: + "Text color for success badges. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-400) l c h / 0.6)", + $description: + "Border color for success badges. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.400}", + $description: + "Border color for success badges. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.1)", + $description: + "Background color for success badges. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Background color for success badges. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.6)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(28.67% 36.97 77.45)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.700}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-400) l c h / 0.6)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.6)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(24.34% 84.56 311.84)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.700}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-400) l c h / 0.6)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.400}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-300) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.300}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(53.21% 65.17 349.99) 35%, lch(50.99% 105.85 309.98) 65%, lch(65.49% 45.28 239) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.500}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(27.25% 49.8 280.51)", + $description: + "Text color for success buttons. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.700}", + $description: + "Text color for success buttons. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.1)", + $description: + "Background color for success buttons. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Background color for success buttons. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-400) l c h / 0.6)", + $description: + "Border color for success buttons. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.400}", + $description: + "Border color for success buttons. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Hover state background color for success buttons. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.25)", + $description: + "Active state background color for success buttons. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Active state background color for success buttons. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.6)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(53.21% 65.17 349.99) 35%, lch(50.99% 105.85 309.98) 65%, lch(65.49% 45.28 239) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: + "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-400) l c h / 0.12)", + $description: + "Blue background highlighting newly added code lines. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.400}", + $description: + "Blue background highlighting newly added code lines. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-400) l c h / 0.2)", + $description: + "Background for line numbers of added code. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.400}", + $description: + "Background for line numbers of added code. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-400) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.400}", + $description: + "Stronger emphasis color for specific character changes within added lines. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.12)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-400) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.400}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-400) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.400}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(32.21% 100.98 311.83)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.600}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(74.37% 4.52 285.5) 0%, lch(47.04% 69.94 279.78) 50%, lch(39.46% 8.98 286.89) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(100% 0 134.54) 10%, lch(98.27% 0.36 135.2) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(90.71% 0.38 284.93) 10%, lch(81.33% 4.52 285.46) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(54.81% 69.74 52.27) 0%, lch(from var(--canary-colors-chrome-300) l c h / 0.4) 30%, lch(54.81% 69.74 52.27) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Border color for completed pipeline states. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Border color for completed pipeline states. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Icon color for Logo in sidebar navigation. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: + "Icon color for Logo in sidebar navigation. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(85.99% 3.77 285.34) 0%, lch(100% 0 134.54) 50%, lch(85.99% 3.77 285.34) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Filled portion color for slider tracks. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Filled portion color for slider tracks. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(27.25% 49.8 280.51)", + $description: + "Color for segment markers on the filled track portion. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.700}", + $description: + "Color for segment markers on the filled track portion. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Color for success status indicators. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Color for success status indicators. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(55.9% 60.21 76.41)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(40.58% 118.62 311.84)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.500}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Background color for the selected state of switch controls. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Background color for the selected state of switch controls. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(27.25% 49.8 280.51)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.700}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: "Border color for blue tags. ", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags. ", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(28.37% 26.84 58.1)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.700}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.55% 12.75 93.47)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.50}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: "Border color for brown tags. ", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags. ", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(27.25% 49.8 280.51)", + $description: + "Text color for green tags. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.700}", + $description: + "Text color for green tags. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for green tags. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for green tags. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for green tags. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for green tags. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Border color for green tags. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: + "Border color for green tags. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(23.02% 107.52 302.38)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.700}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 6.03 283.32)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.50}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(27.25% 49.8 280.51)", + $description: + "Text color for lime tags. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.700}", + $description: + "Text color for lime tags. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for lime tags. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for lime tags. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for lime tags. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for lime tags. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Border color for lime tags. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: + "Border color for lime tags. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(27.25% 49.8 280.51)", + $description: + "Text color for mint tags. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.700}", + $description: + "Text color for mint tags. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for mint tags. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for mint tags. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for mint tags. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for mint tags. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Border color for mint tags. Adjusted for protanopia using blue instead of green.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: + "Border color for mint tags. Adjusted for protanopia using blue instead of green.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(26.98% 40.34 349.99)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.700}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.15% 5.42 350.29)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.50}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(24.34% 84.56 311.84)", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.700}", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(89.58% 17.29 301.92)", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.100}", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.14% 7 301.11)", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.50}", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.58% 17.29 301.92)", + $description: "Border color for purple tags.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 5.25 32.59)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.50}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(23.77% 93.78 307.37)", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.700}", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(89.64% 16.29 297.99)", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.100}", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.18% 6.31 296.62)", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.50}", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.64% 16.29 297.99)", + $description: "Border color for violet tags.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(28.67% 36.97 77.45)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.700}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.62% 18.31 92.87)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.50}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-chrome-950) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: "0 0 0 2px lch(100% 0 134.54), 0 0 0 4px lch(46.84% 41.5 250)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(53.21% 65.17 349.99)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.400}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(50.99% 105.85 309.98)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.400}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: + "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: + "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: + "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: + "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(95.4% 5 238.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(3.09% 7.5 268)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-light-high-contrast-tritanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-light-high-contrast-tritanopia-desktop-gitness.ts new file mode 100644 index 0000000000..427d4eeeb8 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-light-high-contrast-tritanopia-desktop-gitness.ts @@ -0,0 +1,8858 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:54 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.700}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.6)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Text color for success badges. Communicates positive status through readable green text.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Text color for success badges. Communicates positive status through readable green text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.6)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.6)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.6)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-200) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.200}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.6)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.6)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(74.82% 51.93 49.87) 0%, lch(53.21% 65.17 349.99) 35%, lch(56.15% 44.5 246.5) 65%, lch(65.49% 45.28 239) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.500}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Text color for success buttons. Communicates positive actions through readable green text.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Text color for success buttons. Communicates positive actions through readable green text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.6)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.6)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(74.82% 51.93 49.87) 0%, lch(53.21% 65.17 349.99) 35%, lch(56.15% 44.5 246.5) 65%, lch(65.49% 45.28 239) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: + "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.12)", + $description: + "Green background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Green background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.12)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-400) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.400}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-400) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.400}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(74.37% 4.52 285.5) 0%, lch(47.04% 69.94 279.78) 50%, lch(39.46% 8.98 286.89) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(100% 0 134.54) 10%, lch(98.27% 0.36 135.2) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(90.71% 0.38 284.93) 10%, lch(81.33% 4.52 285.46) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(54.81% 69.74 52.27) 0%, lch(from var(--canary-colors-chrome-300) l c h / 0.4) 30%, lch(54.81% 69.74 52.27) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(85.99% 3.77 285.34) 0%, lch(100% 0 134.54) 50%, lch(85.99% 3.77 285.34) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(27.25% 49.8 280.51)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.700}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(28.37% 26.84 58.1)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.700}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.55% 12.75 93.47)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.50}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Text color for green tags. Ensures readability while maintaining the green color theme.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Text color for green tags. Ensures readability while maintaining the green color theme.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for green tags. Creates a distinct surface with green theme styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for green tags. Creates a distinct surface with green theme styling.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for green tags.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(23.02% 107.52 302.38)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.700}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 6.03 283.32)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.50}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(29.42% 27.17 123.81)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.700}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.100}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.86% 15.3 127.41)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.50}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(29.72% 28.6 166.42)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.700}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.100}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.82% 11.97 171.06)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.50}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(26.98% 40.34 349.99)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.700}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.15% 5.42 350.29)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.50}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for purple tags.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 5.25 32.59)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.50}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for violet tags.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Text color for yellow tags. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Text color for yellow tags. Signals caution states with readable amber text.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-chrome-950) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: "0 0 0 2px lch(100% 0 134.54), 0 0 0 4px lch(8.25% 4.49 287.18)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(53.21% 65.17 349.99)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.400}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: + "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: + "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: + "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: + "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-light-high-contrast-tritanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-light-high-contrast-tritanopia-desktop-harness.ts new file mode 100644 index 0000000000..89edcb23eb --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-light-high-contrast-tritanopia-desktop-harness.ts @@ -0,0 +1,8858 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:54 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.700}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.7", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.6)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Text color for success badges. Communicates positive status through readable green text.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Text color for success badges. Communicates positive status through readable green text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.6)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.6)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.6)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-200) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.200}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.6)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.6)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(74.82% 51.93 49.87) 0%, lch(53.21% 65.17 349.99) 35%, lch(56.15% 44.5 246.5) 65%, lch(65.49% 45.28 239) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.500}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Text color for success buttons. Communicates positive actions through readable green text.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Text color for success buttons. Communicates positive actions through readable green text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.6)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.6)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(74.82% 51.93 49.87) 0%, lch(53.21% 65.17 349.99) 35%, lch(56.15% 44.5 246.5) 65%, lch(65.49% 45.28 239) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: + "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.12)", + $description: + "Green background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Green background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.12)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-400) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.400}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-400) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.400}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(74.37% 4.52 285.5) 0%, lch(47.04% 69.94 279.78) 50%, lch(39.46% 8.98 286.89) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(100% 0 134.54) 10%, lch(98.27% 0.36 135.2) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(90.71% 0.38 284.93) 10%, lch(81.33% 4.52 285.46) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(54.81% 69.74 52.27) 0%, lch(from var(--canary-colors-chrome-300) l c h / 0.4) 30%, lch(54.81% 69.74 52.27) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(85.99% 3.77 285.34) 0%, lch(100% 0 134.54) 50%, lch(85.99% 3.77 285.34) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(44.74% 76.92 37.68)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.500}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(27.25% 49.8 280.51)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.700}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(28.37% 26.84 58.1)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.700}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.55% 12.75 93.47)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.50}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Text color for green tags. Ensures readability while maintaining the green color theme.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Text color for green tags. Ensures readability while maintaining the green color theme.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for green tags. Creates a distinct surface with green theme styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for green tags. Creates a distinct surface with green theme styling.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for green tags.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(23.02% 107.52 302.38)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.700}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 6.03 283.32)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.50}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(29.42% 27.17 123.81)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.700}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.100}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.86% 15.3 127.41)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.50}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(29.72% 28.6 166.42)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.700}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.100}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.82% 11.97 171.06)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.50}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(26.98% 40.34 349.99)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.700}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.15% 5.42 350.29)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.50}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for purple tags.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(27.3% 54.82 37.68)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.700}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 5.25 32.59)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.50}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for violet tags.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(27.78% 46.26 47.39)", + $description: + "Text color for yellow tags. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.700}", + $description: + "Text color for yellow tags. Signals caution states with readable amber text.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-chrome-950) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: "0 0 0 2px lch(100% 0 134.54), 0 0 0 4px lch(46.84% 41.5 250)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(53.21% 65.17 349.99)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.400}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(54.81% 69.74 52.27)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.400}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(47.04% 69.94 279.78)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.500}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: + "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: + "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: + "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: + "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(95.4% 5 238.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(3.09% 7.5 268)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-light-protanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-light-protanopia-desktop-gitness.ts new file mode 100644 index 0000000000..ac52bf3c8b --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-light-protanopia-desktop-gitness.ts @@ -0,0 +1,8860 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:50 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states. Using blue instead of green for protanopia visibility.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states. Using blue instead of green for protanopia visibility.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Border color for success containers. Reinforces positive status through visual framing. Using blue instead of green for protanopia visibility.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Border color for success containers. Reinforces positive status through visual framing. Using blue instead of green for protanopia visibility.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(18.31% 42.35 35.83)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.800}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.2)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Text color for success badges. Communicates positive status through readable blue text. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Text color for success badges. Communicates positive status through readable blue text. Adjusted for protanopia visibility.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-400) l c h / 0.2)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.400}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators. Adjusted for protanopia visibility.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator. Adjusted for protanopia visibility.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(37.37% 44.92 77.47)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.600}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-400) l c h / 0.2)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(32.21% 100.98 311.83)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.600}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-400) l c h / 0.2)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.400}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-300) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.300}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(61.26% 69.37 350) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.500}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Text color for success buttons. Communicates positive actions through readable blue text. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Text color for success buttons. Communicates positive actions through readable blue text. Adjusted for protanopia visibility.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.12)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling. Adjusted for protanopia visibility.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-400) l c h / 0.25)", + $description: + "Border color for success buttons. Provides definition for positive action buttons. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.400}", + $description: + "Border color for success buttons. Provides definition for positive action buttons. Adjusted for protanopia visibility.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction. Adjusted for protanopia visibility.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. Adjusted for protanopia visibility.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.12)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(61.26% 69.37 350) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Blue background highlighting newly added code lines while maintaining readability. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Blue background highlighting newly added code lines while maintaining readability. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Stronger emphasis color for specific character changes within added lines. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(32.21% 100.98 311.83)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.600}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(54.29% 60.55 281.11) 50%, lch(26.73% 7.48 287.06) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(100% 0 134.54) 10%, lch(98.27% 0.36 135.2) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(98.27% 0.36 135.2) 10%, lch(90.71% 0.38 284.93) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.4) 30%, lch(63.38% 78.04 52.26) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "2px", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{borderWidth.2}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(100% 0 134.54) 50%, lch(90.71% 0.38 284.93) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.700}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Color for success status indicators. Communicates completed or positive states. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Color for success status indicators. Communicates completed or positive states. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(37.01% 31.77 57.67)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.600}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.55% 12.75 93.47)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.50}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Text color for green tags. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Text color for green tags. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for green tags. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for green tags. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for green tags. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for green tags. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Border color for green tags. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: + "Border color for green tags. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(30.63% 128.3 302.36)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.600}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 6.03 283.32)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.50}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Text color for lime tags. Using blue instead of lime/green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Text color for lime tags. Using blue instead of lime/green for protanopia visibility.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for lime tags. Using blue instead of lime/green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for lime tags. Using blue instead of lime/green for protanopia visibility.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for lime tags. Using blue instead of lime/green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for lime tags. Using blue instead of lime/green for protanopia visibility.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Border color for lime tags. Using blue instead of lime/green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: + "Border color for lime tags. Using blue instead of lime/green for protanopia visibility.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Text color for mint tags. Using blue instead of mint/green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Text color for mint tags. Using blue instead of mint/green for protanopia visibility.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for mint tags. Using blue instead of mint/green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for mint tags. Using blue instead of mint/green for protanopia visibility.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for mint tags. Using blue instead of mint/green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for mint tags. Using blue instead of mint/green for protanopia visibility.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Border color for mint tags. Using blue instead of mint/green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: + "Border color for mint tags. Using blue instead of mint/green for protanopia visibility.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(35.34% 48.39 349.99)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.600}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.15% 5.42 350.29)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.50}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(32.21% 100.98 311.83)", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.600}", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(89.58% 17.29 301.92)", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.100}", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.14% 7 301.11)", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.50}", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.58% 17.29 301.92)", + $description: "Border color for purple tags.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 5.25 32.59)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.50}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(31.46% 113.1 306.9)", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.600}", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(89.64% 16.29 297.99)", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.100}", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.18% 6.31 296.62)", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.50}", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.64% 16.29 297.99)", + $description: "Border color for violet tags.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(37.37% 44.92 77.47)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.600}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.62% 18.31 92.87)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.50}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(98.27% 0.36 135.2), 0 0 0 4px lch(8.25% 4.49 287.18)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(61.26% 69.37 350)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.300}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.4)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-light-protanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-light-protanopia-desktop-harness.ts new file mode 100644 index 0000000000..1d0bd47753 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-light-protanopia-desktop-harness.ts @@ -0,0 +1,8860 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:50 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states. Using blue instead of green for protanopia visibility.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states. Using blue instead of green for protanopia visibility.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Border color for success containers. Reinforces positive status through visual framing. Using blue instead of green for protanopia visibility.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Border color for success containers. Reinforces positive status through visual framing. Using blue instead of green for protanopia visibility.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(46.64% 52.59 77.11)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.500}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(18.31% 42.35 35.83)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.800}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.2)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Text color for success badges. Communicates positive status through readable blue text. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Text color for success badges. Communicates positive status through readable blue text. Adjusted for protanopia visibility.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-400) l c h / 0.2)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.400}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators. Adjusted for protanopia visibility.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator. Adjusted for protanopia visibility.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(37.37% 44.92 77.47)", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.600}", + $description: + "Text color for warning badges. Signals caution states with readable amber text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-400) l c h / 0.2)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.400}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.yellow.200}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(32.21% 100.98 311.83)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.600}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-400) l c h / 0.2)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.400}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-purple-300) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.purple.300}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(61.26% 69.37 350) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.500}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Text color for success buttons. Communicates positive actions through readable blue text. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Text color for success buttons. Communicates positive actions through readable blue text. Adjusted for protanopia visibility.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.12)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling. Adjusted for protanopia visibility.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-400) l c h / 0.25)", + $description: + "Border color for success buttons. Provides definition for positive action buttons. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.400}", + $description: + "Border color for success buttons. Provides definition for positive action buttons. Adjusted for protanopia visibility.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction. Adjusted for protanopia visibility.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-300) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. Adjusted for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.300}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. Adjusted for protanopia visibility.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.12)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(73.82% 74.92 75.35) 0%, lch(61.26% 69.37 350) 35%, lch(61.28% 80.51 307.53) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Blue background highlighting newly added code lines while maintaining readability. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Blue background highlighting newly added code lines while maintaining readability. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Stronger emphasis color for specific character changes within added lines. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(32.21% 100.98 311.83)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.600}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(54.29% 60.55 281.11) 50%, lch(26.73% 7.48 287.06) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(100% 0 134.54) 10%, lch(98.27% 0.36 135.2) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(98.27% 0.36 135.2) 10%, lch(90.71% 0.38 284.93) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.4) 30%, lch(63.38% 78.04 52.26) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "2px", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{borderWidth.2}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(100% 0 134.54) 50%, lch(90.71% 0.38 284.93) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.700}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(63.4% 48.44 281.2)", + $description: + "Color for success status indicators. Communicates completed or positive states. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.300}", + $description: + "Color for success status indicators. Communicates completed or positive states. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(64.58% 68.1 76.07)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(37.01% 31.77 57.67)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.600}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.55% 12.75 93.47)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.50}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Text color for green tags. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Text color for green tags. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for green tags. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for green tags. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for green tags. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for green tags. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Border color for green tags. Using blue instead of green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: + "Border color for green tags. Using blue instead of green for protanopia visibility.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(30.63% 128.3 302.36)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.600}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 6.03 283.32)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.50}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Text color for lime tags. Using blue instead of lime/green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Text color for lime tags. Using blue instead of lime/green for protanopia visibility.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for lime tags. Using blue instead of lime/green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for lime tags. Using blue instead of lime/green for protanopia visibility.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for lime tags. Using blue instead of lime/green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for lime tags. Using blue instead of lime/green for protanopia visibility.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Border color for lime tags. Using blue instead of lime/green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: + "Border color for lime tags. Using blue instead of lime/green for protanopia visibility.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Text color for mint tags. Using blue instead of mint/green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Text color for mint tags. Using blue instead of mint/green for protanopia visibility.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for mint tags. Using blue instead of mint/green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for mint tags. Using blue instead of mint/green for protanopia visibility.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for mint tags. Using blue instead of mint/green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for mint tags. Using blue instead of mint/green for protanopia visibility.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Border color for mint tags. Using blue instead of mint/green for protanopia visibility.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: + "Border color for mint tags. Using blue instead of mint/green for protanopia visibility.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(35.34% 48.39 349.99)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.600}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.15% 5.42 350.29)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.50}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(32.21% 100.98 311.83)", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.600}", + $description: + "Text color for purple tags. Ensures readability while maintaining the purple color theme.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(89.58% 17.29 301.92)", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.100}", + $description: + "Background color for purple tags. Creates a distinct surface with purple theme styling.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.14% 7 301.11)", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.50}", + $description: + "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.58% 17.29 301.92)", + $description: "Border color for purple tags.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 5.25 32.59)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.50}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(31.46% 113.1 306.9)", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.600}", + $description: + "Text color for violet tags. Ensures readability while maintaining the violet color theme.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(89.64% 16.29 297.99)", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.100}", + $description: + "Background color for violet tags. Creates a distinct surface with violet theme styling.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.18% 6.31 296.62)", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.violet.50}", + $description: + "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.64% 16.29 297.99)", + $description: "Border color for violet tags.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(37.37% 44.92 77.47)", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.600}", + $description: + "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.100}", + $description: + "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.62% 18.31 92.87)", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.50}", + $description: + "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.23% 26.34 77.18)", + $description: "Border color for yellow tags.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(98.27% 0.36 135.2), 0 0 0 4px lch(46.84% 41.5 250)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(73.82% 74.92 75.35)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.yellow.200}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(61.26% 69.37 350)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.300}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(61.28% 80.51 307.53)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.purple.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.4)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(95.4% 5 238.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(3.09% 7.5 268)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-light-tritanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-light-tritanopia-desktop-gitness.ts new file mode 100644 index 0000000000..edf56fdcf1 --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-light-tritanopia-desktop-gitness.ts @@ -0,0 +1,8854 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:53 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(18.31% 42.35 35.83)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.800}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.2)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.2)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Text color for warning badges. Signals caution states with readable orange text.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Text color for warning badges. Signals caution states with readable orange text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-200) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.200}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.2)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(74.82% 51.93 49.87) 0%, lch(61.26% 69.37 350) 35%, lch(65.49% 45.28 239) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.500}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.12)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.25)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.12)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(74.82% 51.93 49.87) 0%, lch(61.26% 69.37 350) 35%, lch(65.49% 45.28 239) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(54.29% 60.55 281.11) 50%, lch(26.73% 7.48 287.06) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(100% 0 134.54) 10%, lch(98.27% 0.36 135.2) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(98.27% 0.36 135.2) 10%, lch(90.71% 0.38 284.93) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.4) 30%, lch(63.38% 78.04 52.26) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "2px", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{borderWidth.2}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(100% 0 134.54) 50%, lch(90.71% 0.38 284.93) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.700}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(37.01% 31.77 57.67)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.600}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.55% 12.75 93.47)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.50}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for green tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for green tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for green tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for green tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for green tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for green tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for green tags, replaced with cyan.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags, replaced with cyan.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(30.63% 128.3 302.36)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.600}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 6.03 283.32)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.50}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(38.26% 32.05 123.88)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.600}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.100}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.86% 15.3 127.41)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.50}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(38.59% 33.16 169.14)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.600}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.100}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.82% 11.97 171.06)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.50}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(35.34% 48.39 349.99)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.600}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.15% 5.42 350.29)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.50}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for purple tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for purple tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for purple tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for purple tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for purple tags, replaced with cyan.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags, replaced with cyan.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 5.25 32.59)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.50}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for violet tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for violet tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for violet tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for violet tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for violet tags, replaced with cyan.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags, replaced with cyan.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Text color for yellow tags, replaced with orange for tritanopia visibility.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Text color for yellow tags, replaced with orange for tritanopia visibility.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for yellow tags, replaced with orange for tritanopia visibility.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for yellow tags, replaced with orange for tritanopia visibility.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for yellow tags, replaced with orange.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags, replaced with orange.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(61.26% 69.37 350)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.300}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.4)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(98.27% 0.36 135.2), 0 0 0 4px lch(8.25% 4.49 287.18)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(2.44% 1.49 285.81)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.black}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Gitness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles-esm/source-light-tritanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-light-tritanopia-desktop-harness.ts new file mode 100644 index 0000000000..db6492bf5e --- /dev/null +++ b/packages/core-design-system/src/styles-esm/source-light-tritanopia-desktop-harness.ts @@ -0,0 +1,8854 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:53 GMT + * Copyright (c) Harness. + */ + +export default { + background: { + 1: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", + }, + name: "canary-background-1", + attributes: { + category: "background", + type: "1", + themeable: true, + }, + path: ["background", "1"], + }, + 2: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", + }, + name: "canary-background-2", + attributes: { + category: "background", + type: "2", + themeable: true, + }, + path: ["background", "2"], + }, + 3: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", + }, + name: "canary-background-3", + attributes: { + category: "background", + type: "3", + themeable: true, + }, + path: ["background", "3"], + }, + }, + text: { + 1: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", + }, + name: "canary-text-1", + attributes: { + category: "text", + type: "1", + themeable: true, + }, + path: ["text", "1"], + }, + 2: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", + }, + name: "canary-text-2", + attributes: { + category: "text", + type: "2", + themeable: true, + }, + path: ["text", "2"], + }, + 3: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.700}", + $description: + "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", + }, + name: "canary-text-3", + attributes: { + category: "text", + type: "3", + themeable: true, + }, + path: ["text", "3"], + }, + accent: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", + }, + name: "canary-text-accent", + attributes: { + category: "text", + type: "accent", + themeable: true, + }, + path: ["text", "accent"], + }, + success: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", + }, + name: "canary-text-success", + attributes: { + category: "text", + type: "success", + themeable: true, + }, + path: ["text", "success"], + }, + danger: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", + }, + name: "canary-text-danger", + attributes: { + category: "text", + type: "danger", + themeable: true, + }, + path: ["text", "danger"], + }, + warning: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", + }, + name: "canary-text-warning", + attributes: { + category: "text", + type: "warning", + themeable: true, + }, + path: ["text", "warning"], + }, + }, + border: { + 1: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", + }, + name: "canary-border-1", + attributes: { + category: "border", + type: "1", + themeable: true, + }, + path: ["border", "1"], + }, + 2: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", + }, + name: "canary-border-2", + attributes: { + category: "border", + type: "2", + themeable: true, + }, + path: ["border", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.8", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", + }, + name: "canary-border-3", + attributes: { + category: "border", + type: "3", + themeable: true, + }, + path: ["border", "3"], + }, + focus: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", + }, + name: "canary-border-focus", + attributes: { + category: "border", + type: "focus", + themeable: true, + }, + path: ["border", "focus"], + }, + success: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", + }, + name: "canary-border-success", + attributes: { + category: "border", + type: "success", + themeable: true, + }, + path: ["border", "success"], + }, + danger: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", + }, + name: "canary-border-danger", + attributes: { + category: "border", + type: "danger", + themeable: true, + }, + path: ["border", "danger"], + }, + warning: { + $type: "color", + $value: "lch(45.68% 60.45 52.23)", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.500}", + $description: + "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", + }, + name: "canary-border-warning", + attributes: { + category: "border", + type: "warning", + themeable: true, + }, + path: ["border", "warning"], + }, + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", + }, + name: "canary-state-hover", + attributes: { + category: "state", + type: "hover", + themeable: true, + }, + path: ["state", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", + }, + name: "canary-state-selected", + attributes: { + category: "state", + type: "selected", + themeable: true, + }, + path: ["state", "selected"], + }, + disabled: { + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", + }, + name: "canary-state-disabled-text", + attributes: { + category: "state", + type: "disabled", + item: "text", + themeable: true, + }, + path: ["state", "disabled", "text"], + }, + background: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", + }, + name: "canary-state-disabled-background", + attributes: { + category: "state", + type: "disabled", + item: "background", + themeable: true, + }, + path: ["state", "disabled", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", + }, + name: "canary-state-disabled-border", + attributes: { + category: "state", + type: "disabled", + item: "border", + themeable: true, + }, + path: ["state", "disabled", "border"], + }, + }, + }, + component: { + accordion: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", + }, + name: "canary-component-accordion-title", + attributes: { + category: "component", + type: "accordion", + item: "title", + themeable: true, + }, + path: ["component", "accordion", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for accordion content. Applied to the expandable text within accordion panels.", + }, + name: "canary-component-accordion-description", + attributes: { + category: "component", + type: "accordion", + item: "description", + themeable: true, + }, + path: ["component", "accordion", "description"], + }, + chevron: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", + }, + name: "canary-component-accordion-chevron", + attributes: { + category: "component", + type: "accordion", + item: "chevron", + themeable: true, + }, + path: ["component", "accordion", "chevron"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for accordion items. Provides visual separation between accordion panels.", + }, + name: "canary-component-accordion-border", + attributes: { + category: "component", + type: "accordion", + item: "border", + themeable: true, + }, + path: ["component", "accordion", "border"], + }, + }, + alert: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational alerts. Ensures high visibility for the alert heading.", + }, + name: "canary-component-alert-default-title", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational alerts. Provides readable contrast for alert content.", + }, + name: "canary-component-alert-default-description", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational alerts. Creates visual distinction from surrounding content.", + }, + name: "canary-component-alert-default-background", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational alerts. Subtly defines the alert's boundaries.", + }, + name: "canary-component-alert-default-border", + attributes: { + category: "component", + type: "alert", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(18.31% 42.35 35.83)", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.800}", + $description: + "Text color for danger alerts. Communicates critical information through high-contrast red text.", + }, + name: "canary-component-alert-danger-title", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "alert", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", + }, + name: "canary-component-alert-danger-description", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "alert", "danger", "description"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background color for danger alerts. Creates subtle but recognizable error state styling.", + }, + name: "canary-component-alert-danger-background", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "alert", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger alerts. Provides definition for error state alerts.", + }, + name: "canary-component-alert-danger-border", + attributes: { + category: "component", + type: "alert", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "alert", "danger", "border"], + }, + }, + }, + avatar: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for avatar initials or text. Ensures visibility against the avatar background.", + }, + name: "canary-component-avatar-text", + attributes: { + category: "component", + type: "avatar", + item: "text", + themeable: true, + }, + path: ["component", "avatar", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for avatar components. Provides contrast for text or image content.", + }, + name: "canary-component-avatar-background", + attributes: { + category: "component", + type: "avatar", + item: "background", + themeable: true, + }, + path: ["component", "avatar", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for avatars. Creates subtle definition around the avatar element.", + }, + name: "canary-component-avatar-border", + attributes: { + category: "component", + type: "avatar", + item: "border", + themeable: true, + }, + path: ["component", "avatar", "border"], + }, + }, + badge: { + default: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for secondary badges. Provides readable contrast on secondary badge styling.", + }, + name: "canary-component-badge-default-text", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "default", "text"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for secondary badges. Creates less prominent badge styling for secondary information.", + }, + name: "canary-component-badge-default-background", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.badge.default.background}", + $description: + "Border color for secondary badges. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-badge-default-border", + attributes: { + category: "component", + type: "badge", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "default", "border"], + }, + }, + neutral: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", + }, + name: "canary-component-badge-neutral-text", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "neutral", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", + }, + name: "canary-component-badge-neutral-background", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "neutral", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.2)", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.600}", + $description: + "Border color for outline badges. Creates definition for badges without background fill.", + }, + name: "canary-component-badge-neutral-border", + attributes: { + category: "component", + type: "badge", + item: "neutral", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "neutral", "border"], + }, + }, + success: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for success badges. Communicates positive status through readable cyan text.", + }, + name: "canary-component-badge-success-text", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "success", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.2)", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for success badges. Provides subtle definition for success state indicators.", + }, + name: "canary-component-badge-success-border", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "success", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.1)", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Background color for success badges. Creates a subtle but recognizable success indicator.", + }, + name: "canary-component-badge-success-background", + attributes: { + category: "component", + type: "badge", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "success", "background"], + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Text color for danger badges. Communicates error or warning status with high visibility.", + }, + name: "canary-component-badge-danger-text", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "danger", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger badges. Creates definition for error or warning indicators.", + }, + name: "canary-component-badge-danger-border", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "danger", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger badges. Provides subtle visual indication of error states.", + }, + name: "canary-component-badge-danger-background", + attributes: { + category: "component", + type: "badge", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "danger", "background"], + }, + }, + warning: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Text color for warning badges. Signals caution states with readable orange text.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Text color for warning badges. Signals caution states with readable orange text.", + }, + name: "canary-component-badge-warning-text", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "warning", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for warning badges. Defines the boundary of caution status indicators.", + }, + name: "canary-component-badge-warning-border", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "warning", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-200) l c h / 0.1)", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.200}", + $description: + "Background color for warning badges. Creates subtle but recognizable caution indicators.", + }, + name: "canary-component-badge-warning-background", + attributes: { + category: "component", + type: "badge", + item: "warning", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "warning", "background"], + }, + }, + running: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Text color for running state badges. Indicates active or in-progress operations.", + }, + name: "canary-component-badge-running-text", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "running", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.400}", + $description: + "Border color for running state badges. Defines the boundary of active status indicators.", + }, + name: "canary-component-badge-running-border", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "running", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.orange.300}", + $description: + "Background color for running state badges. Creates subtle visual indication of in-progress states.", + }, + name: "canary-component-badge-running-background", + attributes: { + category: "component", + type: "badge", + item: "running", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "running", "background"], + }, + }, + merged: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for merged state badges. Indicates completed merge actions in version control contexts.", + }, + name: "canary-component-badge-merged-text", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "merged", "text"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.2)", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for merged state badges. Defines the boundary of merge status indicators.", + }, + name: "canary-component-badge-merged-border", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "merged", "border"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Background color for merged state badges. Creates subtle but recognizable merge indicators.", + }, + name: "canary-component-badge-merged-background", + attributes: { + category: "component", + type: "badge", + item: "merged", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "merged", "background"], + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", + }, + name: "canary-component-badge-ai-text", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "badge", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", + }, + name: "canary-component-badge-ai-background", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "badge", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(74.82% 51.93 49.87) 0%, lch(61.26% 69.37 350) 35%, lch(65.49% 45.28 239) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-badge-ai-border", + attributes: { + category: "component", + type: "badge", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "badge", "ai", "border"], + }, + }, + }, + breadcrumb: { + "item-inactive": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", + }, + name: "canary-component-breadcrumb-item-inactive", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-inactive", + themeable: true, + }, + path: ["component", "breadcrumb", "item-inactive"], + }, + "item-current": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", + }, + name: "canary-component-breadcrumb-item-current", + attributes: { + category: "component", + type: "breadcrumb", + item: "item-current", + themeable: true, + }, + path: ["component", "breadcrumb", "item-current"], + }, + separator: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{state.disabled.text}", + $description: + "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", + }, + name: "canary-component-breadcrumb-separator", + attributes: { + category: "component", + type: "breadcrumb", + item: "separator", + themeable: true, + }, + path: ["component", "breadcrumb", "separator"], + }, + }, + btn: { + primary: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.onColor.500}", + $description: + "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", + }, + name: "canary-component-btn-primary-text", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "primary", "text"], + }, + background: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", + }, + name: "canary-component-btn-primary-background", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "primary", "background"], + }, + border: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.primary.background}", + $description: + "Border color for primary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-primary-border", + attributes: { + category: "component", + type: "btn", + item: "primary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "primary", "border"], + }, + }, + secondary: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", + }, + name: "canary-component-btn-secondary-text", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "secondary", "text"], + }, + background: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", + }, + name: "canary-component-btn-secondary-background", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "secondary", "background"], + }, + border: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.btn.secondary.background}", + $description: + "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", + }, + name: "canary-component-btn-secondary-border", + attributes: { + category: "component", + type: "btn", + item: "secondary", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "secondary", "border"], + }, + }, + outline: { + unselected: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", + }, + name: "canary-component-btn-outline-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-outline-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "icon"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-btn-outline-unselected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected outline buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-outline-selected-text", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected outline buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-outline-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "icon"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for selected outline buttons. Creates stronger visual indication of the active state.", + }, + name: "canary-component-btn-outline-selected-border", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "btn", "outline", "selected", "border"], + }, + }, + }, + ghost: { + unselected: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", + }, + name: "canary-component-btn-ghost-unselected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", + }, + name: "canary-component-btn-ghost-unselected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for selected ghost buttons. Increases contrast for active button states.", + }, + name: "canary-component-btn-ghost-selected-text", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Icon color for selected ghost buttons. Increases visibility for active button states.", + }, + name: "canary-component-btn-ghost-selected-icon", + attributes: { + category: "component", + type: "btn", + item: "ghost", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "btn", "ghost", "selected", "icon"], + }, + }, + }, + success: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for success buttons. Communicates positive actions through readable cyan text.", + }, + name: "canary-component-btn-success-text", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "success", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.12)", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Background color for success buttons. Creates subtle but recognizable positive action styling.", + }, + name: "canary-component-btn-success-background", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "success", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.25)", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for success buttons. Provides definition for positive action buttons.", + }, + name: "canary-component-btn-success-border", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "success", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.15)", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Hover state background color for success buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-success-state-hover", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "success", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.25)", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.200}", + $description: + "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-success-state-active", + attributes: { + category: "component", + type: "btn", + item: "success", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "success", "state", "active"], + }, + }, + }, + danger: { + text: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", + }, + name: "canary-component-btn-danger-text", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "danger", "text"], + }, + background: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.12)", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", + }, + name: "canary-component-btn-danger-background", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "danger", "background"], + }, + border: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for danger buttons. Provides definition for destructive action buttons.", + }, + name: "canary-component-btn-danger-border", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "danger", "border"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", + }, + name: "canary-component-btn-danger-state-hover", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "hover", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "hover"], + }, + active: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.25)", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", + }, + name: "canary-component-btn-danger-state-active", + attributes: { + category: "component", + type: "btn", + item: "danger", + subitem: "state", + state: "active", + themeable: true, + }, + path: ["component", "btn", "danger", "state", "active"], + }, + }, + }, + ai: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", + }, + name: "canary-component-btn-ai-text", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "text", + themeable: true, + }, + path: ["component", "btn", "ai", "text"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for AI-powered buttons.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for AI-powered buttons.", + }, + name: "canary-component-btn-ai-background", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "ai", "background"], + }, + border: { + $type: "color", + $value: + "linear-gradient(94deg, lch(74.82% 51.93 49.87) 0%, lch(61.26% 69.37 350) 35%, lch(65.49% 45.28 239) 65%, lch(74.15% 29 241) 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", + $description: + "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", + }, + name: "canary-component-btn-ai-border", + attributes: { + category: "component", + type: "btn", + item: "ai", + subitem: "border", + themeable: true, + }, + path: ["component", "btn", "ai", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for card components. Creates a distinct surface that appears elevated from the page background.", + }, + name: "canary-component-card-background", + attributes: { + category: "component", + type: "card", + item: "background", + themeable: true, + }, + path: ["component", "card", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", + }, + name: "canary-component-card-border", + attributes: { + category: "component", + type: "card", + item: "border", + themeable: true, + }, + path: ["component", "card", "border"], + }, + }, + dialog: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", + }, + name: "canary-component-dialog-title", + attributes: { + category: "component", + type: "dialog", + item: "title", + themeable: true, + }, + path: ["component", "dialog", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dialog content. Provides readable contrast for the modal's primary text content.", + }, + name: "canary-component-dialog-description", + attributes: { + category: "component", + type: "dialog", + item: "description", + themeable: true, + }, + path: ["component", "dialog", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", + }, + name: "canary-component-dialog-background", + attributes: { + category: "component", + type: "dialog", + item: "background", + themeable: true, + }, + path: ["component", "dialog", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for dialog components.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dialog components.", + }, + name: "canary-component-dialog-border", + attributes: { + category: "component", + type: "dialog", + item: "border", + themeable: true, + }, + path: ["component", "dialog", "border"], + }, + backdrop: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", + }, + name: "canary-component-dialog-backdrop", + attributes: { + category: "component", + type: "dialog", + item: "backdrop", + themeable: true, + }, + path: ["component", "dialog", "backdrop"], + }, + }, + dropdown: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for dropdown menus. Creates a distinct surface for selectable options.", + }, + name: "canary-component-dropdown-background", + attributes: { + category: "component", + type: "dropdown", + item: "background", + themeable: true, + }, + path: ["component", "dropdown", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for dropdown menus container.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: "Border color for dropdown menus container.", + }, + name: "canary-component-dropdown-border", + attributes: { + category: "component", + type: "dropdown", + item: "border", + themeable: true, + }, + path: ["component", "dropdown", "border"], + }, + item: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for dropdown menu items. Ensures readability of selectable options.", + }, + name: "canary-component-dropdown-item-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "text"], + }, + delete: { + text: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: "Text color for dropdown menu delete-item.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.danger}", + $description: "Text color for dropdown menu delete-item.", + }, + name: "canary-component-dropdown-item-delete-text", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "text", + themeable: true, + }, + path: ["component", "dropdown", "item", "delete", "text"], + }, + state: { + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $description: + "Specific hover state color for dropdown delete-item.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.300}", + $description: + "Specific hover state color for dropdown delete-item.", + }, + name: "canary-component-dropdown-item-delete-state-hover", + attributes: { + category: "component", + type: "dropdown", + item: "item", + subitem: "delete", + state: "state", + themeable: true, + }, + path: [ + "component", + "dropdown", + "item", + "delete", + "state", + "hover", + ], + }, + }, + }, + }, + }, + diff: { + grey: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", + }, + name: "canary-component-diff-grey", + attributes: { + category: "component", + type: "diff", + item: "grey", + themeable: true, + }, + path: ["component", "diff", "grey"], + }, + "add-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Cyan background highlighting newly added code lines while maintaining readability.", + }, + name: "canary-component-diff-add-content", + attributes: { + category: "component", + type: "diff", + item: "add-content", + themeable: true, + }, + path: ["component", "diff", "add-content"], + }, + "add-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Background for line numbers of added code, providing visual connection to added content.", + }, + name: "canary-component-diff-add-line-number", + attributes: { + category: "component", + type: "diff", + item: "add-lineNumber", + themeable: true, + }, + path: ["component", "diff", "add-lineNumber"], + }, + "add-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within added lines.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.cyan.500}", + $description: + "Stronger emphasis color for specific character changes within added lines.", + }, + name: "canary-component-diff-add-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "add-content-highlight", + themeable: true, + }, + path: ["component", "diff", "add-content-highlight"], + }, + "add-widget": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for interactive UI elements related to added content.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Background for interactive UI elements related to added content.", + }, + name: "canary-component-diff-add-widget", + attributes: { + category: "component", + type: "diff", + item: "add-widget", + themeable: true, + }, + path: ["component", "diff", "add-widget"], + }, + "add-widget-color": { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text/icon color for add-related interactive elements, ensuring readability.", + }, + name: "canary-component-diff-add-widget-color", + attributes: { + category: "component", + type: "diff", + item: "add-widget-color", + themeable: true, + }, + path: ["component", "diff", "add-widget-color"], + }, + "del-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $description: + "Red background highlighting removed code lines without causing eye strain.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Red background highlighting removed code lines without causing eye strain.", + }, + name: "canary-component-diff-del-content", + attributes: { + category: "component", + type: "diff", + item: "del-content", + themeable: true, + }, + path: ["component", "diff", "del-content"], + }, + "del-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Background for line numbers of deleted code, connecting numbers to removed content.", + }, + name: "canary-component-diff-del-line-number", + attributes: { + category: "component", + type: "diff", + item: "del-lineNumber", + themeable: true, + }, + path: ["component", "diff", "del-lineNumber"], + }, + "del-content-highlight": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.25", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.red.500}", + $description: + "Stronger emphasis color for specific character changes within deleted lines.", + }, + name: "canary-component-diff-del-content-highlight", + attributes: { + category: "component", + type: "diff", + item: "del-content-highlight", + themeable: true, + }, + path: ["component", "diff", "del-content-highlight"], + }, + "plain-content": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Neutral background for unchanged code that allows modified content to stand out.", + }, + name: "canary-component-diff-plain-content", + attributes: { + category: "component", + type: "diff", + item: "plain-content", + themeable: true, + }, + path: ["component", "diff", "plain-content"], + }, + "plain-lineNumber": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for line numbers of unchanged code, maintaining visual rhythm.", + }, + name: "canary-component-diff-plain-line-number", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber"], + }, + "plain-lineNumber-color": { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unchanged line numbers, visually subdued compared to changed content.", + }, + name: "canary-component-diff-plain-line-number-color", + attributes: { + category: "component", + type: "diff", + item: "plain-lineNumber-color", + themeable: true, + }, + path: ["component", "diff", "plain-lineNumber-color"], + }, + "empty-content": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background for placeholder spaces and empty lines, maintaining visual continuity.", + }, + name: "canary-component-diff-empty-content", + attributes: { + category: "component", + type: "diff", + item: "empty-content", + themeable: true, + }, + path: ["component", "diff", "empty-content"], + }, + "hunk-content": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.12", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: + "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", + }, + name: "canary-component-diff-hunk-content", + attributes: { + category: "component", + type: "diff", + item: "hunk-content", + themeable: true, + }, + path: ["component", "diff", "hunk-content"], + }, + "hunk-lineNumber": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $description: "Background for line numbers in section headers.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.blue.500}", + $description: "Background for line numbers in section headers.", + }, + name: "canary-component-diff-hunk-line-number", + attributes: { + category: "component", + type: "diff", + item: "hunk-lineNumber", + themeable: true, + }, + path: ["component", "diff", "hunk-lineNumber"], + }, + "hunk-content-color": { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for section header content showing file position information.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for section header content showing file position information.", + }, + name: "canary-component-diff-hunk-content-color", + attributes: { + category: "component", + type: "diff", + item: "hunk-content-color", + themeable: true, + }, + path: ["component", "diff", "hunk-content-color"], + }, + "expand-content": { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background for controls that expand/collapse code sections to show additional context.", + }, + name: "canary-component-diff-expand-content", + attributes: { + category: "component", + type: "diff", + item: "expand-content", + themeable: true, + }, + path: ["component", "diff", "expand-content"], + }, + }, + input: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for input field content. Ensures readability of user-entered information.", + }, + name: "canary-component-input-text", + attributes: { + category: "component", + type: "input", + item: "text", + themeable: true, + }, + path: ["component", "input", "text"], + }, + placeholder: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", + }, + name: "canary-component-input-placeholder", + attributes: { + category: "component", + type: "input", + item: "placeholder", + themeable: true, + }, + path: ["component", "input", "placeholder"], + }, + icon: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", + }, + name: "canary-component-input-icon", + attributes: { + category: "component", + type: "input", + item: "icon", + themeable: true, + }, + path: ["component", "input", "icon"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for input fields. Creates a distinct surface for user interaction and data entry.", + }, + name: "canary-component-input-background", + attributes: { + category: "component", + type: "input", + item: "background", + themeable: true, + }, + path: ["component", "input", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for input fields. Defines the input area with a visible boundary for improved usability.", + }, + name: "canary-component-input-border", + attributes: { + category: "component", + type: "input", + item: "border", + themeable: true, + }, + path: ["component", "input", "border"], + }, + }, + label: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", + }, + name: "canary-component-label-text", + attributes: { + category: "component", + type: "label", + item: "text", + themeable: true, + }, + path: ["component", "label", "text"], + }, + }, + link: { + default: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.accent}", + $description: + "Default color for text links. Creates distinct visual identification of interactive text elements.", + }, + name: "canary-component-link-default", + attributes: { + category: "component", + type: "link", + item: "default", + themeable: true, + }, + path: ["component", "link", "default"], + }, + visited: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Visited state color for text links. Differentiates links the user has already activated.", + }, + name: "canary-component-link-visited", + attributes: { + category: "component", + type: "link", + item: "visited", + themeable: true, + }, + path: ["component", "link", "visited"], + }, + }, + "nav-tabs": { + unselected: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: "Unselected tab item text.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: "Unselected tab item text.", + }, + name: "canary-component-nav-tabs-unselected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "unselected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "unselected", "text"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Selected tab item text.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: "Selected tab item text.", + }, + name: "canary-component-nav-tabs-selected-text", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "text", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "text"], + }, + border: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: "Selected tab item border.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.focus}", + $description: "Selected tab item border.", + }, + name: "canary-component-nav-tabs-selected-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "selected", "border"], + }, + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: "Navigation container border.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: "Navigation container border.", + }, + name: "canary-component-nav-tabs-border", + attributes: { + category: "component", + type: "nav-tabs", + item: "border", + themeable: true, + }, + path: ["component", "nav-tabs", "border"], + }, + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Navigation tabs container background.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Navigation tabs container background.", + }, + name: "canary-component-nav-tabs-background", + attributes: { + category: "component", + type: "nav-tabs", + item: "background", + themeable: true, + }, + path: ["component", "nav-tabs", "background"], + }, + }, + pipeline: { + arrow: { + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", + }, + name: "canary-component-pipeline-arrow-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "border"], + }, + running: { + border: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(54.29% 60.55 281.11) 50%, lch(26.73% 7.48 287.06) 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", + $description: + "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", + }, + name: "canary-component-pipeline-arrow-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "arrow", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "arrow", "running", "border"], + }, + }, + }, + card: { + background: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(100% 0 134.54) 10%, lch(98.27% 0.36 135.2) 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", + $description: + "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", + }, + name: "canary-component-pipeline-card-background", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "background", + themeable: true, + }, + path: ["component", "pipeline", "card", "background"], + }, + border: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,lch(98.27% 0.36 135.2) 10%, lch(90.71% 0.38 284.93) 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", + $description: + "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", + }, + name: "canary-component-pipeline-card-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "border"], + }, + running: { + border: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.4) 30%, lch(63.38% 78.04 52.26) 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", + $description: + "Animated gradient border for running pipeline states. Provides visual indication of active processing.", + }, + name: "canary-component-pipeline-card-running-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "running", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "running", "border"], + }, + }, + error: { + border: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", + }, + name: "canary-component-pipeline-card-error-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "error", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "error", "border"], + }, + }, + completed: { + border: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + $description: + "Border color for completed pipeline states. Indicates successful pipeline execution.", + }, + name: "canary-component-pipeline-card-completed-border", + attributes: { + category: "component", + type: "pipeline", + item: "card", + subitem: "completed", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card", "completed", "border"], + }, + }, + }, + "card-canvas": { + 1: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", + }, + name: "canary-component-pipeline-card-canvas-1-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", + }, + name: "canary-component-pipeline-card-canvas-1-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "1", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "1", "border"], + }, + }, + 2: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: + "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", + }, + name: "canary-component-pipeline-card-canvas-2-background", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "background", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", + }, + name: "canary-component-pipeline-card-canvas-2-border", + attributes: { + category: "component", + type: "pipeline", + item: "card-canvas", + subitem: "2", + state: "border", + themeable: true, + }, + path: ["component", "pipeline", "card-canvas", "2", "border"], + }, + }, + }, + background: { + dotes: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Refers to the dotted pattern visible in the background of the workspace.", + }, + name: "canary-component-pipeline-background-dotes", + attributes: { + category: "component", + type: "pipeline", + item: "background", + subitem: "dotes", + themeable: true, + }, + path: ["component", "pipeline", "background", "dotes"], + }, + }, + }, + sidebar: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for navigation components. Creates a consistent foundation for navigation elements.", + }, + name: "canary-component-sidebar-background", + attributes: { + category: "component", + type: "sidebar", + item: "background", + themeable: true, + }, + path: ["component", "sidebar", "background"], + }, + border: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", + }, + name: "canary-component-sidebar-border", + attributes: { + category: "component", + type: "sidebar", + item: "border", + themeable: true, + }, + path: ["component", "sidebar", "border"], + }, + separator: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Color for separators between navigation sections. Creates visual organization within the navigation structure.", + }, + name: "canary-component-sidebar-separator", + attributes: { + category: "component", + type: "sidebar", + item: "separator", + themeable: true, + }, + path: ["component", "sidebar", "separator"], + }, + hover: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $description: "Hover state for navigation items.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.15", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Hover state for navigation items.", + }, + name: "canary-component-sidebar-hover", + attributes: { + category: "component", + type: "sidebar", + item: "hover", + themeable: true, + }, + path: ["component", "sidebar", "hover"], + }, + selected: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $description: "Selected state for navigation items.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.2", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.700}", + $description: "Selected state for navigation items.", + }, + name: "canary-component-sidebar-selected", + attributes: { + category: "component", + type: "sidebar", + item: "selected", + themeable: true, + }, + path: ["component", "sidebar", "selected"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(81.33% 4.52 285.46)", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-sidebar-item-unselected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "text"], + }, + icon: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", + }, + name: "canary-component-sidebar-item-unselected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "unselected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "unselected", "icon"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Text color for selected navigation items. Increases contrast to highlight the current location.", + }, + name: "canary-component-sidebar-item-selected-text", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "text"], + }, + icon: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", + }, + name: "canary-component-sidebar-item-selected-icon", + attributes: { + category: "component", + type: "sidebar", + item: "item", + subitem: "selected", + state: "icon", + themeable: true, + }, + path: ["component", "sidebar", "item", "selected", "icon"], + }, + }, + }, + logo: { + text: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Text color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: "Text color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-text", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "text", + themeable: true, + }, + path: ["component", "sidebar", "logo", "text"], + }, + icon: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: "Icon color for Logo in sidebar navigation.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.300}", + $description: "Icon color for Logo in sidebar navigation.", + }, + name: "canary-component-sidebar-logo-icon", + attributes: { + category: "component", + type: "sidebar", + item: "logo", + subitem: "icon", + themeable: true, + }, + path: ["component", "sidebar", "logo", "icon"], + }, + }, + search: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Search input specific background on sidebar navigation.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + $description: + "Search input specific background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: "Search input specific border on sidebar navigation.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: "Search input specific border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "border"], + }, + placeholder: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific placeholder on sidebar navigation.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific placeholder on sidebar navigation.", + }, + name: "canary-component-sidebar-search-placeholder", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "placeholder", + themeable: true, + }, + path: ["component", "sidebar", "search", "placeholder"], + }, + btn: { + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Search input specific button background on sidebar navigation.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Search input specific button background on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-background", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "background", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Search input specific button border on sidebar navigation.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.800}", + $description: + "Search input specific button border on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-border", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "border", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "border"], + }, + text: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: + "Search input specific button text on sidebar navigation.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: + "Search input specific button text on sidebar navigation.", + }, + name: "canary-component-sidebar-search-btn-text", + attributes: { + category: "component", + type: "sidebar", + item: "search", + subitem: "btn", + state: "text", + themeable: true, + }, + path: ["component", "sidebar", "search", "btn", "text"], + }, + }, + }, + footer: { + username: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Username in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: "Username in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-username", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "username", + themeable: true, + }, + path: ["component", "sidebar", "footer", "username"], + }, + data: { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + $description: "User data in the footer sidebar navigation menu.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + $description: "User data in the footer sidebar navigation menu.", + }, + name: "canary-component-sidebar-footer-data", + attributes: { + category: "component", + type: "sidebar", + item: "footer", + subitem: "data", + themeable: true, + }, + path: ["component", "sidebar", "footer", "data"], + }, + }, + }, + scrollbar: { + thumb: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", + }, + name: "canary-component-scrollbar-thumb", + attributes: { + category: "component", + type: "scrollbar", + item: "thumb", + themeable: true, + }, + path: ["component", "scrollbar", "thumb"], + }, + }, + selection: { + unselected: { + item: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", + }, + name: "canary-component-selection-unselected-item", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "unselected", "item"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected state in selection controls. Creates visual distinction from selected items.", + }, + name: "canary-component-selection-unselected-background", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + $description: + "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", + }, + name: "canary-component-selection-unselected-border", + attributes: { + category: "component", + type: "selection", + item: "unselected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "unselected", "border"], + }, + }, + selected: { + item: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + $description: + "Color for selected items in selection controls. Creates high contrast against selected background state.", + }, + name: "canary-component-selection-selected-item", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "item", + themeable: true, + }, + path: ["component", "selection", "selected", "item"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for selected state in selection controls. Creates strong visual indication of active selection.", + }, + name: "canary-component-selection-selected-background", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "selection", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", + }, + name: "canary-component-selection-selected-border", + attributes: { + category: "component", + type: "selection", + item: "selected", + subitem: "border", + themeable: true, + }, + path: ["component", "selection", "selected", "border"], + }, + }, + }, + separator: { + background: { + $type: "color", + $value: "2px", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{borderWidth.2}", + $description: + "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", + }, + name: "canary-component-separator-background", + attributes: { + category: "component", + type: "separator", + item: "background", + themeable: true, + }, + path: ["component", "separator", "background"], + }, + }, + skeleton: { + background: { + $type: "color", + $value: + "linear-gradient(90deg, lch(90.71% 0.38 284.93) 0%, lch(100% 0 134.54) 50%, lch(90.71% 0.38 284.93) 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: + "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", + $description: + 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', + }, + name: "canary-component-skeleton-background", + attributes: { + category: "component", + type: "skeleton", + item: "background", + themeable: true, + }, + path: ["component", "skeleton", "background"], + }, + }, + slider: { + track: { + base: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for slider tracks. Represents the full range of available values in an unselected state.", + }, + name: "canary-component-slider-track-base", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track", "base"], + }, + progress: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.500}", + $description: + "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", + }, + name: "canary-component-slider-track-progress", + attributes: { + category: "component", + type: "slider", + item: "track", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track", "progress"], + }, + }, + "track-segments": { + base: { + $type: "color", + $value: "lch(74.37% 4.52 285.5)", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", + }, + name: "canary-component-slider-track-segments-base", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "base", + themeable: true, + }, + path: ["component", "slider", "track-segments", "base"], + }, + progress: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{brand.color.700}", + $description: + "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", + }, + name: "canary-component-slider-track-segments-progress", + attributes: { + category: "component", + type: "slider", + item: "track-segments", + subitem: "progress", + themeable: true, + }, + path: ["component", "slider", "track-segments", "progress"], + }, + }, + handle: { + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", + }, + name: "canary-component-slider-handle-background", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "background", + themeable: true, + }, + path: ["component", "slider", "handle", "background"], + }, + border: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Border color for slider handles. Provides definition and contrast for the interactive control.", + }, + name: "canary-component-slider-handle-border", + attributes: { + category: "component", + type: "slider", + item: "handle", + subitem: "border", + themeable: true, + }, + path: ["component", "slider", "handle", "border"], + }, + }, + }, + "status-indicator": { + completed: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for success status indicators. Communicates completed or positive states.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for success status indicators. Communicates completed or positive states.", + }, + name: "canary-component-status-indicator-completed", + attributes: { + category: "component", + type: "status-indicator", + item: "completed", + themeable: true, + }, + path: ["component", "status-indicator", "completed"], + }, + cancelled: { + $type: "color", + $value: "lch(53.74% 88.37 37.69)", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.400}", + $description: + "Color for danger status indicators. Communicates error or critical warning states.", + }, + name: "canary-component-status-indicator-cancelled", + attributes: { + category: "component", + type: "status-indicator", + item: "cancelled", + themeable: true, + }, + path: ["component", "status-indicator", "cancelled"], + }, + warning: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for warning status indicators. Communicates caution or potential issue states.", + }, + name: "canary-component-status-indicator-warning", + attributes: { + category: "component", + type: "status-indicator", + item: "warning", + themeable: true, + }, + path: ["component", "status-indicator", "warning"], + }, + running: { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + $description: + "Color for running status indicators. Communicates active or in-progress operations.", + }, + name: "canary-component-status-indicator-running", + attributes: { + category: "component", + type: "status-indicator", + item: "running", + themeable: true, + }, + path: ["component", "status-indicator", "running"], + }, + merged: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + $description: + "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", + }, + name: "canary-component-status-indicator-merged", + attributes: { + category: "component", + type: "status-indicator", + item: "merged", + themeable: true, + }, + path: ["component", "status-indicator", "merged"], + }, + "action-required": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + $description: + "Color for action-required status indicators. Communicates that user attention or intervention is needed.", + }, + name: "canary-component-status-indicator-action-required", + attributes: { + category: "component", + type: "status-indicator", + item: "action-required", + themeable: true, + }, + path: ["component", "status-indicator", "action-required"], + }, + waiting: { + $type: "color", + $value: "lch(67.41% 4.51 285.56)", + $description: + "Color for pending status indicators. Communicates in waiting states.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.400}", + $description: + "Color for pending status indicators. Communicates in waiting states.", + }, + name: "canary-component-status-indicator-waiting", + attributes: { + category: "component", + type: "status-indicator", + item: "waiting", + themeable: true, + }, + path: ["component", "status-indicator", "waiting"], + }, + }, + switch: { + unselected: { + thumb: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", + }, + name: "canary-component-switch-unselected-thumb", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "unselected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + $description: + "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", + }, + name: "canary-component-switch-unselected-background", + attributes: { + category: "component", + type: "switch", + item: "unselected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "unselected", "background"], + }, + }, + selected: { + thumb: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", + }, + name: "canary-component-switch-selected-thumb", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "thumb", + themeable: true, + }, + path: ["component", "switch", "selected", "thumb"], + }, + background: { + $type: "color", + $value: "lch(8.25% 4.49 287.18)", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Background color for the selected state of switch controls. Creates strong visual indication of active state.", + }, + name: "canary-component-switch-selected-background", + attributes: { + category: "component", + type: "switch", + item: "selected", + subitem: "background", + themeable: true, + }, + path: ["component", "switch", "selected", "background"], + }, + }, + }, + table: { + header: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for table header cells. Ensures readability of column labels and titles.", + }, + name: "canary-component-table-header-text", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "header", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for table header rows. Creates visual distinction between headers and data rows.", + }, + name: "canary-component-table-header-background", + attributes: { + category: "component", + type: "table", + item: "header", + subitem: "background", + themeable: true, + }, + path: ["component", "table", "header", "background"], + }, + }, + row: { + "alternate-background": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + $description: + "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", + }, + name: "canary-component-table-row-alternate-background", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "alternate-background", + themeable: true, + }, + path: ["component", "table", "row", "alternate-background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for table rows. Provides subtle separation between data rows.", + }, + name: "canary-component-table-row-border", + attributes: { + category: "component", + type: "table", + item: "row", + subitem: "border", + themeable: true, + }, + path: ["component", "table", "row", "border"], + }, + }, + cell: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for table cell content. Ensures high readability of tabular data.", + }, + name: "canary-component-table-cell-text", + attributes: { + category: "component", + type: "table", + item: "cell", + subitem: "text", + themeable: true, + }, + path: ["component", "table", "cell", "text"], + }, + }, + }, + tabs: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for the tabs container. Creates a consistent foundation for tab elements.", + }, + name: "canary-component-tabs-background", + attributes: { + category: "component", + type: "tabs", + item: "background", + themeable: true, + }, + path: ["component", "tabs", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", + }, + name: "canary-component-tabs-border", + attributes: { + category: "component", + type: "tabs", + item: "border", + themeable: true, + }, + path: ["component", "tabs", "border"], + }, + item: { + unselected: { + text: { + $type: "color", + $value: "lch(39.46% 8.98 286.89)", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.3}", + $description: + "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", + }, + name: "canary-component-tabs-item-unselected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.1}", + $description: + "Background color for unselected tab items. Creates visual distinction from the active tab.", + }, + name: "canary-component-tabs-item-unselected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "background"], + }, + border: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tabs.item.unselected.background}", + $description: + "Border color for unselected tab items. Maintains consistent styling with the tab background.", + }, + name: "canary-component-tabs-item-unselected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "unselected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "unselected", "border"], + }, + }, + selected: { + text: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Text color for the selected tab item. Increases contrast to highlight the active tab.", + }, + name: "canary-component-tabs-item-selected-text", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "text", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for the selected tab item. Creates strong visual indication of the active tab.", + }, + name: "canary-component-tabs-item-selected-background", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "background", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "background"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.2}", + $description: + "Border color for the selected tab item. Reinforces the active state with defined boundaries.", + }, + name: "canary-component-tabs-item-selected-border", + attributes: { + category: "component", + type: "tabs", + item: "item", + subitem: "selected", + state: "border", + themeable: true, + }, + path: ["component", "tabs", "item", "selected", "border"], + }, + }, + }, + }, + tag: { + blue: { + text: { + $type: "color", + $value: "lch(35.67% 59.7 280.58)", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.600}", + $description: + "Text color for blue tags. Ensures readability while maintaining the blue color theme.", + }, + name: "canary-component-tag-blue-text", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "blue", "text"], + }, + background: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.100}", + $description: + "Background color for blue tags. Creates a distinct surface with blue theme styling.", + }, + name: "canary-component-tag-blue-background", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "blue", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.27% 4.16 280.86)", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.50}", + $description: + "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-blue-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "blue", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.92% 10.91 279.8)", + $description: "Border color for blue tags.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.blue.background}", + $description: "Border color for blue tags.", + }, + name: "canary-component-tag-blue-border", + attributes: { + category: "component", + type: "tag", + item: "blue", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "blue", "border"], + }, + }, + brown: { + text: { + $type: "color", + $value: "lch(37.01% 31.77 57.67)", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.600}", + $description: + "Text color for brown tags. Ensures readability while maintaining the brown color theme.", + }, + name: "canary-component-tag-brown-text", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "brown", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.100}", + $description: + "Background color for brown tags. Creates a distinct surface with brown theme styling.", + }, + name: "canary-component-tag-brown-background", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "brown", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.55% 12.75 93.47)", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.brown.50}", + $description: + "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-brown-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "brown", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 19.27 79.52)", + $description: "Border color for brown tags.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.brown.background}", + $description: "Border color for brown tags.", + }, + name: "canary-component-tag-brown-border", + attributes: { + category: "component", + type: "tag", + item: "brown", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "brown", "border"], + }, + }, + cyan: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", + }, + name: "canary-component-tag-cyan-text", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "cyan", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", + }, + name: "canary-component-tag-cyan-background", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "cyan", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-cyan-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "cyan", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for cyan tags.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.cyan.background}", + $description: "Border color for cyan tags.", + }, + name: "canary-component-tag-cyan-border", + attributes: { + category: "component", + type: "tag", + item: "cyan", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "cyan", "border"], + }, + }, + green: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for green tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for green tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-green-text", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "green", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for green tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for green tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-green-background", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "green", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for green tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for green tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-green-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "green", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for green tags, replaced with cyan.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.green.background}", + $description: "Border color for green tags, replaced with cyan.", + }, + name: "canary-component-tag-green-border", + attributes: { + category: "component", + type: "tag", + item: "green", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "green", "border"], + }, + }, + indigo: { + text: { + $type: "color", + $value: "lch(30.63% 128.3 302.36)", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.600}", + $description: + "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", + }, + name: "canary-component-tag-indigo-text", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "indigo", "text"], + }, + background: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.100}", + $description: + "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", + }, + name: "canary-component-tag-indigo-background", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "indigo", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 6.03 283.32)", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.indigo.50}", + $description: + "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-indigo-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "indigo", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.8% 14.62 283.7)", + $description: "Border color for indigo tags.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.indigo.background}", + $description: "Border color for indigo tags.", + }, + name: "canary-component-tag-indigo-border", + attributes: { + category: "component", + type: "tag", + item: "indigo", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "indigo", "border"], + }, + }, + lime: { + text: { + $type: "color", + $value: "lch(38.26% 32.05 123.88)", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.600}", + $description: + "Text color for lime tags. Ensures readability while maintaining the lime color theme.", + }, + name: "canary-component-tag-lime-text", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "lime", "text"], + }, + background: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.100}", + $description: + "Background color for lime tags. Creates a distinct surface with lime theme styling.", + }, + name: "canary-component-tag-lime-background", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "lime", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.86% 15.3 127.41)", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.lime.50}", + $description: + "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-lime-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "lime", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.05% 29.33 126.46)", + $description: "Border color for lime tags.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.lime.background}", + $description: "Border color for lime tags.", + }, + name: "canary-component-tag-lime-border", + attributes: { + category: "component", + type: "tag", + item: "lime", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "lime", "border"], + }, + }, + mint: { + text: { + $type: "color", + $value: "lch(38.59% 33.16 169.14)", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.600}", + $description: + "Text color for mint tags. Ensures readability while maintaining the mint color theme.", + }, + name: "canary-component-tag-mint-text", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "mint", "text"], + }, + background: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.100}", + $description: + "Background color for mint tags. Creates a distinct surface with mint theme styling.", + }, + name: "canary-component-tag-mint-background", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "mint", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.82% 11.97 171.06)", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.mint.50}", + $description: + "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-mint-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "mint", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(91.09% 25.48 176.08)", + $description: "Border color for mint tags.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.mint.background}", + $description: "Border color for mint tags.", + }, + name: "canary-component-tag-mint-border", + attributes: { + category: "component", + type: "tag", + item: "mint", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "mint", "border"], + }, + }, + orange: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Text color for orange tags. Ensures readability while maintaining the orange color theme.", + }, + name: "canary-component-tag-orange-text", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "orange", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for orange tags. Creates a distinct surface with orange theme styling.", + }, + name: "canary-component-tag-orange-background", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "orange", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-orange-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "orange", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for orange tags.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.orange.background}", + $description: "Border color for orange tags.", + }, + name: "canary-component-tag-orange-border", + attributes: { + category: "component", + type: "tag", + item: "orange", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "orange", "border"], + }, + }, + pink: { + text: { + $type: "color", + $value: "lch(35.34% 48.39 349.99)", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.600}", + $description: + "Text color for pink tags. Ensures readability while maintaining the pink color theme.", + }, + name: "canary-component-tag-pink-text", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "pink", "text"], + }, + background: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.100}", + $description: + "Background color for pink tags. Creates a distinct surface with pink theme styling.", + }, + name: "canary-component-tag-pink-background", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "pink", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.15% 5.42 350.29)", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.50}", + $description: + "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-pink-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "pink", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.61% 13.47 350.26)", + $description: "Border color for pink tags.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.pink.background}", + $description: "Border color for pink tags.", + }, + name: "canary-component-tag-pink-border", + attributes: { + category: "component", + type: "tag", + item: "pink", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "pink", "border"], + }, + }, + purple: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for purple tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for purple tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-purple-text", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "purple", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for purple tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for purple tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-purple-background", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "purple", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-purple-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "purple", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for purple tags, replaced with cyan.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.purple.background}", + $description: "Border color for purple tags, replaced with cyan.", + }, + name: "canary-component-tag-purple-border", + attributes: { + category: "component", + type: "tag", + item: "purple", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "purple", "border"], + }, + }, + red: { + text: { + $type: "color", + $value: "lch(35.74% 65.47 37.67)", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.600}", + $description: + "Text color for red tags. Ensures readability while maintaining the red color theme.", + }, + name: "canary-component-tag-red-text", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "red", "text"], + }, + background: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.100}", + $description: + "Background color for red tags. Creates a distinct surface with red theme styling.", + }, + name: "canary-component-tag-red-background", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "red", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.23% 5.25 32.59)", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.50}", + $description: + "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-red-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "red", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(89.81% 13.4 32.67)", + $description: "Border color for red tags.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.red.background}", + $description: "Border color for red tags.", + }, + name: "canary-component-tag-red-border", + attributes: { + category: "component", + type: "tag", + item: "red", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "red", "border"], + }, + }, + violet: { + text: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + $description: + "Text color for violet tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + $description: + "Text color for violet tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-violet-text", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "violet", "text"], + }, + background: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: + "Background color for violet tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + $description: + "Background color for violet tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-violet-background", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "violet", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.4% 5 238.5)", + $description: + "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + $description: + "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility.", + }, + name: "canary-component-tag-violet-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "violet", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + $description: "Border color for violet tags, replaced with cyan.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.violet.background}", + $description: "Border color for violet tags, replaced with cyan.", + }, + name: "canary-component-tag-violet-border", + attributes: { + category: "component", + type: "tag", + item: "violet", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "violet", "border"], + }, + }, + yellow: { + text: { + $type: "color", + $value: "lch(36.54% 51.77 52.28)", + $description: + "Text color for yellow tags, replaced with orange for tritanopia visibility.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.600}", + $description: + "Text color for yellow tags, replaced with orange for tritanopia visibility.", + }, + name: "canary-component-tag-yellow-text", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "yellow", "text"], + }, + background: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: + "Background color for yellow tags, replaced with orange for tritanopia visibility.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.100}", + $description: + "Background color for yellow tags, replaced with orange for tritanopia visibility.", + }, + name: "canary-component-tag-yellow-background", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "yellow", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(95.42% 10.03 79.83)", + $description: + "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.50}", + $description: + "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility.", + }, + name: "canary-component-tag-yellow-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "yellow", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.02% 17.62 61.56)", + $description: "Border color for yellow tags, replaced with orange.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.yellow.background}", + $description: "Border color for yellow tags, replaced with orange.", + }, + name: "canary-component-tag-yellow-border", + attributes: { + category: "component", + type: "tag", + item: "yellow", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "yellow", "border"], + }, + }, + gray: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.850}", + $description: + "Text color for gray tags. Ensures readability while maintaining the gray color theme.", + }, + name: "canary-component-tag-gray-text", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "text", + themeable: true, + }, + path: ["component", "tag", "gray", "text"], + }, + background: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + $description: + "Background color for gray tags. Creates a distinct surface with gray theme styling.", + }, + name: "canary-component-tag-gray-background", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background", + themeable: true, + }, + path: ["component", "tag", "gray", "background"], + }, + "background-subtle": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + $description: + "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", + }, + name: "canary-component-tag-gray-background-subtle", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "background-subtle", + themeable: true, + }, + path: ["component", "tag", "gray", "background-subtle"], + }, + border: { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + $description: "Border color for gray tags.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.tag.gray.background}", + $description: "Border color for gray tags.", + }, + name: "canary-component-tag-gray-border", + attributes: { + category: "component", + type: "tag", + item: "gray", + subitem: "border", + themeable: true, + }, + path: ["component", "tag", "gray", "border"], + }, + }, + }, + toast: { + default: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", + }, + name: "canary-component-toast-default-title", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "default", "title"], + }, + description: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Description text color for informational toast notifications. Provides readable contrast for notification content.", + }, + name: "canary-component-toast-default-description", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "default", "description"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", + }, + name: "canary-component-toast-default-background", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "default", "background"], + }, + border: { + $type: "color", + $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.3}", + $description: + "Border color for informational toast notifications. Subtly defines the notification's boundaries.", + }, + name: "canary-component-toast-default-border", + attributes: { + category: "component", + type: "toast", + item: "default", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "default", "border"], + }, + }, + danger: { + title: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Title text color for danger toast notifications. Provides maximum contrast against the error background.", + }, + name: "canary-component-toast-danger-title", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "title", + themeable: true, + }, + path: ["component", "toast", "danger", "title"], + }, + description: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.1}", + $description: + "Description text color for danger toast notifications. Ensures readability of critical information.", + }, + name: "canary-component-toast-danger-description", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "description", + themeable: true, + }, + path: ["component", "toast", "danger", "description"], + }, + background: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.red.200}", + $description: + "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", + }, + name: "canary-component-toast-danger-background", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "background", + themeable: true, + }, + path: ["component", "toast", "danger", "background"], + }, + border: { + $type: "color", + $value: "lch(72.7% 48.17 33.53)", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{component.toast.danger.background}", + $description: + "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", + }, + name: "canary-component-toast-danger-border", + attributes: { + category: "component", + type: "toast", + item: "danger", + subitem: "border", + themeable: true, + }, + path: ["component", "toast", "danger", "border"], + }, + }, + }, + tooltip: { + text: { + $type: "color", + $value: "lch(18.63% 6.73 287.29)", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{text.2}", + $description: + "Text color for tooltip content. Ensures readability of helpful contextual information.", + }, + name: "canary-component-tooltip-text", + attributes: { + category: "component", + type: "tooltip", + item: "text", + themeable: true, + }, + path: ["component", "tooltip", "text"], + }, + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.3}", + $description: + "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", + }, + name: "canary-component-tooltip-background", + attributes: { + category: "component", + type: "tooltip", + item: "background", + themeable: true, + }, + path: ["component", "tooltip", "background"], + }, + }, + }, + gradient: { + ai: { + "gradient-stop-1": { + $type: "color", + $value: "lch(74.82% 51.93 49.87)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.200}", + }, + name: "canary-gradient-ai-gradient-stop-1", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(61.26% 69.37 350)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pink.300}", + }, + name: "canary-gradient-ai-gradient-stop-2", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-gradient-ai-gradient-stop-3", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-3"], + }, + "gradient-stop-4": { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-gradient-ai-gradient-stop-4", + attributes: { + category: "gradient", + type: "ai", + item: "gradient-stop-4", + themeable: true, + }, + path: ["gradient", "ai", "gradient-stop-4"], + }, + }, + skeleton: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-1", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-skeleton-gradient-stop-2", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-skeleton-gradient-stop-3", + attributes: { + category: "gradient", + type: "skeleton", + item: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "skeleton", "gradient-stop-3"], + }, + }, + pipeline: { + running: { + "gradient-stop-1": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-1"], + }, + "gradient-stop-2": { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.4)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.4", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.200}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(63.38% 78.04 52.26)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.orange.300}", + }, + name: "canary-gradient-pipeline-running-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "running", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "running", "gradient-stop-3"], + }, + }, + arrows: { + "gradient-stop-1": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-1", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-1", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-1"], + }, + "gradient-stop-2": { + $type: "color", + $value: "lch(54.29% 60.55 281.11)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.blue.400}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-2", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-2", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-2"], + }, + "gradient-stop-3": { + $type: "color", + $value: "lch(26.73% 7.48 287.06)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{border.1}", + }, + name: "canary-gradient-pipeline-arrows-gradient-stop-3", + attributes: { + category: "gradient", + type: "pipeline", + item: "arrows", + subitem: "gradient-stop-3", + themeable: true, + }, + path: ["gradient", "pipeline", "arrows", "gradient-stop-3"], + }, + }, + card: { + background: { + "gradient-from": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-card-background-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-from", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "card", + "background", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-background-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "background", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "background", "gradient-to"], + }, + }, + border: { + "gradient-from": { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.50}", + }, + name: "canary-gradient-pipeline-card-border-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-card-border-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "card", + subitem: "border", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "card", "border", "gradient-to"], + }, + }, + }, + widget: { + number: { + "gradient-from": { + $type: "color", + $value: "lch(58.08% 6.76 286.02)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.500}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-from", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-from"], + }, + "gradient-to": { + $type: "color", + $value: "lch(46.46% 7.5 286.37)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.600}", + }, + name: "canary-gradient-pipeline-widget-number-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "number", + state: "gradient-to", + themeable: true, + }, + path: ["gradient", "pipeline", "widget", "number", "gradient-to"], + }, + }, + blob: { + big: { + "gradient-from": { + $type: "color", + $value: "lch(90.71% 0.38 284.93)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.100}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "big", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "big", + "gradient-to", + ], + }, + }, + small: { + "gradient-from": { + $type: "color", + $value: "lch(85.99% 3.77 285.34)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.150}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-from", + ], + }, + "gradient-to": { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + attributes: { + category: "gradient", + type: "pipeline", + item: "widget", + subitem: "blob", + state: "small", + themeable: true, + }, + path: [ + "gradient", + "pipeline", + "widget", + "blob", + "small", + "gradient-to", + ], + }, + }, + }, + }, + }, + }, + shadow: { + 0: { + $type: "shadow", + $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "0", + spread: "0", + color: "{shadow-color.0}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + $description: + "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-0", + attributes: { + category: "shadow", + type: "0", + themeable: true, + }, + path: ["shadow", "0"], + }, + 1: { + $type: "shadow", + $value: + "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "2", + spread: "0", + color: "{shadow-color.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + $description: + "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-1", + attributes: { + category: "shadow", + type: "1", + themeable: true, + }, + path: ["shadow", "1"], + }, + 2: { + $type: "shadow", + $value: + "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "3", + spread: "0", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + { + blur: "2", + spread: "-1", + color: "{shadow-color.2}", + type: "dropShadow", + offsetX: "0", + offsetY: "1", + }, + ], + $description: + "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-2", + attributes: { + category: "shadow", + type: "2", + themeable: true, + }, + path: ["shadow", "2"], + }, + 3: { + $type: "shadow", + $value: + "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "6", + spread: "-1", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + { + blur: "4", + spread: "-2", + color: "{shadow-color.3}", + type: "dropShadow", + offsetX: "0", + offsetY: "2", + }, + ], + $description: + "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-3", + attributes: { + category: "shadow", + type: "3", + themeable: true, + }, + path: ["shadow", "3"], + }, + 4: { + $type: "shadow", + $value: + "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "15", + spread: "-3", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "10", + }, + { + blur: "6", + spread: "-4", + color: "{shadow-color.4}", + type: "dropShadow", + offsetX: "0", + offsetY: "4", + }, + ], + $description: + "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-4", + attributes: { + category: "shadow", + type: "4", + themeable: true, + }, + path: ["shadow", "4"], + }, + 5: { + $type: "shadow", + $value: + "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "25", + spread: "-5", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "20", + }, + { + blur: "10", + spread: "-6", + color: "{shadow-color.5}", + type: "dropShadow", + offsetX: "0", + offsetY: "8", + }, + ], + $description: + "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-5", + attributes: { + category: "shadow", + type: "5", + themeable: true, + }, + path: ["shadow", "5"], + }, + 6: { + $type: "shadow", + $value: + "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "50", + spread: "-12", + color: "{shadow-color.6}", + type: "dropShadow", + offsetX: "0", + offsetY: "25", + }, + $description: + "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-6", + attributes: { + category: "shadow", + type: "6", + themeable: true, + }, + path: ["shadow", "6"], + }, + inner: { + $type: "shadow", + $value: + "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: { + blur: "4", + spread: "0", + color: "{shadow-color.inner}", + type: "innerShadow", + offsetX: "0", + offsetY: "2", + }, + $description: + "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-shadow-inner", + attributes: { + category: "shadow", + type: "inner", + themeable: true, + }, + path: ["shadow", "inner"], + }, + }, + "shadow-color": { + 0: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Transparent shadow color. Used when no shadow effect is desired.", + }, + name: "canary-shadow-color-0", + attributes: { + category: "shadow-color", + type: "0", + themeable: true, + }, + path: ["shadow-color", "0"], + }, + 1: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", + }, + name: "canary-shadow-color-1", + attributes: { + category: "shadow-color", + type: "1", + themeable: true, + }, + path: ["shadow-color", "1"], + }, + 2: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", + }, + name: "canary-shadow-color-2", + attributes: { + category: "shadow-color", + type: "2", + themeable: true, + }, + path: ["shadow-color", "2"], + }, + 3: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", + }, + name: "canary-shadow-color-3", + attributes: { + category: "shadow-color", + type: "3", + themeable: true, + }, + path: ["shadow-color", "3"], + }, + 4: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", + }, + name: "canary-shadow-color-4", + attributes: { + category: "shadow-color", + type: "4", + themeable: true, + }, + path: ["shadow-color", "4"], + }, + 5: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.5", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", + }, + name: "canary-shadow-color-5", + attributes: { + category: "shadow-color", + type: "5", + themeable: true, + }, + path: ["shadow-color", "5"], + }, + 6: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.6", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.300}", + $description: + "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", + }, + name: "canary-shadow-color-6", + attributes: { + category: "shadow-color", + type: "6", + themeable: true, + }, + path: ["shadow-color", "6"], + }, + inner: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $extensions: { + "studio.tokens": { + modify: { + type: "alpha", + value: "0.1", + space: "lch", + }, + }, + }, + $type: "color", + $value: "{colors.chrome.900}", + $description: + "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", + }, + name: "canary-shadow-color-inner", + attributes: { + category: "shadow-color", + type: "inner", + themeable: true, + }, + path: ["shadow-color", "inner"], + }, + }, + ring: { + focus: { + $type: "shadow", + $value: + "0 0 0 2px lch(98.27% 0.36 135.2), 0 0 0 4px lch(46.84% 41.5 250)", + $description: + "Focus ring effect with background offset and accent border.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + original: { + $type: "shadow", + $value: [ + { + blur: "0", + spread: "2", + color: "{background.1}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + { + blur: "0", + spread: "4", + color: "{border.focus}", + type: "dropShadow", + offsetX: "0", + offsetY: "0", + }, + ], + $description: + "Focus ring effect with background offset and accent border.", + $extensions: { + "studio.tokens": { + originalType: "boxShadow", + }, + }, + }, + name: "canary-ring-focus", + attributes: { + category: "ring", + type: "focus", + themeable: true, + }, + path: ["ring", "focus"], + }, + }, + iconStrokeWidth: { + xxs: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xxs", + attributes: { + category: "iconStrokeWidth", + type: "xxs", + themeable: true, + }, + path: ["iconStrokeWidth", "xxs"], + }, + xs: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-xs", + attributes: { + category: "iconStrokeWidth", + type: "xs", + themeable: true, + }, + path: ["iconStrokeWidth", "xs"], + }, + sm: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-sm", + attributes: { + category: "iconStrokeWidth", + type: "sm", + themeable: true, + }, + path: ["iconStrokeWidth", "sm"], + }, + default: { + $type: "dimension", + $value: "1.1px", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.1", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-default", + attributes: { + category: "iconStrokeWidth", + type: "default", + themeable: true, + }, + path: ["iconStrokeWidth", "default"], + }, + md: { + $type: "dimension", + $value: "1.4px", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "1.4", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-md", + attributes: { + category: "iconStrokeWidth", + type: "md", + themeable: true, + }, + path: ["iconStrokeWidth", "md"], + }, + lg: { + $type: "dimension", + $value: "2px", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "2", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-icon-stroke-width-lg", + attributes: { + category: "iconStrokeWidth", + type: "lg", + themeable: true, + }, + path: ["iconStrokeWidth", "lg"], + }, + }, + brand: { + color: { + 50: { + $type: "color", + $value: "lch(95.4% 5 238.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.50}", + }, + name: "canary-brand-color-50", + attributes: { + category: "brand", + type: "color", + item: "50", + themeable: true, + }, + path: ["brand", "color", "50"], + }, + 100: { + $type: "color", + $value: "lch(90.24% 13.5 239.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.100}", + }, + name: "canary-brand-color-100", + attributes: { + category: "brand", + type: "color", + item: "100", + themeable: true, + }, + path: ["brand", "color", "100"], + }, + 200: { + $type: "color", + $value: "lch(74.15% 29 241)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.200}", + }, + name: "canary-brand-color-200", + attributes: { + category: "brand", + type: "color", + item: "200", + themeable: true, + }, + path: ["brand", "color", "200"], + }, + 300: { + $type: "color", + $value: "lch(65.49% 45.28 239)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.300}", + }, + name: "canary-brand-color-300", + attributes: { + category: "brand", + type: "color", + item: "300", + themeable: true, + }, + path: ["brand", "color", "300"], + }, + 400: { + $type: "color", + $value: "lch(56.15% 44.5 246.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.400}", + }, + name: "canary-brand-color-400", + attributes: { + category: "brand", + type: "color", + item: "400", + themeable: true, + }, + path: ["brand", "color", "400"], + }, + 500: { + $type: "color", + $value: "lch(46.84% 41.5 250)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.500}", + }, + name: "canary-brand-color-500", + attributes: { + category: "brand", + type: "color", + item: "500", + themeable: true, + }, + path: ["brand", "color", "500"], + }, + 600: { + $type: "color", + $value: "lch(37.53% 36.5 254)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.600}", + }, + name: "canary-brand-color-600", + attributes: { + category: "brand", + type: "color", + item: "600", + themeable: true, + }, + path: ["brand", "color", "600"], + }, + 700: { + $type: "color", + $value: "lch(28.81% 30 257.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.700}", + }, + name: "canary-brand-color-700", + attributes: { + category: "brand", + type: "color", + item: "700", + themeable: true, + }, + path: ["brand", "color", "700"], + }, + 800: { + $type: "color", + $value: "lch(19.49% 23 261.5)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.800}", + }, + name: "canary-brand-color-800", + attributes: { + category: "brand", + type: "color", + item: "800", + themeable: true, + }, + path: ["brand", "color", "800"], + }, + 900: { + $type: "color", + $value: "lch(10.76% 15.5 265)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.900}", + }, + name: "canary-brand-color-900", + attributes: { + category: "brand", + type: "color", + item: "900", + themeable: true, + }, + path: ["brand", "color", "900"], + }, + 950: { + $type: "color", + $value: "lch(3.09% 7.5 268)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.cyan.950}", + }, + name: "canary-brand-color-950", + attributes: { + category: "brand", + type: "color", + item: "950", + themeable: true, + }, + path: ["brand", "color", "950"], + }, + }, + onColor: { + 50: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-50", + attributes: { + category: "brand", + type: "onColor", + item: "50", + themeable: true, + }, + path: ["brand", "onColor", "50"], + }, + 100: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-100", + attributes: { + category: "brand", + type: "onColor", + item: "100", + themeable: true, + }, + path: ["brand", "onColor", "100"], + }, + 200: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-200", + attributes: { + category: "brand", + type: "onColor", + item: "200", + themeable: true, + }, + path: ["brand", "onColor", "200"], + }, + 300: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-300", + attributes: { + category: "brand", + type: "onColor", + item: "300", + themeable: true, + }, + path: ["brand", "onColor", "300"], + }, + 400: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.chrome.950}", + }, + name: "canary-brand-on-color-400", + attributes: { + category: "brand", + type: "onColor", + item: "400", + themeable: true, + }, + path: ["brand", "onColor", "400"], + }, + 500: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-500", + attributes: { + category: "brand", + type: "onColor", + item: "500", + themeable: true, + }, + path: ["brand", "onColor", "500"], + }, + 600: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-600", + attributes: { + category: "brand", + type: "onColor", + item: "600", + themeable: true, + }, + path: ["brand", "onColor", "600"], + }, + 700: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-700", + attributes: { + category: "brand", + type: "onColor", + item: "700", + themeable: true, + }, + path: ["brand", "onColor", "700"], + }, + 800: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-800", + attributes: { + category: "brand", + type: "onColor", + item: "800", + themeable: true, + }, + path: ["brand", "onColor", "800"], + }, + 900: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-900", + attributes: { + category: "brand", + type: "onColor", + item: "900", + themeable: true, + }, + path: ["brand", "onColor", "900"], + }, + 950: { + $type: "color", + $value: "lch(100% 0 134.54)", + filePath: "design-tokens/brand/Harness.json", + isSource: true, + original: { + $type: "color", + $value: "{colors.pure.white}", + }, + name: "canary-brand-on-color-950", + attributes: { + category: "brand", + type: "onColor", + item: "950", + themeable: true, + }, + path: ["brand", "onColor", "950"], + }, + }, + }, +}; diff --git a/packages/core-design-system/src/styles/breakpoint.css b/packages/core-design-system/src/styles/breakpoint.css new file mode 100644 index 0000000000..a1fb8c38b7 --- /dev/null +++ b/packages/core-design-system/src/styles/breakpoint.css @@ -0,0 +1,36 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:42 GMT + * Copyright (c) Harness. + */ + +:root { + --canary-breakpoint-viewport: 1440; + --canary-breakpoint-viewport-min: 1080; + --canary-breakpoint-viewport-max: 1919; + --canary-component-markdown-editor-title-h1: var(--canary-font-weight-default-normal-600) var(--canary-font-size-7)/var(--canary-line-height-7-normal) var(--canary-font-family-default); /* Article main heading. */ + --canary-component-markdown-editor-title-h2: var(--canary-font-weight-default-normal-600) var(--canary-font-size-6)/var(--canary-line-height-6-normal) var(--canary-font-family-default); /* Article section heading. */ + --canary-component-markdown-editor-title-h3: var(--canary-font-weight-default-normal-600) var(--canary-font-size-3)/var(--canary-line-height-3-normal) var(--canary-font-family-default); /* Article subsection heading. */ + --canary-component-markdown-editor-content-lead: var(--canary-font-weight-default-normal-400) var(--canary-font-size-5)/var(--canary-line-height-5-normal) var(--canary-font-family-default); /* Article introduction paragraph. */ + --canary-component-markdown-editor-content-paragraph: var(--canary-font-weight-default-normal-400) var(--canary-font-size-3)/var(--canary-line-height-3-relaxed) var(--canary-font-family-default); /* Article paragraph text. */ + --canary-component-markdown-editor-content-emphasized: var(--canary-font-weight-default-normal-500) var(--canary-font-size-3)/var(--canary-line-height-3-relaxed) var(--canary-font-family-default); /* Emphasized paragraph text. */ + --canary-breakpoint-container: var(--canary-spacing-8); + --canary-heading-hero: var(--canary-font-weight-default-normal-500) var(--canary-font-size-9)/var(--canary-line-height-9-tight) var(--canary-font-family-default); /* Large headlines with extra emphasis. */ + --canary-heading-section: var(--canary-font-weight-default-normal-500) var(--canary-font-size-7)/var(--canary-line-height-7-tight) var(--canary-font-family-default); /* Large headlines, hero sections. */ + --canary-heading-subsection: var(--canary-font-weight-default-normal-500) var(--canary-font-size-6)/var(--canary-line-height-6-tight) var(--canary-font-family-default); /* Emphasized section headers. */ + --canary-heading-dialog: var(--canary-font-weight-default-normal-500) var(--canary-font-size-5)/var(--canary-line-height-5-tight) var(--canary-font-family-default); /* Dialog headers. */ + --canary-heading-base: var(--canary-font-weight-default-normal-500) var(--canary-font-size-3)/var(--canary-line-height-3-tight) var(--canary-font-family-default); /* Section headers. */ + --canary-heading-small: var(--canary-font-weight-default-normal-600) var(--canary-font-size-2)/var(--canary-line-height-2-snug) var(--canary-font-family-default); /* Section headers. */ + --canary-body-normal: var(--canary-font-weight-default-normal-400) var(--canary-font-size-2)/var(--canary-line-height-2-snug) var(--canary-font-family-default); /* Primary text style for UI and content. */ + --canary-body-strong: var(--canary-font-weight-default-normal-500) var(--canary-font-size-2)/var(--canary-line-height-2-snug) var(--canary-font-family-default); /* Primary text style for UI and content. */ + --canary-body-code: var(--canary-font-weight-default-normal-400) var(--canary-font-size-2)/var(--canary-line-height-2-normal) var(--canary-font-family-mono); /* Code blocks and larger code snippets. */ + --canary-body-none-normal: var(--canary-font-weight-default-normal-400) var(--canary-font-size-2)/var(--canary-line-height-2-none) var(--canary-font-family-default); /* Primary text style for UI and content. */ + --canary-body-none-strong: var(--canary-font-weight-default-normal-500) var(--canary-font-size-2)/var(--canary-line-height-2-none) var(--canary-font-family-default); + --canary-body-tight-normal: var(--canary-font-weight-default-normal-400) var(--canary-font-size-2)/var(--canary-line-height-2-tight) var(--canary-font-family-default); /* Primary text style for UI and content. */ + --canary-body-tight-strong: var(--canary-font-weight-default-normal-500) var(--canary-font-size-2)/var(--canary-line-height-2-tight) var(--canary-font-family-default); + --canary-caption-normal: var(--canary-font-weight-default-normal-500) var(--canary-font-size-1)/var(--canary-line-height-1-snug) var(--canary-font-family-default); /* Primary caption style, small but important text. */ + --canary-caption-soft: var(--canary-font-weight-default-normal-400) var(--canary-font-size-1)/var(--canary-line-height-1-snug) var(--canary-font-family-default); /* Helper text, meta information. */ + --canary-caption-none-normal: var(--canary-font-weight-default-normal-500) var(--canary-font-size-1)/var(--canary-line-height-1-none) var(--canary-font-family-default); /* Primary caption style, small but important text. */ + --canary-caption-none-soft: var(--canary-font-weight-default-normal-400) var(--canary-font-size-1)/var(--canary-line-height-1-none) var(--canary-font-family-default); /* Helper text, meta information. */ +} diff --git a/packages/core-design-system/src/styles/colors.css b/packages/core-design-system/src/styles/colors.css new file mode 100644 index 0000000000..dedb7388ca --- /dev/null +++ b/packages/core-design-system/src/styles/colors.css @@ -0,0 +1,179 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:42 GMT + * Copyright (c) Harness. + */ + +:root { + --canary-colors-pure-white: lch(100% 0 134.54); + --canary-colors-pure-black: lch(2.44% 1.49 285.81); + --canary-colors-chrome-50: lch(98.27% 0.36 135.2); + --canary-colors-chrome-100: lch(90.71% 0.38 284.93); + --canary-colors-chrome-150: lch(85.99% 3.77 285.34); + --canary-colors-chrome-200: lch(81.33% 4.52 285.46); + --canary-colors-chrome-300: lch(74.37% 4.52 285.5); + --canary-colors-chrome-400: lch(67.41% 4.51 285.56); + --canary-colors-chrome-500: lch(58.08% 6.76 286.02); + --canary-colors-chrome-600: lch(46.46% 7.5 286.37); + --canary-colors-chrome-700: lch(39.46% 8.98 286.89); + --canary-colors-chrome-800: lch(26.73% 7.48 287.06); + --canary-colors-chrome-850: lch(18.63% 6.73 287.29); + --canary-colors-chrome-900: lch(8.25% 4.49 287.18); + --canary-colors-chrome-950: lch(5.2% 3.07 285.78); + --canary-colors-chrome-1000: lch(3.66% 1.93 285.7); + --canary-colors-blue-50: lch(95.27% 4.16 280.86); + --canary-colors-blue-100: lch(89.92% 10.91 279.8); + --canary-colors-blue-200: lch(73.08% 34.81 281.21); + --canary-colors-blue-300: lch(63.4% 48.44 281.2); + --canary-colors-blue-400: lch(54.29% 60.55 281.11); + --canary-colors-blue-500: lch(47.04% 69.94 279.78); + --canary-colors-blue-600: lch(35.67% 59.7 280.58); + --canary-colors-blue-700: lch(27.25% 49.8 280.51); + --canary-colors-blue-800: lch(18.28% 39.2 280.4); + --canary-colors-blue-900: lch(9.63% 33.17 284.31); + --canary-colors-blue-950: lch(2.52% 22.28 283.9); + --canary-colors-cyan-50: lch(95.4% 5 238.5); + --canary-colors-cyan-100: lch(90.24% 13.5 239.5); + --canary-colors-cyan-200: lch(74.15% 29 241); + --canary-colors-cyan-300: lch(65.49% 45.28 239); + --canary-colors-cyan-400: lch(56.15% 44.5 246.5); + --canary-colors-cyan-500: lch(46.84% 41.5 250); + --canary-colors-cyan-600: lch(37.53% 36.5 254); + --canary-colors-cyan-700: lch(28.81% 30 257.5); + --canary-colors-cyan-800: lch(19.49% 23 261.5); + --canary-colors-cyan-900: lch(10.76% 15.5 265); + --canary-colors-cyan-950: lch(3.09% 7.5 268); + --canary-colors-red-50: lch(95.23% 5.25 32.59); + --canary-colors-red-100: lch(89.81% 13.4 32.67); + --canary-colors-red-200: lch(72.7% 48.17 33.53); + --canary-colors-red-300: lch(65.59% 65.99 34.56); + --canary-colors-red-400: lch(53.74% 88.37 37.69); + --canary-colors-red-500: lch(44.74% 76.92 37.68); + --canary-colors-red-600: lch(35.74% 65.47 37.67); + --canary-colors-red-700: lch(27.3% 54.82 37.68); + --canary-colors-red-800: lch(18.31% 42.35 35.83); + --canary-colors-red-900: lch(9.87% 29.51 28.59); + --canary-colors-red-950: lch(2.8% 10.22 21.65); + --canary-colors-pink-50: lch(95.15% 5.42 350.29); + --canary-colors-pink-100: lch(89.61% 13.47 350.26); + --canary-colors-pink-200: lch(72% 46.72 350.11); + --canary-colors-pink-300: lch(61.26% 69.37 350); + --canary-colors-pink-400: lch(53.21% 65.17 349.99); + --canary-colors-pink-500: lch(44.27% 56.78 349.99); + --canary-colors-pink-600: lch(35.34% 48.39 349.99); + --canary-colors-pink-700: lch(26.98% 40.34 349.99); + --canary-colors-pink-800: lch(18.05% 31.95 349.99); + --canary-colors-pink-900: lch(9.69% 23.89 349.99); + --canary-colors-pink-950: lch(2.74% 8.62 350.99); + --canary-colors-peach-50: lch(95.22% 5.2 27.21); + --canary-colors-peach-100: lch(89.79% 12.88 27.31); + --canary-colors-peach-200: lch(72.22% 46.73 23.25); + --canary-colors-peach-300: lch(62.66% 70.81 29.46); + --canary-colors-peach-400: lch(53.64% 82.24 30.93); + --canary-colors-peach-500: lch(44.66% 71.48 30.92); + --canary-colors-peach-600: lch(35.68% 60.73 30.9); + --canary-colors-peach-700: lch(27.25% 50.72 30.88); + --canary-colors-peach-800: lch(18.26% 40.26 30.65); + --canary-colors-peach-900: lch(9.84% 28.78 25.16); + --canary-colors-peach-950: lch(2.79% 10.24 18.76); + --canary-colors-yellow-50: lch(95.62% 18.31 92.87); + --canary-colors-yellow-100: lch(90.23% 26.34 77.18); + --canary-colors-yellow-200: lch(73.82% 74.92 75.35); + --canary-colors-yellow-300: lch(64.58% 68.1 76.07); + --canary-colors-yellow-400: lch(55.9% 60.21 76.41); + --canary-colors-yellow-500: lch(46.64% 52.59 77.11); + --canary-colors-yellow-600: lch(37.37% 44.92 77.47); + --canary-colors-yellow-700: lch(28.67% 36.97 77.45); + --canary-colors-yellow-800: lch(19.4% 27.53 77.01); + --canary-colors-yellow-900: lch(10.69% 16.28 73.34); + --canary-colors-yellow-950: lch(3.06% 4.5 71.6); + --canary-colors-orange-50: lch(95.42% 10.03 79.83); + --canary-colors-orange-100: lch(90.02% 17.62 61.56); + --canary-colors-orange-200: lch(74.82% 51.93 49.87); + --canary-colors-orange-300: lch(63.38% 78.04 52.26); + --canary-colors-orange-400: lch(54.81% 69.74 52.27); + --canary-colors-orange-500: lch(45.68% 60.45 52.23); + --canary-colors-orange-600: lch(36.54% 51.77 52.28); + --canary-colors-orange-700: lch(27.78% 46.26 47.39); + --canary-colors-orange-800: lch(18.69% 35.31 45.59); + --canary-colors-orange-900: lch(10.26% 21.63 42.58); + --canary-colors-orange-950: lch(2.93% 6.64 36.42); + --canary-colors-brown-50: lch(95.55% 12.75 93.47); + --canary-colors-brown-100: lch(90.24% 19.27 79.52); + --canary-colors-brown-200: lch(73.38% 45.67 56.65); + --canary-colors-brown-300: lch(64.06% 48.96 57.29); + --canary-colors-brown-400: lch(57.17% 44.39 57.69); + --canary-colors-brown-500: lch(46.22% 37.68 57.68); + --canary-colors-brown-600: lch(37.01% 31.77 57.67); + --canary-colors-brown-700: lch(28.37% 26.84 58.1); + --canary-colors-brown-800: lch(19.16% 20.96 58.49); + --canary-colors-brown-900: lch(10.55% 13.64 57.69); + --canary-colors-brown-950: lch(3% 4.01 51.14); + --canary-colors-green-50: lch(95.82% 11.79 156.15); + --canary-colors-green-100: lch(91.19% 27.27 156.17); + --canary-colors-green-200: lch(73.78% 60.44 156.25); + --canary-colors-green-300: lch(66.65% 55.77 156.25); + --canary-colors-green-400: lch(57.73% 49.65 156.25); + --canary-colors-green-500: lch(48.21% 43.17 156.25); + --canary-colors-green-600: lch(38.71% 37.07 156.25); + --canary-colors-green-700: lch(29.79% 30.94 156.25); + --canary-colors-green-800: lch(20.26% 24.09 156.25); + --canary-colors-green-900: lch(11.35% 18.27 156.36); + --canary-colors-green-950: lch(3.27% 5.33 156.53); + --canary-colors-mint-50: lch(95.82% 11.97 171.06); + --canary-colors-mint-100: lch(91.09% 25.48 176.08); + --canary-colors-mint-200: lch(73.4% 50.15 176.67); + --canary-colors-mint-300: lch(66.3% 46.27 176.67); + --canary-colors-mint-400: lch(57.46% 42.15 174.53); + --canary-colors-mint-500: lch(48.03% 37.67 171.84); + --canary-colors-mint-600: lch(38.59% 33.16 169.14); + --canary-colors-mint-700: lch(29.72% 28.6 166.42); + --canary-colors-mint-800: lch(20.24% 23.29 164.22); + --canary-colors-mint-900: lch(11.35% 18.26 160.23); + --canary-colors-mint-950: lch(3.26% 5.16 160.96); + --canary-colors-lime-50: lch(95.86% 15.3 127.41); + --canary-colors-lime-100: lch(91.05% 29.33 126.46); + --canary-colors-lime-200: lch(74.24% 53.56 123.85); + --canary-colors-lime-300: lch(65.98% 48.66 123.85); + --canary-colors-lime-400: lch(57.13% 43.37 123.85); + --canary-colors-lime-500: lch(47.69% 37.71 123.86); + --canary-colors-lime-600: lch(38.26% 32.05 123.88); + --canary-colors-lime-700: lch(29.42% 27.17 123.81); + --canary-colors-lime-800: lch(19.97% 21.1 123.91); + --canary-colors-lime-900: lch(11.12% 14.71 126.9); + --canary-colors-lime-950: lch(3.2% 4.34 131.4); + --canary-colors-purple-50: lch(95.14% 7 301.11); + --canary-colors-purple-100: lch(89.58% 17.29 301.92); + --canary-colors-purple-200: lch(72.4% 55.68 305.19); + --canary-colors-purple-300: lch(61.28% 80.51 307.53); + --canary-colors-purple-400: lch(50.99% 105.85 309.98); + --canary-colors-purple-500: lch(40.58% 118.62 311.84); + --canary-colors-purple-600: lch(32.21% 100.98 311.83); + --canary-colors-purple-700: lch(24.34% 84.56 311.84); + --canary-colors-purple-800: lch(15.97% 66.91 311.83); + --canary-colors-purple-900: lch(8.1% 50.49 311.83); + --canary-colors-purple-950: lch(2.32% 21.96 302.37); + --canary-colors-violet-50: lch(95.18% 6.31 296.62); + --canary-colors-violet-100: lch(89.64% 16.29 297.99); + --canary-colors-violet-200: lch(72.11% 52.02 298.43); + --canary-colors-violet-300: lch(65.15% 65.45 298.5); + --canary-colors-violet-400: lch(51.98% 93.37 301.42); + --canary-colors-violet-500: lch(40.56% 121.68 305.61); + --canary-colors-violet-600: lch(31.46% 113.1 306.9); + --canary-colors-violet-700: lch(23.77% 93.78 307.37); + --canary-colors-violet-800: lch(15.62% 72.5 308.3); + --canary-colors-violet-900: lch(8.15% 49.81 312.23); + --canary-colors-violet-950: lch(2.33% 21.62 302.28); + --canary-colors-indigo-50: lch(95.23% 6.03 283.32); + --canary-colors-indigo-100: lch(89.8% 14.62 283.7); + --canary-colors-indigo-200: lch(72.68% 45.97 284.36); + --canary-colors-indigo-300: lch(65.79% 58.29 283.92); + --canary-colors-indigo-400: lch(53.15% 81.87 288.43); + --canary-colors-indigo-500: lch(42.04% 107.17 295.8); + --canary-colors-indigo-600: lch(30.63% 128.3 302.36); + --canary-colors-indigo-700: lch(23.02% 107.52 302.38); + --canary-colors-indigo-800: lch(14.93% 84.93 302.33); + --canary-colors-indigo-900: lch(7.38% 63.51 302.14); + --canary-colors-indigo-950: lch(2.17% 29.85 290.49); +} diff --git a/packages/core-design-system/src/styles/components.css b/packages/core-design-system/src/styles/components.css new file mode 100644 index 0000000000..dccbb0e2e7 --- /dev/null +++ b/packages/core-design-system/src/styles/components.css @@ -0,0 +1,86 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:42 GMT + * Copyright (c) Harness. + */ + +:root { + --canary-dropdown-container-min-w: 320px; + --canary-input-size-sm: var(--canary-size-8); /* 32px */ + /** + * 36px + * + */ + --canary-input-size-default: var(--canary-size-9); + --canary-input-radius: var(--canary-rounded-3); /* 6px */ + --canary-input-gap: var(--canary-spacing-1-half); + --canary-input-px: var(--canary-spacing-3); /* 12px horizontal padding */ + --canary-input-py: var(--canary-spacing-2); /* 8px vertical padding */ + /** + * 4px + * + */ + --canary-dropdown-item-px: var(--canary-spacing-1); + --canary-dropdown-item-gap: var(--canary-spacing-2-half); /* 8px */ + --canary-dropdown-sub-item-px: var(--canary-spacing-3); /* 12px */ + --canary-dropdown-sub-item-py: var(--canary-spacing-2); /* 8px */ + --canary-dropdown-sub-item-gap: var(--canary-spacing-2-half); + --canary-dropdown-sub-item-radius: var(--canary-rounded-1); + --canary-dropdown-sub-item-size: var(--canary-size-8); + --canary-dropdown-sub-item-gap-y: var(--canary-spacing-1); /* 4px gap between text */ + /** + * 4px + * + */ + --canary-dropdown-container-py: var(--canary-spacing-1); + --canary-dropdown-container-radius: var(--canary-rounded-3); /* 6px */ + --canary-dropdown-menu-item-branch-selector-tag-px: var(--canary-spacing-2); /* 8px horizontal padding */ + /** + * 20px height + * + */ + --canary-dropdown-menu-item-branch-selector-tag-size: var(--canary-size-5); + --canary-dropdown-menu-items-header-footer-px: var(--canary-spacing-4); /* 16px horizontal padding */ + --canary-dropdown-menu-items-header-footer-py: var(--canary-spacing-2-half); /* 10px vertical padding */ + --canary-btn-size-sm: var(--canary-size-7); + --canary-btn-size-default: var(--canary-size-8); + --canary-btn-size-icon: var(--canary-size-8); + --canary-btn-size-lg: var(--canary-size-10); + --canary-btn-gap-sm: var(--canary-spacing-1-half); + --canary-btn-gap-default: var(--canary-spacing-2-half); + --canary-btn-gap-lg: var(--canary-spacing-2-half); + --canary-btn-default-radius: var(--canary-rounded-2); + --canary-btn-rounded-radius: var(--canary-rounded-full); + --canary-btn-border: var(--canary-border-width-1); + --canary-btn-px-sm: var(--canary-spacing-5); + --canary-btn-px-default: var(--canary-spacing-5); + --canary-btn-px-lg: var(--canary-spacing-6); + --canary-btn-py-sm: var(--canary-spacing-1-half); + --canary-btn-py-default: var(--canary-spacing-2); + --canary-btn-py-lg: var(--canary-spacing-3); + --canary-btn-link-size-sm: var(--canary-size-4); + --canary-btn-link-size-default: var(--canary-size-4); + --canary-btn-link-gap-sm: var(--canary-spacing-2); + --canary-btn-link-gap-default: var(--canary-spacing-2-half); + --canary-badge-size-sm: var(--canary-size-5); + --canary-badge-size-default: var(--canary-size-6); + --canary-badge-default-gap: var(--canary-spacing-1); + --canary-badge-default-py: var(--canary-spacing-half); + --canary-badge-default-px: var(--canary-spacing-2); + --canary-badge-default-radius: var(--canary-rounded-2); + --canary-badge-rounded-radius: var(--canary-rounded-full); + --canary-badge-rounded-px: var(--canary-spacing-2-half); + --canary-badge-border: var(--canary-border-width-1); + --canary-tag-size: var(--canary-size-5); + --canary-tag-gap: var(--canary-spacing-1); + --canary-tag-py: var(--canary-spacing-1); + --canary-tag-px: var(--canary-spacing-2); + --canary-tag-default-radius: var(--canary-rounded-2); + --canary-tag-split-right-radius-r: var(--canary-rounded-2); + --canary-tag-split-right-radius-l: var(--canary-rounded-none); + --canary-tag-split-left-radius-r: var(--canary-rounded-none); + --canary-tag-split-left-radius-l: var(--canary-rounded-2); + --canary-tag-border: var(--canary-border-width-1); + --canary-dropdown-item-radius: var(--canary-dropdown-sub-item-radius); +} diff --git a/packages/core-design-system/src/styles/core.css b/packages/core-design-system/src/styles/core.css new file mode 100644 index 0000000000..ad5e0ecdf6 --- /dev/null +++ b/packages/core-design-system/src/styles/core.css @@ -0,0 +1,263 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:42 GMT + * Copyright (c) Harness. + */ + +:root { + --canary-tracking-tighter: -0.05em; /* Very tight, display text */ + --canary-tracking-tight: -0.02em; /* Headings */ + --canary-tracking-normal: 0em; /* Default body text */ + --canary-tracking-wide: 0.025em; /* Improved readability */ + --canary-tracking-wider: 0.05em; /* Spaced text */ + --canary-tracking-widest: 0.1em; /* All caps text */ + --canary-font-weight-default-normal-100: 100; + --canary-font-weight-default-normal-200: 200; + --canary-font-weight-default-normal-300: 300; + --canary-font-weight-default-normal-400: 400; + --canary-font-weight-default-normal-500: 500; + --canary-font-weight-default-normal-600: 600; + --canary-font-weight-default-normal-700: 700; + --canary-font-weight-default-normal-800: 800; + --canary-font-weight-default-normal-900: 900; + --canary-font-weight-default-italic-100-weight: 100; + --canary-font-weight-default-italic-100-style: italic; + --canary-font-weight-default-italic-200-weight: 200; + --canary-font-weight-default-italic-200-style: italic; + --canary-font-weight-default-italic-300-weight: 300; + --canary-font-weight-default-italic-300-style: italic; + --canary-font-weight-default-italic-400-weight: 400; + --canary-font-weight-default-italic-400-style: italic; + --canary-font-weight-default-italic-500-weight: 500; + --canary-font-weight-default-italic-500-style: italic; + --canary-font-weight-default-italic-600-weight: 600; + --canary-font-weight-default-italic-600-style: italic; + --canary-font-weight-default-italic-700-weight: 700; + --canary-font-weight-default-italic-700-style: italic; + --canary-font-weight-default-italic-800-weight: 800; + --canary-font-weight-default-italic-800-style: italic; + --canary-font-weight-default-italic-900-weight: 900; + --canary-font-weight-default-italic-900-style: italic; + --canary-font-weight-mono-normal-100: 100; + --canary-font-weight-mono-normal-200: 200; + --canary-font-weight-mono-normal-300: 300; + --canary-font-weight-mono-normal-400: 400; + --canary-font-weight-mono-normal-500: 500; + --canary-font-weight-mono-normal-700: 700; + --canary-font-weight-mono-normal-800: 800; + --canary-font-weight-mono-italic-100-weight: 100; + --canary-font-weight-mono-italic-100-style: italic; + --canary-font-weight-mono-italic-200-weight: 200; + --canary-font-weight-mono-italic-200-style: italic; + --canary-font-weight-mono-italic-300-weight: 300; + --canary-font-weight-mono-italic-300-style: italic; + --canary-font-weight-mono-italic-400-weight: 400; + --canary-font-weight-mono-italic-400-style: italic; + --canary-font-weight-mono-italic-500-weight: 500; + --canary-font-weight-mono-italic-500-style: italic; + --canary-font-weight-mono-italic-700-weight: 700; + --canary-font-weight-mono-italic-700-style: italic; + --canary-font-weight-mono-italic-800-weight: 800; + --canary-font-weight-mono-italic-800-style: italic; + --canary-font-family-default: Inter; + --canary-font-family-mono: 'JetBrains Mono'; + --canary-text-decoration-none: none; + --canary-text-decoration-underline: underline; + --canary-text-decoration-line-through: line-through; + --canary-text-case-none: none; + --canary-text-case-uppercase: uppercase; + --canary-text-case-lowercase: lowercase; + --canary-text-case-capitalize: capitalize; + --canary-font-size-1: 0.75rem; /* 12px */ + --canary-font-size-2: 0.875rem; /* 14px */ + --canary-font-size-3: 1rem; /* 16px */ + --canary-font-size-4: 1.125rem; /* 18px */ + --canary-font-size-5: 1.25rem; /* 20px */ + --canary-font-size-6: 1.5rem; /* 24px */ + --canary-font-size-7: 1.875rem; /* 30px */ + --canary-font-size-8: 2.25rem; /* 36px */ + --canary-font-size-9: 3rem; /* 48px */ + --canary-font-size-10: 3.75rem; /* 60px */ + --canary-font-size-11: 4.5rem; /* 72px */ + --canary-font-size-12: 6rem; /* 96px */ + --canary-font-size-13: 8rem; /* 128px */ + --canary-line-height-none: 1; + --canary-line-height-tight: 1.25; + --canary-line-height-snug: 1.375; + --canary-line-height-normal: 1.5; + --canary-line-height-relaxed: 1.625; + --canary-line-height-loose: 2; + --canary-spacing-0: 0px; + --canary-spacing-1: 4px; + --canary-spacing-2: 8px; + --canary-spacing-3: 12px; + --canary-spacing-4: 16px; + --canary-spacing-5: 20px; + --canary-spacing-6: 24px; + --canary-spacing-7: 28px; + --canary-spacing-8: 32px; + --canary-spacing-9: 36px; + --canary-spacing-10: 40px; + --canary-spacing-11: 44px; + --canary-spacing-12: 48px; + --canary-spacing-14: 56px; + --canary-spacing-16: 64px; + --canary-spacing-20: 80px; + --canary-spacing-24: 96px; + --canary-spacing-28: 112px; + --canary-spacing-32: 128px; + --canary-spacing-36: 144px; + --canary-spacing-40: 160px; + --canary-spacing-44: 176px; + --canary-spacing-48: 192px; + --canary-spacing-52: 208px; + --canary-spacing-56: 224px; + --canary-spacing-60: 240px; + --canary-spacing-64: 256px; + --canary-spacing-72: 288px; + --canary-spacing-80: 320px; + --canary-spacing-96: 384px; + --canary-spacing-px: 1px; + --canary-spacing-half: 2px; /* 0.5 */ + --canary-spacing-1-half: 6px; /* 1.5 */ + --canary-spacing-2-half: 10px; /* 2.5 */ + --canary-spacing-3-half: 14px; /* 3.5 */ + --canary-rounded-1: 2px; + --canary-rounded-2: 4px; + --canary-rounded-3: 6px; + --canary-rounded-4: 8px; + --canary-rounded-5: 12px; + --canary-rounded-6: 16px; + --canary-rounded-7: 24px; + --canary-rounded-none: 0px; /* No border radius */ + --canary-rounded-full: 9999px; /* Fully rounded corners (circular) */ + --canary-size-0: 0px; + --canary-size-1: 4px; + --canary-size-2: 8px; + --canary-size-3: 12px; + --canary-size-4: 16px; + --canary-size-5: 20px; + --canary-size-6: 24px; + --canary-size-7: 28px; + --canary-size-8: 32px; + --canary-size-9: 36px; + --canary-size-10: 40px; + --canary-size-11: 44px; + --canary-size-12: 48px; + --canary-size-14: 56px; + --canary-size-16: 64px; + --canary-size-20: 80px; + --canary-size-24: 96px; + --canary-size-28: 112px; + --canary-size-32: 128px; + --canary-size-36: 144px; + --canary-size-40: 160px; + --canary-size-44: 176px; + --canary-size-48: 192px; + --canary-size-52: 208px; + --canary-size-56: 224px; + --canary-size-60: 240px; + --canary-size-64: 256px; + --canary-size-72: 288px; + --canary-size-80: 320px; + --canary-size-96: 384px; + --canary-size-px: 1px; + --canary-size-half: 2px; /* 0.5 */ + --canary-size-1-half: 6px; /* 1.5 */ + --canary-size-2-half: 10px; /* 2.5 */ + --canary-size-3-half: 14px; /* 3.5 */ + --canary-border-width-0: 0rem; /* No border (border-0) */ + --canary-border-width-1: 1px; /* Default border width (border) */ + --canary-border-width-2: 2px; /* Medium border width (border-2) */ + --canary-border-width-4: 4px; /* Thick border width (border-4) */ + --canary-border-width-8: 8px; /* Extra thick border width (border-8) */ + --canary-line-height-1-none: var(--canary-font-size-1)*var(--canary-line-height-none); + --canary-line-height-1-tight: var(--canary-font-size-1)*var(--canary-line-height-tight); + --canary-line-height-1-snug: var(--canary-font-size-1)*var(--canary-line-height-snug); + --canary-line-height-1-normal: var(--canary-font-size-1)*var(--canary-line-height-normal); + --canary-line-height-1-relaxed: var(--canary-font-size-1)*var(--canary-line-height-relaxed); + --canary-line-height-1-loose: var(--canary-font-size-1)*var(--canary-line-height-loose); + --canary-line-height-2-none: var(--canary-font-size-2)*var(--canary-line-height-none); + --canary-line-height-2-tight: var(--canary-font-size-2)*var(--canary-line-height-tight); + --canary-line-height-2-snug: var(--canary-font-size-2)*var(--canary-line-height-snug); + --canary-line-height-2-normal: var(--canary-font-size-2)*var(--canary-line-height-normal); + --canary-line-height-2-relaxed: var(--canary-font-size-2)*var(--canary-line-height-relaxed); + --canary-line-height-2-loose: var(--canary-font-size-2)*var(--canary-line-height-loose); + --canary-line-height-3-none: var(--canary-font-size-3)*var(--canary-line-height-none); + --canary-line-height-3-tight: var(--canary-font-size-3)*var(--canary-line-height-tight); + --canary-line-height-3-snug: var(--canary-font-size-3)*var(--canary-line-height-snug); + --canary-line-height-3-normal: var(--canary-font-size-3)*var(--canary-line-height-normal); + --canary-line-height-3-relaxed: var(--canary-font-size-3)*var(--canary-line-height-relaxed); + --canary-line-height-3-loose: var(--canary-font-size-3)*var(--canary-line-height-loose); + --canary-line-height-4-none: var(--canary-font-size-4)*var(--canary-line-height-none); + --canary-line-height-4-tight: var(--canary-font-size-4)*var(--canary-line-height-tight); + --canary-line-height-4-snug: var(--canary-font-size-4)*var(--canary-line-height-snug); + --canary-line-height-4-normal: var(--canary-font-size-4)*var(--canary-line-height-normal); + --canary-line-height-4-relaxed: var(--canary-font-size-4)*var(--canary-line-height-relaxed); + --canary-line-height-4-loose: var(--canary-font-size-4)*var(--canary-line-height-loose); + --canary-line-height-5-none: var(--canary-font-size-5)*var(--canary-line-height-none); + --canary-line-height-5-tight: var(--canary-font-size-5)*var(--canary-line-height-tight); + --canary-line-height-5-snug: var(--canary-font-size-5)*var(--canary-line-height-snug); + --canary-line-height-5-normal: var(--canary-font-size-5)*var(--canary-line-height-normal); + --canary-line-height-5-relaxed: var(--canary-font-size-5)*var(--canary-line-height-relaxed); + --canary-line-height-5-loose: var(--canary-font-size-5)*var(--canary-line-height-loose); + --canary-line-height-6-none: var(--canary-font-size-6)*var(--canary-line-height-none); + --canary-line-height-6-tight: var(--canary-font-size-6)*var(--canary-line-height-tight); + --canary-line-height-6-snug: var(--canary-font-size-6)*var(--canary-line-height-snug); + --canary-line-height-6-normal: var(--canary-font-size-6)*var(--canary-line-height-normal); + --canary-line-height-6-relaxed: var(--canary-font-size-6)*var(--canary-line-height-relaxed); + --canary-line-height-6-loose: var(--canary-font-size-6)*var(--canary-line-height-loose); + --canary-line-height-7-none: var(--canary-font-size-7)*var(--canary-line-height-none); + --canary-line-height-7-tight: var(--canary-font-size-7)*var(--canary-line-height-tight); + --canary-line-height-7-snug: var(--canary-font-size-7)*var(--canary-line-height-snug); + --canary-line-height-7-normal: var(--canary-font-size-7)*var(--canary-line-height-normal); + --canary-line-height-7-relaxed: var(--canary-font-size-7)*var(--canary-line-height-relaxed); + --canary-line-height-7-loose: var(--canary-font-size-7)*var(--canary-line-height-loose); + --canary-line-height-8-none: var(--canary-font-size-8)*var(--canary-line-height-none); + --canary-line-height-8-tight: var(--canary-font-size-8)*var(--canary-line-height-tight); + --canary-line-height-8-snug: var(--canary-font-size-8)*var(--canary-line-height-snug); + --canary-line-height-8-normal: var(--canary-font-size-8)*var(--canary-line-height-normal); + --canary-line-height-8-relaxed: var(--canary-font-size-8)*var(--canary-line-height-relaxed); + --canary-line-height-8-loose: var(--canary-font-size-8)*var(--canary-line-height-loose); + --canary-line-height-9-none: var(--canary-font-size-9)*var(--canary-line-height-none); + --canary-line-height-9-tight: var(--canary-font-size-9)*var(--canary-line-height-tight); + --canary-line-height-9-snug: var(--canary-font-size-9)*var(--canary-line-height-snug); + --canary-line-height-9-normal: var(--canary-font-size-9)*var(--canary-line-height-normal); + --canary-line-height-9-relaxed: var(--canary-font-size-9)*var(--canary-line-height-relaxed); + --canary-line-height-9-loose: var(--canary-font-size-9)*var(--canary-line-height-loose); + --canary-line-height-10-none: var(--canary-font-size-10)*var(--canary-line-height-none); + --canary-line-height-10-tight: var(--canary-font-size-10)*var(--canary-line-height-tight); + --canary-line-height-10-snug: var(--canary-font-size-10)*var(--canary-line-height-snug); + --canary-line-height-10-normal: var(--canary-font-size-10)*var(--canary-line-height-normal); + --canary-line-height-10-relaxed: var(--canary-font-size-10)*var(--canary-line-height-relaxed); + --canary-line-height-10-loose: var(--canary-font-size-10)*var(--canary-line-height-loose); + --canary-line-height-11-none: var(--canary-font-size-11)*var(--canary-line-height-none); + --canary-line-height-11-tight: var(--canary-font-size-11)*var(--canary-line-height-tight); + --canary-line-height-11-snug: var(--canary-font-size-11)*var(--canary-line-height-snug); + --canary-line-height-11-normal: var(--canary-font-size-11)*var(--canary-line-height-normal); + --canary-line-height-11-relaxed: var(--canary-font-size-11)*var(--canary-line-height-relaxed); + --canary-line-height-11-loose: var(--canary-font-size-11)*var(--canary-line-height-loose); + --canary-line-height-12-none: var(--canary-font-size-12)*var(--canary-line-height-none); + --canary-line-height-12-tight: var(--canary-font-size-12)*var(--canary-line-height-tight); + --canary-line-height-12-snug: var(--canary-font-size-12)*var(--canary-line-height-snug); + --canary-line-height-12-normal: var(--canary-font-size-12)*var(--canary-line-height-normal); + --canary-line-height-12-relaxed: var(--canary-font-size-12)*var(--canary-line-height-relaxed); + --canary-line-height-12-loose: var(--canary-font-size-12)*var(--canary-line-height-loose); + --canary-line-height-13-none: var(--canary-font-size-13)*var(--canary-line-height-none); + --canary-line-height-13-tight: var(--canary-font-size-13)*var(--canary-line-height-tight); + --canary-line-height-13-snug: var(--canary-font-size-13)*var(--canary-line-height-snug); + --canary-line-height-13-normal: var(--canary-font-size-13)*var(--canary-line-height-normal); + --canary-line-height-13-relaxed: var(--canary-font-size-13)*var(--canary-line-height-relaxed); + --canary-line-height-13-loose: var(--canary-font-size-13)*var(--canary-line-height-loose); + --canary-icon-size-xxs: var(--canary-size-2); + --canary-icon-size-xs: var(--canary-size-3); + --canary-icon-size-sm: var(--canary-size-3-half); + --canary-icon-size-default: var(--canary-size-4); + --canary-icon-size-md: var(--canary-size-5); + /** + * + * + */ + --canary-icon-size-lg: var(--canary-size-8); +} diff --git a/packages/core-design-system/src/styles/index.css b/packages/core-design-system/src/styles/index.css new file mode 100644 index 0000000000..971e28bdd3 --- /dev/null +++ b/packages/core-design-system/src/styles/index.css @@ -0,0 +1,64 @@ +/** + * Harness Design System + * Main stylesheet importing all token files + * DO NOT UPDATE IT MANUALLY + * Generated on Fri, 14 Mar 2025 15:14:42 GMT + */ + +/* Core tokens */ +@import './breakpoint.css'; +@import './colors.css'; +@import './components.css'; +@import './core.css'; + +/* Theme files - Dark */ +@import './source-dark-desktop-gitness.css'; +@import './source-dark-desktop-harness.css'; +@import './source-dark-deuteranopia-desktop-gitness.css'; +@import './source-dark-deuteranopia-desktop-harness.css'; +@import './source-dark-dimmer-desktop-gitness.css'; +@import './source-dark-dimmer-desktop-harness.css'; +@import './source-dark-dimmer-deuteranopia-desktop-gitness.css'; +@import './source-dark-dimmer-deuteranopia-desktop-harness.css'; +@import './source-dark-dimmer-protanopia-desktop-gitness.css'; +@import './source-dark-dimmer-protanopia-desktop-harness.css'; +@import './source-dark-dimmer-tritanopia-desktop-gitness.css'; +@import './source-dark-dimmer-tritanopia-desktop-harness.css'; +@import './source-dark-high-contrast-desktop-gitness.css'; +@import './source-dark-high-contrast-desktop-harness.css'; +@import './source-dark-high-contrast-deuteranopia-desktop-gitness.css'; +@import './source-dark-high-contrast-deuteranopia-desktop-harness.css'; +@import './source-dark-high-contrast-protanopia-desktop-gitness.css'; +@import './source-dark-high-contrast-protanopia-desktop-harness.css'; +@import './source-dark-high-contrast-tritanopia-desktop-gitness.css'; +@import './source-dark-high-contrast-tritanopia-desktop-harness.css'; +@import './source-dark-protanopia-desktop-gitness.css'; +@import './source-dark-protanopia-desktop-harness.css'; +@import './source-dark-tritanopia-desktop-gitness.css'; +@import './source-dark-tritanopia-desktop-harness.css'; + +/* Theme files - Light */ +@import './source-light-desktop-gitness.css'; +@import './source-light-desktop-harness.css'; +@import './source-light-deuteranopia-desktop-gitness.css'; +@import './source-light-deuteranopia-desktop-harness.css'; +@import './source-light-dimmer-desktop-gitness.css'; +@import './source-light-dimmer-desktop-harness.css'; +@import './source-light-dimmer-deuteranopia-desktop-gitness.css'; +@import './source-light-dimmer-deuteranopia-desktop-harness.css'; +@import './source-light-dimmer-protanopia-desktop-gitness.css'; +@import './source-light-dimmer-protanopia-desktop-harness.css'; +@import './source-light-dimmer-tritanopia-desktop-gitness.css'; +@import './source-light-dimmer-tritanopia-desktop-harness.css'; +@import './source-light-high-contrast-desktop-gitness.css'; +@import './source-light-high-contrast-desktop-harness.css'; +@import './source-light-high-contrast-deuteranopia-desktop-gitness.css'; +@import './source-light-high-contrast-deuteranopia-desktop-harness.css'; +@import './source-light-high-contrast-protanopia-desktop-gitness.css'; +@import './source-light-high-contrast-protanopia-desktop-harness.css'; +@import './source-light-high-contrast-tritanopia-desktop-gitness.css'; +@import './source-light-high-contrast-tritanopia-desktop-harness.css'; +@import './source-light-protanopia-desktop-gitness.css'; +@import './source-light-protanopia-desktop-harness.css'; +@import './source-light-tritanopia-desktop-gitness.css'; +@import './source-light-tritanopia-desktop-harness.css';; diff --git a/packages/core-design-system/src/styles/source-dark-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-desktop-gitness.css new file mode 100644 index 0000000000..b46fda0b72 --- /dev/null +++ b/packages/core-design-system/src/styles/source-dark-desktop-gitness.css @@ -0,0 +1,492 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:34 GMT + * Copyright (c) Harness. + */ + +.source-dark-desktop-gitness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-chrome-1000); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-950); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-900); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-300); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-500); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-green-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-200); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-300); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-850); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-850) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-green-400); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-400); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.05); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.08); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-950); + --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-green-200); /* Text color for success badges. Communicates positive status through readable green text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-green-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-green-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-purple-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-green-200); /* Text color for success buttons. Communicates positive actions through readable green text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-green-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-green-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-green-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-green-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-green-500) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-green-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-green-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-purple-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-green-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-green-300); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-200); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-200); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-200); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-green-200); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ + --canary-component-tag-green-background: var(--canary-colors-green-900); /* Background color for green tags. Creates a distinct surface with green theme styling. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-green-950); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-200); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-200); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-200); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-200); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-200); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-purple-200); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --canary-component-tag-purple-background: var(--canary-colors-purple-900); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-red-text: var(--canary-colors-red-200); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-violet-200); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --canary-component-tag-violet-background: var(--canary-colors-violet-900); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-200); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); + --canary-brand-color-50: var(--canary-colors-chrome-150); + --canary-brand-color-100: var(--canary-colors-chrome-150); + --canary-brand-color-200: var(--canary-colors-chrome-150); + --canary-brand-color-300: var(--canary-colors-chrome-150); + --canary-brand-color-400: var(--canary-colors-chrome-150); + --canary-brand-color-500: var(--canary-colors-chrome-900); + --canary-brand-color-600: var(--canary-colors-chrome-150); + --canary-brand-color-700: var(--canary-colors-chrome-900); + --canary-brand-color-800: var(--canary-colors-chrome-900); + --canary-brand-color-900: var(--canary-colors-chrome-900); + --canary-brand-color-950: var(--canary-colors-chrome-900); + --canary-brand-on-color-50: var(--canary-colors-pure-black); + --canary-brand-on-color-100: var(--canary-colors-pure-black); + --canary-brand-on-color-200: var(--canary-colors-pure-black); + --canary-brand-on-color-300: var(--canary-colors-pure-black); + --canary-brand-on-color-400: var(--canary-colors-pure-black); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-black); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-200); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-400); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-1); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-2); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-title: var(--canary-text-1); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-description: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-dark-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-desktop-harness.css new file mode 100644 index 0000000000..bd65196d4b --- /dev/null +++ b/packages/core-design-system/src/styles/source-dark-desktop-harness.css @@ -0,0 +1,492 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:34 GMT + * Copyright (c) Harness. + */ + +.source-dark-desktop-harness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-chrome-1000); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-950); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-900); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-300); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-500); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-green-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-200); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-300); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-850); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-850) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-green-400); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-400); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.05); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.08); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-950); + --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-green-200); /* Text color for success badges. Communicates positive status through readable green text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-green-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-green-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-purple-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-green-200); /* Text color for success buttons. Communicates positive actions through readable green text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-green-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-green-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-green-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-green-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-green-500) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-green-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-green-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-purple-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-green-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-green-300); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-200); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-200); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-200); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-green-200); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ + --canary-component-tag-green-background: var(--canary-colors-green-900); /* Background color for green tags. Creates a distinct surface with green theme styling. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-green-950); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-200); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-200); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-200); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-200); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-200); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-purple-200); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --canary-component-tag-purple-background: var(--canary-colors-purple-900); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-red-text: var(--canary-colors-red-200); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-violet-200); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --canary-component-tag-violet-background: var(--canary-colors-violet-900); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-200); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); + --canary-brand-color-50: var(--canary-colors-cyan-50); + --canary-brand-color-100: var(--canary-colors-cyan-100); + --canary-brand-color-200: var(--canary-colors-cyan-200); + --canary-brand-color-300: var(--canary-colors-cyan-300); + --canary-brand-color-400: var(--canary-colors-cyan-400); + --canary-brand-color-500: var(--canary-colors-cyan-500); + --canary-brand-color-600: var(--canary-colors-cyan-600); + --canary-brand-color-700: var(--canary-colors-cyan-700); + --canary-brand-color-800: var(--canary-colors-cyan-800); + --canary-brand-color-900: var(--canary-colors-cyan-900); + --canary-brand-color-950: var(--canary-colors-cyan-950); + --canary-brand-on-color-50: var(--canary-colors-chrome-950); + --canary-brand-on-color-100: var(--canary-colors-chrome-950); + --canary-brand-on-color-200: var(--canary-colors-chrome-950); + --canary-brand-on-color-300: var(--canary-colors-chrome-950); + --canary-brand-on-color-400: var(--canary-colors-chrome-950); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-white); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-200); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-400); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-1); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-2); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-title: var(--canary-text-1); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-description: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-dark-deuteranopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-deuteranopia-desktop-gitness.css new file mode 100644 index 0000000000..7795594da9 --- /dev/null +++ b/packages/core-design-system/src/styles/source-dark-deuteranopia-desktop-gitness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:37 GMT + * Copyright (c) Harness. + */ + +.source-dark-deuteranopia-desktop-gitness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-chrome-1000); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-950); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-900); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-300); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-500); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-cyan-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-orange-200); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-300); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-850); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-850) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-cyan-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-orange-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-300); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-950); + --canary-component-alert-danger-title: var(--canary-colors-orange-100); /* Text color for danger alerts. Communicates critical information through high-contrast text. */ + --canary-component-alert-danger-description: var(--canary-colors-orange-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-cyan-200); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-orange-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-cyan-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-cyan-200); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-orange-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-orange-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-orange-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-orange-500) l c h / 0.12); /* Orange background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-orange-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-orange-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-blue-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-orange-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-orange-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-200); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-200); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-200); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-cyan-200); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-cyan-900); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-200); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-200); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-200); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-200); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-200); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-cyan-200); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-purple-background: var(--canary-colors-cyan-900); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-red-text: var(--canary-colors-orange-200); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-red-background: var(--canary-colors-orange-900); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-violet-text: var(--canary-colors-blue-200); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-violet-background: var(--canary-colors-blue-900); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-200); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-orange-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-orange-200); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); + --canary-brand-color-50: var(--canary-colors-chrome-150); + --canary-brand-color-100: var(--canary-colors-chrome-150); + --canary-brand-color-200: var(--canary-colors-chrome-150); + --canary-brand-color-300: var(--canary-colors-chrome-150); + --canary-brand-color-400: var(--canary-colors-chrome-150); + --canary-brand-color-500: var(--canary-colors-chrome-900); + --canary-brand-color-600: var(--canary-colors-chrome-150); + --canary-brand-color-700: var(--canary-colors-chrome-900); + --canary-brand-color-800: var(--canary-colors-chrome-900); + --canary-brand-color-900: var(--canary-colors-chrome-900); + --canary-brand-color-950: var(--canary-colors-chrome-900); + --canary-brand-on-color-50: var(--canary-colors-pure-black); + --canary-brand-on-color-100: var(--canary-colors-pure-black); + --canary-brand-on-color-200: var(--canary-colors-pure-black); + --canary-brand-on-color-300: var(--canary-colors-pure-black); + --canary-brand-on-color-400: var(--canary-colors-pure-black); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-black); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-200); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-400); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-1); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags, replaced with orange. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-dark-deuteranopia-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-deuteranopia-desktop-harness.css new file mode 100644 index 0000000000..90d0237065 --- /dev/null +++ b/packages/core-design-system/src/styles/source-dark-deuteranopia-desktop-harness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:36 GMT + * Copyright (c) Harness. + */ + +.source-dark-deuteranopia-desktop-harness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-chrome-1000); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-950); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-900); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-300); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-500); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-cyan-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-orange-200); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-300); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-850); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-850) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-cyan-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-orange-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-300); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-950); + --canary-component-alert-danger-title: var(--canary-colors-orange-100); /* Text color for danger alerts. Communicates critical information through high-contrast text. */ + --canary-component-alert-danger-description: var(--canary-colors-orange-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-cyan-200); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-orange-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-cyan-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-cyan-200); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-orange-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-orange-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-orange-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-orange-500) l c h / 0.12); /* Orange background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-orange-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-orange-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-blue-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-orange-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-orange-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-200); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-200); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-200); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-cyan-200); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-cyan-900); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-200); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-200); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-200); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-200); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-200); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-cyan-200); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-purple-background: var(--canary-colors-cyan-900); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-red-text: var(--canary-colors-orange-200); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-red-background: var(--canary-colors-orange-900); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-violet-text: var(--canary-colors-blue-200); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-violet-background: var(--canary-colors-blue-900); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-200); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-orange-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-orange-200); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); + --canary-brand-color-50: var(--canary-colors-cyan-50); + --canary-brand-color-100: var(--canary-colors-cyan-100); + --canary-brand-color-200: var(--canary-colors-cyan-200); + --canary-brand-color-300: var(--canary-colors-cyan-300); + --canary-brand-color-400: var(--canary-colors-cyan-400); + --canary-brand-color-500: var(--canary-colors-cyan-500); + --canary-brand-color-600: var(--canary-colors-cyan-600); + --canary-brand-color-700: var(--canary-colors-cyan-700); + --canary-brand-color-800: var(--canary-colors-cyan-800); + --canary-brand-color-900: var(--canary-colors-cyan-900); + --canary-brand-color-950: var(--canary-colors-cyan-950); + --canary-brand-on-color-50: var(--canary-colors-chrome-950); + --canary-brand-on-color-100: var(--canary-colors-chrome-950); + --canary-brand-on-color-200: var(--canary-colors-chrome-950); + --canary-brand-on-color-300: var(--canary-colors-chrome-950); + --canary-brand-on-color-400: var(--canary-colors-chrome-950); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-white); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-200); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-400); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-1); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags, replaced with orange. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-dark-dimmer-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-dimmer-desktop-gitness.css new file mode 100644 index 0000000000..56cf1f9245 --- /dev/null +++ b/packages/core-design-system/src/styles/source-dark-dimmer-desktop-gitness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:34 GMT + * Copyright (c) Harness. + */ + +.source-dark-dimmer-desktop-gitness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-pure-black); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-1000); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-950); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-150); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-400); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-green-300); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-300); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-300); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-500); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-900); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: var(--canary-colors-chrome-900); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-green-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-600); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-950); + --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-green-300); /* Text color for success badges. Communicates positive status through readable green text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-green-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-green-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-red-300); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-300); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-300); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-purple-300); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-outline-selected-border: var(--canary-border-width-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-success-text: var(--canary-colors-green-300); /* Text color for success buttons. Communicates positive actions through readable green text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-green-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-green-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-green-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-green-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-red-300); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-green-500) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-green-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-green-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-purple-400); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-green-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-100); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-100); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-green-400); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-purple-400); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-300); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-300); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-300); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-green-300); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ + --canary-component-tag-green-background: var(--canary-colors-green-900); /* Background color for green tags. Creates a distinct surface with green theme styling. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-green-950); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-300); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-300); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-300); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-300); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-300); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-purple-300); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --canary-component-tag-purple-background: var(--canary-colors-purple-900); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-red-text: var(--canary-colors-red-300); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-violet-300); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --canary-component-tag-violet-background: var(--canary-colors-violet-900); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-300); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); + --canary-brand-color-50: var(--canary-colors-chrome-150); + --canary-brand-color-100: var(--canary-colors-chrome-150); + --canary-brand-color-200: var(--canary-colors-chrome-150); + --canary-brand-color-300: var(--canary-colors-chrome-150); + --canary-brand-color-400: var(--canary-colors-chrome-150); + --canary-brand-color-500: var(--canary-colors-chrome-900); + --canary-brand-color-600: var(--canary-colors-chrome-150); + --canary-brand-color-700: var(--canary-colors-chrome-900); + --canary-brand-color-800: var(--canary-colors-chrome-900); + --canary-brand-color-900: var(--canary-colors-chrome-900); + --canary-brand-color-950: var(--canary-colors-chrome-900); + --canary-brand-on-color-50: var(--canary-colors-pure-black); + --canary-brand-on-color-100: var(--canary-colors-pure-black); + --canary-brand-on-color-200: var(--canary-colors-pure-black); + --canary-brand-on-color-300: var(--canary-colors-pure-black); + --canary-brand-on-color-400: var(--canary-colors-pure-black); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-black); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-300); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-600); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-dark-dimmer-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-dimmer-desktop-harness.css new file mode 100644 index 0000000000..42c78a120d --- /dev/null +++ b/packages/core-design-system/src/styles/source-dark-dimmer-desktop-harness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:34 GMT + * Copyright (c) Harness. + */ + +.source-dark-dimmer-desktop-harness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-pure-black); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-1000); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-950); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-150); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-400); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-green-300); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-300); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-300); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-500); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-900); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: var(--canary-colors-chrome-900); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-green-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-600); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-950); + --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-green-300); /* Text color for success badges. Communicates positive status through readable green text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-green-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-green-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-red-300); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-300); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-300); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-purple-300); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-outline-selected-border: var(--canary-border-width-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-success-text: var(--canary-colors-green-300); /* Text color for success buttons. Communicates positive actions through readable green text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-green-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-green-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-green-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-green-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-red-300); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-green-500) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-green-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-green-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-purple-400); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-green-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-100); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-100); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-green-400); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-purple-400); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-300); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-300); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-300); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-green-300); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ + --canary-component-tag-green-background: var(--canary-colors-green-900); /* Background color for green tags. Creates a distinct surface with green theme styling. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-green-950); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-300); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-300); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-300); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-300); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-300); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-purple-300); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --canary-component-tag-purple-background: var(--canary-colors-purple-900); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-red-text: var(--canary-colors-red-300); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-violet-300); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --canary-component-tag-violet-background: var(--canary-colors-violet-900); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-300); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); + --canary-brand-color-50: var(--canary-colors-cyan-50); + --canary-brand-color-100: var(--canary-colors-cyan-100); + --canary-brand-color-200: var(--canary-colors-cyan-200); + --canary-brand-color-300: var(--canary-colors-cyan-300); + --canary-brand-color-400: var(--canary-colors-cyan-400); + --canary-brand-color-500: var(--canary-colors-cyan-500); + --canary-brand-color-600: var(--canary-colors-cyan-600); + --canary-brand-color-700: var(--canary-colors-cyan-700); + --canary-brand-color-800: var(--canary-colors-cyan-800); + --canary-brand-color-900: var(--canary-colors-cyan-900); + --canary-brand-color-950: var(--canary-colors-cyan-950); + --canary-brand-on-color-50: var(--canary-colors-chrome-950); + --canary-brand-on-color-100: var(--canary-colors-chrome-950); + --canary-brand-on-color-200: var(--canary-colors-chrome-950); + --canary-brand-on-color-300: var(--canary-colors-chrome-950); + --canary-brand-on-color-400: var(--canary-colors-chrome-950); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-white); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-300); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-600); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-dark-dimmer-deuteranopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-dimmer-deuteranopia-desktop-gitness.css new file mode 100644 index 0000000000..fed02487aa --- /dev/null +++ b/packages/core-design-system/src/styles/source-dark-dimmer-deuteranopia-desktop-gitness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:37 GMT + * Copyright (c) Harness. + */ + +.source-dark-dimmer-deuteranopia-desktop-gitness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-pure-black); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-1000); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-950); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-150); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-400); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-cyan-300); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-orange-300); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-300); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-500); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-900); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: var(--canary-colors-chrome-900); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-cyan-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-orange-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-600); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-950); + --canary-component-alert-danger-title: var(--canary-colors-orange-100); /* Text color for danger alerts. Communicates critical information through high-contrast text. */ + --canary-component-alert-danger-description: var(--canary-colors-orange-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-cyan-300); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-orange-300); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-300); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-300); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-cyan-300); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-cyan-300); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-orange-300); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-orange-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-orange-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-orange-500) l c h / 0.12); /* Orange background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-orange-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-orange-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-blue-400); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-orange-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-100); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-100); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-cyan-400); /* Color for success status indicators. Communicates completed or positive states using cyan for deuteranopia accessibility. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-orange-400); /* Color for danger status indicators. Communicates error or critical warning states using orange for deuteranopia accessibility. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-cyan-400); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-300); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-300); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-300); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-cyan-300); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-cyan-900); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-300); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-300); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-300); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-300); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-300); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-cyan-300); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-purple-background: var(--canary-colors-cyan-900); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-red-text: var(--canary-colors-orange-300); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-red-background: var(--canary-colors-orange-900); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-violet-text: var(--canary-colors-blue-300); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-violet-background: var(--canary-colors-blue-900); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-300); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-orange-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-orange-200); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); + --canary-brand-color-50: var(--canary-colors-chrome-150); + --canary-brand-color-100: var(--canary-colors-chrome-150); + --canary-brand-color-200: var(--canary-colors-chrome-150); + --canary-brand-color-300: var(--canary-colors-chrome-150); + --canary-brand-color-400: var(--canary-colors-chrome-150); + --canary-brand-color-500: var(--canary-colors-chrome-900); + --canary-brand-color-600: var(--canary-colors-chrome-150); + --canary-brand-color-700: var(--canary-colors-chrome-900); + --canary-brand-color-800: var(--canary-colors-chrome-900); + --canary-brand-color-900: var(--canary-colors-chrome-900); + --canary-brand-color-950: var(--canary-colors-chrome-900); + --canary-brand-on-color-50: var(--canary-colors-pure-black); + --canary-brand-on-color-100: var(--canary-colors-pure-black); + --canary-brand-on-color-200: var(--canary-colors-pure-black); + --canary-brand-on-color-300: var(--canary-colors-pure-black); + --canary-brand-on-color-400: var(--canary-colors-pure-black); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-black); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-300); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-600); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags, replaced with orange. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-dark-dimmer-deuteranopia-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-dimmer-deuteranopia-desktop-harness.css new file mode 100644 index 0000000000..d9681c202c --- /dev/null +++ b/packages/core-design-system/src/styles/source-dark-dimmer-deuteranopia-desktop-harness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:37 GMT + * Copyright (c) Harness. + */ + +.source-dark-dimmer-deuteranopia-desktop-harness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-pure-black); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-1000); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-950); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-150); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-400); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-cyan-300); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-orange-300); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-300); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-500); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-900); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: var(--canary-colors-chrome-900); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-cyan-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-orange-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-600); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-950); + --canary-component-alert-danger-title: var(--canary-colors-orange-100); /* Text color for danger alerts. Communicates critical information through high-contrast text. */ + --canary-component-alert-danger-description: var(--canary-colors-orange-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-cyan-300); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-orange-300); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-300); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-300); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-cyan-300); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-cyan-300); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-orange-300); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-orange-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-orange-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-orange-500) l c h / 0.12); /* Orange background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-orange-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-orange-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-blue-400); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-orange-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-100); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-100); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-cyan-400); /* Color for success status indicators. Communicates completed or positive states using cyan for deuteranopia accessibility. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-orange-400); /* Color for danger status indicators. Communicates error or critical warning states using orange for deuteranopia accessibility. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-cyan-400); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-300); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-300); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-300); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-cyan-300); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-cyan-900); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-300); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-300); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-300); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-300); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-300); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-cyan-300); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-purple-background: var(--canary-colors-cyan-900); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-red-text: var(--canary-colors-orange-300); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-red-background: var(--canary-colors-orange-900); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-violet-text: var(--canary-colors-blue-300); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-violet-background: var(--canary-colors-blue-900); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-300); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-orange-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-orange-200); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); + --canary-brand-color-50: var(--canary-colors-cyan-50); + --canary-brand-color-100: var(--canary-colors-cyan-100); + --canary-brand-color-200: var(--canary-colors-cyan-200); + --canary-brand-color-300: var(--canary-colors-cyan-300); + --canary-brand-color-400: var(--canary-colors-cyan-400); + --canary-brand-color-500: var(--canary-colors-cyan-500); + --canary-brand-color-600: var(--canary-colors-cyan-600); + --canary-brand-color-700: var(--canary-colors-cyan-700); + --canary-brand-color-800: var(--canary-colors-cyan-800); + --canary-brand-color-900: var(--canary-colors-cyan-900); + --canary-brand-color-950: var(--canary-colors-cyan-950); + --canary-brand-on-color-50: var(--canary-colors-chrome-950); + --canary-brand-on-color-100: var(--canary-colors-chrome-950); + --canary-brand-on-color-200: var(--canary-colors-chrome-950); + --canary-brand-on-color-300: var(--canary-colors-chrome-950); + --canary-brand-on-color-400: var(--canary-colors-chrome-950); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-white); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-300); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-600); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags, replaced with orange. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-dark-dimmer-protanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-dimmer-protanopia-desktop-gitness.css new file mode 100644 index 0000000000..1c69119609 --- /dev/null +++ b/packages/core-design-system/src/styles/source-dark-dimmer-protanopia-desktop-gitness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:36 GMT + * Copyright (c) Harness. + */ + +.source-dark-dimmer-protanopia-desktop-gitness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-pure-black); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-1000); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-950); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-150); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-400); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-blue-300); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-300); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-300); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-500); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-900); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: var(--canary-colors-chrome-900); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-blue-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-600); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-950); + --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-blue-300); /* Text color for success badges. Communicates positive status through readable blue text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-blue-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-red-300); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-300); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-300); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-purple-300); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-blue-300); /* Text color for success buttons. Communicates positive actions through readable blue text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-blue-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-blue-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-blue-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-red-300); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Blue background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-blue-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-purple-400); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-blue-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-100); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-100); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-blue-300); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-purple-400); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-300); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-300); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-300); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-blue-300); /* Text color for green tags. Adjusted for protanopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-blue-900); /* Background color for green tags. Adjusted for protanopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for green tags. Adjusted for protanopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-300); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-300); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-300); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-300); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-300); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-purple-300); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --canary-component-tag-purple-background: var(--canary-colors-purple-900); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-red-text: var(--canary-colors-red-300); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-violet-300); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --canary-component-tag-violet-background: var(--canary-colors-violet-900); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-300); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); + --canary-brand-color-50: var(--canary-colors-chrome-150); + --canary-brand-color-100: var(--canary-colors-chrome-150); + --canary-brand-color-200: var(--canary-colors-chrome-150); + --canary-brand-color-300: var(--canary-colors-chrome-150); + --canary-brand-color-400: var(--canary-colors-chrome-150); + --canary-brand-color-500: var(--canary-colors-chrome-900); + --canary-brand-color-600: var(--canary-colors-chrome-150); + --canary-brand-color-700: var(--canary-colors-chrome-900); + --canary-brand-color-800: var(--canary-colors-chrome-900); + --canary-brand-color-900: var(--canary-colors-chrome-900); + --canary-brand-color-950: var(--canary-colors-chrome-900); + --canary-brand-on-color-50: var(--canary-colors-pure-black); + --canary-brand-on-color-100: var(--canary-colors-pure-black); + --canary-brand-on-color-200: var(--canary-colors-pure-black); + --canary-brand-on-color-300: var(--canary-colors-pure-black); + --canary-brand-on-color-400: var(--canary-colors-pure-black); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-black); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-300); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-600); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-dark-dimmer-protanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-dimmer-protanopia-desktop-harness.css new file mode 100644 index 0000000000..7ff4df9dea --- /dev/null +++ b/packages/core-design-system/src/styles/source-dark-dimmer-protanopia-desktop-harness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:36 GMT + * Copyright (c) Harness. + */ + +.source-dark-dimmer-protanopia-desktop-harness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-pure-black); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-1000); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-950); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-150); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-400); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-blue-300); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-300); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-300); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-500); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-900); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: var(--canary-colors-chrome-900); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-blue-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-600); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-950); + --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-blue-300); /* Text color for success badges. Communicates positive status through readable blue text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-blue-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-red-300); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-300); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-300); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-purple-300); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-blue-300); /* Text color for success buttons. Communicates positive actions through readable blue text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-blue-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-blue-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-blue-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-red-300); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Blue background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-blue-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-purple-400); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-blue-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-100); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-100); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-blue-300); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-purple-400); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-300); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-300); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-300); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-blue-300); /* Text color for green tags. Adjusted for protanopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-blue-900); /* Background color for green tags. Adjusted for protanopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for green tags. Adjusted for protanopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-300); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-300); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-300); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-300); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-300); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-purple-300); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --canary-component-tag-purple-background: var(--canary-colors-purple-900); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-red-text: var(--canary-colors-red-300); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-violet-300); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --canary-component-tag-violet-background: var(--canary-colors-violet-900); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-300); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); + --canary-brand-color-50: var(--canary-colors-cyan-50); + --canary-brand-color-100: var(--canary-colors-cyan-100); + --canary-brand-color-200: var(--canary-colors-cyan-200); + --canary-brand-color-300: var(--canary-colors-cyan-300); + --canary-brand-color-400: var(--canary-colors-cyan-400); + --canary-brand-color-500: var(--canary-colors-cyan-500); + --canary-brand-color-600: var(--canary-colors-cyan-600); + --canary-brand-color-700: var(--canary-colors-cyan-700); + --canary-brand-color-800: var(--canary-colors-cyan-800); + --canary-brand-color-900: var(--canary-colors-cyan-900); + --canary-brand-color-950: var(--canary-colors-cyan-950); + --canary-brand-on-color-50: var(--canary-colors-chrome-950); + --canary-brand-on-color-100: var(--canary-colors-chrome-950); + --canary-brand-on-color-200: var(--canary-colors-chrome-950); + --canary-brand-on-color-300: var(--canary-colors-chrome-950); + --canary-brand-on-color-400: var(--canary-colors-chrome-950); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-white); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-300); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-600); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-dark-dimmer-tritanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-dimmer-tritanopia-desktop-gitness.css new file mode 100644 index 0000000000..c0ecb7e700 --- /dev/null +++ b/packages/core-design-system/src/styles/source-dark-dimmer-tritanopia-desktop-gitness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:38 GMT + * Copyright (c) Harness. + */ + +.source-dark-dimmer-tritanopia-desktop-gitness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-pure-black); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-1000); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-950); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-150); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-400); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-cyan-300); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-300); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-orange-300); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-500); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-900); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: var(--canary-colors-chrome-900); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-cyan-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-orange-600); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-950); + --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-cyan-300); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-red-300); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-orange-300); /* Text color for warning badges. Signals caution states with readable orange text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-300); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-cyan-300); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-cyan-300); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-red-300); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-cyan-400); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed: var(--canary-colors-cyan-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-100); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-100); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-cyan-400); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-orange-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-cyan-400); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-300); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-300); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-300); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-cyan-300); /* Text color for green tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-cyan-900); /* Background color for green tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-300); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-300); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-300); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-300); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-300); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-cyan-300); /* Text color for purple tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-purple-background: var(--canary-colors-cyan-900); /* Background color for purple tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-red-text: var(--canary-colors-red-300); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-cyan-300); /* Text color for violet tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-violet-background: var(--canary-colors-cyan-900); /* Background color for violet tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for violet tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-yellow-text: var(--canary-colors-orange-300); /* Text color for yellow tags, replaced with orange for tritanopia visibility. */ + --canary-component-tag-yellow-background: var(--canary-colors-orange-900); /* Background color for yellow tags, replaced with orange for tritanopia visibility. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for yellow tags, replaced with orange for tritanopia visibility. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-orange-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); + --canary-brand-color-50: var(--canary-colors-chrome-150); + --canary-brand-color-100: var(--canary-colors-chrome-150); + --canary-brand-color-200: var(--canary-colors-chrome-150); + --canary-brand-color-300: var(--canary-colors-chrome-150); + --canary-brand-color-400: var(--canary-colors-chrome-150); + --canary-brand-color-500: var(--canary-colors-chrome-900); + --canary-brand-color-600: var(--canary-colors-chrome-150); + --canary-brand-color-700: var(--canary-colors-chrome-900); + --canary-brand-color-800: var(--canary-colors-chrome-900); + --canary-brand-color-900: var(--canary-colors-chrome-900); + --canary-brand-color-950: var(--canary-colors-chrome-900); + --canary-brand-on-color-50: var(--canary-colors-pure-black); + --canary-brand-on-color-100: var(--canary-colors-pure-black); + --canary-brand-on-color-200: var(--canary-colors-pure-black); + --canary-brand-on-color-300: var(--canary-colors-pure-black); + --canary-brand-on-color-400: var(--canary-colors-pure-black); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-black); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-300); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-600); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with cyan. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags, replaced with orange. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-dark-dimmer-tritanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-dimmer-tritanopia-desktop-harness.css new file mode 100644 index 0000000000..4187703d26 --- /dev/null +++ b/packages/core-design-system/src/styles/source-dark-dimmer-tritanopia-desktop-harness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:38 GMT + * Copyright (c) Harness. + */ + +.source-dark-dimmer-tritanopia-desktop-harness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-pure-black); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-1000); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-950); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-150); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-400); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-cyan-300); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-300); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-orange-300); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-500); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-900); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: var(--canary-colors-chrome-900); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-cyan-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-orange-600); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-950); + --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-cyan-300); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-red-300); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-orange-300); /* Text color for warning badges. Signals caution states with readable orange text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-300); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-cyan-300); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-cyan-300); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-red-300); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-cyan-400); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed: var(--canary-colors-cyan-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-100); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-100); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-cyan-400); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-orange-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-cyan-400); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-300); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-300); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-300); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-cyan-300); /* Text color for green tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-cyan-900); /* Background color for green tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-300); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-300); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-300); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-300); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-300); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-cyan-300); /* Text color for purple tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-purple-background: var(--canary-colors-cyan-900); /* Background color for purple tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-red-text: var(--canary-colors-red-300); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-cyan-300); /* Text color for violet tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-violet-background: var(--canary-colors-cyan-900); /* Background color for violet tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for violet tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-yellow-text: var(--canary-colors-orange-300); /* Text color for yellow tags, replaced with orange for tritanopia visibility. */ + --canary-component-tag-yellow-background: var(--canary-colors-orange-900); /* Background color for yellow tags, replaced with orange for tritanopia visibility. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for yellow tags, replaced with orange for tritanopia visibility. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-orange-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); + --canary-brand-color-50: var(--canary-colors-cyan-50); + --canary-brand-color-100: var(--canary-colors-cyan-100); + --canary-brand-color-200: var(--canary-colors-cyan-200); + --canary-brand-color-300: var(--canary-colors-cyan-300); + --canary-brand-color-400: var(--canary-colors-cyan-400); + --canary-brand-color-500: var(--canary-colors-cyan-500); + --canary-brand-color-600: var(--canary-colors-cyan-600); + --canary-brand-color-700: var(--canary-colors-cyan-700); + --canary-brand-color-800: var(--canary-colors-cyan-800); + --canary-brand-color-900: var(--canary-colors-cyan-900); + --canary-brand-color-950: var(--canary-colors-cyan-950); + --canary-brand-on-color-50: var(--canary-colors-chrome-950); + --canary-brand-on-color-100: var(--canary-colors-chrome-950); + --canary-brand-on-color-200: var(--canary-colors-chrome-950); + --canary-brand-on-color-300: var(--canary-colors-chrome-950); + --canary-brand-on-color-400: var(--canary-colors-chrome-950); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-white); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-300); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-600); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with cyan. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags, replaced with orange. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-dark-high-contrast-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-high-contrast-desktop-gitness.css new file mode 100644 index 0000000000..dcf72df168 --- /dev/null +++ b/packages/core-design-system/src/styles/source-dark-high-contrast-desktop-gitness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:35 GMT + * Copyright (c) Harness. + */ + +.source-dark-high-contrast-desktop-gitness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-chrome-1000); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-950); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-850); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-200); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-400); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-green-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-200); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-200); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-700); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-800) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-green-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-300); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-950); + --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-green-200); /* Text color for success badges. Communicates positive status through readable green text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-green-300) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-green-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-purple-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-green-200); /* Text color for success buttons. Communicates positive actions through readable green text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-green-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-green-300) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-green-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-green-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-green-500) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-green-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-green-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-purple-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-green-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-green-300); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-100); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-800); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-100); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-800); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-100); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-800); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-green-100); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ + --canary-component-tag-green-background: var(--canary-colors-green-800); /* Background color for green tags. Creates a distinct surface with green theme styling. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-green-950); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-100); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-800); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-100); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-800); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-100); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-800); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-100); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-800); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-100); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-800); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-purple-100); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --canary-component-tag-purple-background: var(--canary-colors-purple-800); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-red-text: var(--canary-colors-red-100); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-800); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-violet-100); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --canary-component-tag-violet-background: var(--canary-colors-violet-800); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-100); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-800); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); + --canary-brand-color-50: var(--canary-colors-chrome-150); + --canary-brand-color-100: var(--canary-colors-chrome-150); + --canary-brand-color-200: var(--canary-colors-chrome-150); + --canary-brand-color-300: var(--canary-colors-chrome-150); + --canary-brand-color-400: var(--canary-colors-chrome-150); + --canary-brand-color-500: var(--canary-colors-chrome-900); + --canary-brand-color-600: var(--canary-colors-chrome-150); + --canary-brand-color-700: var(--canary-colors-chrome-900); + --canary-brand-color-800: var(--canary-colors-chrome-900); + --canary-brand-color-900: var(--canary-colors-chrome-900); + --canary-brand-color-950: var(--canary-colors-chrome-900); + --canary-brand-on-color-50: var(--canary-colors-pure-black); + --canary-brand-on-color-100: var(--canary-colors-pure-black); + --canary-brand-on-color-200: var(--canary-colors-pure-black); + --canary-brand-on-color-300: var(--canary-colors-pure-black); + --canary-brand-on-color-400: var(--canary-colors-pure-black); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-black); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-200); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-300); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-dark-high-contrast-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-high-contrast-desktop-harness.css new file mode 100644 index 0000000000..dd17061d73 --- /dev/null +++ b/packages/core-design-system/src/styles/source-dark-high-contrast-desktop-harness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:35 GMT + * Copyright (c) Harness. + */ + +.source-dark-high-contrast-desktop-harness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-chrome-1000); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-950); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-850); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-200); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-400); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-green-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-200); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-200); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-700); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-800) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-green-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-300); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-950); + --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-green-200); /* Text color for success badges. Communicates positive status through readable green text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-green-300) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-green-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-purple-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-green-200); /* Text color for success buttons. Communicates positive actions through readable green text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-green-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-green-300) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-green-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-green-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-green-500) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-green-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-green-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-purple-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-green-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-green-300); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-100); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-800); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-100); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-800); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-100); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-800); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-green-100); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ + --canary-component-tag-green-background: var(--canary-colors-green-800); /* Background color for green tags. Creates a distinct surface with green theme styling. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-green-950); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-100); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-800); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-100); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-800); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-100); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-800); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-100); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-800); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-100); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-800); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-purple-100); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --canary-component-tag-purple-background: var(--canary-colors-purple-800); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-red-text: var(--canary-colors-red-100); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-800); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-violet-100); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --canary-component-tag-violet-background: var(--canary-colors-violet-800); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-100); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-800); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); + --canary-brand-color-50: var(--canary-colors-cyan-50); + --canary-brand-color-100: var(--canary-colors-cyan-100); + --canary-brand-color-200: var(--canary-colors-cyan-200); + --canary-brand-color-300: var(--canary-colors-cyan-300); + --canary-brand-color-400: var(--canary-colors-cyan-400); + --canary-brand-color-500: var(--canary-colors-cyan-500); + --canary-brand-color-600: var(--canary-colors-cyan-600); + --canary-brand-color-700: var(--canary-colors-cyan-700); + --canary-brand-color-800: var(--canary-colors-cyan-800); + --canary-brand-color-900: var(--canary-colors-cyan-900); + --canary-brand-color-950: var(--canary-colors-cyan-950); + --canary-brand-on-color-50: var(--canary-colors-chrome-950); + --canary-brand-on-color-100: var(--canary-colors-chrome-950); + --canary-brand-on-color-200: var(--canary-colors-chrome-950); + --canary-brand-on-color-300: var(--canary-colors-chrome-950); + --canary-brand-on-color-400: var(--canary-colors-chrome-950); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-white); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-200); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-300); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-dark-high-contrast-deuteranopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-high-contrast-deuteranopia-desktop-gitness.css new file mode 100644 index 0000000000..bde92ffcfd --- /dev/null +++ b/packages/core-design-system/src/styles/source-dark-high-contrast-deuteranopia-desktop-gitness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:38 GMT + * Copyright (c) Harness. + */ + +.source-dark-high-contrast-deuteranopia-desktop-gitness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-chrome-1000); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-950); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-850); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-200); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-400); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-cyan-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-orange-200); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-200); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-700); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-800) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-cyan-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-orange-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-300); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-950); + --canary-component-alert-danger-title: var(--canary-colors-orange-100); /* Text color for danger alerts. Communicates critical information through high-contrast orange text. */ + --canary-component-alert-danger-description: var(--canary-colors-orange-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-cyan-200); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-orange-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-cyan-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-cyan-200); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-orange-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-orange-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-orange-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-orange-500) l c h / 0.12); /* Orange background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-orange-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-orange-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-blue-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-orange-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-orange-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-100); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-800); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-100); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-800); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-100); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-800); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-cyan-100); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-cyan-800); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-100); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-800); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-100); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-800); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-100); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-800); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-100); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-800); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-100); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-800); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-cyan-100); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-purple-background: var(--canary-colors-cyan-800); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-red-text: var(--canary-colors-orange-100); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-red-background: var(--canary-colors-orange-800); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-violet-text: var(--canary-colors-blue-100); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-violet-background: var(--canary-colors-blue-800); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-100); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-800); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-orange-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-orange-200); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); + --canary-brand-color-50: var(--canary-colors-chrome-150); + --canary-brand-color-100: var(--canary-colors-chrome-150); + --canary-brand-color-200: var(--canary-colors-chrome-150); + --canary-brand-color-300: var(--canary-colors-chrome-150); + --canary-brand-color-400: var(--canary-colors-chrome-150); + --canary-brand-color-500: var(--canary-colors-chrome-900); + --canary-brand-color-600: var(--canary-colors-chrome-150); + --canary-brand-color-700: var(--canary-colors-chrome-900); + --canary-brand-color-800: var(--canary-colors-chrome-900); + --canary-brand-color-900: var(--canary-colors-chrome-900); + --canary-brand-color-950: var(--canary-colors-chrome-900); + --canary-brand-on-color-50: var(--canary-colors-pure-black); + --canary-brand-on-color-100: var(--canary-colors-pure-black); + --canary-brand-on-color-200: var(--canary-colors-pure-black); + --canary-brand-on-color-300: var(--canary-colors-pure-black); + --canary-brand-on-color-400: var(--canary-colors-pure-black); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-black); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-200); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-300); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags, replaced with orange. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-dark-high-contrast-deuteranopia-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-high-contrast-deuteranopia-desktop-harness.css new file mode 100644 index 0000000000..572351c038 --- /dev/null +++ b/packages/core-design-system/src/styles/source-dark-high-contrast-deuteranopia-desktop-harness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:37 GMT + * Copyright (c) Harness. + */ + +.source-dark-high-contrast-deuteranopia-desktop-harness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-chrome-1000); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-950); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-850); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-200); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-400); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-cyan-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-orange-200); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-200); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-700); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-800) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-cyan-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-orange-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-300); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-950); + --canary-component-alert-danger-title: var(--canary-colors-orange-100); /* Text color for danger alerts. Communicates critical information through high-contrast orange text. */ + --canary-component-alert-danger-description: var(--canary-colors-orange-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-cyan-200); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-orange-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-cyan-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-cyan-200); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-orange-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-orange-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-orange-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-orange-500) l c h / 0.12); /* Orange background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-orange-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-orange-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-blue-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-orange-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-orange-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-100); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-800); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-100); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-800); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-100); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-800); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-cyan-100); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-cyan-800); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-100); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-800); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-100); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-800); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-100); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-800); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-100); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-800); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-100); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-800); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-cyan-100); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-purple-background: var(--canary-colors-cyan-800); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-red-text: var(--canary-colors-orange-100); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-red-background: var(--canary-colors-orange-800); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-violet-text: var(--canary-colors-blue-100); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-violet-background: var(--canary-colors-blue-800); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-100); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-800); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-orange-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-orange-200); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); + --canary-brand-color-50: var(--canary-colors-cyan-50); + --canary-brand-color-100: var(--canary-colors-cyan-100); + --canary-brand-color-200: var(--canary-colors-cyan-200); + --canary-brand-color-300: var(--canary-colors-cyan-300); + --canary-brand-color-400: var(--canary-colors-cyan-400); + --canary-brand-color-500: var(--canary-colors-cyan-500); + --canary-brand-color-600: var(--canary-colors-cyan-600); + --canary-brand-color-700: var(--canary-colors-cyan-700); + --canary-brand-color-800: var(--canary-colors-cyan-800); + --canary-brand-color-900: var(--canary-colors-cyan-900); + --canary-brand-color-950: var(--canary-colors-cyan-950); + --canary-brand-on-color-50: var(--canary-colors-chrome-950); + --canary-brand-on-color-100: var(--canary-colors-chrome-950); + --canary-brand-on-color-200: var(--canary-colors-chrome-950); + --canary-brand-on-color-300: var(--canary-colors-chrome-950); + --canary-brand-on-color-400: var(--canary-colors-chrome-950); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-white); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-200); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-300); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags, replaced with orange. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-dark-high-contrast-protanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-high-contrast-protanopia-desktop-gitness.css new file mode 100644 index 0000000000..a8a79e2530 --- /dev/null +++ b/packages/core-design-system/src/styles/source-dark-high-contrast-protanopia-desktop-gitness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:36 GMT + * Copyright (c) Harness. + */ + +.source-dark-high-contrast-protanopia-desktop-gitness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-chrome-1000); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-950); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-900); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-200); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-400); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-blue-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-200); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-200); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-800); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-800) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-blue-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-300); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-950); + --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-blue-200); /* Text color for success badges. Communicates positive status through readable blue text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-blue-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-purple-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-blue-200); /* Text color for success buttons. Communicates positive actions through readable blue text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-blue-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-blue-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-blue-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Blue background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-blue-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-purple-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-blue-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-blue-300); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-100); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-800); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-100); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-800); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-100); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-800); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-blue-100); /* Text color for green tags. Adjusted for protanopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-blue-800); /* Background color for green tags. Adjusted for protanopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for green tags. Adjusted for protanopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-100); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-800); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-100); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-800); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-100); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-800); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-100); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-800); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-100); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-800); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-purple-100); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --canary-component-tag-purple-background: var(--canary-colors-purple-800); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-red-text: var(--canary-colors-red-100); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-800); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-violet-100); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --canary-component-tag-violet-background: var(--canary-colors-violet-800); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-100); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-800); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); + --canary-brand-color-50: var(--canary-colors-chrome-150); + --canary-brand-color-100: var(--canary-colors-chrome-150); + --canary-brand-color-200: var(--canary-colors-chrome-150); + --canary-brand-color-300: var(--canary-colors-chrome-150); + --canary-brand-color-400: var(--canary-colors-chrome-150); + --canary-brand-color-500: var(--canary-colors-chrome-900); + --canary-brand-color-600: var(--canary-colors-chrome-150); + --canary-brand-color-700: var(--canary-colors-chrome-900); + --canary-brand-color-800: var(--canary-colors-chrome-900); + --canary-brand-color-900: var(--canary-colors-chrome-900); + --canary-brand-color-950: var(--canary-colors-chrome-900); + --canary-brand-on-color-50: var(--canary-colors-pure-black); + --canary-brand-on-color-100: var(--canary-colors-pure-black); + --canary-brand-on-color-200: var(--canary-colors-pure-black); + --canary-brand-on-color-300: var(--canary-colors-pure-black); + --canary-brand-on-color-400: var(--canary-colors-pure-black); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-black); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-200); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-300); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-dark-high-contrast-protanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-high-contrast-protanopia-desktop-harness.css new file mode 100644 index 0000000000..a25d036618 --- /dev/null +++ b/packages/core-design-system/src/styles/source-dark-high-contrast-protanopia-desktop-harness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:36 GMT + * Copyright (c) Harness. + */ + +.source-dark-high-contrast-protanopia-desktop-harness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-chrome-1000); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-950); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-900); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-200); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-400); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-blue-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-200); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-200); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-800); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-800) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-blue-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-300); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-950); + --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-blue-200); /* Text color for success badges. Communicates positive status through readable blue text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-blue-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-purple-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-blue-200); /* Text color for success buttons. Communicates positive actions through readable blue text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-blue-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-blue-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-blue-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Blue background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-blue-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-purple-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-blue-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-blue-300); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-100); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-800); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-100); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-800); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-100); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-800); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-blue-100); /* Text color for green tags. Adjusted for protanopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-blue-800); /* Background color for green tags. Adjusted for protanopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for green tags. Adjusted for protanopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-100); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-800); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-100); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-800); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-100); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-800); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-100); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-800); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-100); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-800); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-purple-100); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --canary-component-tag-purple-background: var(--canary-colors-purple-800); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-red-text: var(--canary-colors-red-100); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-800); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-violet-100); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --canary-component-tag-violet-background: var(--canary-colors-violet-800); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-100); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-800); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); + --canary-brand-color-50: var(--canary-colors-cyan-50); + --canary-brand-color-100: var(--canary-colors-cyan-100); + --canary-brand-color-200: var(--canary-colors-cyan-200); + --canary-brand-color-300: var(--canary-colors-cyan-300); + --canary-brand-color-400: var(--canary-colors-cyan-400); + --canary-brand-color-500: var(--canary-colors-cyan-500); + --canary-brand-color-600: var(--canary-colors-cyan-600); + --canary-brand-color-700: var(--canary-colors-cyan-700); + --canary-brand-color-800: var(--canary-colors-cyan-800); + --canary-brand-color-900: var(--canary-colors-cyan-900); + --canary-brand-color-950: var(--canary-colors-cyan-950); + --canary-brand-on-color-50: var(--canary-colors-chrome-950); + --canary-brand-on-color-100: var(--canary-colors-chrome-950); + --canary-brand-on-color-200: var(--canary-colors-chrome-950); + --canary-brand-on-color-300: var(--canary-colors-chrome-950); + --canary-brand-on-color-400: var(--canary-colors-chrome-950); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-white); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-200); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-300); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-dark-high-contrast-tritanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-high-contrast-tritanopia-desktop-gitness.css new file mode 100644 index 0000000000..8473239e71 --- /dev/null +++ b/packages/core-design-system/src/styles/source-dark-high-contrast-tritanopia-desktop-gitness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:39 GMT + * Copyright (c) Harness. + */ + +.source-dark-high-contrast-tritanopia-desktop-gitness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-pure-black); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-1000); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-950); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-200); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-400); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-colors-cyan-200); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-cyan-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-200); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-orange-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-200); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-700); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-800) l c h / 0.7); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-colors-cyan-300); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-cyan-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-orange-300); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-950); + --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-cyan-200); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-orange-200); /* Text color for warning badges. Signals caution states with readable orange text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-orange-300) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-cyan-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-cyan-200); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-cyan-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-sidebar-logo-icon: var(--canary-colors-cyan-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-progress: var(--canary-colors-cyan-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-track-segments-progress: var(--canary-colors-cyan-600); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-orange-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-100); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-800); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-100); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-800); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-100); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-800); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-cyan-100); /* Text color for green tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-cyan-800); /* Background color for green tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-100); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-800); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-100); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-800); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-100); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-800); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-100); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-800); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-100); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-800); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-cyan-100); /* Text color for purple tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-purple-background: var(--canary-colors-cyan-800); /* Background color for purple tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-red-text: var(--canary-colors-red-100); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-800); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-cyan-100); /* Text color for violet tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-violet-background: var(--canary-colors-cyan-800); /* Background color for violet tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for violet tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-yellow-text: var(--canary-colors-orange-100); /* Text color for yellow tags, replaced with orange for tritanopia visibility. */ + --canary-component-tag-yellow-background: var(--canary-colors-orange-800); /* Background color for yellow tags, replaced with orange for tritanopia visibility. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for yellow tags, replaced with orange for tritanopia visibility. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-orange-100); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); + --canary-brand-color-50: var(--canary-colors-chrome-150); + --canary-brand-color-100: var(--canary-colors-chrome-150); + --canary-brand-color-200: var(--canary-colors-chrome-150); + --canary-brand-color-300: var(--canary-colors-chrome-150); + --canary-brand-color-400: var(--canary-colors-chrome-150); + --canary-brand-color-500: var(--canary-colors-chrome-900); + --canary-brand-color-600: var(--canary-colors-chrome-150); + --canary-brand-color-700: var(--canary-colors-chrome-900); + --canary-brand-color-800: var(--canary-colors-chrome-900); + --canary-brand-color-900: var(--canary-colors-chrome-900); + --canary-brand-color-950: var(--canary-colors-chrome-900); + --canary-brand-on-color-50: var(--canary-colors-pure-black); + --canary-brand-on-color-100: var(--canary-colors-pure-black); + --canary-brand-on-color-200: var(--canary-colors-pure-black); + --canary-brand-on-color-300: var(--canary-colors-pure-black); + --canary-brand-on-color-400: var(--canary-colors-pure-black); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-black); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with cyan. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags, replaced with orange. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-dark-high-contrast-tritanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-high-contrast-tritanopia-desktop-harness.css new file mode 100644 index 0000000000..7761848b8d --- /dev/null +++ b/packages/core-design-system/src/styles/source-dark-high-contrast-tritanopia-desktop-harness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:38 GMT + * Copyright (c) Harness. + */ + +.source-dark-high-contrast-tritanopia-desktop-harness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-pure-black); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-1000); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-950); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-200); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-400); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-colors-cyan-200); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-cyan-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-200); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-orange-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-200); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-700); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-800) l c h / 0.7); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-colors-cyan-300); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-cyan-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-orange-300); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-950); + --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-cyan-200); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-orange-200); /* Text color for warning badges. Signals caution states with readable orange text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-orange-300) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-cyan-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-cyan-200); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-cyan-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-sidebar-logo-icon: var(--canary-colors-cyan-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-progress: var(--canary-colors-cyan-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-track-segments-progress: var(--canary-colors-cyan-600); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-orange-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-100); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-800); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-100); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-800); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-100); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-800); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-cyan-100); /* Text color for green tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-cyan-800); /* Background color for green tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-100); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-800); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-100); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-800); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-100); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-800); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-100); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-800); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-100); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-800); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-cyan-100); /* Text color for purple tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-purple-background: var(--canary-colors-cyan-800); /* Background color for purple tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-red-text: var(--canary-colors-red-100); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-800); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-cyan-100); /* Text color for violet tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-violet-background: var(--canary-colors-cyan-800); /* Background color for violet tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for violet tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-yellow-text: var(--canary-colors-orange-100); /* Text color for yellow tags, replaced with orange for tritanopia visibility. */ + --canary-component-tag-yellow-background: var(--canary-colors-orange-800); /* Background color for yellow tags, replaced with orange for tritanopia visibility. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for yellow tags, replaced with orange for tritanopia visibility. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-orange-100); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); + --canary-brand-color-50: var(--canary-colors-cyan-50); + --canary-brand-color-100: var(--canary-colors-cyan-100); + --canary-brand-color-200: var(--canary-colors-cyan-200); + --canary-brand-color-300: var(--canary-colors-cyan-300); + --canary-brand-color-400: var(--canary-colors-cyan-400); + --canary-brand-color-500: var(--canary-colors-cyan-500); + --canary-brand-color-600: var(--canary-colors-cyan-600); + --canary-brand-color-700: var(--canary-colors-cyan-700); + --canary-brand-color-800: var(--canary-colors-cyan-800); + --canary-brand-color-900: var(--canary-colors-cyan-900); + --canary-brand-color-950: var(--canary-colors-cyan-950); + --canary-brand-on-color-50: var(--canary-colors-chrome-950); + --canary-brand-on-color-100: var(--canary-colors-chrome-950); + --canary-brand-on-color-200: var(--canary-colors-chrome-950); + --canary-brand-on-color-300: var(--canary-colors-chrome-950); + --canary-brand-on-color-400: var(--canary-colors-chrome-950); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-white); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with cyan. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags, replaced with orange. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-dark-protanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-protanopia-desktop-gitness.css new file mode 100644 index 0000000000..acc0823e6a --- /dev/null +++ b/packages/core-design-system/src/styles/source-dark-protanopia-desktop-gitness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:36 GMT + * Copyright (c) Harness. + */ + +.source-dark-protanopia-desktop-gitness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-chrome-1000); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-950); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-900); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-300); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-500); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-blue-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-100); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-300); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-850); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-850) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-blue-400); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-400); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-400); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-950); + --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-blue-200); /* Text color for success badges. Communicates positive status through readable blue text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-blue-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-purple-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-blue-200); /* Text color for success buttons. Communicates positive actions through readable blue text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-blue-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-blue-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-blue-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Blue background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-blue-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-purple-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-blue-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-blue-300); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-200); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-200); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-200); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-blue-200); /* Text color for green tags. Adjusted for protanopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-blue-900); /* Background color for green tags. Adjusted for protanopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for green tags. Adjusted for protanopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-200); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-200); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-200); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-200); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-200); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-purple-200); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --canary-component-tag-purple-background: var(--canary-colors-purple-900); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-red-text: var(--canary-colors-red-200); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-violet-200); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --canary-component-tag-violet-background: var(--canary-colors-violet-900); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-200); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); + --canary-brand-color-50: var(--canary-colors-chrome-150); + --canary-brand-color-100: var(--canary-colors-chrome-150); + --canary-brand-color-200: var(--canary-colors-chrome-150); + --canary-brand-color-300: var(--canary-colors-chrome-150); + --canary-brand-color-400: var(--canary-colors-chrome-150); + --canary-brand-color-500: var(--canary-colors-chrome-900); + --canary-brand-color-600: var(--canary-colors-chrome-150); + --canary-brand-color-700: var(--canary-colors-chrome-900); + --canary-brand-color-800: var(--canary-colors-chrome-900); + --canary-brand-color-900: var(--canary-colors-chrome-900); + --canary-brand-color-950: var(--canary-colors-chrome-900); + --canary-brand-on-color-50: var(--canary-colors-pure-black); + --canary-brand-on-color-100: var(--canary-colors-pure-black); + --canary-brand-on-color-200: var(--canary-colors-pure-black); + --canary-brand-on-color-300: var(--canary-colors-pure-black); + --canary-brand-on-color-400: var(--canary-colors-pure-black); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-black); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-200); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-400); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-dark-protanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-protanopia-desktop-harness.css new file mode 100644 index 0000000000..20630041d7 --- /dev/null +++ b/packages/core-design-system/src/styles/source-dark-protanopia-desktop-harness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:35 GMT + * Copyright (c) Harness. + */ + +.source-dark-protanopia-desktop-harness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-chrome-1000); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-950); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-900); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-300); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-500); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-blue-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-100); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-300); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-850); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-850) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-blue-400); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-400); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-400); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-950); + --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-blue-200); /* Text color for success badges. Communicates positive status through readable blue text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-blue-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-purple-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-blue-200); /* Text color for success buttons. Communicates positive actions through readable blue text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-blue-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-blue-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-blue-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Blue background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-blue-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-purple-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-blue-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-blue-300); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-200); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-200); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-200); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-blue-200); /* Text color for green tags. Adjusted for protanopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-blue-900); /* Background color for green tags. Adjusted for protanopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for green tags. Adjusted for protanopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-200); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-200); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-200); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-200); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-200); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-purple-200); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --canary-component-tag-purple-background: var(--canary-colors-purple-900); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-red-text: var(--canary-colors-red-200); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-violet-200); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --canary-component-tag-violet-background: var(--canary-colors-violet-900); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-200); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); + --canary-brand-color-50: var(--canary-colors-cyan-50); + --canary-brand-color-100: var(--canary-colors-cyan-100); + --canary-brand-color-200: var(--canary-colors-cyan-200); + --canary-brand-color-300: var(--canary-colors-cyan-300); + --canary-brand-color-400: var(--canary-colors-cyan-400); + --canary-brand-color-500: var(--canary-colors-cyan-500); + --canary-brand-color-600: var(--canary-colors-cyan-600); + --canary-brand-color-700: var(--canary-colors-cyan-700); + --canary-brand-color-800: var(--canary-colors-cyan-800); + --canary-brand-color-900: var(--canary-colors-cyan-900); + --canary-brand-color-950: var(--canary-colors-cyan-950); + --canary-brand-on-color-50: var(--canary-colors-chrome-950); + --canary-brand-on-color-100: var(--canary-colors-chrome-950); + --canary-brand-on-color-200: var(--canary-colors-chrome-950); + --canary-brand-on-color-300: var(--canary-colors-chrome-950); + --canary-brand-on-color-400: var(--canary-colors-chrome-950); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-white); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-200); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-400); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-dark-tritanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-tritanopia-desktop-gitness.css new file mode 100644 index 0000000000..892fdf54e3 --- /dev/null +++ b/packages/core-design-system/src/styles/source-dark-tritanopia-desktop-gitness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:38 GMT + * Copyright (c) Harness. + */ + +.source-dark-tritanopia-desktop-gitness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-chrome-1000); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-950); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-900); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-300); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-500); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-cyan-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-200); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-orange-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-300); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-850); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-850) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-cyan-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-400); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-orange-400); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-950); + --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-cyan-200); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-orange-200); /* Text color for warning badges. Signals caution states with readable orange text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-cyan-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-cyan-200); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-cyan-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-orange-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-200); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-200); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-200); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-cyan-200); /* Text color for green tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-cyan-900); /* Background color for green tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-200); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-200); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-200); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-200); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-200); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-cyan-200); /* Text color for purple tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-purple-background: var(--canary-colors-cyan-900); /* Background color for purple tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-red-text: var(--canary-colors-red-200); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-cyan-200); /* Text color for violet tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-violet-background: var(--canary-colors-cyan-900); /* Background color for violet tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for violet tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-yellow-text: var(--canary-colors-orange-200); /* Text color for yellow tags, replaced with orange for tritanopia visibility. */ + --canary-component-tag-yellow-background: var(--canary-colors-orange-900); /* Background color for yellow tags, replaced with orange for tritanopia visibility. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for yellow tags, replaced with orange for tritanopia visibility. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-orange-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); + --canary-brand-color-50: var(--canary-colors-chrome-150); + --canary-brand-color-100: var(--canary-colors-chrome-150); + --canary-brand-color-200: var(--canary-colors-chrome-150); + --canary-brand-color-300: var(--canary-colors-chrome-150); + --canary-brand-color-400: var(--canary-colors-chrome-150); + --canary-brand-color-500: var(--canary-colors-chrome-900); + --canary-brand-color-600: var(--canary-colors-chrome-150); + --canary-brand-color-700: var(--canary-colors-chrome-900); + --canary-brand-color-800: var(--canary-colors-chrome-900); + --canary-brand-color-900: var(--canary-colors-chrome-900); + --canary-brand-color-950: var(--canary-colors-chrome-900); + --canary-brand-on-color-50: var(--canary-colors-pure-black); + --canary-brand-on-color-100: var(--canary-colors-pure-black); + --canary-brand-on-color-200: var(--canary-colors-pure-black); + --canary-brand-on-color-300: var(--canary-colors-pure-black); + --canary-brand-on-color-400: var(--canary-colors-pure-black); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-black); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-200); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-400); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with cyan. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags, replaced with orange. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-dark-tritanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-tritanopia-desktop-harness.css new file mode 100644 index 0000000000..604d9e0cc1 --- /dev/null +++ b/packages/core-design-system/src/styles/source-dark-tritanopia-desktop-harness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:38 GMT + * Copyright (c) Harness. + */ + +.source-dark-tritanopia-desktop-harness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-chrome-1000); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-950); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-900); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-300); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-500); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-cyan-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-200); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-orange-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-300); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-850); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-850) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-cyan-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-400); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-orange-400); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-950); + --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-cyan-200); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-orange-200); /* Text color for warning badges. Signals caution states with readable orange text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-cyan-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-cyan-200); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-cyan-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-orange-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-200); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-200); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-200); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-cyan-200); /* Text color for green tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-cyan-900); /* Background color for green tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-200); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-200); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-200); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-200); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-200); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-cyan-200); /* Text color for purple tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-purple-background: var(--canary-colors-cyan-900); /* Background color for purple tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-red-text: var(--canary-colors-red-200); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-cyan-200); /* Text color for violet tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-violet-background: var(--canary-colors-cyan-900); /* Background color for violet tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for violet tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-yellow-text: var(--canary-colors-orange-200); /* Text color for yellow tags, replaced with orange for tritanopia visibility. */ + --canary-component-tag-yellow-background: var(--canary-colors-orange-900); /* Background color for yellow tags, replaced with orange for tritanopia visibility. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for yellow tags, replaced with orange for tritanopia visibility. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-orange-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); + --canary-brand-color-50: var(--canary-colors-cyan-50); + --canary-brand-color-100: var(--canary-colors-cyan-100); + --canary-brand-color-200: var(--canary-colors-cyan-200); + --canary-brand-color-300: var(--canary-colors-cyan-300); + --canary-brand-color-400: var(--canary-colors-cyan-400); + --canary-brand-color-500: var(--canary-colors-cyan-500); + --canary-brand-color-600: var(--canary-colors-cyan-600); + --canary-brand-color-700: var(--canary-colors-cyan-700); + --canary-brand-color-800: var(--canary-colors-cyan-800); + --canary-brand-color-900: var(--canary-colors-cyan-900); + --canary-brand-color-950: var(--canary-colors-cyan-950); + --canary-brand-on-color-50: var(--canary-colors-chrome-950); + --canary-brand-on-color-100: var(--canary-colors-chrome-950); + --canary-brand-on-color-200: var(--canary-colors-chrome-950); + --canary-brand-on-color-300: var(--canary-colors-chrome-950); + --canary-brand-on-color-400: var(--canary-colors-chrome-950); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-white); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-200); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-400); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with cyan. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags, replaced with orange. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-light-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-desktop-gitness.css new file mode 100644 index 0000000000..193fdf42c8 --- /dev/null +++ b/packages/core-design-system/src/styles/source-light-desktop-gitness.css @@ -0,0 +1,490 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:35 GMT + * Copyright (c) Harness. + */ + +.source-light-desktop-gitness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-chrome-50); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-850); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-700); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-green-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-800); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-100); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-green-400); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-400); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-component-alert-danger-title: var(--canary-colors-red-800); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-green-600); /* Text color for success badges. Communicates positive status through readable green text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-green-400) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-green-200) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-red-600); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-600); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-400) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-600); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-purple-600); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-400) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-200); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-green-600); /* Text color for success buttons. Communicates positive actions through readable green text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-green-200) l c h / 0.12); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-green-400) l c h / 0.25); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-green-200) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-green-200) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-red-600); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.12); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-green-500) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-green-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-green-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-purple-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-400); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-green-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-separator-background: var(--canary-border-width-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-900); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-green-300); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-50); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-chrome-900); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-600); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-600); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-green-600); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ + --canary-component-tag-green-background: var(--canary-colors-green-100); /* Background color for green tags. Creates a distinct surface with green theme styling. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-green-50); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-600); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-600); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-600); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-purple-600); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --canary-component-tag-purple-background: var(--canary-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-red-text: var(--canary-colors-red-600); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-violet-600); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --canary-component-tag-violet-background: var(--canary-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-background: var(--canary-colors-red-200); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-300); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); + --canary-brand-color-50: var(--canary-colors-chrome-150); + --canary-brand-color-100: var(--canary-colors-chrome-150); + --canary-brand-color-200: var(--canary-colors-chrome-150); + --canary-brand-color-300: var(--canary-colors-chrome-150); + --canary-brand-color-400: var(--canary-colors-chrome-150); + --canary-brand-color-500: var(--canary-colors-chrome-900); + --canary-brand-color-600: var(--canary-colors-chrome-150); + --canary-brand-color-700: var(--canary-colors-chrome-900); + --canary-brand-color-800: var(--canary-colors-chrome-900); + --canary-brand-color-900: var(--canary-colors-chrome-900); + --canary-brand-color-950: var(--canary-colors-chrome-900); + --canary-brand-on-color-50: var(--canary-colors-pure-black); + --canary-brand-on-color-100: var(--canary-colors-pure-black); + --canary-brand-on-color-200: var(--canary-colors-pure-black); + --canary-brand-on-color-300: var(--canary-colors-pure-black); + --canary-brand-on-color-400: var(--canary-colors-pure-black); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-black); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-500); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-light-desktop-harness.css b/packages/core-design-system/src/styles/source-light-desktop-harness.css new file mode 100644 index 0000000000..19750eaaa8 --- /dev/null +++ b/packages/core-design-system/src/styles/source-light-desktop-harness.css @@ -0,0 +1,490 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:35 GMT + * Copyright (c) Harness. + */ + +.source-light-desktop-harness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-chrome-50); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-850); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-700); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-green-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-800); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-100); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-green-400); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-400); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-component-alert-danger-title: var(--canary-colors-red-800); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-green-600); /* Text color for success badges. Communicates positive status through readable green text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-green-400) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-green-200) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-red-600); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-600); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-400) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-600); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-purple-600); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-400) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-200); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-green-600); /* Text color for success buttons. Communicates positive actions through readable green text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-green-200) l c h / 0.12); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-green-400) l c h / 0.25); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-green-200) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-green-200) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-red-600); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.12); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-green-500) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-green-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-green-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-purple-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-400); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-green-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-separator-background: var(--canary-border-width-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-900); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-green-300); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-50); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-chrome-900); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-600); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-600); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-green-600); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ + --canary-component-tag-green-background: var(--canary-colors-green-100); /* Background color for green tags. Creates a distinct surface with green theme styling. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-green-50); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-600); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-600); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-600); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-purple-600); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --canary-component-tag-purple-background: var(--canary-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-red-text: var(--canary-colors-red-600); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-violet-600); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --canary-component-tag-violet-background: var(--canary-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-background: var(--canary-colors-red-200); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-300); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); + --canary-brand-color-50: var(--canary-colors-cyan-50); + --canary-brand-color-100: var(--canary-colors-cyan-100); + --canary-brand-color-200: var(--canary-colors-cyan-200); + --canary-brand-color-300: var(--canary-colors-cyan-300); + --canary-brand-color-400: var(--canary-colors-cyan-400); + --canary-brand-color-500: var(--canary-colors-cyan-500); + --canary-brand-color-600: var(--canary-colors-cyan-600); + --canary-brand-color-700: var(--canary-colors-cyan-700); + --canary-brand-color-800: var(--canary-colors-cyan-800); + --canary-brand-color-900: var(--canary-colors-cyan-900); + --canary-brand-color-950: var(--canary-colors-cyan-950); + --canary-brand-on-color-50: var(--canary-colors-chrome-950); + --canary-brand-on-color-100: var(--canary-colors-chrome-950); + --canary-brand-on-color-200: var(--canary-colors-chrome-950); + --canary-brand-on-color-300: var(--canary-colors-chrome-950); + --canary-brand-on-color-400: var(--canary-colors-chrome-950); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-white); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-500); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-light-deuteranopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-deuteranopia-desktop-gitness.css new file mode 100644 index 0000000000..87d94c2867 --- /dev/null +++ b/packages/core-design-system/src/styles/source-light-deuteranopia-desktop-gitness.css @@ -0,0 +1,490 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:40 GMT + * Copyright (c) Harness. + */ + +.source-light-deuteranopia-desktop-gitness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-chrome-50); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-850); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-700); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-cyan-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-orange-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-800); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-100); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-cyan-400); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-orange-400); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-component-alert-danger-title: var(--canary-colors-orange-800); /* Text color for danger alerts. Communicates critical information through high-contrast orange text. */ + --canary-component-alert-danger-description: var(--canary-colors-orange-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-cyan-600); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-orange-600); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-600); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-400) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-600); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-cyan-600); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-400) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-200); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-cyan-600); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.12); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.25); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-200) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-200) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-orange-600); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-orange-300) l c h / 0.12); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-orange-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-orange-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-orange-500) l c h / 0.12); /* Orange background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-orange-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-orange-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-blue-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-orange-400); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-separator-background: var(--canary-border-width-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-900); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-orange-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-50); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-chrome-900); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-600); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-600); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-cyan-600); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-cyan-100); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-600); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-600); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-600); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-cyan-600); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-purple-background: var(--canary-colors-cyan-100); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-red-text: var(--canary-colors-orange-600); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-red-background: var(--canary-colors-orange-100); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-violet-text: var(--canary-colors-blue-600); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-violet-background: var(--canary-colors-blue-100); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-background: var(--canary-colors-orange-200); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-300); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); + --canary-brand-color-50: var(--canary-colors-chrome-150); + --canary-brand-color-100: var(--canary-colors-chrome-150); + --canary-brand-color-200: var(--canary-colors-chrome-150); + --canary-brand-color-300: var(--canary-colors-chrome-150); + --canary-brand-color-400: var(--canary-colors-chrome-150); + --canary-brand-color-500: var(--canary-colors-chrome-900); + --canary-brand-color-600: var(--canary-colors-chrome-150); + --canary-brand-color-700: var(--canary-colors-chrome-900); + --canary-brand-color-800: var(--canary-colors-chrome-900); + --canary-brand-color-900: var(--canary-colors-chrome-900); + --canary-brand-color-950: var(--canary-colors-chrome-900); + --canary-brand-on-color-50: var(--canary-colors-pure-black); + --canary-brand-on-color-100: var(--canary-colors-pure-black); + --canary-brand-on-color-200: var(--canary-colors-pure-black); + --canary-brand-on-color-300: var(--canary-colors-pure-black); + --canary-brand-on-color-400: var(--canary-colors-pure-black); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-black); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-500); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags, replaced with orange. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-light-deuteranopia-desktop-harness.css b/packages/core-design-system/src/styles/source-light-deuteranopia-desktop-harness.css new file mode 100644 index 0000000000..9362c8a924 --- /dev/null +++ b/packages/core-design-system/src/styles/source-light-deuteranopia-desktop-harness.css @@ -0,0 +1,490 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:40 GMT + * Copyright (c) Harness. + */ + +.source-light-deuteranopia-desktop-harness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-chrome-50); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-850); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-700); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-cyan-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-orange-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-800); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-100); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-cyan-400); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-orange-400); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-component-alert-danger-title: var(--canary-colors-orange-800); /* Text color for danger alerts. Communicates critical information through high-contrast orange text. */ + --canary-component-alert-danger-description: var(--canary-colors-orange-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-cyan-600); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-orange-600); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-600); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-400) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-600); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-cyan-600); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-400) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-200); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-cyan-600); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.12); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.25); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-200) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-200) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-orange-600); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-orange-300) l c h / 0.12); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-orange-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-orange-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-orange-500) l c h / 0.12); /* Orange background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-orange-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-orange-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-blue-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-orange-400); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-separator-background: var(--canary-border-width-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-900); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-orange-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-50); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-chrome-900); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-600); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-600); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-cyan-600); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-cyan-100); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-600); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-600); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-600); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-cyan-600); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-purple-background: var(--canary-colors-cyan-100); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-red-text: var(--canary-colors-orange-600); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-red-background: var(--canary-colors-orange-100); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-violet-text: var(--canary-colors-blue-600); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-violet-background: var(--canary-colors-blue-100); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-background: var(--canary-colors-orange-200); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-300); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); + --canary-brand-color-50: var(--canary-colors-cyan-50); + --canary-brand-color-100: var(--canary-colors-cyan-100); + --canary-brand-color-200: var(--canary-colors-cyan-200); + --canary-brand-color-300: var(--canary-colors-cyan-300); + --canary-brand-color-400: var(--canary-colors-cyan-400); + --canary-brand-color-500: var(--canary-colors-cyan-500); + --canary-brand-color-600: var(--canary-colors-cyan-600); + --canary-brand-color-700: var(--canary-colors-cyan-700); + --canary-brand-color-800: var(--canary-colors-cyan-800); + --canary-brand-color-900: var(--canary-colors-cyan-900); + --canary-brand-color-950: var(--canary-colors-cyan-950); + --canary-brand-on-color-50: var(--canary-colors-chrome-950); + --canary-brand-on-color-100: var(--canary-colors-chrome-950); + --canary-brand-on-color-200: var(--canary-colors-chrome-950); + --canary-brand-on-color-300: var(--canary-colors-chrome-950); + --canary-brand-on-color-400: var(--canary-colors-chrome-950); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-white); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-500); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags, replaced with orange. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-light-dimmer-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-dimmer-desktop-gitness.css new file mode 100644 index 0000000000..1b014f401b --- /dev/null +++ b/packages/core-design-system/src/styles/source-light-dimmer-desktop-gitness.css @@ -0,0 +1,490 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:39 GMT + * Copyright (c) Harness. + */ + +.source-light-dimmer-desktop-gitness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-800); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-700); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-green-500); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-500); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-600); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: lch(from var(--canary-colors-chrome-100) l c h / 0.8); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-green-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-400); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.1); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.15); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.15); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-100); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.07); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.3); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-green-500); /* Text color for success badges. Communicates positive status through readable green text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-green-300) l c h / 0.3); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-green-200) l c h / 0.07); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-red-500); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.3); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.07); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-500); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.3); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.07); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-500); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.3); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.07); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-purple-500); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.3); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-300) l c h / 0.07); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-green-500); /* Text color for success buttons. Communicates positive actions through readable green text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-green-200) l c h / 0.08); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-green-300) l c h / 0.3); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-green-200) l c h / 0.1); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-green-200) l c h / 0.15); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-red-500); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.08); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.3); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.07); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-green-500) l c h / 0.08); /* Green background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-green-500) l c h / 0.12); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-green-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.08); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.08); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-purple-500); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-green-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-100); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-700); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-700); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-green-300); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-100); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-chrome-700); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.07); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-500); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-500); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-green-600); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ + --canary-component-tag-green-background: var(--canary-colors-green-100); /* Background color for green tags. Creates a distinct surface with green theme styling. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-green-50); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-500); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-500); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-500); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-purple-500); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --canary-component-tag-purple-background: var(--canary-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-red-text: var(--canary-colors-red-500); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-violet-500); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --canary-component-tag-violet-background: var(--canary-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-background: var(--canary-colors-red-100); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Light shadow color with 40% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Medium shadow color with 40% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Medium shadow color with 35% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Deep shadow color with 35% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.07); /* Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-300); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-300); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.3); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); + --canary-brand-color-50: var(--canary-colors-chrome-150); + --canary-brand-color-100: var(--canary-colors-chrome-150); + --canary-brand-color-200: var(--canary-colors-chrome-150); + --canary-brand-color-300: var(--canary-colors-chrome-150); + --canary-brand-color-400: var(--canary-colors-chrome-150); + --canary-brand-color-500: var(--canary-colors-chrome-900); + --canary-brand-color-600: var(--canary-colors-chrome-150); + --canary-brand-color-700: var(--canary-colors-chrome-900); + --canary-brand-color-800: var(--canary-colors-chrome-900); + --canary-brand-color-900: var(--canary-colors-chrome-900); + --canary-brand-color-950: var(--canary-colors-chrome-900); + --canary-brand-on-color-50: var(--canary-colors-pure-black); + --canary-brand-on-color-100: var(--canary-colors-pure-black); + --canary-brand-on-color-200: var(--canary-colors-pure-black); + --canary-brand-on-color-300: var(--canary-colors-pure-black); + --canary-brand-on-color-400: var(--canary-colors-pure-black); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-black); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-400); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-600); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-light-dimmer-desktop-harness.css b/packages/core-design-system/src/styles/source-light-dimmer-desktop-harness.css new file mode 100644 index 0000000000..6e5e264737 --- /dev/null +++ b/packages/core-design-system/src/styles/source-light-dimmer-desktop-harness.css @@ -0,0 +1,490 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:39 GMT + * Copyright (c) Harness. + */ + +.source-light-dimmer-desktop-harness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-800); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-700); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-green-500); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-500); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-600); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: lch(from var(--canary-colors-chrome-100) l c h / 0.8); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-green-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-400); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.1); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.15); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.15); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-100); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.07); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.3); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-green-500); /* Text color for success badges. Communicates positive status through readable green text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-green-300) l c h / 0.3); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-green-200) l c h / 0.07); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-red-500); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.3); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.07); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-500); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.3); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.07); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-500); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.3); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.07); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-purple-500); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.3); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-300) l c h / 0.07); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-green-500); /* Text color for success buttons. Communicates positive actions through readable green text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-green-200) l c h / 0.08); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-green-300) l c h / 0.3); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-green-200) l c h / 0.1); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-green-200) l c h / 0.15); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-red-500); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.08); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.3); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.07); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-green-500) l c h / 0.08); /* Green background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-green-500) l c h / 0.12); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-green-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.08); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.08); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-purple-500); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-green-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-100); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-700); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-700); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-green-300); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-100); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-chrome-700); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.07); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-500); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-500); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-green-600); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ + --canary-component-tag-green-background: var(--canary-colors-green-100); /* Background color for green tags. Creates a distinct surface with green theme styling. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-green-50); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-500); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-500); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-500); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-purple-500); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --canary-component-tag-purple-background: var(--canary-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-red-text: var(--canary-colors-red-500); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-violet-500); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --canary-component-tag-violet-background: var(--canary-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-background: var(--canary-colors-red-100); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Light shadow color with 40% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Medium shadow color with 40% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Medium shadow color with 35% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Deep shadow color with 35% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.07); /* Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-300); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-300); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.3); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); + --canary-brand-color-50: var(--canary-colors-cyan-50); + --canary-brand-color-100: var(--canary-colors-cyan-100); + --canary-brand-color-200: var(--canary-colors-cyan-200); + --canary-brand-color-300: var(--canary-colors-cyan-300); + --canary-brand-color-400: var(--canary-colors-cyan-400); + --canary-brand-color-500: var(--canary-colors-cyan-500); + --canary-brand-color-600: var(--canary-colors-cyan-600); + --canary-brand-color-700: var(--canary-colors-cyan-700); + --canary-brand-color-800: var(--canary-colors-cyan-800); + --canary-brand-color-900: var(--canary-colors-cyan-900); + --canary-brand-color-950: var(--canary-colors-cyan-950); + --canary-brand-on-color-50: var(--canary-colors-chrome-950); + --canary-brand-on-color-100: var(--canary-colors-chrome-950); + --canary-brand-on-color-200: var(--canary-colors-chrome-950); + --canary-brand-on-color-300: var(--canary-colors-chrome-950); + --canary-brand-on-color-400: var(--canary-colors-chrome-950); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-white); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-400); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-600); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-light-dimmer-deuteranopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-dimmer-deuteranopia-desktop-gitness.css new file mode 100644 index 0000000000..757b1c80f5 --- /dev/null +++ b/packages/core-design-system/src/styles/source-light-dimmer-deuteranopia-desktop-gitness.css @@ -0,0 +1,490 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:41 GMT + * Copyright (c) Harness. + */ + +.source-light-dimmer-deuteranopia-desktop-gitness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-800); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-700); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-cyan-500); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-orange-500); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-600); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: lch(from var(--canary-colors-chrome-100) l c h / 0.8); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-cyan-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-orange-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-400); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.1); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.15); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-component-alert-danger-title: var(--canary-colors-orange-700); /* Text color for danger alerts. Communicates critical information through high-contrast orange text. */ + --canary-component-alert-danger-description: var(--canary-colors-orange-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-orange-400) l c h / 0.15); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-100); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.07); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.3); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-cyan-500); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.3); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.07); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-orange-500); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.3); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-orange-300) l c h / 0.07); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-500); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.3); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.07); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-500); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.3); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.07); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-cyan-500); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.3); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-300) l c h / 0.07); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-cyan-500); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.08); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.3); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-200) l c h / 0.1); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-200) l c h / 0.15); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-orange-500); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-orange-300) l c h / 0.08); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.3); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-orange-300) l c h / 0.15); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-orange-300) l c h / 0.07); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.08); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-orange-500) l c h / 0.08); /* Orange background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-orange-500) l c h / 0.12); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-orange-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.08); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-blue-500); /* Visited state color for text links, replaced with blue for deuteranopia visibility. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-orange-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-100); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-700); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-700); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-orange-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-100); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-chrome-700); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.07); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-500); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-500); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-cyan-600); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-cyan-100); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-500); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-500); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-500); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-cyan-500); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-purple-background: var(--canary-colors-cyan-100); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-red-text: var(--canary-colors-orange-500); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-red-background: var(--canary-colors-orange-100); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-violet-text: var(--canary-colors-blue-500); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-violet-background: var(--canary-colors-blue-100); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-background: var(--canary-colors-orange-100); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Light shadow color with 40% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Medium shadow color with 40% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Medium shadow color with 35% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Deep shadow color with 35% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.07); /* Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-orange-300); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-300); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.3); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); + --canary-brand-color-50: var(--canary-colors-chrome-150); + --canary-brand-color-100: var(--canary-colors-chrome-150); + --canary-brand-color-200: var(--canary-colors-chrome-150); + --canary-brand-color-300: var(--canary-colors-chrome-150); + --canary-brand-color-400: var(--canary-colors-chrome-150); + --canary-brand-color-500: var(--canary-colors-chrome-900); + --canary-brand-color-600: var(--canary-colors-chrome-150); + --canary-brand-color-700: var(--canary-colors-chrome-900); + --canary-brand-color-800: var(--canary-colors-chrome-900); + --canary-brand-color-900: var(--canary-colors-chrome-900); + --canary-brand-color-950: var(--canary-colors-chrome-900); + --canary-brand-on-color-50: var(--canary-colors-pure-black); + --canary-brand-on-color-100: var(--canary-colors-pure-black); + --canary-brand-on-color-200: var(--canary-colors-pure-black); + --canary-brand-on-color-300: var(--canary-colors-pure-black); + --canary-brand-on-color-400: var(--canary-colors-pure-black); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-black); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-400); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-600); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags, replaced with orange. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-light-dimmer-deuteranopia-desktop-harness.css b/packages/core-design-system/src/styles/source-light-dimmer-deuteranopia-desktop-harness.css new file mode 100644 index 0000000000..23ebe1a21b --- /dev/null +++ b/packages/core-design-system/src/styles/source-light-dimmer-deuteranopia-desktop-harness.css @@ -0,0 +1,490 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:40 GMT + * Copyright (c) Harness. + */ + +.source-light-dimmer-deuteranopia-desktop-harness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-800); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-700); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-cyan-500); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-orange-500); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-600); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: lch(from var(--canary-colors-chrome-100) l c h / 0.8); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-cyan-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-orange-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-400); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.1); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.15); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-component-alert-danger-title: var(--canary-colors-orange-700); /* Text color for danger alerts. Communicates critical information through high-contrast orange text. */ + --canary-component-alert-danger-description: var(--canary-colors-orange-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-orange-400) l c h / 0.15); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-100); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.07); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.3); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-cyan-500); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.3); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.07); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-orange-500); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.3); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-orange-300) l c h / 0.07); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-500); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.3); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.07); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-500); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.3); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.07); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-cyan-500); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.3); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-300) l c h / 0.07); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-cyan-500); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.08); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.3); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-200) l c h / 0.1); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-200) l c h / 0.15); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-orange-500); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-orange-300) l c h / 0.08); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.3); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-orange-300) l c h / 0.15); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-orange-300) l c h / 0.07); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.08); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-orange-500) l c h / 0.08); /* Orange background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-orange-500) l c h / 0.12); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-orange-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.08); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-blue-500); /* Visited state color for text links, replaced with blue for deuteranopia visibility. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-orange-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-100); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-700); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-700); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-orange-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-100); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-chrome-700); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.07); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-500); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-500); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-cyan-600); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-cyan-100); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-500); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-500); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-500); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-cyan-500); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-purple-background: var(--canary-colors-cyan-100); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-red-text: var(--canary-colors-orange-500); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-red-background: var(--canary-colors-orange-100); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-violet-text: var(--canary-colors-blue-500); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-violet-background: var(--canary-colors-blue-100); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-background: var(--canary-colors-orange-100); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Light shadow color with 40% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Medium shadow color with 40% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Medium shadow color with 35% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Deep shadow color with 35% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.07); /* Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-orange-300); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-300); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.3); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); + --canary-brand-color-50: var(--canary-colors-cyan-50); + --canary-brand-color-100: var(--canary-colors-cyan-100); + --canary-brand-color-200: var(--canary-colors-cyan-200); + --canary-brand-color-300: var(--canary-colors-cyan-300); + --canary-brand-color-400: var(--canary-colors-cyan-400); + --canary-brand-color-500: var(--canary-colors-cyan-500); + --canary-brand-color-600: var(--canary-colors-cyan-600); + --canary-brand-color-700: var(--canary-colors-cyan-700); + --canary-brand-color-800: var(--canary-colors-cyan-800); + --canary-brand-color-900: var(--canary-colors-cyan-900); + --canary-brand-color-950: var(--canary-colors-cyan-950); + --canary-brand-on-color-50: var(--canary-colors-chrome-950); + --canary-brand-on-color-100: var(--canary-colors-chrome-950); + --canary-brand-on-color-200: var(--canary-colors-chrome-950); + --canary-brand-on-color-300: var(--canary-colors-chrome-950); + --canary-brand-on-color-400: var(--canary-colors-chrome-950); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-white); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-400); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-600); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags, replaced with orange. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-light-dimmer-protanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-dimmer-protanopia-desktop-gitness.css new file mode 100644 index 0000000000..bd0de6ef19 --- /dev/null +++ b/packages/core-design-system/src/styles/source-light-dimmer-protanopia-desktop-gitness.css @@ -0,0 +1,490 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:40 GMT + * Copyright (c) Harness. + */ + +.source-light-dimmer-protanopia-desktop-gitness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-800); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-700); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. Using blue instead of green for protanopia visibility. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-blue-500); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-500); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-600); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: lch(from var(--canary-colors-chrome-100) l c h / 0.8); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. Using blue instead of green for protanopia visibility. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-blue-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-400); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.1); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.15); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.15); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-100); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.07); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.3); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-blue-500); /* Text color for success badges. Communicates positive status through readable blue text. Using blue instead of green for protanopia visibility. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.3); /* Border color for success badges. Provides subtle definition for success state indicators. Using blue instead of green for protanopia visibility. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-blue-200) l c h / 0.07); /* Background color for success badges. Creates a subtle but recognizable success indicator. Using blue instead of green for protanopia visibility. */ + --canary-component-badge-danger-text: var(--canary-colors-red-500); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.3); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.07); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-500); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.3); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.07); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-500); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.3); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.07); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-purple-500); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.3); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-300) l c h / 0.07); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-blue-500); /* Text color for success buttons. Communicates positive actions through readable blue text. Using blue instead of green for protanopia visibility. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-blue-200) l c h / 0.08); /* Background color for success buttons. Creates subtle but recognizable positive action styling. Using blue instead of green for protanopia visibility. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.3); /* Border color for success buttons. Provides definition for positive action buttons. Using blue instead of green for protanopia visibility. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-blue-200) l c h / 0.1); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. Using blue instead of green for protanopia visibility. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-blue-200) l c h / 0.15); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. Using blue instead of green for protanopia visibility. */ + --canary-component-btn-danger-text: var(--canary-colors-red-500); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.08); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.3); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.07); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-blue-500) l c h / 0.08); /* Blue background highlighting newly added code lines while maintaining readability. Using blue instead of green for protanopia visibility. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for line numbers of added code, providing visual connection to added content. Using blue instead of green for protanopia visibility. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-blue-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within added lines. Using blue instead of green for protanopia visibility. */ + --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.08); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.08); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-purple-500); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-blue-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. Using blue instead of green for protanopia visibility. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-100); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-700); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-700); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-blue-300); /* Color for success status indicators. Communicates completed or positive states. Using blue instead of green for protanopia visibility. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-100); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-chrome-700); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.07); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-500); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-500); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-blue-500); /* Text color for green tags. Using blue instead of green for protanopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-blue-100); /* Background color for green tags. Using blue instead of green for protanopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for green tags. Using blue instead of green for protanopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-500); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-blue-500); /* Text color for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --canary-component-tag-lime-background: var(--canary-colors-blue-100); /* Background color for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --canary-component-tag-mint-text: var(--canary-colors-blue-500); /* Text color for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --canary-component-tag-mint-background: var(--canary-colors-blue-100); /* Background color for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-500); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-500); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-purple-500); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --canary-component-tag-purple-background: var(--canary-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-red-text: var(--canary-colors-red-500); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-violet-500); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --canary-component-tag-violet-background: var(--canary-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-background: var(--canary-colors-red-100); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Light shadow color with 40% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Medium shadow color with 40% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Medium shadow color with 35% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Deep shadow color with 35% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.07); /* Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-300); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-300); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.3); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); + --canary-brand-color-50: var(--canary-colors-chrome-150); + --canary-brand-color-100: var(--canary-colors-chrome-150); + --canary-brand-color-200: var(--canary-colors-chrome-150); + --canary-brand-color-300: var(--canary-colors-chrome-150); + --canary-brand-color-400: var(--canary-colors-chrome-150); + --canary-brand-color-500: var(--canary-colors-chrome-900); + --canary-brand-color-600: var(--canary-colors-chrome-150); + --canary-brand-color-700: var(--canary-colors-chrome-900); + --canary-brand-color-800: var(--canary-colors-chrome-900); + --canary-brand-color-900: var(--canary-colors-chrome-900); + --canary-brand-color-950: var(--canary-colors-chrome-900); + --canary-brand-on-color-50: var(--canary-colors-pure-black); + --canary-brand-on-color-100: var(--canary-colors-pure-black); + --canary-brand-on-color-200: var(--canary-colors-pure-black); + --canary-brand-on-color-300: var(--canary-colors-pure-black); + --canary-brand-on-color-400: var(--canary-colors-pure-black); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-black); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-400); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-600); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. Using blue instead of green for protanopia visibility. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-light-dimmer-protanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-light-dimmer-protanopia-desktop-harness.css new file mode 100644 index 0000000000..69e832e1f0 --- /dev/null +++ b/packages/core-design-system/src/styles/source-light-dimmer-protanopia-desktop-harness.css @@ -0,0 +1,490 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:40 GMT + * Copyright (c) Harness. + */ + +.source-light-dimmer-protanopia-desktop-harness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-800); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-700); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. Using blue instead of green for protanopia visibility. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-blue-500); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-500); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-600); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: lch(from var(--canary-colors-chrome-100) l c h / 0.8); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. Using blue instead of green for protanopia visibility. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-blue-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-400); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.1); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.15); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.15); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-100); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.07); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.3); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-blue-500); /* Text color for success badges. Communicates positive status through readable blue text. Using blue instead of green for protanopia visibility. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.3); /* Border color for success badges. Provides subtle definition for success state indicators. Using blue instead of green for protanopia visibility. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-blue-200) l c h / 0.07); /* Background color for success badges. Creates a subtle but recognizable success indicator. Using blue instead of green for protanopia visibility. */ + --canary-component-badge-danger-text: var(--canary-colors-red-500); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.3); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.07); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-500); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.3); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.07); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-500); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.3); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.07); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-purple-500); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.3); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-300) l c h / 0.07); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-blue-500); /* Text color for success buttons. Communicates positive actions through readable blue text. Using blue instead of green for protanopia visibility. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-blue-200) l c h / 0.08); /* Background color for success buttons. Creates subtle but recognizable positive action styling. Using blue instead of green for protanopia visibility. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.3); /* Border color for success buttons. Provides definition for positive action buttons. Using blue instead of green for protanopia visibility. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-blue-200) l c h / 0.1); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. Using blue instead of green for protanopia visibility. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-blue-200) l c h / 0.15); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. Using blue instead of green for protanopia visibility. */ + --canary-component-btn-danger-text: var(--canary-colors-red-500); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.08); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.3); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.07); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-blue-500) l c h / 0.08); /* Blue background highlighting newly added code lines while maintaining readability. Using blue instead of green for protanopia visibility. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for line numbers of added code, providing visual connection to added content. Using blue instead of green for protanopia visibility. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-blue-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within added lines. Using blue instead of green for protanopia visibility. */ + --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.08); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.08); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-purple-500); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-blue-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. Using blue instead of green for protanopia visibility. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-100); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-700); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-700); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-blue-300); /* Color for success status indicators. Communicates completed or positive states. Using blue instead of green for protanopia visibility. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-100); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-chrome-700); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.07); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-500); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-500); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-blue-500); /* Text color for green tags. Using blue instead of green for protanopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-blue-100); /* Background color for green tags. Using blue instead of green for protanopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for green tags. Using blue instead of green for protanopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-500); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-blue-500); /* Text color for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --canary-component-tag-lime-background: var(--canary-colors-blue-100); /* Background color for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --canary-component-tag-mint-text: var(--canary-colors-blue-500); /* Text color for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --canary-component-tag-mint-background: var(--canary-colors-blue-100); /* Background color for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-500); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-500); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-purple-500); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --canary-component-tag-purple-background: var(--canary-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-red-text: var(--canary-colors-red-500); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-violet-500); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --canary-component-tag-violet-background: var(--canary-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-background: var(--canary-colors-red-100); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Light shadow color with 40% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Medium shadow color with 40% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Medium shadow color with 35% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Deep shadow color with 35% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.07); /* Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-300); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-300); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.3); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); + --canary-brand-color-50: var(--canary-colors-cyan-50); + --canary-brand-color-100: var(--canary-colors-cyan-100); + --canary-brand-color-200: var(--canary-colors-cyan-200); + --canary-brand-color-300: var(--canary-colors-cyan-300); + --canary-brand-color-400: var(--canary-colors-cyan-400); + --canary-brand-color-500: var(--canary-colors-cyan-500); + --canary-brand-color-600: var(--canary-colors-cyan-600); + --canary-brand-color-700: var(--canary-colors-cyan-700); + --canary-brand-color-800: var(--canary-colors-cyan-800); + --canary-brand-color-900: var(--canary-colors-cyan-900); + --canary-brand-color-950: var(--canary-colors-cyan-950); + --canary-brand-on-color-50: var(--canary-colors-chrome-950); + --canary-brand-on-color-100: var(--canary-colors-chrome-950); + --canary-brand-on-color-200: var(--canary-colors-chrome-950); + --canary-brand-on-color-300: var(--canary-colors-chrome-950); + --canary-brand-on-color-400: var(--canary-colors-chrome-950); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-white); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-400); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-600); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. Using blue instead of green for protanopia visibility. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-light-dimmer-tritanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-dimmer-tritanopia-desktop-gitness.css new file mode 100644 index 0000000000..83df04f6ec --- /dev/null +++ b/packages/core-design-system/src/styles/source-light-dimmer-tritanopia-desktop-gitness.css @@ -0,0 +1,490 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:41 GMT + * Copyright (c) Harness. + */ + +.source-light-dimmer-tritanopia-desktop-gitness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-800); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-700); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-cyan-500); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-500); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-orange-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-600); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: lch(from var(--canary-colors-chrome-100) l c h / 0.8); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-cyan-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-orange-400); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.1); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.15); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.15); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-100); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.07); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.3); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-cyan-500); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.3); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.07); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-red-500); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.3); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.07); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-orange-500); /* Text color for warning badges. Signals caution states with readable orange text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-orange-300) l c h / 0.3); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-orange-200) l c h / 0.07); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-500); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.3); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.07); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-cyan-500); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.3); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-300) l c h / 0.07); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-cyan-500); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.08); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.3); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-200) l c h / 0.1); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-200) l c h / 0.15); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-red-500); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.08); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.3); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.07); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.08); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.08); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.08); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-cyan-500); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-100); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-700); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-700); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-orange-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-100); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-chrome-700); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.07); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-500); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-500); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-cyan-600); /* Text color for green tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-cyan-100); /* Background color for green tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for green tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-500); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-500); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-500); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-cyan-600); /* Text color for purple tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-purple-background: var(--canary-colors-cyan-100); /* Background color for purple tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for purple tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-red-text: var(--canary-colors-red-500); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-cyan-600); /* Text color for violet tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-violet-background: var(--canary-colors-cyan-100); /* Background color for violet tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for violet tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-yellow-text: var(--canary-colors-orange-600); /* Text color for yellow tags, replaced with orange for tritanopia visibility. */ + --canary-component-tag-yellow-background: var(--canary-colors-orange-100); /* Background color for yellow tags, replaced with orange for tritanopia visibility. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for yellow tags, replaced with orange for tritanopia visibility. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-background: var(--canary-colors-red-100); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Light shadow color with 40% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Medium shadow color with 40% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Medium shadow color with 35% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Deep shadow color with 35% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.07); /* Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-orange-200); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-300); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.3); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); + --canary-brand-color-50: var(--canary-colors-chrome-150); + --canary-brand-color-100: var(--canary-colors-chrome-150); + --canary-brand-color-200: var(--canary-colors-chrome-150); + --canary-brand-color-300: var(--canary-colors-chrome-150); + --canary-brand-color-400: var(--canary-colors-chrome-150); + --canary-brand-color-500: var(--canary-colors-chrome-900); + --canary-brand-color-600: var(--canary-colors-chrome-150); + --canary-brand-color-700: var(--canary-colors-chrome-900); + --canary-brand-color-800: var(--canary-colors-chrome-900); + --canary-brand-color-900: var(--canary-colors-chrome-900); + --canary-brand-color-950: var(--canary-colors-chrome-900); + --canary-brand-on-color-50: var(--canary-colors-pure-black); + --canary-brand-on-color-100: var(--canary-colors-pure-black); + --canary-brand-on-color-200: var(--canary-colors-pure-black); + --canary-brand-on-color-300: var(--canary-colors-pure-black); + --canary-brand-on-color-400: var(--canary-colors-pure-black); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-black); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-400); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-600); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with cyan. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags, replaced with orange. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-light-dimmer-tritanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-light-dimmer-tritanopia-desktop-harness.css new file mode 100644 index 0000000000..2a1953671f --- /dev/null +++ b/packages/core-design-system/src/styles/source-light-dimmer-tritanopia-desktop-harness.css @@ -0,0 +1,490 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:41 GMT + * Copyright (c) Harness. + */ + +.source-light-dimmer-tritanopia-desktop-harness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-800); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-700); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-cyan-500); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-500); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-orange-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-600); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: lch(from var(--canary-colors-chrome-100) l c h / 0.8); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-cyan-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-orange-400); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.1); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.15); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.15); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-100); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.07); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.3); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-cyan-500); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.3); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.07); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-red-500); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.3); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.07); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-orange-500); /* Text color for warning badges. Signals caution states with readable orange text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-orange-300) l c h / 0.3); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-orange-200) l c h / 0.07); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-500); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.3); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.07); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-cyan-500); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.3); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-300) l c h / 0.07); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-cyan-500); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.08); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.3); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-200) l c h / 0.1); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-200) l c h / 0.15); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-red-500); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.08); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.3); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.07); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.08); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.08); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.08); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-cyan-500); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-chrome-100); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-700); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-700); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-orange-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-100); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-chrome-700); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.07); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-500); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-500); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-cyan-600); /* Text color for green tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-cyan-100); /* Background color for green tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for green tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-500); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-500); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-500); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-cyan-600); /* Text color for purple tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-purple-background: var(--canary-colors-cyan-100); /* Background color for purple tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for purple tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-red-text: var(--canary-colors-red-500); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-cyan-600); /* Text color for violet tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-violet-background: var(--canary-colors-cyan-100); /* Background color for violet tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for violet tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-yellow-text: var(--canary-colors-orange-600); /* Text color for yellow tags, replaced with orange for tritanopia visibility. */ + --canary-component-tag-yellow-background: var(--canary-colors-orange-100); /* Background color for yellow tags, replaced with orange for tritanopia visibility. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for yellow tags, replaced with orange for tritanopia visibility. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-background: var(--canary-colors-red-100); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Light shadow color with 40% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Medium shadow color with 40% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Medium shadow color with 35% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Deep shadow color with 35% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.07); /* Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-orange-200); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-300); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.3); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); + --canary-brand-color-50: var(--canary-colors-cyan-50); + --canary-brand-color-100: var(--canary-colors-cyan-100); + --canary-brand-color-200: var(--canary-colors-cyan-200); + --canary-brand-color-300: var(--canary-colors-cyan-300); + --canary-brand-color-400: var(--canary-colors-cyan-400); + --canary-brand-color-500: var(--canary-colors-cyan-500); + --canary-brand-color-600: var(--canary-colors-cyan-600); + --canary-brand-color-700: var(--canary-colors-cyan-700); + --canary-brand-color-800: var(--canary-colors-cyan-800); + --canary-brand-color-900: var(--canary-colors-cyan-900); + --canary-brand-color-950: var(--canary-colors-cyan-950); + --canary-brand-on-color-50: var(--canary-colors-chrome-950); + --canary-brand-on-color-100: var(--canary-colors-chrome-950); + --canary-brand-on-color-200: var(--canary-colors-chrome-950); + --canary-brand-on-color-300: var(--canary-colors-chrome-950); + --canary-brand-on-color-400: var(--canary-colors-chrome-950); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-white); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-400); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-600); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with cyan. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags, replaced with orange. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-light-high-contrast-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-high-contrast-desktop-gitness.css new file mode 100644 index 0000000000..b29cd42cff --- /dev/null +++ b/packages/core-design-system/src/styles/source-light-high-contrast-desktop-gitness.css @@ -0,0 +1,490 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:39 GMT + * Copyright (c) Harness. + */ + +.source-light-high-contrast-desktop-gitness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-50); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-100); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-900); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-800); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-green-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-600); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-700); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-300); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-200) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-green-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-300) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-100); + --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-green-700); /* Text color for success badges. Communicates positive status through readable green text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-green-400) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-green-300) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-red-700); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-700); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-400) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-700); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-purple-700); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-400) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-green-700); /* Text color for success buttons. Communicates positive actions through readable green text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-green-300) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-green-400) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-green-300) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-green-300) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-red-700); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-500) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-green-400) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-green-400) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-green-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-400) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-400) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-400) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-purple-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-500); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-green-500); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-sidebar-border: var(--canary-colors-chrome-800); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-colors-chrome-800); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-400); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-400); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-200); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-progress: var(--canary-colors-blue-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-400); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-track-segments-progress: var(--canary-colors-blue-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-slider-handle-background: var(--canary-colors-pure-white); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-green-500); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-500); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-purple-500); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-500); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-unselected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-colors-chrome-300); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-switch-selected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-blue-600); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-700); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-700); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-700); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-green-700); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ + --canary-component-tag-green-background: var(--canary-colors-green-100); /* Background color for green tags. Creates a distinct surface with green theme styling. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-green-50); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-700); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-700); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-700); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-700); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-700); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-purple-700); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --canary-component-tag-purple-background: var(--canary-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-red-text: var(--canary-colors-red-700); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-violet-700); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --canary-component-tag-violet-background: var(--canary-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-700); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-red-600); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-chrome-950) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-950) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-400); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-400); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-300); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-150); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-400); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-400); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-300); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-500); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-700); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); + --canary-brand-color-50: var(--canary-colors-chrome-150); + --canary-brand-color-100: var(--canary-colors-chrome-150); + --canary-brand-color-200: var(--canary-colors-chrome-150); + --canary-brand-color-300: var(--canary-colors-chrome-150); + --canary-brand-color-400: var(--canary-colors-chrome-150); + --canary-brand-color-500: var(--canary-colors-chrome-900); + --canary-brand-color-600: var(--canary-colors-chrome-150); + --canary-brand-color-700: var(--canary-colors-chrome-900); + --canary-brand-color-800: var(--canary-colors-chrome-900); + --canary-brand-color-900: var(--canary-colors-chrome-900); + --canary-brand-color-950: var(--canary-colors-chrome-900); + --canary-brand-on-color-50: var(--canary-colors-pure-black); + --canary-brand-on-color-100: var(--canary-colors-pure-black); + --canary-brand-on-color-200: var(--canary-colors-pure-black); + --canary-brand-on-color-300: var(--canary-colors-pure-black); + --canary-brand-on-color-400: var(--canary-colors-pure-black); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-black); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-700); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-light-high-contrast-desktop-harness.css b/packages/core-design-system/src/styles/source-light-high-contrast-desktop-harness.css new file mode 100644 index 0000000000..ca180c93c1 --- /dev/null +++ b/packages/core-design-system/src/styles/source-light-high-contrast-desktop-harness.css @@ -0,0 +1,490 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:39 GMT + * Copyright (c) Harness. + */ + +.source-light-high-contrast-desktop-harness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-50); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-100); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-900); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-800); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-green-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-600); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-700); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-300); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-200) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-green-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-300) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-100); + --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-green-700); /* Text color for success badges. Communicates positive status through readable green text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-green-400) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-green-300) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-red-700); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-700); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-400) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-700); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-purple-700); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-400) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-green-700); /* Text color for success buttons. Communicates positive actions through readable green text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-green-300) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-green-400) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-green-300) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-green-300) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-red-700); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-500) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-green-400) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-green-400) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-green-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-400) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-400) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-400) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-purple-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-500); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-green-500); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-sidebar-border: var(--canary-colors-chrome-800); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-colors-chrome-800); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-400); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-400); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-200); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-progress: var(--canary-colors-blue-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-400); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-track-segments-progress: var(--canary-colors-blue-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-slider-handle-background: var(--canary-colors-pure-white); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-green-500); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-500); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-purple-500); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-500); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-unselected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-colors-chrome-300); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-switch-selected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-blue-600); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-700); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-700); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-700); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-green-700); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ + --canary-component-tag-green-background: var(--canary-colors-green-100); /* Background color for green tags. Creates a distinct surface with green theme styling. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-green-50); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-700); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-700); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-700); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-700); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-700); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-purple-700); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --canary-component-tag-purple-background: var(--canary-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-red-text: var(--canary-colors-red-700); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-violet-700); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --canary-component-tag-violet-background: var(--canary-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-700); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-red-600); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-chrome-950) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-950) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-400); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-400); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-300); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-150); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-400); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-400); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-300); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-500); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-700); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); + --canary-brand-color-50: var(--canary-colors-cyan-50); + --canary-brand-color-100: var(--canary-colors-cyan-100); + --canary-brand-color-200: var(--canary-colors-cyan-200); + --canary-brand-color-300: var(--canary-colors-cyan-300); + --canary-brand-color-400: var(--canary-colors-cyan-400); + --canary-brand-color-500: var(--canary-colors-cyan-500); + --canary-brand-color-600: var(--canary-colors-cyan-600); + --canary-brand-color-700: var(--canary-colors-cyan-700); + --canary-brand-color-800: var(--canary-colors-cyan-800); + --canary-brand-color-900: var(--canary-colors-cyan-900); + --canary-brand-color-950: var(--canary-colors-cyan-950); + --canary-brand-on-color-50: var(--canary-colors-chrome-950); + --canary-brand-on-color-100: var(--canary-colors-chrome-950); + --canary-brand-on-color-200: var(--canary-colors-chrome-950); + --canary-brand-on-color-300: var(--canary-colors-chrome-950); + --canary-brand-on-color-400: var(--canary-colors-chrome-950); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-white); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-700); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-light-high-contrast-deuteranopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-high-contrast-deuteranopia-desktop-gitness.css new file mode 100644 index 0000000000..822a9611a2 --- /dev/null +++ b/packages/core-design-system/src/styles/source-light-high-contrast-deuteranopia-desktop-gitness.css @@ -0,0 +1,490 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:41 GMT + * Copyright (c) Harness. + */ + +.source-light-high-contrast-deuteranopia-desktop-gitness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-50); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-100); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-900); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-800); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-cyan-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-orange-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-600); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-700); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-300); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-200) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-cyan-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-orange-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-300) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-100); + --canary-component-alert-danger-title: var(--canary-colors-orange-700); /* Text color for danger alerts. Communicates critical information through high-contrast orange text. */ + --canary-component-alert-danger-description: var(--canary-colors-orange-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-orange-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-orange-500) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-cyan-700); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-orange-700); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-orange-400) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-700); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-400) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-700); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-cyan-700); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-400) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-cyan-700); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-300) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-300) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-orange-700); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-orange-400) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-orange-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-orange-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-500) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-400) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-400) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-orange-400) l c h / 0.12); /* Orange background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-orange-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-400) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-400) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-blue-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-orange-500); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-500); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-sidebar-border: var(--canary-colors-chrome-800); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-colors-chrome-800); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-400); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-400); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-200); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-progress: var(--canary-colors-blue-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-400); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-track-segments-progress: var(--canary-colors-blue-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-slider-handle-background: var(--canary-colors-pure-white); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-cyan-500); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-orange-500); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-cyan-500); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-500); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-unselected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-colors-chrome-300); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-switch-selected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-blue-600); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-700); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-700); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-700); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-cyan-700); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-cyan-100); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-700); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-700); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-700); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-700); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-700); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-cyan-700); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-purple-background: var(--canary-colors-cyan-100); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-red-text: var(--canary-colors-orange-700); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-red-background: var(--canary-colors-orange-100); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-violet-text: var(--canary-colors-blue-700); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-violet-background: var(--canary-colors-blue-100); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-700); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-orange-600); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-chrome-950) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-950) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-orange-400); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-400); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-300); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-150); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-400); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-400); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-300); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-500); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-700); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); + --canary-brand-color-50: var(--canary-colors-chrome-150); + --canary-brand-color-100: var(--canary-colors-chrome-150); + --canary-brand-color-200: var(--canary-colors-chrome-150); + --canary-brand-color-300: var(--canary-colors-chrome-150); + --canary-brand-color-400: var(--canary-colors-chrome-150); + --canary-brand-color-500: var(--canary-colors-chrome-900); + --canary-brand-color-600: var(--canary-colors-chrome-150); + --canary-brand-color-700: var(--canary-colors-chrome-900); + --canary-brand-color-800: var(--canary-colors-chrome-900); + --canary-brand-color-900: var(--canary-colors-chrome-900); + --canary-brand-color-950: var(--canary-colors-chrome-900); + --canary-brand-on-color-50: var(--canary-colors-pure-black); + --canary-brand-on-color-100: var(--canary-colors-pure-black); + --canary-brand-on-color-200: var(--canary-colors-pure-black); + --canary-brand-on-color-300: var(--canary-colors-pure-black); + --canary-brand-on-color-400: var(--canary-colors-pure-black); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-black); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-700); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags, replaced with orange. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-light-high-contrast-deuteranopia-desktop-harness.css b/packages/core-design-system/src/styles/source-light-high-contrast-deuteranopia-desktop-harness.css new file mode 100644 index 0000000000..8c0839f9b5 --- /dev/null +++ b/packages/core-design-system/src/styles/source-light-high-contrast-deuteranopia-desktop-harness.css @@ -0,0 +1,490 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:41 GMT + * Copyright (c) Harness. + */ + +.source-light-high-contrast-deuteranopia-desktop-harness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-50); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-100); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-900); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-800); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-cyan-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-orange-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-600); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-700); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-300); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-200) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-cyan-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-orange-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-300) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-100); + --canary-component-alert-danger-title: var(--canary-colors-orange-700); /* Text color for danger alerts. Communicates critical information through high-contrast orange text. */ + --canary-component-alert-danger-description: var(--canary-colors-orange-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-orange-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-orange-500) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-cyan-700); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-orange-700); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-orange-400) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-700); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-400) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-700); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-cyan-700); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-400) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-cyan-700); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-300) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-300) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-orange-700); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-orange-400) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-orange-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-orange-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-500) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-400) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-400) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-orange-400) l c h / 0.12); /* Orange background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-orange-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-400) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-400) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-blue-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-orange-500); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-500); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-sidebar-border: var(--canary-colors-chrome-800); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-colors-chrome-800); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-400); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-400); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-200); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-progress: var(--canary-colors-blue-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-400); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-track-segments-progress: var(--canary-colors-blue-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-slider-handle-background: var(--canary-colors-pure-white); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-cyan-500); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-orange-500); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-cyan-500); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-500); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-unselected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-colors-chrome-300); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-switch-selected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-blue-600); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-700); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-700); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-700); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-cyan-700); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-cyan-100); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-700); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-700); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-700); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-700); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-700); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-cyan-700); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-purple-background: var(--canary-colors-cyan-100); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ + --canary-component-tag-red-text: var(--canary-colors-orange-700); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-red-background: var(--canary-colors-orange-100); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ + --canary-component-tag-violet-text: var(--canary-colors-blue-700); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-violet-background: var(--canary-colors-blue-100); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-700); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-orange-600); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-chrome-950) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-950) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-orange-400); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-400); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-300); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-150); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-400); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-400); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-300); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-500); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-700); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); + --canary-brand-color-50: var(--canary-colors-cyan-50); + --canary-brand-color-100: var(--canary-colors-cyan-100); + --canary-brand-color-200: var(--canary-colors-cyan-200); + --canary-brand-color-300: var(--canary-colors-cyan-300); + --canary-brand-color-400: var(--canary-colors-cyan-400); + --canary-brand-color-500: var(--canary-colors-cyan-500); + --canary-brand-color-600: var(--canary-colors-cyan-600); + --canary-brand-color-700: var(--canary-colors-cyan-700); + --canary-brand-color-800: var(--canary-colors-cyan-800); + --canary-brand-color-900: var(--canary-colors-cyan-900); + --canary-brand-color-950: var(--canary-colors-cyan-950); + --canary-brand-on-color-50: var(--canary-colors-chrome-950); + --canary-brand-on-color-100: var(--canary-colors-chrome-950); + --canary-brand-on-color-200: var(--canary-colors-chrome-950); + --canary-brand-on-color-300: var(--canary-colors-chrome-950); + --canary-brand-on-color-400: var(--canary-colors-chrome-950); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-white); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-700); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags, replaced with orange. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-light-high-contrast-protanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-high-contrast-protanopia-desktop-gitness.css new file mode 100644 index 0000000000..a0163dacd1 --- /dev/null +++ b/packages/core-design-system/src/styles/source-light-high-contrast-protanopia-desktop-gitness.css @@ -0,0 +1,490 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:40 GMT + * Copyright (c) Harness. + */ + +.source-light-high-contrast-protanopia-desktop-gitness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-50); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-100); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-900); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-800); + /** + * Primary color for text and icons in success content. Adjusted for protanopia using blue instead of green. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-blue-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-600); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-700); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-300); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-200) l c h / 0.7); + /** + * Border color for success containers. Adjusted for protanopia using blue instead of green. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-blue-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-300) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-100); + --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-blue-700); /* Text color for success badges. Adjusted for protanopia using blue instead of green. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-blue-400) l c h / 0.6); /* Border color for success badges. Adjusted for protanopia using blue instead of green. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-blue-300) l c h / 0.1); /* Background color for success badges. Adjusted for protanopia using blue instead of green. */ + --canary-component-badge-danger-text: var(--canary-colors-red-700); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-700); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-400) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-700); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-purple-700); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-400) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-blue-700); /* Text color for success buttons. Adjusted for protanopia using blue instead of green. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-blue-300) l c h / 0.1); /* Background color for success buttons. Adjusted for protanopia using blue instead of green. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-blue-400) l c h / 0.6); /* Border color for success buttons. Adjusted for protanopia using blue instead of green. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-blue-300) l c h / 0.15); /* Hover state background color for success buttons. Adjusted for protanopia using blue instead of green. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-blue-300) l c h / 0.25); /* Active state background color for success buttons. Adjusted for protanopia using blue instead of green. */ + --canary-component-btn-danger-text: var(--canary-colors-red-700); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-500) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-blue-400) l c h / 0.12); /* Blue background highlighting newly added code lines. Adjusted for protanopia using blue instead of green. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-blue-400) l c h / 0.2); /* Background for line numbers of added code. Adjusted for protanopia using blue instead of green. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-blue-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. Adjusted for protanopia using blue instead of green. */ + --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-400) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-400) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-400) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-purple-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-500); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-blue-500); /* Border color for completed pipeline states. Adjusted for protanopia using blue instead of green. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-sidebar-border: var(--canary-colors-chrome-800); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-colors-chrome-800); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-400); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-400); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-200); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-progress: var(--canary-colors-blue-500); /* Filled portion color for slider tracks. Adjusted for protanopia using blue instead of green. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-400); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-track-segments-progress: var(--canary-colors-blue-700); /* Color for segment markers on the filled track portion. Adjusted for protanopia using blue instead of green. */ + --canary-component-slider-handle-background: var(--canary-colors-pure-white); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-blue-500); /* Color for success status indicators. Adjusted for protanopia using blue instead of green. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-500); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-purple-500); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-500); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-unselected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-colors-chrome-300); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-switch-selected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-blue-600); /* Background color for the selected state of switch controls. Adjusted for protanopia using blue instead of green. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-700); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-700); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-700); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-blue-700); /* Text color for green tags. Adjusted for protanopia using blue instead of green. */ + --canary-component-tag-green-background: var(--canary-colors-blue-100); /* Background color for green tags. Adjusted for protanopia using blue instead of green. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for green tags. Adjusted for protanopia using blue instead of green. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-700); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-blue-700); /* Text color for lime tags. Adjusted for protanopia using blue instead of green. */ + --canary-component-tag-lime-background: var(--canary-colors-blue-100); /* Background color for lime tags. Adjusted for protanopia using blue instead of green. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for lime tags. Adjusted for protanopia using blue instead of green. */ + --canary-component-tag-mint-text: var(--canary-colors-blue-700); /* Text color for mint tags. Adjusted for protanopia using blue instead of green. */ + --canary-component-tag-mint-background: var(--canary-colors-blue-100); /* Background color for mint tags. Adjusted for protanopia using blue instead of green. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for mint tags. Adjusted for protanopia using blue instead of green. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-700); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-700); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-purple-700); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --canary-component-tag-purple-background: var(--canary-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-red-text: var(--canary-colors-red-700); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-violet-700); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --canary-component-tag-violet-background: var(--canary-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-700); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-red-600); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-chrome-950) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-950) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-400); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-400); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-300); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-150); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-400); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-400); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-300); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-500); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-700); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); + --canary-brand-color-50: var(--canary-colors-chrome-150); + --canary-brand-color-100: var(--canary-colors-chrome-150); + --canary-brand-color-200: var(--canary-colors-chrome-150); + --canary-brand-color-300: var(--canary-colors-chrome-150); + --canary-brand-color-400: var(--canary-colors-chrome-150); + --canary-brand-color-500: var(--canary-colors-chrome-900); + --canary-brand-color-600: var(--canary-colors-chrome-150); + --canary-brand-color-700: var(--canary-colors-chrome-900); + --canary-brand-color-800: var(--canary-colors-chrome-900); + --canary-brand-color-900: var(--canary-colors-chrome-900); + --canary-brand-color-950: var(--canary-colors-chrome-900); + --canary-brand-on-color-50: var(--canary-colors-pure-black); + --canary-brand-on-color-100: var(--canary-colors-pure-black); + --canary-brand-on-color-200: var(--canary-colors-pure-black); + --canary-brand-on-color-300: var(--canary-colors-pure-black); + --canary-brand-on-color-400: var(--canary-colors-pure-black); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-black); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-700); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. Adjusted for protanopia using blue instead of green. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. Adjusted for protanopia using blue instead of green. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. Adjusted for protanopia using blue instead of green. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. Adjusted for protanopia using blue instead of green. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-light-high-contrast-protanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-light-high-contrast-protanopia-desktop-harness.css new file mode 100644 index 0000000000..e841c6d09b --- /dev/null +++ b/packages/core-design-system/src/styles/source-light-high-contrast-protanopia-desktop-harness.css @@ -0,0 +1,490 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:40 GMT + * Copyright (c) Harness. + */ + +.source-light-high-contrast-protanopia-desktop-harness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-50); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-100); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-900); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-800); + /** + * Primary color for text and icons in success content. Adjusted for protanopia using blue instead of green. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-blue-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-600); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-700); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-300); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-200) l c h / 0.7); + /** + * Border color for success containers. Adjusted for protanopia using blue instead of green. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-blue-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-300) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-100); + --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-blue-700); /* Text color for success badges. Adjusted for protanopia using blue instead of green. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-blue-400) l c h / 0.6); /* Border color for success badges. Adjusted for protanopia using blue instead of green. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-blue-300) l c h / 0.1); /* Background color for success badges. Adjusted for protanopia using blue instead of green. */ + --canary-component-badge-danger-text: var(--canary-colors-red-700); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-700); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-400) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-700); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-purple-700); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-400) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-blue-700); /* Text color for success buttons. Adjusted for protanopia using blue instead of green. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-blue-300) l c h / 0.1); /* Background color for success buttons. Adjusted for protanopia using blue instead of green. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-blue-400) l c h / 0.6); /* Border color for success buttons. Adjusted for protanopia using blue instead of green. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-blue-300) l c h / 0.15); /* Hover state background color for success buttons. Adjusted for protanopia using blue instead of green. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-blue-300) l c h / 0.25); /* Active state background color for success buttons. Adjusted for protanopia using blue instead of green. */ + --canary-component-btn-danger-text: var(--canary-colors-red-700); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-500) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-blue-400) l c h / 0.12); /* Blue background highlighting newly added code lines. Adjusted for protanopia using blue instead of green. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-blue-400) l c h / 0.2); /* Background for line numbers of added code. Adjusted for protanopia using blue instead of green. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-blue-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. Adjusted for protanopia using blue instead of green. */ + --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-400) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-400) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-400) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-purple-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-500); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-blue-500); /* Border color for completed pipeline states. Adjusted for protanopia using blue instead of green. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-sidebar-border: var(--canary-colors-chrome-800); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-colors-chrome-800); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-400); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-400); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-200); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-progress: var(--canary-colors-blue-500); /* Filled portion color for slider tracks. Adjusted for protanopia using blue instead of green. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-400); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-track-segments-progress: var(--canary-colors-blue-700); /* Color for segment markers on the filled track portion. Adjusted for protanopia using blue instead of green. */ + --canary-component-slider-handle-background: var(--canary-colors-pure-white); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-blue-500); /* Color for success status indicators. Adjusted for protanopia using blue instead of green. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-500); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-purple-500); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-500); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-unselected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-colors-chrome-300); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-switch-selected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-blue-600); /* Background color for the selected state of switch controls. Adjusted for protanopia using blue instead of green. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-700); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-700); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-700); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-blue-700); /* Text color for green tags. Adjusted for protanopia using blue instead of green. */ + --canary-component-tag-green-background: var(--canary-colors-blue-100); /* Background color for green tags. Adjusted for protanopia using blue instead of green. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for green tags. Adjusted for protanopia using blue instead of green. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-700); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-blue-700); /* Text color for lime tags. Adjusted for protanopia using blue instead of green. */ + --canary-component-tag-lime-background: var(--canary-colors-blue-100); /* Background color for lime tags. Adjusted for protanopia using blue instead of green. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for lime tags. Adjusted for protanopia using blue instead of green. */ + --canary-component-tag-mint-text: var(--canary-colors-blue-700); /* Text color for mint tags. Adjusted for protanopia using blue instead of green. */ + --canary-component-tag-mint-background: var(--canary-colors-blue-100); /* Background color for mint tags. Adjusted for protanopia using blue instead of green. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for mint tags. Adjusted for protanopia using blue instead of green. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-700); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-700); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-purple-700); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --canary-component-tag-purple-background: var(--canary-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-red-text: var(--canary-colors-red-700); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-violet-700); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --canary-component-tag-violet-background: var(--canary-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-700); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-red-600); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-chrome-950) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-950) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-400); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-400); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-300); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-150); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-400); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-400); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-300); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-500); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-700); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); + --canary-brand-color-50: var(--canary-colors-cyan-50); + --canary-brand-color-100: var(--canary-colors-cyan-100); + --canary-brand-color-200: var(--canary-colors-cyan-200); + --canary-brand-color-300: var(--canary-colors-cyan-300); + --canary-brand-color-400: var(--canary-colors-cyan-400); + --canary-brand-color-500: var(--canary-colors-cyan-500); + --canary-brand-color-600: var(--canary-colors-cyan-600); + --canary-brand-color-700: var(--canary-colors-cyan-700); + --canary-brand-color-800: var(--canary-colors-cyan-800); + --canary-brand-color-900: var(--canary-colors-cyan-900); + --canary-brand-color-950: var(--canary-colors-cyan-950); + --canary-brand-on-color-50: var(--canary-colors-chrome-950); + --canary-brand-on-color-100: var(--canary-colors-chrome-950); + --canary-brand-on-color-200: var(--canary-colors-chrome-950); + --canary-brand-on-color-300: var(--canary-colors-chrome-950); + --canary-brand-on-color-400: var(--canary-colors-chrome-950); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-white); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-700); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. Adjusted for protanopia using blue instead of green. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. Adjusted for protanopia using blue instead of green. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. Adjusted for protanopia using blue instead of green. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. Adjusted for protanopia using blue instead of green. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-light-high-contrast-tritanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-high-contrast-tritanopia-desktop-gitness.css new file mode 100644 index 0000000000..7f7263dbcd --- /dev/null +++ b/packages/core-design-system/src/styles/source-light-high-contrast-tritanopia-desktop-gitness.css @@ -0,0 +1,490 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:42 GMT + * Copyright (c) Harness. + */ + +.source-light-high-contrast-tritanopia-desktop-gitness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1.4px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-50); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-100); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-900); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-800); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-cyan-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-orange-600); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-700); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-300); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-200) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-cyan-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-orange-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-300) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-100); + --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-cyan-700); /* Text color for success badges. Communicates positive status through readable green text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-red-700); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-orange-700); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-orange-400) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-orange-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-700); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-cyan-700); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-400) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-cyan-700); /* Text color for success buttons. Communicates positive actions through readable green text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-300) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-300) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-red-700); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-500) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-400) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-400) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-400) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-400) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-400) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-cyan-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-500); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-500); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-sidebar-border: var(--canary-colors-chrome-800); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-colors-chrome-800); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-400); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-400); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-200); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-progress: var(--canary-colors-blue-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-400); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-track-segments-progress: var(--canary-colors-cyan-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-slider-handle-background: var(--canary-colors-pure-white); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-cyan-500); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-500); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-orange-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-cyan-500); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-500); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-unselected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-colors-chrome-300); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-switch-selected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-blue-600); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-700); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-700); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-700); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-cyan-700); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ + --canary-component-tag-green-background: var(--canary-colors-cyan-100); /* Background color for green tags. Creates a distinct surface with green theme styling. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-700); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-700); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-700); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-700); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-700); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-cyan-700); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --canary-component-tag-purple-background: var(--canary-colors-cyan-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-red-text: var(--canary-colors-red-700); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-cyan-700); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --canary-component-tag-violet-background: var(--canary-colors-cyan-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-yellow-text: var(--canary-colors-orange-700); /* Text color for yellow tags. Signals caution states with readable amber text. */ + --canary-component-tag-yellow-background: var(--canary-colors-orange-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-red-600); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-chrome-950) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-950) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-orange-200); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-400); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-400); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-300); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-150); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-400); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-400); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-300); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-500); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-700); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); + --canary-brand-color-50: var(--canary-colors-chrome-150); + --canary-brand-color-100: var(--canary-colors-chrome-150); + --canary-brand-color-200: var(--canary-colors-chrome-150); + --canary-brand-color-300: var(--canary-colors-chrome-150); + --canary-brand-color-400: var(--canary-colors-chrome-150); + --canary-brand-color-500: var(--canary-colors-chrome-900); + --canary-brand-color-600: var(--canary-colors-chrome-150); + --canary-brand-color-700: var(--canary-colors-chrome-900); + --canary-brand-color-800: var(--canary-colors-chrome-900); + --canary-brand-color-900: var(--canary-colors-chrome-900); + --canary-brand-color-950: var(--canary-colors-chrome-900); + --canary-brand-on-color-50: var(--canary-colors-pure-black); + --canary-brand-on-color-100: var(--canary-colors-pure-black); + --canary-brand-on-color-200: var(--canary-colors-pure-black); + --canary-brand-on-color-300: var(--canary-colors-pure-black); + --canary-brand-on-color-400: var(--canary-colors-pure-black); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-black); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-700); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-light-high-contrast-tritanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-light-high-contrast-tritanopia-desktop-harness.css new file mode 100644 index 0000000000..af51921b2a --- /dev/null +++ b/packages/core-design-system/src/styles/source-light-high-contrast-tritanopia-desktop-harness.css @@ -0,0 +1,490 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:41 GMT + * Copyright (c) Harness. + */ + +.source-light-high-contrast-tritanopia-desktop-harness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1.4px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-chrome-50); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-100); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-900); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-800); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-cyan-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-orange-600); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-700); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-300); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-200) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-cyan-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-orange-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-300) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-100); + --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-cyan-700); /* Text color for success badges. Communicates positive status through readable green text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-red-700); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-orange-700); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-orange-400) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-orange-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-700); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-cyan-700); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-400) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-cyan-700); /* Text color for success buttons. Communicates positive actions through readable green text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-300) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-300) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-red-700); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-500) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-400) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-400) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-400) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-400) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-400) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-cyan-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-500); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-500); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-sidebar-border: var(--canary-colors-chrome-800); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-colors-chrome-800); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-400); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-400); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-200); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-progress: var(--canary-colors-blue-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-400); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-track-segments-progress: var(--canary-colors-cyan-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-slider-handle-background: var(--canary-colors-pure-white); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-cyan-500); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-500); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-orange-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-cyan-500); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-500); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-unselected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-switch-unselected-background: var(--canary-colors-chrome-300); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-switch-selected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-blue-600); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-700); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-700); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-700); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-cyan-700); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ + --canary-component-tag-green-background: var(--canary-colors-cyan-100); /* Background color for green tags. Creates a distinct surface with green theme styling. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-700); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-700); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-700); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-700); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-700); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-cyan-700); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --canary-component-tag-purple-background: var(--canary-colors-cyan-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-red-text: var(--canary-colors-red-700); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-cyan-700); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --canary-component-tag-violet-background: var(--canary-colors-cyan-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-yellow-text: var(--canary-colors-orange-700); /* Text color for yellow tags. Signals caution states with readable amber text. */ + --canary-component-tag-yellow-background: var(--canary-colors-orange-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-background: var(--canary-colors-red-600); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-chrome-950) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-950) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-orange-200); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-400); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-400); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-300); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-150); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-400); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-400); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-300); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-500); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-200); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-700); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); + --canary-brand-color-50: var(--canary-colors-cyan-50); + --canary-brand-color-100: var(--canary-colors-cyan-100); + --canary-brand-color-200: var(--canary-colors-cyan-200); + --canary-brand-color-300: var(--canary-colors-cyan-300); + --canary-brand-color-400: var(--canary-colors-cyan-400); + --canary-brand-color-500: var(--canary-colors-cyan-500); + --canary-brand-color-600: var(--canary-colors-cyan-600); + --canary-brand-color-700: var(--canary-colors-cyan-700); + --canary-brand-color-800: var(--canary-colors-cyan-800); + --canary-brand-color-900: var(--canary-colors-cyan-900); + --canary-brand-color-950: var(--canary-colors-cyan-950); + --canary-brand-on-color-50: var(--canary-colors-chrome-950); + --canary-brand-on-color-100: var(--canary-colors-chrome-950); + --canary-brand-on-color-200: var(--canary-colors-chrome-950); + --canary-brand-on-color-300: var(--canary-colors-chrome-950); + --canary-brand-on-color-400: var(--canary-colors-chrome-950); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-white); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-700); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-light-protanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-protanopia-desktop-gitness.css new file mode 100644 index 0000000000..79e8954673 --- /dev/null +++ b/packages/core-design-system/src/styles/source-light-protanopia-desktop-gitness.css @@ -0,0 +1,490 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:39 GMT + * Copyright (c) Harness. + */ + +.source-light-protanopia-desktop-gitness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-chrome-50); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-850); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-700); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. Using blue instead of green for protanopia visibility. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-blue-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-800); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-100); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. Using blue instead of green for protanopia visibility. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-blue-400); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-400); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-component-alert-danger-title: var(--canary-colors-red-800); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-blue-600); /* Text color for success badges. Communicates positive status through readable blue text. Adjusted for protanopia visibility. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-blue-400) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. Adjusted for protanopia visibility. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-blue-300) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. Adjusted for protanopia visibility. */ + --canary-component-badge-danger-text: var(--canary-colors-red-600); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-600); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-400) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-600); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-purple-600); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-400) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-200); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-blue-600); /* Text color for success buttons. Communicates positive actions through readable blue text. Adjusted for protanopia visibility. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-blue-300) l c h / 0.12); /* Background color for success buttons. Creates subtle but recognizable positive action styling. Adjusted for protanopia visibility. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-blue-400) l c h / 0.25); /* Border color for success buttons. Provides definition for positive action buttons. Adjusted for protanopia visibility. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-blue-300) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. Adjusted for protanopia visibility. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-blue-300) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. Adjusted for protanopia visibility. */ + --canary-component-btn-danger-text: var(--canary-colors-red-600); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.12); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Blue background highlighting newly added code lines while maintaining readability. Using blue instead of green for protanopia visibility. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. Using blue instead of green for protanopia visibility. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-blue-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. Using blue instead of green for protanopia visibility. */ + --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-purple-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-400); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-blue-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. Using blue instead of green for protanopia visibility. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-separator-background: var(--canary-border-width-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-900); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-blue-300); /* Color for success status indicators. Communicates completed or positive states. Using blue instead of green for protanopia visibility. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-50); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-chrome-900); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-600); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-600); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-blue-600); /* Text color for green tags. Using blue instead of green for protanopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-blue-100); /* Background color for green tags. Using blue instead of green for protanopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for green tags. Using blue instead of green for protanopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-600); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-blue-600); /* Text color for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --canary-component-tag-lime-background: var(--canary-colors-blue-100); /* Background color for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --canary-component-tag-mint-text: var(--canary-colors-blue-600); /* Text color for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --canary-component-tag-mint-background: var(--canary-colors-blue-100); /* Background color for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-600); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-600); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-purple-600); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --canary-component-tag-purple-background: var(--canary-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-red-text: var(--canary-colors-red-600); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-violet-600); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --canary-component-tag-violet-background: var(--canary-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-background: var(--canary-colors-red-200); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-300); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); + --canary-brand-color-50: var(--canary-colors-chrome-150); + --canary-brand-color-100: var(--canary-colors-chrome-150); + --canary-brand-color-200: var(--canary-colors-chrome-150); + --canary-brand-color-300: var(--canary-colors-chrome-150); + --canary-brand-color-400: var(--canary-colors-chrome-150); + --canary-brand-color-500: var(--canary-colors-chrome-900); + --canary-brand-color-600: var(--canary-colors-chrome-150); + --canary-brand-color-700: var(--canary-colors-chrome-900); + --canary-brand-color-800: var(--canary-colors-chrome-900); + --canary-brand-color-900: var(--canary-colors-chrome-900); + --canary-brand-color-950: var(--canary-colors-chrome-900); + --canary-brand-on-color-50: var(--canary-colors-pure-black); + --canary-brand-on-color-100: var(--canary-colors-pure-black); + --canary-brand-on-color-200: var(--canary-colors-pure-black); + --canary-brand-on-color-300: var(--canary-colors-pure-black); + --canary-brand-on-color-400: var(--canary-colors-pure-black); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-black); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-500); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. Using blue instead of green for protanopia visibility. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-light-protanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-light-protanopia-desktop-harness.css new file mode 100644 index 0000000000..45204dde26 --- /dev/null +++ b/packages/core-design-system/src/styles/source-light-protanopia-desktop-harness.css @@ -0,0 +1,490 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:39 GMT + * Copyright (c) Harness. + */ + +.source-light-protanopia-desktop-harness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-chrome-50); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-850); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-700); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. Using blue instead of green for protanopia visibility. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-blue-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-yellow-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-800); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-100); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. Using blue instead of green for protanopia visibility. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-blue-400); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-400); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-yellow-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-component-alert-danger-title: var(--canary-colors-red-800); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-blue-600); /* Text color for success badges. Communicates positive status through readable blue text. Adjusted for protanopia visibility. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-blue-400) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. Adjusted for protanopia visibility. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-blue-300) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. Adjusted for protanopia visibility. */ + --canary-component-badge-danger-text: var(--canary-colors-red-600); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-yellow-600); /* Text color for warning badges. Signals caution states with readable amber text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-400) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-600); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-purple-600); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-400) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-200); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-blue-600); /* Text color for success buttons. Communicates positive actions through readable blue text. Adjusted for protanopia visibility. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-blue-300) l c h / 0.12); /* Background color for success buttons. Creates subtle but recognizable positive action styling. Adjusted for protanopia visibility. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-blue-400) l c h / 0.25); /* Border color for success buttons. Provides definition for positive action buttons. Adjusted for protanopia visibility. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-blue-300) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. Adjusted for protanopia visibility. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-blue-300) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. Adjusted for protanopia visibility. */ + --canary-component-btn-danger-text: var(--canary-colors-red-600); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.12); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Blue background highlighting newly added code lines while maintaining readability. Using blue instead of green for protanopia visibility. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. Using blue instead of green for protanopia visibility. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-blue-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. Using blue instead of green for protanopia visibility. */ + --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-purple-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-400); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-blue-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. Using blue instead of green for protanopia visibility. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-separator-background: var(--canary-border-width-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-900); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-blue-300); /* Color for success status indicators. Communicates completed or positive states. Using blue instead of green for protanopia visibility. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-50); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-chrome-900); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-600); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-600); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-blue-600); /* Text color for green tags. Using blue instead of green for protanopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-blue-100); /* Background color for green tags. Using blue instead of green for protanopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for green tags. Using blue instead of green for protanopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-600); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-blue-600); /* Text color for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --canary-component-tag-lime-background: var(--canary-colors-blue-100); /* Background color for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --canary-component-tag-mint-text: var(--canary-colors-blue-600); /* Text color for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --canary-component-tag-mint-background: var(--canary-colors-blue-100); /* Background color for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-600); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-600); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-purple-600); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --canary-component-tag-purple-background: var(--canary-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-red-text: var(--canary-colors-red-600); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-violet-600); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --canary-component-tag-violet-background: var(--canary-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-yellow-text: var(--canary-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-background: var(--canary-colors-red-200); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-300); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); + --canary-brand-color-50: var(--canary-colors-cyan-50); + --canary-brand-color-100: var(--canary-colors-cyan-100); + --canary-brand-color-200: var(--canary-colors-cyan-200); + --canary-brand-color-300: var(--canary-colors-cyan-300); + --canary-brand-color-400: var(--canary-colors-cyan-400); + --canary-brand-color-500: var(--canary-colors-cyan-500); + --canary-brand-color-600: var(--canary-colors-cyan-600); + --canary-brand-color-700: var(--canary-colors-cyan-700); + --canary-brand-color-800: var(--canary-colors-cyan-800); + --canary-brand-color-900: var(--canary-colors-cyan-900); + --canary-brand-color-950: var(--canary-colors-cyan-950); + --canary-brand-on-color-50: var(--canary-colors-chrome-950); + --canary-brand-on-color-100: var(--canary-colors-chrome-950); + --canary-brand-on-color-200: var(--canary-colors-chrome-950); + --canary-brand-on-color-300: var(--canary-colors-chrome-950); + --canary-brand-on-color-400: var(--canary-colors-chrome-950); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-white); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-500); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. Using blue instead of green for protanopia visibility. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-light-tritanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-tritanopia-desktop-gitness.css new file mode 100644 index 0000000000..a19d154ba8 --- /dev/null +++ b/packages/core-design-system/src/styles/source-light-tritanopia-desktop-gitness.css @@ -0,0 +1,490 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:41 GMT + * Copyright (c) Harness. + */ + +.source-light-tritanopia-desktop-gitness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-chrome-50); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-850); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-700); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-cyan-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-orange-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-800); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-100); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-cyan-400); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-400); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-orange-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-component-alert-danger-title: var(--canary-colors-red-800); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-cyan-600); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-red-600); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-orange-600); /* Text color for warning badges. Signals caution states with readable orange text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-orange-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-600); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-cyan-600); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-400) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-200); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-cyan-600); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.12); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.25); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-200) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-200) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-red-600); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.12); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-cyan-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-400); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-separator-background: var(--canary-border-width-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-900); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-orange-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-50); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-chrome-900); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-600); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-600); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-cyan-600); /* Text color for green tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-cyan-100); /* Background color for green tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for green tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-600); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-600); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-600); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-cyan-600); /* Text color for purple tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-purple-background: var(--canary-colors-cyan-100); /* Background color for purple tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for purple tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-red-text: var(--canary-colors-red-600); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-cyan-600); /* Text color for violet tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-violet-background: var(--canary-colors-cyan-100); /* Background color for violet tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for violet tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-yellow-text: var(--canary-colors-orange-600); /* Text color for yellow tags, replaced with orange for tritanopia visibility. */ + --canary-component-tag-yellow-background: var(--canary-colors-orange-100); /* Background color for yellow tags, replaced with orange for tritanopia visibility. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for yellow tags, replaced with orange for tritanopia visibility. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-background: var(--canary-colors-red-200); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-orange-200); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-300); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); + --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-brand-color-50: var(--canary-colors-chrome-150); + --canary-brand-color-100: var(--canary-colors-chrome-150); + --canary-brand-color-200: var(--canary-colors-chrome-150); + --canary-brand-color-300: var(--canary-colors-chrome-150); + --canary-brand-color-400: var(--canary-colors-chrome-150); + --canary-brand-color-500: var(--canary-colors-chrome-900); + --canary-brand-color-600: var(--canary-colors-chrome-150); + --canary-brand-color-700: var(--canary-colors-chrome-900); + --canary-brand-color-800: var(--canary-colors-chrome-900); + --canary-brand-color-900: var(--canary-colors-chrome-900); + --canary-brand-color-950: var(--canary-colors-chrome-900); + --canary-brand-on-color-50: var(--canary-colors-pure-black); + --canary-brand-on-color-100: var(--canary-colors-pure-black); + --canary-brand-on-color-200: var(--canary-colors-pure-black); + --canary-brand-on-color-300: var(--canary-colors-pure-black); + --canary-brand-on-color-400: var(--canary-colors-pure-black); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-black); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-500); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with cyan. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags, replaced with orange. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-light-tritanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-light-tritanopia-desktop-harness.css new file mode 100644 index 0000000000..f8b848a17d --- /dev/null +++ b/packages/core-design-system/src/styles/source-light-tritanopia-desktop-harness.css @@ -0,0 +1,490 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Fri, 14 Mar 2025 15:14:41 GMT + * Copyright (c) Harness. + */ + +.source-light-tritanopia-desktop-harness { + --canary-icon-stroke-width-xxs: 1.1px; + --canary-icon-stroke-width-xs: 1px; + --canary-icon-stroke-width-sm: 1.1px; + --canary-icon-stroke-width-default: 1.1px; + --canary-icon-stroke-width-md: 1.4px; + --canary-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --canary-background-1: var(--canary-colors-chrome-50); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --canary-background-2: var(--canary-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --canary-background-3: var(--canary-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --canary-text-1: var(--canary-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --canary-text-2: var(--canary-colors-chrome-850); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --canary-text-3: var(--canary-colors-chrome-700); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --canary-text-success: var(--canary-colors-cyan-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --canary-text-danger: var(--canary-colors-red-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --canary-text-warning: var(--canary-colors-orange-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --canary-border-1: var(--canary-colors-chrome-800); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --canary-border-2: var(--canary-colors-chrome-100); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --canary-border-success: var(--canary-colors-cyan-400); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --canary-border-danger: var(--canary-colors-red-400); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --canary-border-warning: var(--canary-colors-orange-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --canary-state-disabled-text: var(--canary-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-component-alert-danger-title: var(--canary-colors-red-800); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --canary-component-alert-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --canary-component-badge-success-text: var(--canary-colors-cyan-600); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --canary-component-badge-danger-text: var(--canary-colors-red-600); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --canary-component-badge-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --canary-component-badge-warning-text: var(--canary-colors-orange-600); /* Text color for warning badges. Signals caution states with readable orange text. */ + --canary-component-badge-warning-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --canary-component-badge-warning-background: lch(from var(--canary-colors-orange-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --canary-component-badge-running-text: var(--canary-colors-orange-600); /* Text color for running state badges. Indicates active or in-progress operations. */ + --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --canary-component-badge-merged-text: var(--canary-colors-cyan-600); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-400) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --canary-component-btn-secondary-background: var(--canary-colors-chrome-200); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --canary-component-btn-success-text: var(--canary-colors-cyan-600); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.12); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.25); /* Border color for success buttons. Provides definition for positive action buttons. */ + --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-200) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-200) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-btn-danger-text: var(--canary-colors-red-600); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.12); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --canary-component-btn-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --canary-component-link-visited: var(--canary-colors-cyan-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --canary-component-pipeline-card-error-border: var(--canary-colors-red-400); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --canary-component-separator-background: var(--canary-border-width-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --canary-component-slider-handle-border: var(--canary-colors-chrome-900); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --canary-component-status-indicator-warning: var(--canary-colors-orange-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --canary-component-switch-selected-thumb: var(--canary-colors-chrome-50); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --canary-component-switch-selected-background: var(--canary-colors-chrome-900); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --canary-component-tag-blue-text: var(--canary-colors-blue-600); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-cyan-text: var(--canary-colors-cyan-600); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-green-text: var(--canary-colors-cyan-600); /* Text color for green tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-green-background: var(--canary-colors-cyan-100); /* Background color for green tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for green tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-indigo-text: var(--canary-colors-indigo-600); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-lime-text: var(--canary-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-mint-text: var(--canary-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-orange-text: var(--canary-colors-orange-600); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-pink-text: var(--canary-colors-pink-600); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-purple-text: var(--canary-colors-cyan-600); /* Text color for purple tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-purple-background: var(--canary-colors-cyan-100); /* Background color for purple tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for purple tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-red-text: var(--canary-colors-red-600); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --canary-component-tag-violet-text: var(--canary-colors-cyan-600); /* Text color for violet tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-violet-background: var(--canary-colors-cyan-100); /* Background color for violet tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-violet-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for violet tags, replaced with cyan for tritanopia visibility. */ + --canary-component-tag-yellow-text: var(--canary-colors-orange-600); /* Text color for yellow tags, replaced with orange for tritanopia visibility. */ + --canary-component-tag-yellow-background: var(--canary-colors-orange-100); /* Background color for yellow tags, replaced with orange for tritanopia visibility. */ + --canary-component-tag-yellow-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for yellow tags, replaced with orange for tritanopia visibility. */ + --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --canary-component-toast-danger-background: var(--canary-colors-red-200); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --canary-gradient-ai-gradient-stop-1: var(--canary-colors-orange-200); + --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-300); + --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); + --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); + --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); + --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); + --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.4); + --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); + --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); + --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); + --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); + --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); + --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); + --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); + --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); + --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); + --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); + --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --canary-brand-color-50: var(--canary-colors-cyan-50); + --canary-brand-color-100: var(--canary-colors-cyan-100); + --canary-brand-color-200: var(--canary-colors-cyan-200); + --canary-brand-color-300: var(--canary-colors-cyan-300); + --canary-brand-color-400: var(--canary-colors-cyan-400); + --canary-brand-color-500: var(--canary-colors-cyan-500); + --canary-brand-color-600: var(--canary-colors-cyan-600); + --canary-brand-color-700: var(--canary-colors-cyan-700); + --canary-brand-color-800: var(--canary-colors-cyan-800); + --canary-brand-color-900: var(--canary-colors-cyan-900); + --canary-brand-color-950: var(--canary-colors-cyan-950); + --canary-brand-on-color-50: var(--canary-colors-chrome-950); + --canary-brand-on-color-100: var(--canary-colors-chrome-950); + --canary-brand-on-color-200: var(--canary-colors-chrome-950); + --canary-brand-on-color-300: var(--canary-colors-chrome-950); + --canary-brand-on-color-400: var(--canary-colors-chrome-950); + --canary-brand-on-color-500: var(--canary-colors-pure-white); + --canary-brand-on-color-600: var(--canary-colors-pure-white); + --canary-brand-on-color-700: var(--canary-colors-pure-white); + --canary-brand-on-color-800: var(--canary-colors-pure-white); + --canary-brand-on-color-900: var(--canary-colors-pure-white); + --canary-brand-on-color-950: var(--canary-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --canary-text-accent: var(--canary-brand-color-500); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --canary-border-focus: var(--canary-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --canary-state-disabled-border: var(--canary-border-3); + --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ + --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ + --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ + --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ + --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ + --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ + --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ + --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ + --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ + --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --canary-component-slider-track-progress: var(--canary-brand-color-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --canary-component-slider-track-segments-progress: var(--canary-brand-color-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ + --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ + --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ + --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ + --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ + --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ + --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ + --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ + --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ + --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with cyan. */ + --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags, replaced with orange. */ + --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ + --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); + --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ + --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ + --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/ui/package.json b/packages/ui/package.json index ffaa3c556e..d64993fcd0 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -62,6 +62,7 @@ "@git-diff-view/shiki": "^0.0.21", "@harnessio/filters": "workspace:*", "@harnessio/pipeline-graph": "workspace:*", + "@harnessio/core-design-system": "workspace:*", "@harnessio/yaml-editor": "workspace:*", "@harnessio/forms": "workspace:*", "@hookform/resolvers": "^3.6.0", diff --git a/packages/ui/src/components/badge/badge.tsx b/packages/ui/src/components/badge/badge.tsx index 7c046053da..7ff37592c4 100644 --- a/packages/ui/src/components/badge/badge.tsx +++ b/packages/ui/src/components/badge/badge.tsx @@ -19,12 +19,24 @@ const badgeVariants = cva( { variants: { variant: { - default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80', + // default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80', secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80', tertiary: 'border-transparent bg-background-8 text-foreground-8', quaternary: 'border-borders-1 bg-background-2 text-foreground-5', destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80', - outline: 'text-foreground' + outline: 'text-foreground', + + /** + * New variants + */ + default: 'badge', + neutral: 'badge badge-neutral', + success: 'badge badge-success', + warning: 'badge badge-warning', + danger: 'badge badge-danger', + running: 'badge badge-running', + merged: 'badge badge-merged', + ai: 'badge badge-ai' }, size: { default: 'px-2.5 py-0.5 text-xs font-semibold', diff --git a/packages/ui/src/styles.css b/packages/ui/src/styles.css index b8f191f540..8c11131f33 100644 --- a/packages/ui/src/styles.css +++ b/packages/ui/src/styles.css @@ -1,4 +1,7 @@ -@import url('./shared-style-variables.css'); +/* @import url('./shared-style-variables.css'); + */ + +@import url('@harnessio/core-design-system/styles'); @tailwind base; @tailwind components; diff --git a/packages/ui/tailwind-design-system.ts b/packages/ui/tailwind-design-system.ts new file mode 100644 index 0000000000..b293953b99 --- /dev/null +++ b/packages/ui/tailwind-design-system.ts @@ -0,0 +1,377 @@ +import typography from '@tailwindcss/typography' +import tailwindcssAnimate from 'tailwindcss-animate' +import plugin from 'tailwindcss/plugin' +import type { PluginAPI, Config as TailwindConfig } from 'tailwindcss/types/config' + +export default { + darkMode: ['class'], + content: ['./src/**/*.{ts,tsx,css}'], + prefix: '', + theme: { + container: { + center: true, + padding: '2rem', + screens: { + '2xl': '1400px' + } + }, + extend: { + fontFamily: { + sans: ['Inter', 'sans-serif'], + code: ['JetBrains Mono', 'monospace'] + }, + colors: { + // border: 'var(--canary-border)', + borders: { + 1: 'var(--canary-border-1)', + 2: 'var(--canary-border-2)', + 3: 'var(--canary-border-3)', + // remove + 4: 'var(--canary-border-3)', + 5: 'var(--canary-border-3)', + 6: 'var(--canary-border-3)', + 7: 'var(--canary-border-3)', + 8: 'var(--canary-border-3)', + 9: 'var(--canary-border-3)', + 10: 'var(--canary-border-10)', + danger: 'var(--canary-border-danger)', + success: 'var(--canary-border-success)', + accent: 'var(--canary-border-accent)', + risk: 'var(--canary-icon-risk)', + alert: 'var(--canary-border-alert)' + }, + 'border-background': 'var(--canary-border-background)', + input: 'var(--canary-input)', + 'input-background': 'var(--canary-input-background)', + ring: 'var(--canary-ring)', + primary: { + DEFAULT: '#f00', + background: 'var(--canary-background-1)', + foreground: 'var(--canary-text-1)', + muted: 'var(--canary-state-disabled-background)', + accent: 'var(--canary-primary-accent)' + }, + secondary: { + DEFAULT: 'var(--canary-secondary)', + background: 'var(--canary-secondary-background)', + foreground: 'var(--canary-secondary-foreground)', + muted: 'var(--canary-secondary-muted)' + }, + tertiary: { + DEFAULT: 'var(--canary-tertiary)', + foreground: 'var(--canary-tertiary-foreground)', + background: 'var(--canary-tertiary-background)', + muted: 'var(--canary-tertiary-muted)' + }, + destructive: { + DEFAULT: 'var(--canary-destructive)', + foreground: 'var(--canary-destructive-foreground)' + }, + muted: { + DEFAULT: 'var(--canary-muted)', + foreground: 'var(--canary-muted-foreground)' + }, + accent: { + DEFAULT: 'var(--canary-accent)', + foreground: 'var(--canary-accent-foreground)' + }, + popover: { + DEFAULT: 'var(--canary-popover)', + foreground: 'var(--canary-popover-foreground)' + }, + card: { + DEFAULT: 'var(--canary-card)', + foreground: 'var(--canary-card-foreground)' + }, + white: { + DEFAULT: 'var(--canary-white)' + }, + black: { + DEFAULT: 'var(--canary-black)' + }, + success: { + DEFAULT: 'var(--canary-success)' + }, + error: { + DEFAULT: 'var(--canary-error)' + }, + warning: { + DEFAULT: 'var(--canary-warning)' + }, + emphasis: { + DEFAULT: 'var(--canary-emphasis)' + }, + ai: { + DEFAULT: 'var(--canary-ai)' + }, + divergence: { + behind: 'var(--canary-grey-20)', + ahead: 'var(--canary-grey-30)' + }, + /* New colors design variables */ + foreground: { + 1: 'var(--canary-text-1)', + 2: 'var(--canary-text-2)', + 4: 'var(--canary-text-3)', + 5: 'var(--canary-text-3)', + 8: 'var(--canary-text-3)', + accent: 'var(--canary-text-3)' + }, + background: { + 1: 'var(--canary-background-1)', + surface: 'var(--canary-background-1)', + 9: 'var(--canary-background-3)' + } + }, + + letterSpacing: { + tight: '-0.02em' + }, + // boxShadow: { + // 1: '0px 8px 16px hsl(var(--canary-box-shadow-1))', + // 2: '0px 8px 8px hsl(var(--canary-box-shadow-2))', + // 'pagination-1': '0px 2px 4px hsl(var(--canary-box-shadow-pagination))', + // 'as-border': 'inset 0 0 0 1px', + // 'commit-list-bullet': + // '0px 0px 3px 0.5px hsla(var(--canary-background-05) / 0.2), 0px 0px 8px 1px hsla(var(--canary-background-05) / 0.3)' + // }, + // borderColor: { + // 'borders-1': 'hsl(var(--canary-border-01))', + // 'borders-2': 'hsl(var(--canary-border-02))', + // 'borders-3': 'hsl(var(--canary-border-03))', + // 'borders-4': 'hsl(var(--canary-border-04))', + // 'borders-5': 'hsl(var(--canary-border-05))', + // 'borders-6': 'hsl(var(--canary-border-06))', + // 'borders-7': 'hsl(var(--canary-border-07))', + // 'borders-8': 'hsl(var(--canary-border-08))', + // 'borders-9': 'hsl(var(--canary-border-09))', + // 'borders-10': 'hsl(var(--canary-border-10))', + // 'borders-danger': 'hsl(var(--canary-border-danger))', + // 'borders-success': 'hsl(var(--canary-border-success))', + // 'borders-accent': 'hsl(var(--canary-border-accent))', + // 'borders-risk': 'hsl(var(--canary-icon-risk))', + // 'borders-alert': 'hsl(var(--canary-border-alert))' + // }, + borderRadius: { + 10: '0.625rem' + }, + fontSize: { + tiny: '0.75rem', + xs: '0.8125rem', + // By px + 8: '0.5rem', + 9: '0.5625rem', + 10: '0.625rem', + 11: '0.6875rem', + 12: '0.75rem', + 13: '0.8125rem', + 14: '0.875rem', + 15: '0.9375rem', + 16: '1rem', + 17: '1.0625rem', + 18: '1.125rem', + 19: '1.1875rem', + 20: '1.25rem', + 24: '1.5rem' + }, + backgroundImage: { + 'gradient-radial': 'radial-gradient(var(--canary-tw-gradient-stops))', + 'ai-button': + 'linear-gradient(to right, hsl(var(--canary-ai-button-stop-1)), hsl(var(--canary-ai-button-stop-2)), hsl(var(--canary-ai-button-stop-3)), hsl(var(--canary-ai-button-stop-4)))', + 'navbar-gradient-1': + 'radial-gradient(50% 50% at 50% 50%, hsla(var(--canary-nav-gradient-1-1)) 0%, hsla(var(--canary-nav-gradient-1-2)) 100%)', + 'navbar-gradient-2': + 'radial-gradient(50% 50% at 50% 50%, hsla(var(--canary-nav-gradient-2-1)) 0%, hsla(var(--canary-nav-gradient-2-2)) 44.95%, hsla(var(--canary-nav-gradient-2-3)) 100%)', + 'navbar-gradient-3': + 'radial-gradient(50% 50% at 50% 50%, hsla(var(--canary-nav-gradient-3-1)) 0%, hsla(var(--canary-nav-gradient-3-2)) 100%)', + 'navbar-gradient-4': + 'radial-gradient(50% 50% at 50% 50%, hsla(var(--canary-nav-gradient-4-1)) 0%, hsla(var(--canary-nav-gradient-4-2)) 100%)', + 'navbar-item-gradient': + 'radial-gradient(50% 50% at 50% 50%, hsla(var(--canary-nav-item-gradient-1)) 0%, hsla(var(--canary-nav-item-gradient-2)) 17.63%, hsla(var(--canary-nav-item-gradient-3)) 40.23%, hsla(var(--canary-nav-item-gradient-4)) 61.54%, hsla(var(--canary-nav-item-gradient-5)) 80%, hsla(var(--canary-nav-item-gradient-6)) 100%)', + 'widget-bg-gradient': + 'radial-gradient(80.82% 77.84% at 80.15% 11.99%, hsla(var(--canary-widget-bg-gradient-from)) 8.43%, hsla(var(--canary-widget-bg-gradient-to)) 100%)', + 'widget-number-gradient': + 'linear-gradient(180deg, hsla(var(--canary-widget-number-gradient-from)) 35.9%, hsla(var(--canary-widget-number-gradient-to)) 100%)', + 'widget-number-bg-gradient': + 'linear-gradient(135deg, hsla(var(--canary-widget-number-bg-gradient-from)) 0%, hsla(var(--canary-widget-number-bg-gradient-to)) 67.67%)', + 'graph-gradient-1': + 'radial-gradient(88.57% 100% at 14.29% 0%, var(--canary-graph-gradient-bg-1) 10.62%, var(--canary-graph-gradient-bg-2) 75.86%)', + 'graph-bg-gradient': 'radial-gradient(circle, var(--canary-graph-viewport-bg) 1px, transparent 1px)' + }, + backgroundSize: { + 'graph-bg-size': '22px 22px' + }, + keyframes: { + 'accordion-down': { + from: { height: '0' }, + to: { height: 'var(--radix-accordion-content-height)' } + }, + 'accordion-up': { + from: { height: 'var(--radix-accordion-content-height)' }, + to: { height: '0' } + }, + 'border-spin': { + '100%': { transform: 'rotate(-360deg)' } + } + }, + animation: { + 'accordion-down': 'accordion-down 0.2s ease-out', + 'accordion-up': 'accordion-up 0.2s ease-out', + + 'border-spin': 'border-spin 7s linear infinite' + } + } + }, + + // .badge { + // --badge-color: var(--canary-component-badge-default-text); + // --badge-bg-color: var(--canary-component-badge-default-background); + // --badge-border-color: var(--canary-component-badge-default-border); + + // border: var(--canary-border-width-1) solid var(--badge-border-color); + // color: var(--badge-color); + // background-color: var(--badge-bg-color); + // } + // .badge-neutral { + // --badge-color: var(--canary-component-badge-neutral-text); + // --badge-bg-color: var(--canary-component-badge-neutral-background); + // --badge-border-color: var(--canary-component-badge-neutral-border); + // } + // .badge-success { + // --badge-color: var(--canary-component-badge-success-text); + // --badge-bg-color: var(--canary-component-badge-success-background); + // --badge-border-color: var(--canary-component-badge-success-border); + // } + // .badge-warning { + // --badge-color: var(--canary-component-badge-warning-text); + // --badge-bg-color: var(--canary-component-badge-warning-background); + // --badge-border-color: var(--canary-component-badge-warning-border); + // } + // .badge-danger { + // --badge-color: var(--canary-component-badge-danger-text); + // --badge-bg-color: var(--canary-component-badge-danger-background); + // --badge-border-color: var(--canary-component-badge-danger-border); + // } + // .badge-running { + // --badge-color: var(--canary-component-badge-running-text); + // --badge-bg-color: var(--canary-component-badge-running-background); + // --badge-border-color: var(--canary-component-badge-running-border); + // } + // .badge-merged { + // --badge-color: var(--canary-component-badge-merged-text); + // --badge-bg-color: var(--canary-component-badge-merged-background); + // --badge-border-color: var(--canary-component-badge-merged-border); + // } + // .badge-ai { + // --badge-color: var(--canary-component-badge-ai-text); + // --badge-bg-color: var(--canary-component-badge-ai-background); + // border: 1px solid transparent; + // background-image: + // linear-gradient(to right, var(--badge-bg-color), var(--badge-bg-color)), var(--canary-component-badge-ai-border); + // background-origin: border-box; + // background-clip: padding-box, border-box; + // } + + plugins: [ + plugin(({ addComponents }) => { + addComponents({ + '.badge': { + border: 'var(--canary-border-width-1) solid var(--canary-component-badge-default-border)', + color: 'var(--canary-component-badge-default-text)', + backgroundColor: 'var(--canary-component-badge-default-background)', + + '&-neutral': { + color: 'var(--canary-component-badge-neutral-text)', + backgroundColor: 'var(--canary-component-badge-neutral-background)', + borderColor: 'var(--canary-component-badge-neutral-border)' + }, + '&-success': { + color: 'var(--canary-component-badge-success-text)', + backgroundColor: 'var(--canary-component-badge-success-background)', + borderColor: 'var(--canary-component-badge-success-border)' + }, + '&-warning': { + color: 'var(--canary-component-badge-warning-text)', + backgroundColor: 'var(--canary-component-badge-warning-background)', + borderColor: 'var(--canary-component-badge-warning-border)' + }, + '&-danger': { + color: 'var(--canary-component-badge-danger-text)', + backgroundColor: 'var(--canary-component-badge-danger-background)', + borderColor: 'var(--canary-component-badge-danger-border)' + }, + '&-running': { + color: 'var(--canary-component-badge-running-text)', + backgroundColor: 'var(--canary-component-badge-running-background)', + borderColor: 'var(--canary-component-badge-running-border)' + }, + '&-harness': { + color: 'var(--canary-component-badge-running-text)', + backgroundColor: 'var(--canary-component-badge-running-background)', + borderColor: 'var(--canary-component-badge-running-border)' + }, + '&-merged': { + color: 'var(--canary-component-badge-merged-text)', + backgroundColor: 'var(--canary-component-badge-merged-background)', + borderColor: 'var(--canary-component-badge-merged-border)' + }, + '&-ai': { + color: 'var(--canary-component-badge-ai-text)', + backgroundImage: `linear-gradient(to right, var(--canary-component-badge-ai-background), var(--canary-component-badge-ai-background)), var(--canary-component-badge-ai-border)`, + backgroundOrigin: 'border-box', + backgroundClip: 'padding-box, border-box', + border: '1px solid transparent' + }, + + // Size + '&-sm': { + padding: 'var(--badge-sm-padding, 0.125rem 0.375rem)', + fontSize: 'var(--badge-sm-font-size, 0.625rem)', + background: 'rebeccapurple', + color: 'white' + } + } + // '.badge-primary': { + // backgroundColor: 'var(--badge-primary-background-color, #3b82f6)', + // color: 'var(--badge-primary-color, white)', + // borderColor: 'var(--badge-primary-border-color, transparent)' + // }, + // '.badge-warning': { + // backgroundColor: 'var(--badge-warning-background-color, #f59e0b)', + // color: 'var(--badge-warning-color, white)', + // borderColor: 'var(--badge-warning-border-color, transparent)' + // } + }) + }), + tailwindcssAnimate, + typography, + function ({ addUtilities }: PluginAPI) { + addUtilities({ + '.tabnav-active': { + boxShadow: + 'inset 0 1px 0 0 hsl(var(--canary-border-background)), inset 1px 0 0 0 hsl(var(--canary-border-background)), inset -1px 0 0 0 hsl(var(--canary-border-background))' + }, + '.tabnav-inactive': { + boxShadow: 'inset 0 -1px 0 0 hsl(var(--canary-border-background))' + } + }) + } + ], + safelist: [ + 'prose', + 'prose-invert', + 'prose-headings', + 'prose-p', + 'prose-a', + 'prose-img', + 'prose-code', + { pattern: /^border-borders-/ }, + { pattern: /^bg-graph-/ }, + { pattern: /^text-foreground-/ }, + { pattern: /^bg-background-/ }, + // NOTE: stroke-border-2 temporary here as it is used by in gitness for pipeline-graph + 'stroke-borders-2', + // NOTE: temporary - used in design-system + { pattern: /bg-primary-./ } + ] +} satisfies TailwindConfig diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e827c21f07..e9c0b47bc7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -153,6 +153,9 @@ importers: '@harnessio/code-service-client': specifier: 3.5.0 version: 3.5.0 + '@harnessio/core-design-system': + specifier: workspace:* + version: link:../../packages/core-design-system '@harnessio/forms': specifier: workspace:* version: link:../../packages/forms @@ -628,6 +631,24 @@ importers: specifier: ^4.3.0 version: 4.3.0(rollup@4.34.9)(typescript@5.8.2)(vite@6.2.0(@types/node@20.17.23)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) + packages/core-design-system: + devDependencies: + '@tokens-studio/sd-transforms': + specifier: ^1.2.9 + version: 1.2.12(style-dictionary@4.3.3) + figlet: + specifier: ^1.8.0 + version: 1.8.0 + gradient-string: + specifier: ^3.0.0 + version: 3.0.0 + rimraf: + specifier: ^6.0.1 + version: 6.0.1 + style-dictionary: + specifier: ^4.1.4 + version: 4.3.3 + packages/filters: dependencies: react: @@ -837,6 +858,9 @@ importers: '@git-diff-view/shiki': specifier: ^0.0.21 version: 0.0.21 + '@harnessio/core-design-system': + specifier: workspace:* + version: link:../core-design-system '@harnessio/filters': specifier: workspace:* version: link:../filters @@ -2122,6 +2146,18 @@ packages: '@bcoe/v8-coverage@0.2.3': resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==} + '@bundled-es-modules/deepmerge@4.3.1': + resolution: {integrity: sha512-Rk453EklPUPC3NRWc3VUNI/SSUjdBaFoaQvFRmNBNtMHVtOFD5AntiWg5kEE1hqcPqedYFDzxE3ZcMYPcA195w==} + + '@bundled-es-modules/glob@10.4.2': + resolution: {integrity: sha512-740y5ofkzydsFao5EXJrGilcIL6EFEw/cmPf2uhTw9J6G1YOhiIFjNFCHdpgEiiH5VlU3G0SARSjlFlimRRSMA==} + + '@bundled-es-modules/memfs@4.9.4': + resolution: {integrity: sha512-1XyYPUaIHwEOdF19wYVLBtHJRr42Do+3ctht17cZOHwHf67vkmRNPlYDGY2kJps4RgE5+c7nEZmEzxxvb1NZWA==} + + '@bundled-es-modules/postcss-calc-ast-parser@0.1.6': + resolution: {integrity: sha512-y65TM5zF+uaxo9OeekJ3rxwTINlQvrkbZLogYvQYVoLtxm4xEiHfZ7e/MyiWbStYyWZVZkVqsaVU6F4SUK5XUA==} + '@csstools/color-helpers@5.0.2': resolution: {integrity: sha512-JqWH1vsgdGcw2RR6VliXXdA0/59LttzlU8UlRT/iUUsEeWfYq8I+K0yhihEUTTHLRm1EXvpsCx3083EU15ecsA==} engines: {node: '>=18'} @@ -4057,6 +4093,15 @@ packages: peerDependencies: '@testing-library/dom': '>=7.21.4' + '@tokens-studio/sd-transforms@1.2.12': + resolution: {integrity: sha512-YAHKYtGjwrYXp1Kh/PM/3C/e3a05+Zg6pxA4Rz3dkxPO4L/IGBE1ExKrqOZXTLRCw6JJDofQKUapAvig0iO9Fg==} + engines: {node: '>=18.0.0'} + peerDependencies: + style-dictionary: ^4.3.0 || ^5.0.0-rc.0 + + '@tokens-studio/types@0.5.2': + resolution: {integrity: sha512-rzMcZP0bj2E5jaa7Fj0LGgYHysoCrbrxILVbT0ohsCUH5uCHY/u6J7Qw/TE0n6gR9Js/c9ZO9T8mOoz0HdLMbA==} + '@types/acorn@4.0.6': resolution: {integrity: sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==} @@ -4254,6 +4299,9 @@ packages: '@types/testing-library__jest-dom@5.14.9': resolution: {integrity: sha512-FSYhIjFlfOpGSRyVoMBMuS3ws5ehFQODymf3vlI7U1K8c7PHwWwFY7VREfmsuzHSOnoKs/9/Y983ayOs7eRzqw==} + '@types/tinycolor2@1.4.6': + resolution: {integrity: sha512-iEN8J0BoMnsWBqjVbWH/c0G0Hh7O21lpR2/+PrvAVgWdzL7eexIFm4JN/Wn10PTcmNdtS6U67r499mlWMXOxNw==} + '@types/unist@2.0.11': resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==} @@ -4618,6 +4666,13 @@ packages: '@xtuc/long@4.2.2': resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==} + '@yarnpkg/lockfile@1.1.0': + resolution: {integrity: sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==} + + '@zip.js/zip.js@2.7.57': + resolution: {integrity: sha512-BtonQ1/jDnGiMed6OkV6rZYW78gLmLswkHOzyMrMb+CAR7CZO8phOHO6c2qw6qb1g1betN7kwEHhhZk30dv+NA==} + engines: {bun: '>=0.7.0', deno: '>=1.0.0', node: '>=16.5.0'} + abbrev@1.1.1: resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==} @@ -4811,6 +4866,9 @@ packages: resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==} engines: {node: '>= 0.4'} + assert@2.1.0: + resolution: {integrity: sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw==} + assertion-error@2.0.1: resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==} engines: {node: '>=12'} @@ -4842,6 +4900,10 @@ packages: asynckit@0.4.0: resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==} + at-least-node@1.0.0: + resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==} + engines: {node: '>= 4.0.0'} + autoprefixer@10.4.20: resolution: {integrity: sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==} engines: {node: ^10 || ^12 || >=14} @@ -5156,6 +5218,9 @@ packages: resolution: {integrity: sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==} engines: {node: ^12.17.0 || ^14.13 || >=16.0.0} + change-case@5.4.4: + resolution: {integrity: sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==} + char-regex@1.0.2: resolution: {integrity: sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==} engines: {node: '>=10'} @@ -5292,6 +5357,9 @@ packages: colorette@2.0.20: resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==} + colorjs.io@0.4.5: + resolution: {integrity: sha512-yCtUNCmge7llyfd/Wou19PMAcf5yC3XXhgFoAh6zsO2pGswhUPBaaUh8jzgHnXtXuZyFKzXZNAnyF5i+apICow==} + colors@1.4.0: resolution: {integrity: sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==} engines: {node: '>=0.1.90'} @@ -5339,6 +5407,10 @@ packages: compare-versions@6.1.1: resolution: {integrity: sha512-4hm4VPpIecmlg59CHXnRDnqGplJFrbLG4aFEl5vl6cK1u76ws3LLvX7ikFnTDl5vo39sjWD6AaDPYodJp/NNHg==} + component-emitter@2.0.0: + resolution: {integrity: sha512-4m5s3Me2xxlVKG9PkZpQqHQR7bgpnN7joDMJ4yvVkVXngjoITG76IaZmzmywSeRTeTpc6N6r3H3+KyUurV8OYw==} + engines: {node: '>=18'} + compressible@2.0.18: resolution: {integrity: sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==} engines: {node: '>= 0.6'} @@ -6127,6 +6199,9 @@ packages: resolution: {integrity: sha512-2Zks0hf1VLFYI1kbh0I5jP3KHHyCHpkfyHBzsSXRFgl/Bg9mWYfMW8oD+PdMPlEwy5HNsR9JutYy6pMeOh61nw==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} + expr-eval-fork@2.0.2: + resolution: {integrity: sha512-NaAnObPVwHEYrODd7Jzp3zzT9pgTAlUUL4MZiZu9XAYPDpx89cPsfyEImFb2XY0vQNbrqg2CG7CLiI+Rs3seaQ==} + express@4.21.2: resolution: {integrity: sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==} engines: {node: '>= 0.10.0'} @@ -6187,6 +6262,11 @@ packages: fflate@0.8.2: resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==} + figlet@1.8.0: + resolution: {integrity: sha512-chzvGjd+Sp7KUvPHZv6EXV5Ir3Q7kYNpCr4aHrRW79qFtTefmQZNny+W1pW9kf5zeE6dikku2W50W/wAH2xWgw==} + engines: {node: '>= 0.4.0'} + hasBin: true + file-entry-cache@6.0.1: resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==} engines: {node: ^10.12.0 || >=12.0.0} @@ -6231,6 +6311,9 @@ packages: find-yarn-workspace-root2@1.2.16: resolution: {integrity: sha512-hr6hb1w8ePMpPVUK39S4RlwJzi+xPLuVuG8XlwXU3KD5Yn3qgBWVfy3AzNlDhWvE1EORCE65/Qm26rFQt3VLVA==} + find-yarn-workspace-root@2.0.0: + resolution: {integrity: sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==} + flat-cache@3.2.0: resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==} engines: {node: ^10.12.0 || >=12.0.0} @@ -6297,6 +6380,10 @@ packages: resolution: {integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==} engines: {node: '>=6 <7 || >=8'} + fs-extra@9.1.0: + resolution: {integrity: sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==} + engines: {node: '>=10'} + fs-merger@3.2.1: resolution: {integrity: sha512-AN6sX12liy0JE7C2evclwoo0aCG3PFulLjrTLsJpWh/2mM+DinhpSGqYLbHBBbIW1PLRNcFhJG8Axtz8mQW3ug==} @@ -6437,6 +6524,10 @@ packages: graceful-fs@4.2.11: resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==} + gradient-string@3.0.0: + resolution: {integrity: sha512-frdKI4Qi8Ihp4C6wZNB565de/THpIaw3DjP5ku87M+N9rNSGmPTjfkq61SdRXB7eCaL8O1hkKDvf6CDMtOzIAg==} + engines: {node: '>=14'} + graphemer@1.4.0: resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==} @@ -6857,6 +6948,11 @@ packages: is-decimal@2.0.1: resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==} + is-docker@2.2.1: + resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==} + engines: {node: '>=8'} + hasBin: true + is-docker@3.0.0: resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} @@ -6906,6 +7002,13 @@ packages: resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==} engines: {node: '>= 0.4'} + is-mergeable-object@1.1.1: + resolution: {integrity: sha512-CPduJfuGg8h8vW74WOxHtHmtQutyQBzR+3MjQ6iDHIYdbOnm1YC7jv43SqCoU8OPGTJD4nibmiryA4kmogbGrA==} + + is-nan@1.3.2: + resolution: {integrity: sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==} + engines: {node: '>= 0.4'} + is-negated-glob@1.0.0: resolution: {integrity: sha512-czXVVn/QEmgvej1f50BZ648vUI+em0xqMq2Sn+QncCLN4zj1UAxlT+kw/6ggQTOaZPd1HqKQGEqbpQVtJucWug==} engines: {node: '>=0.10.0'} @@ -6989,6 +7092,10 @@ packages: resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==} engines: {node: '>= 0.4'} + is-wsl@2.2.0: + resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==} + engines: {node: '>=8'} + is-wsl@3.1.0: resolution: {integrity: sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==} engines: {node: '>=16'} @@ -7271,6 +7378,10 @@ packages: json-stable-stringify-without-jsonify@1.0.1: resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==} + json-stable-stringify@1.2.1: + resolution: {integrity: sha512-Lp6HbbBgosLmJbjx0pBLbgvx68FaFU1sdkmBuckmhhJ88kL13OA51CDtR2yJB50eCNMH9wRqtQNNiAqQH4YXnA==} + engines: {node: '>= 0.4'} + json5@1.0.2: resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==} hasBin: true @@ -7292,6 +7403,9 @@ packages: jsonfile@6.1.0: resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==} + jsonify@0.0.1: + resolution: {integrity: sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==} + jsx-ast-utils@3.3.5: resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==} engines: {node: '>=4.0'} @@ -7303,6 +7417,9 @@ packages: resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==} engines: {node: '>=0.10.0'} + klaw-sync@6.0.0: + resolution: {integrity: sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==} + kleur@3.0.3: resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==} engines: {node: '>=6'} @@ -8011,10 +8128,18 @@ packages: resolution: {integrity: sha512-mnkeQ1qP5Ue2wd+aivTD3NHd/lZ96Lu0jgf0pwktLPtx6cTZiH7tyeGRRHs0zX0rbrahXPnXlUnbeXyaBBuIaw==} engines: {node: '>=18'} + open@7.4.2: + resolution: {integrity: sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==} + engines: {node: '>=8'} + optionator@0.9.4: resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==} engines: {node: '>= 0.8.0'} + os-tmpdir@1.0.2: + resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==} + engines: {node: '>=0.10.0'} + overlayscrollbars@2.11.1: resolution: {integrity: sha512-kogaNaBTIizRenQ2GTzt2cpkEH9B0nUBXseRxqQblH/YicJ3TaWuvn8E5TXPPfJCVoHYSgBYZzzva40kCERKHg==} @@ -8113,6 +8238,11 @@ packages: pascal-case@3.1.2: resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==} + patch-package@8.0.0: + resolution: {integrity: sha512-da8BVIhzjtgScwDJ2TtKsfT5JFWz1hYoBl9rUQ1f38MC2HwnEIkK8VN3dKMKcP7P7bvvgzNDbfNHtx3MsQb5vA==} + engines: {node: '>=14', npm: '>5'} + hasBin: true + path-browserify@1.0.1: resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==} @@ -8165,6 +8295,12 @@ packages: resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==} engines: {node: '>=8'} + path-unified@0.2.0: + resolution: {integrity: sha512-MNKqvrKbbbb5p7XHXV6ZAsf/1f/yJQa13S/fcX0uua8ew58Tgc6jXV+16JyAbnR/clgCH+euKDxrF2STxMHdrg==} + + path@0.12.7: + resolution: {integrity: sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==} + pathe@1.1.2: resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==} @@ -8234,6 +8370,10 @@ packages: resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==} engines: {node: '>= 0.4'} + postcss-calc-ast-parser@0.1.4: + resolution: {integrity: sha512-CebpbHc96zgFjGgdQ6BqBy6XIUgRx1xXWCAAk6oke02RZ5nxwo9KQejTg8y7uYEeI9kv8jKQPYjoe6REsY23vw==} + engines: {node: '>=6.5'} + postcss-import@15.1.0: resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==} engines: {node: '>=14.0.0'} @@ -8313,6 +8453,9 @@ packages: resolution: {integrity: sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==} engines: {node: '>=4'} + postcss-value-parser@3.3.1: + resolution: {integrity: sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==} + postcss-value-parser@4.2.0: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} @@ -8434,6 +8577,10 @@ packages: process-nextick-args@2.0.1: resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==} + process@0.11.10: + resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==} + engines: {node: '>= 0.6.0'} + promise-map-series@0.3.0: resolution: {integrity: sha512-3npG2NGhTc8BWBolLLf8l/92OxMGaRLbqvIh9wjCHhDXNvk4zsxaTaCpiCunW09qWPrN2zeNSNwRLVBrQQtutA==} engines: {node: 10.* || >= 12.*} @@ -8461,6 +8608,9 @@ packages: pump@3.0.2: resolution: {integrity: sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==} + punycode@1.4.1: + resolution: {integrity: sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==} + punycode@2.3.1: resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==} engines: {node: '>=6'} @@ -9152,6 +9302,10 @@ packages: engines: {node: '>=14.0.0', npm: '>=6.0.0'} hasBin: true + slash@2.0.0: + resolution: {integrity: sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==} + engines: {node: '>=6'} + slash@3.0.0: resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==} engines: {node: '>=8'} @@ -9264,6 +9418,9 @@ packages: stream-replace-string@2.0.0: resolution: {integrity: sha512-TlnjJ1C0QrmxRNrON00JvaFFlNh5TTG00APw23j74ET7gkQpTASi6/L2fuiav8pzK715HXtUeClpBTw2NPSn6w==} + stream@0.0.3: + resolution: {integrity: sha512-aMsbn7VKrl4A2T7QAQQbzgN7NVc70vgF5INQrBXqn4dCXN1zy3L9HGgLO5s7PExmdrzTJ8uR/27aviW8or8/+A==} + streamx@2.22.0: resolution: {integrity: sha512-sLh1evHOzBy/iWRiR6d1zRcLao4gGZr3C1kzNz4fopCOKJb6xD9ub8Mpi9Mr1R6id5o43S+d93fI48UC5uM9aw==} @@ -9363,6 +9520,11 @@ packages: resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==} engines: {node: '>=8'} + style-dictionary@4.3.3: + resolution: {integrity: sha512-93ISASYmvGdKOvNHFaOZ+mVsCNQdoZzhSEq7JINE0BjMoE8zUzkwFyGDUBnfmXayHq/F4B4MCWmtjqjgHAYthw==} + engines: {node: '>=18.0.0'} + hasBin: true + style-loader@4.0.0: resolution: {integrity: sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==} engines: {node: '>= 18.12.0'} @@ -9515,6 +9677,9 @@ packages: tinybench@2.9.0: resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==} + tinycolor2@1.6.0: + resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==} + tinyexec@0.3.2: resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==} @@ -9522,6 +9687,9 @@ packages: resolution: {integrity: sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==} engines: {node: '>=12.0.0'} + tinygradient@1.1.5: + resolution: {integrity: sha512-8nIfc2vgQ4TeLnk2lFj4tRLvvJwEfQuabdsmvDdQPT0xlk9TaNtpGd6nNRxXoK6vQhN6RSzj+Cnp5tTQmpxmbw==} + tinypool@1.0.2: resolution: {integrity: sha512-al6n+QEANGFOMf/dmUMsuS5/r9B06uwlyNjZZql/zv8J7ybHCgoihBNORZCY2mzUuAnomQa2JdhyHKzZxPCrFA==} engines: {node: ^18.0.0 || >=20.0.0} @@ -9545,6 +9713,10 @@ packages: resolution: {integrity: sha512-KCTjNL9F7j8MzxgfTgjT+v21oYH38OidFty7dH00maWANAI2IsLw2AnThtTJi9HKALHZKQQWnNebYheadacD+g==} hasBin: true + tmp@0.0.33: + resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==} + engines: {node: '>=0.6.0'} + tmpl@1.0.5: resolution: {integrity: sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==} @@ -9906,6 +10078,10 @@ packages: file-loader: optional: true + url@0.11.4: + resolution: {integrity: sha512-oCwdVC7mTuWiPyjLUz/COz5TLk6wgp0RCsN+wHZ2Ekneac9w8uuV0njcbbie2ME+Vs+d6duwmYuR3HgQXs1fOg==} + engines: {node: '>= 0.4'} + use-callback-ref@1.3.3: resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==} engines: {node: '>=10'} @@ -9939,6 +10115,12 @@ packages: util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} + util@0.10.4: + resolution: {integrity: sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==} + + util@0.12.5: + resolution: {integrity: sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==} + utila@0.4.0: resolution: {integrity: sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==} @@ -11617,6 +11799,35 @@ snapshots: '@bcoe/v8-coverage@0.2.3': {} + '@bundled-es-modules/deepmerge@4.3.1': + dependencies: + deepmerge: 4.3.1 + + '@bundled-es-modules/glob@10.4.2': + dependencies: + buffer: 6.0.3 + events: 3.3.0 + glob: 10.4.5 + patch-package: 8.0.0 + path: 0.12.7 + stream: 0.0.3 + string_decoder: 1.3.0 + url: 0.11.4 + + '@bundled-es-modules/memfs@4.9.4': + dependencies: + assert: 2.1.0 + buffer: 6.0.3 + events: 3.3.0 + memfs: 4.17.0 + path: 0.12.7 + stream: 0.0.3 + util: 0.12.5 + + '@bundled-es-modules/postcss-calc-ast-parser@0.1.6': + dependencies: + postcss-calc-ast-parser: 0.1.4 + '@csstools/color-helpers@5.0.2': {} '@csstools/css-calc@2.1.2(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)': @@ -13686,6 +13897,18 @@ snapshots: '@babel/runtime': 7.26.9 '@testing-library/dom': 10.4.0 + '@tokens-studio/sd-transforms@1.2.12(style-dictionary@4.3.3)': + dependencies: + '@bundled-es-modules/deepmerge': 4.3.1 + '@bundled-es-modules/postcss-calc-ast-parser': 0.1.6 + '@tokens-studio/types': 0.5.2 + colorjs.io: 0.4.5 + expr-eval-fork: 2.0.2 + is-mergeable-object: 1.1.1 + style-dictionary: 4.3.3 + + '@tokens-studio/types@0.5.2': {} + '@types/acorn@4.0.6': dependencies: '@types/estree': 1.0.6 @@ -13914,6 +14137,8 @@ snapshots: dependencies: '@types/jest': 27.5.2 + '@types/tinycolor2@1.4.6': {} + '@types/unist@2.0.11': {} '@types/unist@3.0.3': {} @@ -14582,6 +14807,10 @@ snapshots: '@xtuc/long@4.2.2': {} + '@yarnpkg/lockfile@1.1.0': {} + + '@zip.js/zip.js@2.7.57': {} + abbrev@1.1.1: {} accepts@1.3.8: @@ -14783,6 +15012,14 @@ snapshots: get-intrinsic: 1.3.0 is-array-buffer: 3.0.5 + assert@2.1.0: + dependencies: + call-bind: 1.0.8 + is-nan: 1.3.2 + object-is: 1.1.6 + object.assign: 4.1.7 + util: 0.12.5 + assertion-error@2.0.1: {} ast-types-flow@0.0.8: {} @@ -14897,6 +15134,8 @@ snapshots: asynckit@0.4.0: {} + at-least-node@1.0.0: {} + autoprefixer@10.4.20(postcss@8.5.3): dependencies: browserslist: 4.24.4 @@ -15335,6 +15574,8 @@ snapshots: chalk@5.4.1: {} + change-case@5.4.4: {} + char-regex@1.0.2: {} character-entities-html4@2.1.0: {} @@ -15479,6 +15720,8 @@ snapshots: colorette@2.0.20: {} + colorjs.io@0.4.5: {} + colors@1.4.0: {} combined-stream@1.0.8: @@ -15508,6 +15751,8 @@ snapshots: compare-versions@6.1.1: {} + component-emitter@2.0.0: {} + compressible@2.0.18: dependencies: mime-db: 1.53.0 @@ -16521,6 +16766,8 @@ snapshots: jest-message-util: 29.7.0 jest-util: 29.7.0 + expr-eval-fork@2.0.2: {} + express@4.21.2: dependencies: accepts: 1.3.8 @@ -16608,6 +16855,8 @@ snapshots: fflate@0.8.2: {} + figlet@1.8.0: {} + file-entry-cache@6.0.1: dependencies: flat-cache: 3.2.0 @@ -16665,6 +16914,10 @@ snapshots: micromatch: 4.0.8 pkg-dir: 4.2.0 + find-yarn-workspace-root@2.0.0: + dependencies: + micromatch: 4.0.8 + flat-cache@3.2.0: dependencies: flatted: 3.3.3 @@ -16723,6 +16976,13 @@ snapshots: jsonfile: 4.0.0 universalify: 0.1.2 + fs-extra@9.1.0: + dependencies: + at-least-node: 1.0.0 + graceful-fs: 4.2.11 + jsonfile: 6.1.0 + universalify: 2.0.1 + fs-merger@3.2.1: dependencies: broccoli-node-api: 1.7.0 @@ -16890,6 +17150,11 @@ snapshots: graceful-fs@4.2.11: {} + gradient-string@3.0.0: + dependencies: + chalk: 5.4.1 + tinygradient: 1.1.5 + graphemer@1.4.0: {} gulp-sort@2.0.0: @@ -17488,6 +17753,8 @@ snapshots: is-decimal@2.0.1: {} + is-docker@2.2.1: {} + is-docker@3.0.0: {} is-extglob@2.1.1: {} @@ -17525,6 +17792,13 @@ snapshots: is-map@2.0.3: {} + is-mergeable-object@1.1.1: {} + + is-nan@1.3.2: + dependencies: + call-bind: 1.0.8 + define-properties: 1.2.1 + is-negated-glob@1.0.0: {} is-network-error@1.1.0: {} @@ -17593,6 +17867,10 @@ snapshots: call-bound: 1.0.4 get-intrinsic: 1.3.0 + is-wsl@2.2.0: + dependencies: + is-docker: 2.2.1 + is-wsl@3.1.0: dependencies: is-inside-container: 1.0.0 @@ -18171,6 +18449,14 @@ snapshots: json-stable-stringify-without-jsonify@1.0.1: {} + json-stable-stringify@1.2.1: + dependencies: + call-bind: 1.0.8 + call-bound: 1.0.4 + isarray: 2.0.5 + jsonify: 0.0.1 + object-keys: 1.1.1 + json5@1.0.2: dependencies: minimist: 1.2.8 @@ -18191,6 +18477,8 @@ snapshots: optionalDependencies: graceful-fs: 4.2.11 + jsonify@0.0.1: {} + jsx-ast-utils@3.3.5: dependencies: array-includes: 3.1.8 @@ -18204,6 +18492,10 @@ snapshots: kind-of@6.0.3: {} + klaw-sync@6.0.0: + dependencies: + graceful-fs: 4.2.11 + kleur@3.0.3: {} kleur@4.1.5: {} @@ -19199,6 +19491,11 @@ snapshots: is-inside-container: 1.0.0 is-wsl: 3.1.0 + open@7.4.2: + dependencies: + is-docker: 2.2.1 + is-wsl: 2.2.0 + optionator@0.9.4: dependencies: deep-is: 0.1.4 @@ -19208,6 +19505,8 @@ snapshots: type-check: 0.4.0 word-wrap: 1.2.5 + os-tmpdir@1.0.2: {} + overlayscrollbars@2.11.1: {} own-keys@1.0.1: @@ -19331,6 +19630,24 @@ snapshots: no-case: 3.0.4 tslib: 2.8.1 + patch-package@8.0.0: + dependencies: + '@yarnpkg/lockfile': 1.1.0 + chalk: 4.1.2 + ci-info: 3.9.0 + cross-spawn: 7.0.6 + find-yarn-workspace-root: 2.0.0 + fs-extra: 9.1.0 + json-stable-stringify: 1.2.1 + klaw-sync: 6.0.0 + minimist: 1.2.8 + open: 7.4.2 + rimraf: 2.7.1 + semver: 7.7.1 + slash: 2.0.0 + tmp: 0.0.33 + yaml: 2.7.0 + path-browserify@1.0.1: {} path-exists@4.0.0: {} @@ -19367,6 +19684,13 @@ snapshots: path-type@4.0.0: {} + path-unified@0.2.0: {} + + path@0.12.7: + dependencies: + process: 0.11.10 + util: 0.10.4 + pathe@1.1.2: {} pathe@2.0.3: {} @@ -19415,6 +19739,10 @@ snapshots: possible-typed-array-names@1.1.0: {} + postcss-calc-ast-parser@0.1.4: + dependencies: + postcss-value-parser: 3.3.1 + postcss-import@15.1.0(postcss@8.5.3): dependencies: postcss: 8.5.3 @@ -19486,6 +19814,8 @@ snapshots: cssesc: 3.0.0 util-deprecate: 1.0.2 + postcss-value-parser@3.3.1: {} + postcss-value-parser@4.2.0: {} postcss@8.5.3: @@ -19568,6 +19898,8 @@ snapshots: process-nextick-args@2.0.1: {} + process@0.11.10: {} + promise-map-series@0.3.0: {} prompts@2.4.2: @@ -19597,6 +19929,8 @@ snapshots: end-of-stream: 1.4.4 once: 1.4.0 + punycode@1.4.1: {} + punycode@2.3.1: {} pure-rand@6.1.0: {} @@ -20511,6 +20845,8 @@ snapshots: arg: 5.0.2 sax: 1.4.1 + slash@2.0.0: {} + slash@3.0.0: {} slice-ansi@5.0.0: @@ -20629,6 +20965,10 @@ snapshots: stream-replace-string@2.0.0: {} + stream@0.0.3: + dependencies: + component-emitter: 2.0.0 + streamx@2.22.0: dependencies: fast-fifo: 1.3.2 @@ -20759,6 +21099,22 @@ snapshots: strip-json-comments@3.1.1: {} + style-dictionary@4.3.3: + dependencies: + '@bundled-es-modules/deepmerge': 4.3.1 + '@bundled-es-modules/glob': 10.4.2 + '@bundled-es-modules/memfs': 4.9.4 + '@zip.js/zip.js': 2.7.57 + chalk: 5.4.1 + change-case: 5.4.4 + commander: 12.1.0 + is-plain-obj: 4.1.0 + json5: 2.2.3 + patch-package: 8.0.0 + path-unified: 0.2.0 + prettier: 3.5.3 + tinycolor2: 1.6.0 + style-loader@4.0.0(webpack@5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4)): dependencies: webpack: 5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4) @@ -20960,6 +21316,8 @@ snapshots: tinybench@2.9.0: {} + tinycolor2@1.6.0: {} + tinyexec@0.3.2: {} tinyglobby@0.2.12: @@ -20967,6 +21325,11 @@ snapshots: fdir: 6.4.3(picomatch@4.0.2) picomatch: 4.0.2 + tinygradient@1.1.5: + dependencies: + '@types/tinycolor2': 1.4.6 + tinycolor2: 1.6.0 + tinypool@1.0.2: {} tinyrainbow@1.2.0: {} @@ -20981,6 +21344,10 @@ snapshots: dependencies: tldts-core: 6.1.82 + tmp@0.0.33: + dependencies: + os-tmpdir: 1.0.2 + tmpl@1.0.5: {} to-fast-properties@1.0.3: {} @@ -21300,6 +21667,11 @@ snapshots: optionalDependencies: file-loader: 6.2.0(webpack@5.98.0(webpack-cli@5.1.4)) + url@0.11.4: + dependencies: + punycode: 1.4.1 + qs: 6.13.0 + use-callback-ref@1.3.3(@types/react@17.0.83)(react@17.0.2): dependencies: react: 17.0.2 @@ -21325,6 +21697,18 @@ snapshots: util-deprecate@1.0.2: {} + util@0.10.4: + dependencies: + inherits: 2.0.3 + + util@0.12.5: + dependencies: + inherits: 2.0.4 + is-arguments: 1.2.0 + is-generator-function: 1.1.0 + is-typed-array: 1.1.15 + which-typed-array: 1.1.18 + utila@0.4.0: {} utils-merge@1.0.1: {} From 0095feeacbce6d1727980cf54e073f16708da20d Mon Sep 17 00:00:00 2001 From: Pranesh Date: Fri, 14 Mar 2025 20:54:42 +0530 Subject: [PATCH 2/5] Add tailwindcss config for design system --- packages/ui/tailwind.config.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/ui/tailwind.config.js b/packages/ui/tailwind.config.js index af1e25bf8b..18b248dc03 100644 --- a/packages/ui/tailwind.config.js +++ b/packages/ui/tailwind.config.js @@ -1,3 +1,5 @@ -import tailwind from './tailwind' +// import tailwind from './tailwind' + +import tailwind from './tailwind-design-system' export default tailwind From 61a803f21ce93a924ed27d7c209cf6ee8e9d83cd Mon Sep 17 00:00:00 2001 From: Pranesh Date: Mon, 17 Mar 2025 23:08:17 +0530 Subject: [PATCH 3/5] Add common build for CSS and JS and remove design tokens from UI package --- apps/gitness/src/test-component.tsx | 100 +- .../export-tokens-uni/build.js | 275 + .../export-tokens-uni/complete-log.js | 26 + .../export-tokens-uni/constants.js | 31 + .../export-tokens-uni/sd-file-generators.js | 78 + .../export-tokens-uni/sd-filters.js | 30 + packages/core-design-system/package.json | 2 + .../src/styles-esm/breakpoint.ts | 2 +- .../src/styles-esm/colors.ts | 2 +- .../src/styles-esm/components.ts | 1734 ++-- .../core-design-system/src/styles-esm/core.ts | 2 +- .../src/styles-esm/index.ts | 2 +- .../styles-esm/source-dark-desktop-gitness.ts | 39 +- .../styles-esm/source-dark-desktop-harness.ts | 39 +- ...ource-dark-deuteranopia-desktop-gitness.ts | 43 +- ...ource-dark-deuteranopia-desktop-harness.ts | 43 +- .../source-dark-dimmer-desktop-gitness.ts | 43 +- .../source-dark-dimmer-desktop-harness.ts | 43 +- ...ark-dimmer-deuteranopia-desktop-gitness.ts | 43 +- ...ark-dimmer-deuteranopia-desktop-harness.ts | 43 +- ...-dark-dimmer-protanopia-desktop-gitness.ts | 43 +- ...-dark-dimmer-protanopia-desktop-harness.ts | 43 +- ...-dark-dimmer-tritanopia-desktop-gitness.ts | 43 +- ...-dark-dimmer-tritanopia-desktop-harness.ts | 43 +- ...urce-dark-high-contrast-desktop-gitness.ts | 43 +- ...urce-dark-high-contrast-desktop-harness.ts | 43 +- ...h-contrast-deuteranopia-desktop-gitness.ts | 43 +- ...h-contrast-deuteranopia-desktop-harness.ts | 43 +- ...igh-contrast-protanopia-desktop-gitness.ts | 43 +- ...igh-contrast-protanopia-desktop-harness.ts | 43 +- ...igh-contrast-tritanopia-desktop-gitness.ts | 43 +- ...igh-contrast-tritanopia-desktop-harness.ts | 43 +- .../source-dark-protanopia-desktop-gitness.ts | 43 +- .../source-dark-protanopia-desktop-harness.ts | 43 +- .../source-dark-tritanopia-desktop-gitness.ts | 43 +- .../source-dark-tritanopia-desktop-harness.ts | 43 +- .../source-light-desktop-gitness.ts | 27 +- .../source-light-desktop-harness.ts | 27 +- ...urce-light-deuteranopia-desktop-gitness.ts | 27 +- ...urce-light-deuteranopia-desktop-harness.ts | 27 +- .../source-light-dimmer-desktop-gitness.ts | 27 +- .../source-light-dimmer-desktop-harness.ts | 27 +- ...ght-dimmer-deuteranopia-desktop-gitness.ts | 27 +- ...ght-dimmer-deuteranopia-desktop-harness.ts | 27 +- ...light-dimmer-protanopia-desktop-gitness.ts | 27 +- ...light-dimmer-protanopia-desktop-harness.ts | 27 +- ...light-dimmer-tritanopia-desktop-gitness.ts | 27 +- ...light-dimmer-tritanopia-desktop-harness.ts | 27 +- ...rce-light-high-contrast-desktop-gitness.ts | 27 +- ...rce-light-high-contrast-desktop-harness.ts | 27 +- ...h-contrast-deuteranopia-desktop-gitness.ts | 27 +- ...h-contrast-deuteranopia-desktop-harness.ts | 27 +- ...igh-contrast-protanopia-desktop-gitness.ts | 27 +- ...igh-contrast-protanopia-desktop-harness.ts | 27 +- ...igh-contrast-tritanopia-desktop-gitness.ts | 27 +- ...igh-contrast-tritanopia-desktop-harness.ts | 27 +- ...source-light-protanopia-desktop-gitness.ts | 27 +- ...source-light-protanopia-desktop-harness.ts | 27 +- ...source-light-tritanopia-desktop-gitness.ts | 27 +- ...source-light-tritanopia-desktop-harness.ts | 27 +- .../src/styles/breakpoint.css | 2 +- .../core-design-system/src/styles/colors.css | 2 +- .../src/styles/components.css | 62 +- .../core-design-system/src/styles/core.css | 170 +- .../core-design-system/src/styles/index.css | 2 +- .../styles/source-dark-desktop-gitness.css | 7 +- .../styles/source-dark-desktop-harness.css | 7 +- ...urce-dark-deuteranopia-desktop-gitness.css | 7 +- ...urce-dark-deuteranopia-desktop-harness.css | 7 +- .../source-dark-dimmer-desktop-gitness.css | 7 +- .../source-dark-dimmer-desktop-harness.css | 7 +- ...rk-dimmer-deuteranopia-desktop-gitness.css | 7 +- ...rk-dimmer-deuteranopia-desktop-harness.css | 7 +- ...dark-dimmer-protanopia-desktop-gitness.css | 7 +- ...dark-dimmer-protanopia-desktop-harness.css | 7 +- ...dark-dimmer-tritanopia-desktop-gitness.css | 7 +- ...dark-dimmer-tritanopia-desktop-harness.css | 7 +- ...rce-dark-high-contrast-desktop-gitness.css | 7 +- ...rce-dark-high-contrast-desktop-harness.css | 7 +- ...-contrast-deuteranopia-desktop-gitness.css | 7 +- ...-contrast-deuteranopia-desktop-harness.css | 7 +- ...gh-contrast-protanopia-desktop-gitness.css | 7 +- ...gh-contrast-protanopia-desktop-harness.css | 7 +- ...gh-contrast-tritanopia-desktop-gitness.css | 7 +- ...gh-contrast-tritanopia-desktop-harness.css | 7 +- ...source-dark-protanopia-desktop-gitness.css | 7 +- ...source-dark-protanopia-desktop-harness.css | 7 +- ...source-dark-tritanopia-desktop-gitness.css | 7 +- ...source-dark-tritanopia-desktop-harness.css | 7 +- .../styles/source-light-desktop-gitness.css | 5 +- .../styles/source-light-desktop-harness.css | 5 +- ...rce-light-deuteranopia-desktop-gitness.css | 5 +- ...rce-light-deuteranopia-desktop-harness.css | 5 +- .../source-light-dimmer-desktop-gitness.css | 5 +- .../source-light-dimmer-desktop-harness.css | 5 +- ...ht-dimmer-deuteranopia-desktop-gitness.css | 5 +- ...ht-dimmer-deuteranopia-desktop-harness.css | 5 +- ...ight-dimmer-protanopia-desktop-gitness.css | 5 +- ...ight-dimmer-protanopia-desktop-harness.css | 5 +- ...ight-dimmer-tritanopia-desktop-gitness.css | 5 +- ...ight-dimmer-tritanopia-desktop-harness.css | 5 +- ...ce-light-high-contrast-desktop-gitness.css | 5 +- ...ce-light-high-contrast-desktop-harness.css | 5 +- ...-contrast-deuteranopia-desktop-gitness.css | 5 +- ...-contrast-deuteranopia-desktop-harness.css | 5 +- ...gh-contrast-protanopia-desktop-gitness.css | 5 +- ...gh-contrast-protanopia-desktop-harness.css | 5 +- ...gh-contrast-tritanopia-desktop-gitness.css | 5 +- ...gh-contrast-tritanopia-desktop-harness.css | 5 +- ...ource-light-protanopia-desktop-gitness.css | 5 +- ...ource-light-protanopia-desktop-harness.css | 5 +- ...ource-light-tritanopia-desktop-gitness.css | 5 +- ...ource-light-tritanopia-desktop-harness.css | 5 +- packages/ui/design-tokens/$metadata.json | 42 - packages/ui/design-tokens/$themes.json | 8903 ----------------- packages/ui/design-tokens/brand/Gitness.json | 96 - packages/ui/design-tokens/brand/Harness.json | 96 - .../ui/design-tokens/breakpoint/desktop.json | 293 - .../components/desktop/base/badge.json | 46 - .../components/desktop/base/btn.json | 102 - .../desktop/base/dropdown menu.json | 93 - .../components/desktop/base/input.json | 35 - .../components/desktop/base/pagination.json | 20 - .../components/desktop/base/tag.json | 56 - .../components/desktop/base/tooltip.json | 18 - .../ui/design-tokens/core/colors_hex.json | 547 - .../ui/design-tokens/core/colors_lch.json | 547 - .../ui/design-tokens/core/dimensions.json | 388 - .../ui/design-tokens/core/typography.json | 649 -- .../mode/dark/default-deuteranopia.json | 2342 ----- .../mode/dark/default-protanopia.json | 2342 ----- .../mode/dark/default-tritanopia.json | 2342 ----- .../ui/design-tokens/mode/dark/default.json | 2347 ----- .../mode/dark/dimmer-deuteranopia.json | 2333 ----- .../mode/dark/dimmer-protanopia.json | 2333 ----- .../mode/dark/dimmer-tritanopia.json | 2331 ----- .../ui/design-tokens/mode/dark/dimmer.json | 2333 ----- .../mode/dark/high-contrast-deuteranopia.json | 2342 ----- .../mode/dark/high-contrast-protanopia.json | 2342 ----- .../mode/dark/high-contrast-tritanopia.json | 2342 ----- .../mode/dark/high-contrast.json | 2342 ----- .../mode/light/default-deuteranopia.json | 2355 ----- .../mode/light/default-protanopia.json | 2355 ----- .../mode/light/default-tritanopia.json | 2355 ----- .../ui/design-tokens/mode/light/default.json | 2355 ----- .../mode/light/dimmer-deuteranopia.json | 2364 ----- .../mode/light/dimmer-protanopia.json | 2364 ----- .../mode/light/dimmer-tritanopia.json | 2364 ----- .../ui/design-tokens/mode/light/dimmer.json | 2364 ----- .../light/high-contrast-deuteranopia.json | 2355 ----- .../mode/light/high-contrast-protanopia.json | 2355 ----- .../mode/light/high-contrast-tritanopia.json | 2355 ----- .../mode/light/high-contrast.json | 2355 ----- packages/ui/src/components/badge/badge.tsx | 152 +- packages/ui/src/styles.css | 3 +- packages/ui/tailwind-design-system.ts | 152 +- .../tailwind-utils-config/components/badge.ts | 79 + .../tailwind-utils-config/components/index.ts | 1 + .../tailwind-utils-config/utilities/index.ts | 1 + .../utilities/typography.ts | 10 + 160 files changed, 3190 insertions(+), 69988 deletions(-) create mode 100644 packages/core-design-system/export-tokens-uni/build.js create mode 100644 packages/core-design-system/export-tokens-uni/complete-log.js create mode 100644 packages/core-design-system/export-tokens-uni/constants.js create mode 100644 packages/core-design-system/export-tokens-uni/sd-file-generators.js create mode 100644 packages/core-design-system/export-tokens-uni/sd-filters.js delete mode 100644 packages/ui/design-tokens/$metadata.json delete mode 100644 packages/ui/design-tokens/$themes.json delete mode 100644 packages/ui/design-tokens/brand/Gitness.json delete mode 100644 packages/ui/design-tokens/brand/Harness.json delete mode 100644 packages/ui/design-tokens/breakpoint/desktop.json delete mode 100644 packages/ui/design-tokens/components/desktop/base/badge.json delete mode 100644 packages/ui/design-tokens/components/desktop/base/btn.json delete mode 100644 packages/ui/design-tokens/components/desktop/base/dropdown menu.json delete mode 100644 packages/ui/design-tokens/components/desktop/base/input.json delete mode 100644 packages/ui/design-tokens/components/desktop/base/pagination.json delete mode 100644 packages/ui/design-tokens/components/desktop/base/tag.json delete mode 100644 packages/ui/design-tokens/components/desktop/base/tooltip.json delete mode 100644 packages/ui/design-tokens/core/colors_hex.json delete mode 100644 packages/ui/design-tokens/core/colors_lch.json delete mode 100644 packages/ui/design-tokens/core/dimensions.json delete mode 100644 packages/ui/design-tokens/core/typography.json delete mode 100644 packages/ui/design-tokens/mode/dark/default-deuteranopia.json delete mode 100644 packages/ui/design-tokens/mode/dark/default-protanopia.json delete mode 100644 packages/ui/design-tokens/mode/dark/default-tritanopia.json delete mode 100644 packages/ui/design-tokens/mode/dark/default.json delete mode 100644 packages/ui/design-tokens/mode/dark/dimmer-deuteranopia.json delete mode 100644 packages/ui/design-tokens/mode/dark/dimmer-protanopia.json delete mode 100644 packages/ui/design-tokens/mode/dark/dimmer-tritanopia.json delete mode 100644 packages/ui/design-tokens/mode/dark/dimmer.json delete mode 100644 packages/ui/design-tokens/mode/dark/high-contrast-deuteranopia.json delete mode 100644 packages/ui/design-tokens/mode/dark/high-contrast-protanopia.json delete mode 100644 packages/ui/design-tokens/mode/dark/high-contrast-tritanopia.json delete mode 100644 packages/ui/design-tokens/mode/dark/high-contrast.json delete mode 100644 packages/ui/design-tokens/mode/light/default-deuteranopia.json delete mode 100644 packages/ui/design-tokens/mode/light/default-protanopia.json delete mode 100644 packages/ui/design-tokens/mode/light/default-tritanopia.json delete mode 100644 packages/ui/design-tokens/mode/light/default.json delete mode 100644 packages/ui/design-tokens/mode/light/dimmer-deuteranopia.json delete mode 100644 packages/ui/design-tokens/mode/light/dimmer-protanopia.json delete mode 100644 packages/ui/design-tokens/mode/light/dimmer-tritanopia.json delete mode 100644 packages/ui/design-tokens/mode/light/dimmer.json delete mode 100644 packages/ui/design-tokens/mode/light/high-contrast-deuteranopia.json delete mode 100644 packages/ui/design-tokens/mode/light/high-contrast-protanopia.json delete mode 100644 packages/ui/design-tokens/mode/light/high-contrast-tritanopia.json delete mode 100644 packages/ui/design-tokens/mode/light/high-contrast.json create mode 100644 packages/ui/tailwind-utils-config/components/badge.ts create mode 100644 packages/ui/tailwind-utils-config/components/index.ts create mode 100644 packages/ui/tailwind-utils-config/utilities/index.ts create mode 100644 packages/ui/tailwind-utils-config/utilities/typography.ts diff --git a/apps/gitness/src/test-component.tsx b/apps/gitness/src/test-component.tsx index d6ac785fbd..322f0b7e64 100644 --- a/apps/gitness/src/test-component.tsx +++ b/apps/gitness/src/test-component.tsx @@ -1,7 +1,7 @@ import { useMemo } from 'react' import * as styles from '@harnessio/core-design-system/styles-esm' -import { Badge, Text, Tooltip, TooltipContent, TooltipTrigger } from '@harnessio/ui/components' +import { Badge, Icon, Text, Tooltip } from '@harnessio/ui/components' export default function TestComponent() { const colorPalette = useMemo(() => { @@ -22,13 +22,73 @@ export default function TestComponent() {
Default + outline Success warning danger running merged ai - {/* Danger */} +
+ + + Rounded full + + +
+ Default + + outline + + + {/* Success */} + Success + + + warning + + + danger + + + running + + + merged + + + ai + +
+ + + Size sm + + +
+ Default + + outline + + + {/* Success */} + Success + + + warning + + + danger + + + running + + + merged + + + ai +
@@ -67,28 +127,20 @@ export default function TestComponent() { return (
- {/* */} - {/* */} -
- {/* */} - {/* - --{color?.name}: {colorValue} - */} - {/* */} - {/*
*/} + + +
+ + + --{color?.name}: {colorValue} + +
) })} diff --git a/packages/core-design-system/export-tokens-uni/build.js b/packages/core-design-system/export-tokens-uni/build.js new file mode 100644 index 0000000000..6159206b33 --- /dev/null +++ b/packages/core-design-system/export-tokens-uni/build.js @@ -0,0 +1,275 @@ +import fs from 'node:fs/promises' + +import { permutateThemes, register } from '@tokens-studio/sd-transforms' +import StyleDictionary from 'style-dictionary' +import { getReferences, usesReferences } from 'style-dictionary/utils' + +import { harnessLog } from './complete-log.js' +import { + COMMON_CONFIG, + DESIGN_SYSTEM_PREFIX, + DESIGN_SYSTEM_ROOT, + DESIGN_SYSTEM_ROOT_ESM, + STYLE_BUILD_FORMATS +} from './constants.js' +import { generateCoreFiles, generateThemeFiles } from './sd-file-generators.js' + +register(StyleDictionary) + +async function run() { + const $themes = JSON.parse(await fs.readFile('design-tokens/$themes.json')) + const themes = permutateThemes($themes) + // collect all tokensets for all themes and dedupe + const tokensets = [...new Set(Object.values(themes).reduce((acc, sets) => [...acc, ...sets], []))] + + // figure out which tokensets are theme-specific + // this is determined by checking if a certain tokenset is used for EVERY theme dimension variant + // if it is, then it is not theme-specific + const themeableSets = tokensets.filter(set => { + return !Object.values(themes).every(sets => sets.includes(set)) + }) + + const configs = Object.entries(themes).map(([theme, sets]) => { + return { + source: sets.map(tokenset => `design-tokens/${tokenset}.json`), + preprocessors: ['tokens-studio'], + platforms: { + css: { + ...COMMON_CONFIG, + files: [ + // core tokens (colors, typography, dimensions, components) + ...generateCoreFiles({ + destination: DESIGN_SYSTEM_ROOT, + type: 'css', + format: STYLE_BUILD_FORMATS.CSS_VARIABLES + }), + // semantic tokens, e.g. for application developer + ...generateThemeFiles({ + theme, + destination: DESIGN_SYSTEM_ROOT, + type: 'css', + format: STYLE_BUILD_FORMATS.CSS_VARIABLES + }) + ] + }, + js: { + ...COMMON_CONFIG, + files: [ + // core tokens (colors, typography, dimensions, components) + ...generateCoreFiles({ + destination: DESIGN_SYSTEM_ROOT_ESM, + type: 'ts', + format: STYLE_BUILD_FORMATS.JS_ESM + }), + // semantic tokens, e.g. for application developer + ...generateThemeFiles({ + theme, + destination: DESIGN_SYSTEM_ROOT_ESM, + type: 'ts', + format: STYLE_BUILD_FORMATS.JS_ESM + }) + ] + } + } + } + }) + + for (const cfg of configs) { + const sd = new StyleDictionary(cfg, { + // verbosity: 'verbose' + }) + + /** + * This transform checks for each token whether that token's value could change + * due to Tokens Studio theming. + * Any tokenset from Tokens Studio marked as "enabled" in the $themes.json is considered + * a set in which any token could change if the theme changes. + * Any token that is inside such a set or is a reference with a token in that reference chain + * that is inside such a set, is considered "themeable", + * which means it could change by theme switching. + * + * This metadata is applied to the token so we can use it as a way of filtering outputs + * later in the "format" stage. + */ + sd.registerTransform({ + name: 'attribute/themeable', + type: 'attribute', + transform: token => { + function isPartOfEnabledSet(token) { + const set = token.filePath.replace(/^design-tokens\//g, '').replace(/.json$/g, '') + return themeableSets.includes(set) + } + + // Set token to themeable if it's part of an enabled set + if (isPartOfEnabledSet(token)) { + return { + themeable: true + } + } + + // Set token to themeable if it's using a reference and inside the reference chain + // any one of them is from a themeable set + if (usesReferences(token.original.$value)) { + const refs = getReferences(token.original.$value, sd.tokens) + + if (refs.some(ref => isPartOfEnabledSet(ref))) { + return { + themeable: true + } + } + } + } + }) + + sd.registerTransform({ + name: 'ts/transform/alpha', + type: 'value', + filter: prop => { + return ( + prop.$extensions?.['studio.tokens']?.modify?.type === 'alpha' && + prop.$extensions?.['studio.tokens']?.modify?.space === 'lch' + ) + }, + transitive: true, + transform: prop => { + const baseColor = prop.original.$value.replace(/[{}]/g, '').replace(/\./g, '-') + const alphaValue = prop.$extensions['studio.tokens'].modify.value + return `lch(from var(--${DESIGN_SYSTEM_PREFIX}-${baseColor}) l c h / ${alphaValue})` + } + }) + + await sd.cleanAllPlatforms() + await sd.buildAllPlatforms() + } + + console.log('\n\x1b[1m\x1b[32m%s\x1b[0m', '✔︎ Generated style tokens successfully!') + + // Create index.css that imports all generated files + await createIndexFile() + await createEsmIndexFile() + + harnessLog() +} + +async function createIndexFile() { + console.log('\n\x1b[34mCreating styles/index.css import file...\x1b[0m') + + // Get list of all CSS files + const cssFiles = (await fs.readdir(DESIGN_SYSTEM_ROOT)) + .filter(file => file.endsWith('.css') && file !== 'index.css') + .sort() + + // Organize files by type + const coreFiles = cssFiles.filter(file => !file.startsWith('source-')) + const darkFiles = cssFiles.filter(file => file.includes('-dark-')) + const lightFiles = cssFiles.filter(file => file.includes('-light-')) + + console.log('\n=== Theme File Summary (css) ===') + console.table({ + 'Dark Theme Files': { count: darkFiles.length }, + 'Light Theme Files': { count: lightFiles.length } + }) + console.log('\n') + + // Generate content + const content = `/** + * Harness Design System + * Main stylesheet importing all token files + * DO NOT UPDATE IT MANUALLY + * Generated on ${new Date().toUTCString()} + */ + +/* Core tokens */ +${coreFiles.map(file => `@import './${file}';`).join('\n')} + +/* Theme files - Dark */ +${darkFiles.map(file => `@import './${file}';`).join('\n')} + +/* Theme files - Light */ +${lightFiles.map(file => `@import './${file}';`).join('\n')}; +` + + // Write file + await fs.writeFile(`${DESIGN_SYSTEM_ROOT}/index.css`, content) + + console.log( + '\n\x1b[1m\x1b[32m%s\x1b[0m', + `✔︎ Created ${DESIGN_SYSTEM_ROOT}/index.css with imports to all token files` + ) +} + +async function createEsmIndexFile() { + console.log('\n\x1b[34mCreating styles/index.ts import file...\x1b[0m') + + // Get list of all JS files + const styleValueFiles = (await fs.readdir(DESIGN_SYSTEM_ROOT_ESM)) + .filter(file => file.endsWith('.ts') && file !== 'index.ts') + .sort() + + // Organize files by type + const coreFiles = styleValueFiles.filter(file => !file.startsWith('source-')) + const darkFiles = styleValueFiles.filter(file => file.includes('-dark-')) + const lightFiles = styleValueFiles.filter(file => file.includes('-light-')) + + console.log('\n=== Theme File Summary (ts) ===') + console.table({ + 'Dark Theme Files': { count: darkFiles.length }, + 'Light Theme Files': { count: lightFiles.length } + }) + console.log('\n') + + // Generate content + const content = `/** + * Harness Design System + * DO NOT UPDATE IT MANUALLY + * Generated on ${new Date().toUTCString()} + */ + + /* Theme files - Combined */ +export const designSystemThemeMap = { +${[...darkFiles, ...lightFiles] + .map(file => { + const name = file.replace('.ts', '') + return `'${name}': '${name}',` + }) + .join('\n')} +} + +/* Core tokens */ +${coreFiles + .map(file => { + const fileName = file.replace('.ts', '') + const name = fileName.replace(/-./g, x => x[1].toUpperCase()) + return `export { default as ${name} } from './${fileName}';` + }) + .join('\n')} + +/* Theme files - Dark */ +${darkFiles + .map(file => { + const fileName = file.replace('.ts', '') + const name = fileName.replace(/-./g, x => x[1].toUpperCase()) + return `export { default as ${name} } from './${fileName}';` + }) + .join('\n')} + +/* Theme files - Light */ +${lightFiles + .map(file => { + const fileName = file.replace('.ts', '') + const name = fileName.replace(/-./g, x => x[1].toUpperCase()) + return `export { default as ${name} } from './${fileName}';` + }) + .join('\n')}; +` + + // Write file + await fs.writeFile(`${DESIGN_SYSTEM_ROOT_ESM}/index.ts`, content) + + console.log( + '\n\x1b[1m\x1b[32m%s\x1b[0m', + `✔︎ Created ${DESIGN_SYSTEM_ROOT_ESM}/index.ts with imports to all token files` + ) +} + +run() diff --git a/packages/core-design-system/export-tokens-uni/complete-log.js b/packages/core-design-system/export-tokens-uni/complete-log.js new file mode 100644 index 0000000000..c256887386 --- /dev/null +++ b/packages/core-design-system/export-tokens-uni/complete-log.js @@ -0,0 +1,26 @@ +import chalkAnimation from 'chalk-animation' +import figlet from 'figlet' +import { summer } from 'gradient-string' + +export function harnessLog() { + console.log('\n') + figlet( + 'Harness Design System!!', + { + font: 'Big', + horizontalLayout: 'default', + verticalLayout: 'default', + width: 120, + whitespaceBreak: true + }, + function (err, data) { + if (err) { + console.log('Something went wrong...') + console.dir(err) + return + } + console.log(summer(data)) + // chalkAnimation.rainbow(data).start() + } + ) +} diff --git a/packages/core-design-system/export-tokens-uni/constants.js b/packages/core-design-system/export-tokens-uni/constants.js new file mode 100644 index 0000000000..31f5a3c04b --- /dev/null +++ b/packages/core-design-system/export-tokens-uni/constants.js @@ -0,0 +1,31 @@ +import { formats } from 'style-dictionary/enums' + +export const DESIGN_SYSTEM_ROOT = 'src/styles' +export const DESIGN_SYSTEM_ROOT_ESM = 'src/styles-esm' + +export const DESIGN_SYSTEM_PREFIX = 'canary' + +export const STYLE_BUILD_FORMATS = { + CSS_VARIABLES: formats.cssVariables, + JS_ESM: formats.javascriptEsm +} + +/** + * Shared common config for css and ts style generation + */ +export const COMMON_CONFIG = { + transformGroup: 'tokens-studio', + prefix: DESIGN_SYSTEM_PREFIX, + options: { + fileHeader: () => { + return [ + 'Harness Design System', + 'Generated style tokens - DO NOT EDIT DIRECTLY', + `Generated on ${new Date().toUTCString()}`, + 'Copyright (c) Harness.' + ] + } + }, + transforms: ['name/kebab', 'attribute/themeable', 'ts/transform/alpha'] + // transformGroup: 'tokens-studio' +} diff --git a/packages/core-design-system/export-tokens-uni/sd-file-generators.js b/packages/core-design-system/export-tokens-uni/sd-file-generators.js new file mode 100644 index 0000000000..8d094a8d73 --- /dev/null +++ b/packages/core-design-system/export-tokens-uni/sd-file-generators.js @@ -0,0 +1,78 @@ +import { breakpointFilter, componentsFilter, coreFilter, lchColorsFilter, semanticFilter } from './sd-filters.js' + +// const format = 'css/variables' + +// ✨ Building core tokens +export const generateCoreFiles = ({ destination, type, format }) => [ + { + destination: `${destination}/core.${type}`, + format, + filter: coreFilter, + options: { + outputReferences: false + } + }, + { + destination: `${destination}/colors.${type}`, + format, + filter: lchColorsFilter, + options: { + outputReferences: true + } + }, + { + destination: `${destination}/breakpoint.${type}`, + format, + filter: breakpointFilter, + options: { + outputReferences: true + } + }, + { + destination: `${destination}/components.${type}`, + format, + filter: componentsFilter, + options: { + outputReferences: true + } + } +] + +// ✨ Building theme-specific tokens +export const generateThemeFiles = ({ destination, type, theme, format }) => { + const filesArr = [] + // theme-specific outputs + filesArr.push({ + format, + filter: semanticFilter(true), + destination: `${destination}/${theme.toLowerCase()}.${type}`, + options: { + outputReferences: token => { + // ADD REFERENCE ONLY TO NON-ALPHA TOKENS, ALPHA TOKENS ARE TRANSFORMED AND REFERENCED MANUALLY + return token?.$extensions?.['studio.tokens']?.modify?.type !== 'alpha' + }, + selector: `.${theme.toLowerCase()}` + } + }) + return filesArr +} + +// for each component (currently only button), filter those specific component tokens and output them +// to the component folder where the component source code will live +// export const generateComponentFiles = components => { +// const filesArr = [] + +// for (const comp of components) { +// filesArr.push({ +// format, +// filter: componentFilter(comp, true), +// options: { +// // since these will be used in ShadowDOM +// selector: ':host', +// outputReferences: outputReferencesTransformed +// }, +// destination: `components/${comp}/${comp}.css` +// }) +// } +// return filesArr +// } diff --git a/packages/core-design-system/export-tokens-uni/sd-filters.js b/packages/core-design-system/export-tokens-uni/sd-filters.js new file mode 100644 index 0000000000..b0f2b3635f --- /dev/null +++ b/packages/core-design-system/export-tokens-uni/sd-filters.js @@ -0,0 +1,30 @@ +/** + * filters only tokens originating from core folder, except colors.json + * All the colors will be updated manually. + * 🚨 TODO: UPDATE THE COLORS FILE NAME HERE 🚨 + * */ +// && !token.filePath.startsWith('design-tokens/core/colors.json') +export const coreFilter = token => + token.filePath.startsWith('design-tokens/core/') && !token.filePath.startsWith('design-tokens/core/colors_') + +export const lchColorsFilter = token => + token.filePath.startsWith('design-tokens/core/') && token.filePath.startsWith('design-tokens/core/colors_lch') + +// filters only tokens originating from breakpoint folder +export const breakpointFilter = token => token.filePath.startsWith('design-tokens/breakpoint/') + +// filters only tokens originating from components folder +export const componentsFilter = token => token.filePath.startsWith('design-tokens/components/') + +// filters only tokens originating from semantic sets (not core, not components) and also check themeable or not +export const semanticFilter = + (themeable = false) => + token => { + const themeDimensions = ['mode', 'brand'] + const tokenThemable = Boolean(token.attributes.themeable) + // return true; + return ( + themeable === tokenThemable && + [...themeDimensions].some(cat => token.filePath.startsWith(`design-tokens/${cat}/`)) + ) + } diff --git a/packages/core-design-system/package.json b/packages/core-design-system/package.json index dbbd8e3af9..b8ddcd3d06 100644 --- a/packages/core-design-system/package.json +++ b/packages/core-design-system/package.json @@ -12,6 +12,7 @@ "build:styles": "rm -rf src/styles/design-system && node export-tokens/build.js", "build:styles:esm": "rm -rf src/styles/design-system && node export-tokens-js/build.js", "build": " pnpm clean && npm run build:styles && npm run build:styles:esm", + "build:uni": " pnpm clean && node export-tokens-uni/build.js", "clean": "rimraf ./src/styles && rimraf ./src/styles-esm" }, "keywords": [ @@ -23,6 +24,7 @@ "license": "ISC", "devDependencies": { "@tokens-studio/sd-transforms": "^1.2.9", + "chalk-animation": "^2.0.3", "figlet": "^1.8.0", "gradient-string": "^3.0.0", "rimraf": "^6.0.1", diff --git a/packages/core-design-system/src/styles-esm/breakpoint.ts b/packages/core-design-system/src/styles-esm/breakpoint.ts index 20f3344511..ab93353388 100644 --- a/packages/core-design-system/src/styles-esm/breakpoint.ts +++ b/packages/core-design-system/src/styles-esm/breakpoint.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:54 GMT + * Generated on Mon, 17 Mar 2025 12:07:32 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/colors.ts b/packages/core-design-system/src/styles-esm/colors.ts index 4af41efebc..c851523beb 100644 --- a/packages/core-design-system/src/styles-esm/colors.ts +++ b/packages/core-design-system/src/styles-esm/colors.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:54 GMT + * Generated on Mon, 17 Mar 2025 12:07:32 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/components.ts b/packages/core-design-system/src/styles-esm/components.ts index e40b400365..22c9e34b68 100644 --- a/packages/core-design-system/src/styles-esm/components.ts +++ b/packages/core-design-system/src/styles-esm/components.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:54 GMT + * Generated on Mon, 17 Mar 2025 12:07:32 GMT * Copyright (c) Harness. */ @@ -178,100 +178,122 @@ export default { path: ["input", "py"], }, }, - dropdown: { - item: { - px: { + btn: { + size: { + sm: { $type: "dimension", - $value: "4px", - $description: "4px\n", - filePath: "design-tokens/components/desktop/base/dropdown menu.json", + $value: "28px", + filePath: "design-tokens/components/desktop/base/btn.json", isSource: true, $extensions: { "studio.tokens": { - originalType: "spacing", + originalType: "sizing", }, }, original: { $type: "dimension", - $value: "{spacing.1}", - $description: "4px\n", + $value: "{size.7}", $extensions: { "studio.tokens": { - originalType: "spacing", + originalType: "sizing", }, }, }, - name: "canary-dropdown-item-px", + name: "canary-btn-size-sm", attributes: { - category: "dropdown", - type: "item", - item: "px", + category: "btn", + type: "size", + item: "sm", }, - path: ["dropdown", "item", "px"], + path: ["btn", "size", "sm"], }, - gap: { + default: { $type: "dimension", - $value: "10px", - $description: "8px", - filePath: "design-tokens/components/desktop/base/dropdown menu.json", + $value: "32px", + filePath: "design-tokens/components/desktop/base/btn.json", isSource: true, $extensions: { "studio.tokens": { - originalType: "spacing", + originalType: "sizing", }, }, original: { $type: "dimension", - $value: "{spacing.2-half}", - $description: "8px", + $value: "{size.8}", $extensions: { "studio.tokens": { - originalType: "spacing", + originalType: "sizing", }, }, }, - name: "canary-dropdown-item-gap", + name: "canary-btn-size-default", attributes: { - category: "dropdown", - type: "item", - item: "gap", + category: "btn", + type: "size", + item: "default", }, - path: ["dropdown", "item", "gap"], + path: ["btn", "size", "default"], }, - radius: { + icon: { $type: "dimension", - $value: "2px", - filePath: "design-tokens/components/desktop/base/dropdown menu.json", + $value: "32px", + filePath: "design-tokens/components/desktop/base/btn.json", isSource: true, $extensions: { "studio.tokens": { - originalType: "borderRadius", + originalType: "sizing", }, }, original: { $type: "dimension", - $value: "{dropdown.sub-item.radius}", + $value: "{size.8}", $extensions: { "studio.tokens": { - originalType: "borderRadius", + originalType: "sizing", }, }, }, - name: "canary-dropdown-item-radius", + name: "canary-btn-size-icon", attributes: { - category: "dropdown", - type: "item", - item: "radius", + category: "btn", + type: "size", + item: "icon", }, - path: ["dropdown", "item", "radius"], + path: ["btn", "size", "icon"], + }, + lg: { + $type: "dimension", + $value: "40px", + filePath: "design-tokens/components/desktop/base/btn.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "{size.10}", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-btn-size-lg", + attributes: { + category: "btn", + type: "size", + item: "lg", + }, + path: ["btn", "size", "lg"], }, }, - "sub-item": { - px: { + gap: { + sm: { $type: "dimension", - $value: "12px", - $description: "12px", - filePath: "design-tokens/components/desktop/base/dropdown menu.json", + $value: "6px", + filePath: "design-tokens/components/desktop/base/btn.json", isSource: true, $extensions: { "studio.tokens": { @@ -280,27 +302,25 @@ export default { }, original: { $type: "dimension", - $value: "{spacing.3}", - $description: "12px", + $value: "{spacing.1-half}", $extensions: { "studio.tokens": { originalType: "spacing", }, }, }, - name: "canary-dropdown-sub-item-px", + name: "canary-btn-gap-sm", attributes: { - category: "dropdown", - type: "sub-item", - item: "px", + category: "btn", + type: "gap", + item: "sm", }, - path: ["dropdown", "sub-item", "px"], + path: ["btn", "gap", "sm"], }, - py: { + default: { $type: "dimension", - $value: "8px", - $description: "8px", - filePath: "design-tokens/components/desktop/base/dropdown menu.json", + $value: "6px", + filePath: "design-tokens/components/desktop/base/btn.json", isSource: true, $extensions: { "studio.tokens": { @@ -309,26 +329,25 @@ export default { }, original: { $type: "dimension", - $value: "{spacing.2}", - $description: "8px", + $value: "{spacing.1-half}", $extensions: { "studio.tokens": { originalType: "spacing", }, }, }, - name: "canary-dropdown-sub-item-py", + name: "canary-btn-gap-default", attributes: { - category: "dropdown", - type: "sub-item", - item: "py", + category: "btn", + type: "gap", + item: "default", }, - path: ["dropdown", "sub-item", "py"], + path: ["btn", "gap", "default"], }, - gap: { + lg: { $type: "dimension", $value: "10px", - filePath: "design-tokens/components/desktop/base/dropdown menu.json", + filePath: "design-tokens/components/desktop/base/btn.json", isSource: true, $extensions: { "studio.tokens": { @@ -344,18 +363,20 @@ export default { }, }, }, - name: "canary-dropdown-sub-item-gap", + name: "canary-btn-gap-lg", attributes: { - category: "dropdown", - type: "sub-item", - item: "gap", + category: "btn", + type: "gap", + item: "lg", }, - path: ["dropdown", "sub-item", "gap"], + path: ["btn", "gap", "lg"], }, + }, + default: { radius: { $type: "dimension", - $value: "2px", - filePath: "design-tokens/components/desktop/base/dropdown menu.json", + $value: "4px", + filePath: "design-tokens/components/desktop/base/btn.json", isSource: true, $extensions: { "studio.tokens": { @@ -364,53 +385,82 @@ export default { }, original: { $type: "dimension", - $value: "{rounded.1}", + $value: "{rounded.2}", $extensions: { "studio.tokens": { originalType: "borderRadius", }, }, }, - name: "canary-dropdown-sub-item-radius", + name: "canary-btn-default-radius", attributes: { - category: "dropdown", - type: "sub-item", + category: "btn", + type: "default", item: "radius", }, - path: ["dropdown", "sub-item", "radius"], + path: ["btn", "default", "radius"], }, - size: { + }, + rounded: { + radius: { $type: "dimension", - $value: "32px", - filePath: "design-tokens/components/desktop/base/dropdown menu.json", + $value: "9999px", + filePath: "design-tokens/components/desktop/base/btn.json", isSource: true, $extensions: { "studio.tokens": { - originalType: "sizing", + originalType: "borderRadius", }, }, original: { $type: "dimension", - $value: "{size.8}", + $value: "{rounded.full}", $extensions: { "studio.tokens": { - originalType: "sizing", + originalType: "borderRadius", }, }, }, - name: "canary-dropdown-sub-item-size", + name: "canary-btn-rounded-radius", attributes: { - category: "dropdown", - type: "sub-item", - item: "size", + category: "btn", + type: "rounded", + item: "radius", }, - path: ["dropdown", "sub-item", "size"], + path: ["btn", "rounded", "radius"], }, - "gap-y": { + }, + border: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/components/desktop/base/btn.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { $type: "dimension", - $value: "4px", - $description: "4px gap between text", - filePath: "design-tokens/components/desktop/base/dropdown menu.json", + $value: "{borderWidth.1}", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-btn-border", + attributes: { + category: "btn", + type: "border", + }, + path: ["btn", "border"], + }, + px: { + sm: { + $type: "dimension", + $value: "12px", + filePath: "design-tokens/components/desktop/base/btn.json", isSource: true, $extensions: { "studio.tokens": { @@ -419,29 +469,25 @@ export default { }, original: { $type: "dimension", - $value: "{spacing.1}", - $description: "4px gap between text", + $value: "{spacing.3}", $extensions: { "studio.tokens": { originalType: "spacing", }, }, }, - name: "canary-dropdown-sub-item-gap-y", + name: "canary-btn-px-sm", attributes: { - category: "dropdown", - type: "sub-item", - item: "gap-y", + category: "btn", + type: "px", + item: "sm", }, - path: ["dropdown", "sub-item", "gap-y"], + path: ["btn", "px", "sm"], }, - }, - container: { - py: { + default: { $type: "dimension", - $value: "4px", - $description: "4px\n", - filePath: "design-tokens/components/desktop/base/dropdown menu.json", + $value: "16px", + filePath: "design-tokens/components/desktop/base/btn.json", isSource: true, $extensions: { "studio.tokens": { @@ -450,267 +496,138 @@ export default { }, original: { $type: "dimension", - $value: "{spacing.1}", - $description: "4px\n", + $value: "{spacing.4}", $extensions: { "studio.tokens": { originalType: "spacing", }, }, }, - name: "canary-dropdown-container-py", + name: "canary-btn-px-default", attributes: { - category: "dropdown", - type: "container", - item: "py", + category: "btn", + type: "px", + item: "default", }, - path: ["dropdown", "container", "py"], + path: ["btn", "px", "default"], }, - radius: { + lg: { $type: "dimension", - $value: "6px", - $description: "6px", - filePath: "design-tokens/components/desktop/base/dropdown menu.json", + $value: "20px", + filePath: "design-tokens/components/desktop/base/btn.json", isSource: true, $extensions: { "studio.tokens": { - originalType: "borderRadius", + originalType: "spacing", }, }, original: { $type: "dimension", - $value: "{rounded.3}", - $description: "6px", + $value: "{spacing.5}", $extensions: { "studio.tokens": { - originalType: "borderRadius", + originalType: "spacing", }, }, }, - name: "canary-dropdown-container-radius", + name: "canary-btn-px-lg", attributes: { - category: "dropdown", - type: "container", - item: "radius", + category: "btn", + type: "px", + item: "lg", }, - path: ["dropdown", "container", "radius"], + path: ["btn", "px", "lg"], }, - "min-w": { + }, + py: { + sm: { $type: "dimension", - $value: "320px", - filePath: "design-tokens/components/desktop/base/dropdown menu.json", + $value: "6px", + filePath: "design-tokens/components/desktop/base/btn.json", isSource: true, $extensions: { "studio.tokens": { - originalType: "sizing", + originalType: "spacing", }, }, original: { $type: "dimension", - $value: "320px", - $extensions: { - "studio.tokens": { - originalType: "sizing", - }, - }, - }, - name: "canary-dropdown-container-min-w", - attributes: { - category: "dropdown", - type: "container", - item: "min-w", - }, - path: ["dropdown", "container", "min-w"], - }, - }, - "menu-item-branch-selector": { - tag: { - px: { - $type: "dimension", - $value: "8px", - $description: "8px horizontal padding", - filePath: "design-tokens/components/desktop/base/dropdown menu.json", - isSource: true, - $extensions: { - "studio.tokens": { - originalType: "spacing", - }, - }, - original: { - $type: "dimension", - $value: "{spacing.2}", - $description: "8px horizontal padding", - $extensions: { - "studio.tokens": { - originalType: "spacing", - }, - }, - }, - name: "canary-dropdown-menu-item-branch-selector-tag-px", - attributes: { - category: "dropdown", - type: "menu-item-branch-selector", - item: "tag", - subitem: "px", - }, - path: ["dropdown", "menu-item-branch-selector", "tag", "px"], - }, - size: { - $type: "dimension", - $value: "20px", - $description: "20px height\n", - filePath: "design-tokens/components/desktop/base/dropdown menu.json", - isSource: true, - $extensions: { - "studio.tokens": { - originalType: "sizing", - }, - }, - original: { - $type: "dimension", - $value: "{size.5}", - $description: "20px height\n", - $extensions: { - "studio.tokens": { - originalType: "sizing", - }, - }, - }, - name: "canary-dropdown-menu-item-branch-selector-tag-size", - attributes: { - category: "dropdown", - type: "menu-item-branch-selector", - item: "tag", - subitem: "size", - }, - path: ["dropdown", "menu-item-branch-selector", "tag", "size"], - }, - }, - }, - "menu-items": { - "header-footer": { - px: { - $type: "dimension", - $value: "16px", - $description: "16px horizontal padding", - filePath: "design-tokens/components/desktop/base/dropdown menu.json", - isSource: true, + $value: "{spacing.1-half}", $extensions: { "studio.tokens": { originalType: "spacing", }, }, - original: { - $type: "dimension", - $value: "{spacing.4}", - $description: "16px horizontal padding", - $extensions: { - "studio.tokens": { - originalType: "spacing", - }, - }, - }, - name: "canary-dropdown-menu-items-header-footer-px", - attributes: { - category: "dropdown", - type: "menu-items", - item: "header-footer", - subitem: "px", - }, - path: ["dropdown", "menu-items", "header-footer", "px"], }, - py: { - $type: "dimension", - $value: "10px", - $description: "10px vertical padding", - filePath: "design-tokens/components/desktop/base/dropdown menu.json", - isSource: true, - $extensions: { - "studio.tokens": { - originalType: "spacing", - }, - }, - original: { - $type: "dimension", - $value: "{spacing.2-half}", - $description: "10px vertical padding", - $extensions: { - "studio.tokens": { - originalType: "spacing", - }, - }, - }, - name: "canary-dropdown-menu-items-header-footer-py", - attributes: { - category: "dropdown", - type: "menu-items", - item: "header-footer", - subitem: "py", - }, - path: ["dropdown", "menu-items", "header-footer", "py"], + name: "canary-btn-py-sm", + attributes: { + category: "btn", + type: "py", + item: "sm", }, + path: ["btn", "py", "sm"], }, - }, - }, - btn: { - size: { - sm: { + default: { $type: "dimension", - $value: "28px", + $value: "8px", filePath: "design-tokens/components/desktop/base/btn.json", isSource: true, $extensions: { "studio.tokens": { - originalType: "sizing", + originalType: "spacing", }, }, original: { $type: "dimension", - $value: "{size.7}", + $value: "{spacing.2}", $extensions: { "studio.tokens": { - originalType: "sizing", + originalType: "spacing", }, }, }, - name: "canary-btn-size-sm", + name: "canary-btn-py-default", attributes: { category: "btn", - type: "size", - item: "sm", + type: "py", + item: "default", }, - path: ["btn", "size", "sm"], + path: ["btn", "py", "default"], }, - default: { + lg: { $type: "dimension", - $value: "32px", + $value: "12px", filePath: "design-tokens/components/desktop/base/btn.json", isSource: true, $extensions: { "studio.tokens": { - originalType: "sizing", + originalType: "spacing", }, }, original: { $type: "dimension", - $value: "{size.8}", + $value: "{spacing.3}", $extensions: { "studio.tokens": { - originalType: "sizing", + originalType: "spacing", }, }, }, - name: "canary-btn-size-default", + name: "canary-btn-py-lg", attributes: { category: "btn", - type: "size", - item: "default", + type: "py", + item: "lg", }, - path: ["btn", "size", "default"], + path: ["btn", "py", "lg"], }, - icon: { + }, + }, + "btn-link": { + size: { + sm: { $type: "dimension", - $value: "32px", + $value: "16px", filePath: "design-tokens/components/desktop/base/btn.json", isSource: true, $extensions: { @@ -720,24 +637,24 @@ export default { }, original: { $type: "dimension", - $value: "{size.8}", + $value: "{size.4}", $extensions: { "studio.tokens": { originalType: "sizing", }, }, }, - name: "canary-btn-size-icon", + name: "canary-btn-link-size-sm", attributes: { - category: "btn", + category: "btn-link", type: "size", - item: "icon", + item: "sm", }, - path: ["btn", "size", "icon"], + path: ["btn-link", "size", "sm"], }, - lg: { + default: { $type: "dimension", - $value: "40px", + $value: "16px", filePath: "design-tokens/components/desktop/base/btn.json", isSource: true, $extensions: { @@ -747,26 +664,26 @@ export default { }, original: { $type: "dimension", - $value: "{size.10}", + $value: "{size.4}", $extensions: { "studio.tokens": { originalType: "sizing", }, }, }, - name: "canary-btn-size-lg", + name: "canary-btn-link-size-default", attributes: { - category: "btn", + category: "btn-link", type: "size", - item: "lg", + item: "default", }, - path: ["btn", "size", "lg"], + path: ["btn-link", "size", "default"], }, }, gap: { sm: { $type: "dimension", - $value: "6px", + $value: "8px", filePath: "design-tokens/components/desktop/base/btn.json", isSource: true, $extensions: { @@ -776,20 +693,20 @@ export default { }, original: { $type: "dimension", - $value: "{spacing.1-half}", + $value: "{spacing.2}", $extensions: { "studio.tokens": { originalType: "spacing", }, }, }, - name: "canary-btn-gap-sm", + name: "canary-btn-link-gap-sm", attributes: { - category: "btn", + category: "btn-link", type: "gap", item: "sm", }, - path: ["btn", "gap", "sm"], + path: ["btn-link", "gap", "sm"], }, default: { $type: "dimension", @@ -810,131 +727,105 @@ export default { }, }, }, - name: "canary-btn-gap-default", + name: "canary-btn-link-gap-default", attributes: { - category: "btn", + category: "btn-link", type: "gap", item: "default", }, - path: ["btn", "gap", "default"], + path: ["btn-link", "gap", "default"], }, - lg: { + }, + }, + badge: { + size: { + sm: { $type: "dimension", - $value: "10px", - filePath: "design-tokens/components/desktop/base/btn.json", + $value: "20px", + filePath: "design-tokens/components/desktop/base/badge.json", isSource: true, $extensions: { "studio.tokens": { - originalType: "spacing", + originalType: "sizing", }, }, original: { $type: "dimension", - $value: "{spacing.2-half}", + $value: "{size.5}", $extensions: { "studio.tokens": { - originalType: "spacing", + originalType: "sizing", }, }, }, - name: "canary-btn-gap-lg", + name: "canary-badge-size-sm", attributes: { - category: "btn", - type: "gap", - item: "lg", + category: "badge", + type: "size", + item: "sm", }, - path: ["btn", "gap", "lg"], + path: ["badge", "size", "sm"], }, - }, - default: { - radius: { + default: { $type: "dimension", - $value: "4px", - filePath: "design-tokens/components/desktop/base/btn.json", + $value: "24px", + filePath: "design-tokens/components/desktop/base/badge.json", isSource: true, $extensions: { "studio.tokens": { - originalType: "borderRadius", + originalType: "sizing", }, }, original: { $type: "dimension", - $value: "{rounded.2}", + $value: "{size.6}", $extensions: { "studio.tokens": { - originalType: "borderRadius", + originalType: "sizing", }, }, }, - name: "canary-btn-default-radius", + name: "canary-badge-size-default", attributes: { - category: "btn", - type: "default", - item: "radius", + category: "badge", + type: "size", + item: "default", }, - path: ["btn", "default", "radius"], + path: ["badge", "size", "default"], }, }, - rounded: { - radius: { + default: { + gap: { $type: "dimension", - $value: "9999px", - filePath: "design-tokens/components/desktop/base/btn.json", + $value: "4px", + filePath: "design-tokens/components/desktop/base/badge.json", isSource: true, $extensions: { "studio.tokens": { - originalType: "borderRadius", + originalType: "spacing", }, }, original: { $type: "dimension", - $value: "{rounded.full}", + $value: "{spacing.1}", $extensions: { "studio.tokens": { - originalType: "borderRadius", + originalType: "spacing", }, }, }, - name: "canary-btn-rounded-radius", + name: "canary-badge-default-gap", attributes: { - category: "btn", - type: "rounded", - item: "radius", - }, - path: ["btn", "rounded", "radius"], - }, - }, - border: { - $type: "dimension", - $value: "1px", - filePath: "design-tokens/components/desktop/base/btn.json", - isSource: true, - $extensions: { - "studio.tokens": { - originalType: "borderWidth", - }, - }, - original: { - $type: "dimension", - $value: "{borderWidth.1}", - $extensions: { - "studio.tokens": { - originalType: "borderWidth", - }, + category: "badge", + type: "default", + item: "gap", }, + path: ["badge", "default", "gap"], }, - name: "canary-btn-border", - attributes: { - category: "btn", - type: "border", - }, - path: ["btn", "border"], - }, - px: { - sm: { + py: { $type: "dimension", - $value: "20px", - filePath: "design-tokens/components/desktop/base/btn.json", + $value: "2px", + filePath: "design-tokens/components/desktop/base/badge.json", isSource: true, $extensions: { "studio.tokens": { @@ -943,25 +834,25 @@ export default { }, original: { $type: "dimension", - $value: "{spacing.5}", + $value: "{spacing.half}", $extensions: { "studio.tokens": { originalType: "spacing", }, }, }, - name: "canary-btn-px-sm", + name: "canary-badge-default-py", attributes: { - category: "btn", - type: "px", - item: "sm", + category: "badge", + type: "default", + item: "py", }, - path: ["btn", "px", "sm"], + path: ["badge", "default", "py"], }, - default: { + px: { $type: "dimension", - $value: "20px", - filePath: "design-tokens/components/desktop/base/btn.json", + $value: "8px", + filePath: "design-tokens/components/desktop/base/badge.json", isSource: true, $extensions: { "studio.tokens": { @@ -970,81 +861,81 @@ export default { }, original: { $type: "dimension", - $value: "{spacing.5}", + $value: "{spacing.2}", $extensions: { "studio.tokens": { originalType: "spacing", }, }, }, - name: "canary-btn-px-default", + name: "canary-badge-default-px", attributes: { - category: "btn", - type: "px", - item: "default", + category: "badge", + type: "default", + item: "px", }, - path: ["btn", "px", "default"], + path: ["badge", "default", "px"], }, - lg: { + radius: { $type: "dimension", - $value: "24px", - filePath: "design-tokens/components/desktop/base/btn.json", + $value: "4px", + filePath: "design-tokens/components/desktop/base/badge.json", isSource: true, $extensions: { "studio.tokens": { - originalType: "spacing", + originalType: "borderRadius", }, }, original: { $type: "dimension", - $value: "{spacing.6}", + $value: "{rounded.2}", $extensions: { "studio.tokens": { - originalType: "spacing", + originalType: "borderRadius", }, }, }, - name: "canary-btn-px-lg", + name: "canary-badge-default-radius", attributes: { - category: "btn", - type: "px", - item: "lg", + category: "badge", + type: "default", + item: "radius", }, - path: ["btn", "px", "lg"], + path: ["badge", "default", "radius"], }, }, - py: { - sm: { + rounded: { + radius: { $type: "dimension", - $value: "6px", - filePath: "design-tokens/components/desktop/base/btn.json", + $value: "9999px", + filePath: "design-tokens/components/desktop/base/badge.json", isSource: true, $extensions: { "studio.tokens": { - originalType: "spacing", + originalType: "borderRadius", }, }, original: { $type: "dimension", - $value: "{spacing.1-half}", + $value: "{rounded.full}", $extensions: { "studio.tokens": { - originalType: "spacing", + originalType: "borderRadius", }, }, }, - name: "canary-btn-py-sm", + name: "canary-badge-rounded-radius", attributes: { - category: "btn", - type: "py", - item: "sm", + category: "badge", + type: "rounded", + item: "radius", }, - path: ["btn", "py", "sm"], + path: ["badge", "rounded", "radius"], }, - default: { + px: { $type: "dimension", - $value: "8px", - filePath: "design-tokens/components/desktop/base/btn.json", + $value: "10px", + filePath: "design-tokens/components/desktop/base/badge.json", isSource: true, $extensions: { "studio.tokens": { @@ -1053,280 +944,343 @@ export default { }, original: { $type: "dimension", - $value: "{spacing.2}", + $value: "{spacing.2-half}", $extensions: { "studio.tokens": { originalType: "spacing", }, }, }, - name: "canary-btn-py-default", + name: "canary-badge-rounded-px", attributes: { - category: "btn", - type: "py", - item: "default", + category: "badge", + type: "rounded", + item: "px", }, - path: ["btn", "py", "default"], + path: ["badge", "rounded", "px"], }, - lg: { + }, + border: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/components/desktop/base/badge.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { $type: "dimension", - $value: "12px", - filePath: "design-tokens/components/desktop/base/btn.json", - isSource: true, + $value: "{borderWidth.1}", $extensions: { "studio.tokens": { - originalType: "spacing", - }, - }, - original: { - $type: "dimension", - $value: "{spacing.3}", - $extensions: { - "studio.tokens": { - originalType: "spacing", - }, + originalType: "borderWidth", }, }, - name: "canary-btn-py-lg", - attributes: { - category: "btn", - type: "py", - item: "lg", - }, - path: ["btn", "py", "lg"], }, + name: "canary-badge-border", + attributes: { + category: "badge", + type: "border", + }, + path: ["badge", "border"], }, }, - "btn-link": { + tag: { size: { - sm: { - $type: "dimension", - $value: "16px", - filePath: "design-tokens/components/desktop/base/btn.json", - isSource: true, - $extensions: { - "studio.tokens": { - originalType: "sizing", - }, - }, - original: { - $type: "dimension", - $value: "{size.4}", - $extensions: { - "studio.tokens": { - originalType: "sizing", - }, - }, - }, - name: "canary-btn-link-size-sm", - attributes: { - category: "btn-link", - type: "size", - item: "sm", + $type: "dimension", + $value: "20px", + filePath: "design-tokens/components/desktop/base/tag.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", }, - path: ["btn-link", "size", "sm"], }, - default: { + original: { $type: "dimension", - $value: "16px", - filePath: "design-tokens/components/desktop/base/btn.json", - isSource: true, + $value: "{size.5}", $extensions: { "studio.tokens": { originalType: "sizing", }, }, - original: { - $type: "dimension", - $value: "{size.4}", - $extensions: { - "studio.tokens": { - originalType: "sizing", - }, - }, - }, - name: "canary-btn-link-size-default", - attributes: { - category: "btn-link", - type: "size", - item: "default", - }, - path: ["btn-link", "size", "default"], }, + name: "canary-tag-size", + attributes: { + category: "tag", + type: "size", + }, + path: ["tag", "size"], }, gap: { - sm: { + $type: "dimension", + $value: "4px", + filePath: "design-tokens/components/desktop/base/tag.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { $type: "dimension", - $value: "8px", - filePath: "design-tokens/components/desktop/base/btn.json", - isSource: true, + $value: "{spacing.1}", $extensions: { "studio.tokens": { originalType: "spacing", }, }, - original: { - $type: "dimension", - $value: "{spacing.2}", - $extensions: { - "studio.tokens": { - originalType: "spacing", - }, - }, - }, - name: "canary-btn-link-gap-sm", - attributes: { - category: "btn-link", - type: "gap", - item: "sm", + }, + name: "canary-tag-gap", + attributes: { + category: "tag", + type: "gap", + }, + path: ["tag", "gap"], + }, + py: { + $type: "dimension", + $value: "4px", + filePath: "design-tokens/components/desktop/base/tag.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", }, - path: ["btn-link", "gap", "sm"], }, - default: { + original: { $type: "dimension", - $value: "10px", - filePath: "design-tokens/components/desktop/base/btn.json", - isSource: true, + $value: "{spacing.1}", $extensions: { "studio.tokens": { originalType: "spacing", }, }, - original: { - $type: "dimension", - $value: "{spacing.2-half}", - $extensions: { - "studio.tokens": { - originalType: "spacing", - }, - }, - }, - name: "canary-btn-link-gap-default", - attributes: { - category: "btn-link", - type: "gap", - item: "default", - }, - path: ["btn-link", "gap", "default"], }, + name: "canary-tag-py", + attributes: { + category: "tag", + type: "py", + }, + path: ["tag", "py"], }, - }, - badge: { - size: { - sm: { - $type: "dimension", - $value: "20px", - filePath: "design-tokens/components/desktop/base/badge.json", - isSource: true, - $extensions: { - "studio.tokens": { - originalType: "sizing", - }, - }, - original: { - $type: "dimension", - $value: "{size.5}", - $extensions: { - "studio.tokens": { - originalType: "sizing", - }, - }, - }, - name: "canary-badge-size-sm", - attributes: { - category: "badge", - type: "size", - item: "sm", + px: { + $type: "dimension", + $value: "8px", + filePath: "design-tokens/components/desktop/base/tag.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", }, - path: ["badge", "size", "sm"], }, - default: { + original: { $type: "dimension", - $value: "24px", - filePath: "design-tokens/components/desktop/base/badge.json", - isSource: true, + $value: "{spacing.2}", $extensions: { "studio.tokens": { - originalType: "sizing", - }, - }, - original: { - $type: "dimension", - $value: "{size.6}", - $extensions: { - "studio.tokens": { - originalType: "sizing", - }, + originalType: "spacing", }, }, - name: "canary-badge-size-default", - attributes: { - category: "badge", - type: "size", - item: "default", - }, - path: ["badge", "size", "default"], }, + name: "canary-tag-px", + attributes: { + category: "tag", + type: "px", + }, + path: ["tag", "px"], }, default: { - gap: { + radius: { $type: "dimension", $value: "4px", - filePath: "design-tokens/components/desktop/base/badge.json", + filePath: "design-tokens/components/desktop/base/tag.json", isSource: true, $extensions: { "studio.tokens": { - originalType: "spacing", + originalType: "borderRadius", }, }, original: { $type: "dimension", - $value: "{spacing.1}", + $value: "{rounded.2}", $extensions: { "studio.tokens": { - originalType: "spacing", + originalType: "borderRadius", }, }, }, - name: "canary-badge-default-gap", + name: "canary-tag-default-radius", attributes: { - category: "badge", + category: "tag", type: "default", - item: "gap", + item: "radius", }, - path: ["badge", "default", "gap"], + path: ["tag", "default", "radius"], }, - py: { - $type: "dimension", - $value: "2px", - filePath: "design-tokens/components/desktop/base/badge.json", - isSource: true, - $extensions: { - "studio.tokens": { - originalType: "spacing", - }, - }, - original: { - $type: "dimension", - $value: "{spacing.half}", - $extensions: { - "studio.tokens": { - originalType: "spacing", + }, + split: { + right: { + radius: { + r: { + $type: "dimension", + $value: "4px", + filePath: "design-tokens/components/desktop/base/tag.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + original: { + $type: "dimension", + $value: "{rounded.2}", + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + }, + name: "canary-tag-split-right-radius-r", + attributes: { + category: "tag", + type: "split", + item: "right", + subitem: "radius", + state: "r", }, + path: ["tag", "split", "right", "radius", "r"], + }, + l: { + $type: "dimension", + $value: "0px", + filePath: "design-tokens/components/desktop/base/tag.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + original: { + $type: "dimension", + $value: "{rounded.none}", + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + }, + name: "canary-tag-split-right-radius-l", + attributes: { + category: "tag", + type: "split", + item: "right", + subitem: "radius", + state: "l", + }, + path: ["tag", "split", "right", "radius", "l"], }, }, - name: "canary-badge-default-py", - attributes: { - category: "badge", - type: "default", - item: "py", - }, - path: ["badge", "default", "py"], }, + left: { + radius: { + r: { + $type: "dimension", + $value: "0px", + filePath: "design-tokens/components/desktop/base/tag.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + original: { + $type: "dimension", + $value: "{rounded.none}", + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + }, + name: "canary-tag-split-left-radius-r", + attributes: { + category: "tag", + type: "split", + item: "left", + subitem: "radius", + state: "r", + }, + path: ["tag", "split", "left", "radius", "r"], + }, + l: { + $type: "dimension", + $value: "4px", + filePath: "design-tokens/components/desktop/base/tag.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + original: { + $type: "dimension", + $value: "{rounded.2}", + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + }, + name: "canary-tag-split-left-radius-l", + attributes: { + category: "tag", + type: "split", + item: "left", + subitem: "radius", + state: "l", + }, + path: ["tag", "split", "left", "radius", "l"], + }, + }, + }, + }, + border: { + $type: "dimension", + $value: "1px", + filePath: "design-tokens/components/desktop/base/tag.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + original: { + $type: "dimension", + $value: "{borderWidth.1}", + $extensions: { + "studio.tokens": { + originalType: "borderWidth", + }, + }, + }, + name: "canary-tag-border", + attributes: { + category: "tag", + type: "border", + }, + path: ["tag", "border"], + }, + }, + dropdown: { + item: { px: { $type: "dimension", - $value: "8px", - filePath: "design-tokens/components/desktop/base/badge.json", + $value: "4px", + $description: "4px\n", + filePath: "design-tokens/components/desktop/base/dropdown-menu.json", isSource: true, $extensions: { "studio.tokens": { @@ -1335,54 +1289,55 @@ export default { }, original: { $type: "dimension", - $value: "{spacing.2}", + $value: "{spacing.1}", + $description: "4px\n", $extensions: { "studio.tokens": { originalType: "spacing", }, }, }, - name: "canary-badge-default-px", + name: "canary-dropdown-item-px", attributes: { - category: "badge", - type: "default", + category: "dropdown", + type: "item", item: "px", }, - path: ["badge", "default", "px"], + path: ["dropdown", "item", "px"], }, - radius: { + gap: { $type: "dimension", - $value: "4px", - filePath: "design-tokens/components/desktop/base/badge.json", + $value: "10px", + $description: "8px", + filePath: "design-tokens/components/desktop/base/dropdown-menu.json", isSource: true, $extensions: { "studio.tokens": { - originalType: "borderRadius", + originalType: "spacing", }, }, original: { $type: "dimension", - $value: "{rounded.2}", + $value: "{spacing.2-half}", + $description: "8px", $extensions: { "studio.tokens": { - originalType: "borderRadius", + originalType: "spacing", }, }, }, - name: "canary-badge-default-radius", + name: "canary-dropdown-item-gap", attributes: { - category: "badge", - type: "default", - item: "radius", + category: "dropdown", + type: "item", + item: "gap", }, - path: ["badge", "default", "radius"], + path: ["dropdown", "item", "gap"], }, - }, - rounded: { radius: { $type: "dimension", - $value: "9999px", - filePath: "design-tokens/components/desktop/base/badge.json", + $value: "2px", + filePath: "design-tokens/components/desktop/base/dropdown-menu.json", isSource: true, $extensions: { "studio.tokens": { @@ -1391,25 +1346,28 @@ export default { }, original: { $type: "dimension", - $value: "{rounded.full}", + $value: "{dropdown.sub-item.radius}", $extensions: { "studio.tokens": { originalType: "borderRadius", }, }, }, - name: "canary-badge-rounded-radius", + name: "canary-dropdown-item-radius", attributes: { - category: "badge", - type: "rounded", + category: "dropdown", + type: "item", item: "radius", }, - path: ["badge", "rounded", "radius"], + path: ["dropdown", "item", "radius"], }, + }, + "sub-item": { px: { $type: "dimension", - $value: "10px", - filePath: "design-tokens/components/desktop/base/badge.json", + $value: "12px", + $description: "12px", + filePath: "design-tokens/components/desktop/base/dropdown-menu.json", isSource: true, $extensions: { "studio.tokens": { @@ -1418,159 +1376,197 @@ export default { }, original: { $type: "dimension", - $value: "{spacing.2-half}", + $value: "{spacing.3}", + $description: "12px", $extensions: { "studio.tokens": { originalType: "spacing", }, }, }, - name: "canary-badge-rounded-px", + name: "canary-dropdown-sub-item-px", attributes: { - category: "badge", - type: "rounded", + category: "dropdown", + type: "sub-item", item: "px", }, - path: ["badge", "rounded", "px"], - }, - }, - border: { - $type: "dimension", - $value: "1px", - filePath: "design-tokens/components/desktop/base/badge.json", - isSource: true, - $extensions: { - "studio.tokens": { - originalType: "borderWidth", - }, + path: ["dropdown", "sub-item", "px"], }, - original: { + py: { $type: "dimension", - $value: "{borderWidth.1}", + $value: "8px", + $description: "8px", + filePath: "design-tokens/components/desktop/base/dropdown-menu.json", + isSource: true, $extensions: { "studio.tokens": { - originalType: "borderWidth", + originalType: "spacing", }, }, - }, - name: "canary-badge-border", - attributes: { - category: "badge", - type: "border", - }, - path: ["badge", "border"], - }, - }, - tag: { - size: { - $type: "dimension", - $value: "20px", - filePath: "design-tokens/components/desktop/base/tag.json", - isSource: true, - $extensions: { - "studio.tokens": { - originalType: "sizing", + original: { + $type: "dimension", + $value: "{spacing.2}", + $description: "8px", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-dropdown-sub-item-py", + attributes: { + category: "dropdown", + type: "sub-item", + item: "py", }, + path: ["dropdown", "sub-item", "py"], }, - original: { + gap: { $type: "dimension", - $value: "{size.5}", + $value: "10px", + filePath: "design-tokens/components/desktop/base/dropdown-menu.json", + isSource: true, $extensions: { "studio.tokens": { - originalType: "sizing", + originalType: "spacing", }, }, - }, - name: "canary-tag-size", - attributes: { - category: "tag", - type: "size", - }, - path: ["tag", "size"], - }, - gap: { - $type: "dimension", - $value: "4px", - filePath: "design-tokens/components/desktop/base/tag.json", - isSource: true, - $extensions: { - "studio.tokens": { - originalType: "spacing", + original: { + $type: "dimension", + $value: "{spacing.2-half}", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, }, + name: "canary-dropdown-sub-item-gap", + attributes: { + category: "dropdown", + type: "sub-item", + item: "gap", + }, + path: ["dropdown", "sub-item", "gap"], }, - original: { + radius: { $type: "dimension", - $value: "{spacing.1}", + $value: "2px", + filePath: "design-tokens/components/desktop/base/dropdown-menu.json", + isSource: true, $extensions: { "studio.tokens": { - originalType: "spacing", + originalType: "borderRadius", }, }, + original: { + $type: "dimension", + $value: "{rounded.1}", + $extensions: { + "studio.tokens": { + originalType: "borderRadius", + }, + }, + }, + name: "canary-dropdown-sub-item-radius", + attributes: { + category: "dropdown", + type: "sub-item", + item: "radius", + }, + path: ["dropdown", "sub-item", "radius"], }, - name: "canary-tag-gap", - attributes: { - category: "tag", - type: "gap", - }, - path: ["tag", "gap"], - }, - py: { - $type: "dimension", - $value: "4px", - filePath: "design-tokens/components/desktop/base/tag.json", - isSource: true, - $extensions: { - "studio.tokens": { - originalType: "spacing", + size: { + $type: "dimension", + $value: "32px", + filePath: "design-tokens/components/desktop/base/dropdown-menu.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "{size.8}", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-dropdown-sub-item-size", + attributes: { + category: "dropdown", + type: "sub-item", + item: "size", }, + path: ["dropdown", "sub-item", "size"], }, - original: { + "gap-y": { $type: "dimension", - $value: "{spacing.1}", + $value: "4px", + $description: "4px gap between text", + filePath: "design-tokens/components/desktop/base/dropdown-menu.json", + isSource: true, $extensions: { "studio.tokens": { originalType: "spacing", }, }, - }, - name: "canary-tag-py", - attributes: { - category: "tag", - type: "py", - }, - path: ["tag", "py"], - }, - px: { - $type: "dimension", - $value: "8px", - filePath: "design-tokens/components/desktop/base/tag.json", - isSource: true, - $extensions: { - "studio.tokens": { - originalType: "spacing", + original: { + $type: "dimension", + $value: "{spacing.1}", + $description: "4px gap between text", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-dropdown-sub-item-gap-y", + attributes: { + category: "dropdown", + type: "sub-item", + item: "gap-y", }, + path: ["dropdown", "sub-item", "gap-y"], }, - original: { + }, + container: { + py: { $type: "dimension", - $value: "{spacing.2}", + $value: "4px", + $description: "4px\n", + filePath: "design-tokens/components/desktop/base/dropdown-menu.json", + isSource: true, $extensions: { "studio.tokens": { originalType: "spacing", }, }, + original: { + $type: "dimension", + $value: "{spacing.1}", + $description: "4px\n", + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + }, + name: "canary-dropdown-container-py", + attributes: { + category: "dropdown", + type: "container", + item: "py", + }, + path: ["dropdown", "container", "py"], }, - name: "canary-tag-px", - attributes: { - category: "tag", - type: "px", - }, - path: ["tag", "px"], - }, - default: { radius: { $type: "dimension", - $value: "4px", - filePath: "design-tokens/components/desktop/base/tag.json", + $value: "6px", + $description: "6px", + filePath: "design-tokens/components/desktop/base/dropdown-menu.json", isSource: true, $extensions: { "studio.tokens": { @@ -1579,173 +1575,177 @@ export default { }, original: { $type: "dimension", - $value: "{rounded.2}", + $value: "{rounded.3}", + $description: "6px", $extensions: { "studio.tokens": { originalType: "borderRadius", }, }, }, - name: "canary-tag-default-radius", + name: "canary-dropdown-container-radius", attributes: { - category: "tag", - type: "default", + category: "dropdown", + type: "container", item: "radius", }, - path: ["tag", "default", "radius"], + path: ["dropdown", "container", "radius"], + }, + "min-w": { + $type: "dimension", + $value: "320px", + filePath: "design-tokens/components/desktop/base/dropdown-menu.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + original: { + $type: "dimension", + $value: "320px", + $extensions: { + "studio.tokens": { + originalType: "sizing", + }, + }, + }, + name: "canary-dropdown-container-min-w", + attributes: { + category: "dropdown", + type: "container", + item: "min-w", + }, + path: ["dropdown", "container", "min-w"], }, }, - split: { - right: { - radius: { - r: { + "menu-item-branch-selector": { + tag: { + px: { + $type: "dimension", + $value: "8px", + $description: "8px horizontal padding", + filePath: "design-tokens/components/desktop/base/dropdown-menu.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { $type: "dimension", - $value: "4px", - filePath: "design-tokens/components/desktop/base/tag.json", - isSource: true, + $value: "{spacing.2}", + $description: "8px horizontal padding", $extensions: { "studio.tokens": { - originalType: "borderRadius", - }, - }, - original: { - $type: "dimension", - $value: "{rounded.2}", - $extensions: { - "studio.tokens": { - originalType: "borderRadius", - }, + originalType: "spacing", }, }, - name: "canary-tag-split-right-radius-r", - attributes: { - category: "tag", - type: "split", - item: "right", - subitem: "radius", - state: "r", + }, + name: "canary-dropdown-menu-item-branch-selector-tag-px", + attributes: { + category: "dropdown", + type: "menu-item-branch-selector", + item: "tag", + subitem: "px", + }, + path: ["dropdown", "menu-item-branch-selector", "tag", "px"], + }, + size: { + $type: "dimension", + $value: "20px", + $description: "20px height\n", + filePath: "design-tokens/components/desktop/base/dropdown-menu.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "sizing", }, - path: ["tag", "split", "right", "radius", "r"], }, - l: { + original: { $type: "dimension", - $value: "0px", - filePath: "design-tokens/components/desktop/base/tag.json", - isSource: true, + $value: "{size.5}", + $description: "20px height\n", $extensions: { "studio.tokens": { - originalType: "borderRadius", - }, - }, - original: { - $type: "dimension", - $value: "{rounded.none}", - $extensions: { - "studio.tokens": { - originalType: "borderRadius", - }, + originalType: "sizing", }, }, - name: "canary-tag-split-right-radius-l", - attributes: { - category: "tag", - type: "split", - item: "right", - subitem: "radius", - state: "l", - }, - path: ["tag", "split", "right", "radius", "l"], }, + name: "canary-dropdown-menu-item-branch-selector-tag-size", + attributes: { + category: "dropdown", + type: "menu-item-branch-selector", + item: "tag", + subitem: "size", + }, + path: ["dropdown", "menu-item-branch-selector", "tag", "size"], }, }, - left: { - radius: { - r: { + }, + "menu-items": { + "header-footer": { + px: { + $type: "dimension", + $value: "16px", + $description: "16px horizontal padding", + filePath: "design-tokens/components/desktop/base/dropdown-menu.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", + }, + }, + original: { $type: "dimension", - $value: "0px", - filePath: "design-tokens/components/desktop/base/tag.json", - isSource: true, + $value: "{spacing.4}", + $description: "16px horizontal padding", $extensions: { "studio.tokens": { - originalType: "borderRadius", - }, - }, - original: { - $type: "dimension", - $value: "{rounded.none}", - $extensions: { - "studio.tokens": { - originalType: "borderRadius", - }, + originalType: "spacing", }, }, - name: "canary-tag-split-left-radius-r", - attributes: { - category: "tag", - type: "split", - item: "left", - subitem: "radius", - state: "r", + }, + name: "canary-dropdown-menu-items-header-footer-px", + attributes: { + category: "dropdown", + type: "menu-items", + item: "header-footer", + subitem: "px", + }, + path: ["dropdown", "menu-items", "header-footer", "px"], + }, + py: { + $type: "dimension", + $value: "10px", + $description: "10px vertical padding", + filePath: "design-tokens/components/desktop/base/dropdown-menu.json", + isSource: true, + $extensions: { + "studio.tokens": { + originalType: "spacing", }, - path: ["tag", "split", "left", "radius", "r"], }, - l: { + original: { $type: "dimension", - $value: "4px", - filePath: "design-tokens/components/desktop/base/tag.json", - isSource: true, + $value: "{spacing.2-half}", + $description: "10px vertical padding", $extensions: { "studio.tokens": { - originalType: "borderRadius", - }, - }, - original: { - $type: "dimension", - $value: "{rounded.2}", - $extensions: { - "studio.tokens": { - originalType: "borderRadius", - }, + originalType: "spacing", }, }, - name: "canary-tag-split-left-radius-l", - attributes: { - category: "tag", - type: "split", - item: "left", - subitem: "radius", - state: "l", - }, - path: ["tag", "split", "left", "radius", "l"], }, - }, - }, - }, - border: { - $type: "dimension", - $value: "1px", - filePath: "design-tokens/components/desktop/base/tag.json", - isSource: true, - $extensions: { - "studio.tokens": { - originalType: "borderWidth", - }, - }, - original: { - $type: "dimension", - $value: "{borderWidth.1}", - $extensions: { - "studio.tokens": { - originalType: "borderWidth", + name: "canary-dropdown-menu-items-header-footer-py", + attributes: { + category: "dropdown", + type: "menu-items", + item: "header-footer", + subitem: "py", }, + path: ["dropdown", "menu-items", "header-footer", "py"], }, }, - name: "canary-tag-border", - attributes: { - category: "tag", - type: "border", - }, - path: ["tag", "border"], }, }, }; diff --git a/packages/core-design-system/src/styles-esm/core.ts b/packages/core-design-system/src/styles-esm/core.ts index 499ac431ad..6bd691001f 100644 --- a/packages/core-design-system/src/styles-esm/core.ts +++ b/packages/core-design-system/src/styles-esm/core.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:54 GMT + * Generated on Mon, 17 Mar 2025 12:07:32 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/index.ts b/packages/core-design-system/src/styles-esm/index.ts index 7672fc6c71..3240e9c6fd 100644 --- a/packages/core-design-system/src/styles-esm/index.ts +++ b/packages/core-design-system/src/styles-esm/index.ts @@ -1,7 +1,7 @@ /** * Harness Design System * DO NOT UPDATE IT MANUALLY - * Generated on Fri, 14 Mar 2025 15:14:55 GMT + * Generated on Mon, 17 Mar 2025 12:07:32 GMT */ /* Theme files - Combined */ diff --git a/packages/core-design-system/src/styles-esm/source-dark-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-dark-desktop-gitness.ts index fcb61b9506..cf40fef162 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/source-dark-desktop-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:42 GMT + * Generated on Mon, 17 Mar 2025 12:06:48 GMT * Copyright (c) Harness. */ @@ -393,13 +393,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.05", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.05)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/default.json", @@ -409,7 +409,7 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.05", + value: "0.08", space: "lch", }, }, @@ -432,13 +432,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.08", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/default.json", @@ -448,7 +448,7 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.08", + value: "0.1", space: "lch", }, }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", @@ -4180,7 +4201,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.05)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/default.json", isSource: true, @@ -4200,7 +4221,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/default.json", isSource: true, diff --git a/packages/core-design-system/src/styles-esm/source-dark-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-dark-desktop-harness.ts index b2a160ee2d..42119cade7 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/source-dark-desktop-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:42 GMT + * Generated on Mon, 17 Mar 2025 12:06:48 GMT * Copyright (c) Harness. */ @@ -393,13 +393,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.05", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.05)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/default.json", @@ -409,7 +409,7 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.05", + value: "0.08", space: "lch", }, }, @@ -432,13 +432,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.08", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/default.json", @@ -448,7 +448,7 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.08", + value: "0.1", space: "lch", }, }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/dark/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", @@ -4180,7 +4201,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.05)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/default.json", isSource: true, @@ -4200,7 +4221,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/default.json", isSource: true, diff --git a/packages/core-design-system/src/styles-esm/source-dark-deuteranopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-dark-deuteranopia-desktop-gitness.ts index cab8b8a80a..e6b2170f6b 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-deuteranopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/source-dark-deuteranopia-desktop-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:46 GMT + * Generated on Mon, 17 Mar 2025 12:07:02 GMT * Copyright (c) Harness. */ @@ -393,13 +393,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -409,13 +409,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, @@ -432,13 +432,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -448,13 +448,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", @@ -4157,7 +4178,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", isSource: true, @@ -4177,7 +4198,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", isSource: true, diff --git a/packages/core-design-system/src/styles-esm/source-dark-deuteranopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-dark-deuteranopia-desktop-harness.ts index 60c39593ba..66ddf8d746 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-deuteranopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/source-dark-deuteranopia-desktop-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:46 GMT + * Generated on Mon, 17 Mar 2025 12:07:01 GMT * Copyright (c) Harness. */ @@ -393,13 +393,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -409,13 +409,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, @@ -432,13 +432,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -448,13 +448,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/dark/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", @@ -4157,7 +4178,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", isSource: true, @@ -4177,7 +4198,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", isSource: true, diff --git a/packages/core-design-system/src/styles-esm/source-dark-dimmer-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-dark-dimmer-desktop-gitness.ts index 5d1a9da522..13a040a0ff 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-dimmer-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/source-dark-dimmer-desktop-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:43 GMT + * Generated on Mon, 17 Mar 2025 12:06:51 GMT * Copyright (c) Harness. */ @@ -375,13 +375,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -391,13 +391,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, @@ -414,13 +414,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -430,13 +430,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, @@ -1902,6 +1902,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", @@ -4139,7 +4160,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/dimmer.json", isSource: true, @@ -4159,7 +4180,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/dimmer.json", isSource: true, diff --git a/packages/core-design-system/src/styles-esm/source-dark-dimmer-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-dark-dimmer-desktop-harness.ts index c35c8fab9a..4e7e1ab4ec 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-dimmer-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/source-dark-dimmer-desktop-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:43 GMT + * Generated on Mon, 17 Mar 2025 12:06:50 GMT * Copyright (c) Harness. */ @@ -375,13 +375,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -391,13 +391,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, @@ -414,13 +414,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -430,13 +430,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, @@ -1902,6 +1902,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/dark/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", @@ -4139,7 +4160,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/dimmer.json", isSource: true, @@ -4159,7 +4180,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/dimmer.json", isSource: true, diff --git a/packages/core-design-system/src/styles-esm/source-dark-dimmer-deuteranopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-dark-dimmer-deuteranopia-desktop-gitness.ts index 0c0a99ff47..bc53fb9226 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-dimmer-deuteranopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/source-dark-dimmer-deuteranopia-desktop-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:47 GMT + * Generated on Mon, 17 Mar 2025 12:07:04 GMT * Copyright (c) Harness. */ @@ -375,13 +375,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -391,13 +391,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, @@ -414,13 +414,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -430,13 +430,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, @@ -1902,6 +1902,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", @@ -4139,7 +4160,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", isSource: true, @@ -4159,7 +4180,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", isSource: true, diff --git a/packages/core-design-system/src/styles-esm/source-dark-dimmer-deuteranopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-dark-dimmer-deuteranopia-desktop-harness.ts index c82447aac9..4b9291d8b0 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-dimmer-deuteranopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/source-dark-dimmer-deuteranopia-desktop-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:46 GMT + * Generated on Mon, 17 Mar 2025 12:07:03 GMT * Copyright (c) Harness. */ @@ -375,13 +375,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -391,13 +391,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, @@ -414,13 +414,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -430,13 +430,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, @@ -1902,6 +1902,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", @@ -4139,7 +4160,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", isSource: true, @@ -4159,7 +4180,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", isSource: true, diff --git a/packages/core-design-system/src/styles-esm/source-dark-dimmer-protanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-dark-dimmer-protanopia-desktop-gitness.ts index 985bace731..d56ed8a6c4 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-dimmer-protanopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/source-dark-dimmer-protanopia-desktop-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:45 GMT + * Generated on Mon, 17 Mar 2025 12:06:58 GMT * Copyright (c) Harness. */ @@ -375,13 +375,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -391,13 +391,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, @@ -414,13 +414,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -430,13 +430,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, @@ -1902,6 +1902,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", @@ -4139,7 +4160,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", isSource: true, @@ -4159,7 +4180,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", isSource: true, diff --git a/packages/core-design-system/src/styles-esm/source-dark-dimmer-protanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-dark-dimmer-protanopia-desktop-harness.ts index 5a07067575..9a89930f31 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-dimmer-protanopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/source-dark-dimmer-protanopia-desktop-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:45 GMT + * Generated on Mon, 17 Mar 2025 12:06:57 GMT * Copyright (c) Harness. */ @@ -375,13 +375,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -391,13 +391,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, @@ -414,13 +414,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -430,13 +430,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, @@ -1902,6 +1902,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/dark/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", @@ -4139,7 +4160,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", isSource: true, @@ -4159,7 +4180,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", isSource: true, diff --git a/packages/core-design-system/src/styles-esm/source-dark-dimmer-tritanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-dark-dimmer-tritanopia-desktop-gitness.ts index 1fd3d1c0c1..ae314c551a 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-dimmer-tritanopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/source-dark-dimmer-tritanopia-desktop-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:48 GMT + * Generated on Mon, 17 Mar 2025 12:07:10 GMT * Copyright (c) Harness. */ @@ -375,13 +375,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -391,13 +391,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, @@ -414,13 +414,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -430,13 +430,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, @@ -1902,6 +1902,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", @@ -4136,7 +4157,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", isSource: true, @@ -4156,7 +4177,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", isSource: true, diff --git a/packages/core-design-system/src/styles-esm/source-dark-dimmer-tritanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-dark-dimmer-tritanopia-desktop-harness.ts index 962feb6c14..cc8361611b 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-dimmer-tritanopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/source-dark-dimmer-tritanopia-desktop-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:48 GMT + * Generated on Mon, 17 Mar 2025 12:07:10 GMT * Copyright (c) Harness. */ @@ -375,13 +375,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -391,13 +391,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, @@ -414,13 +414,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -430,13 +430,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, @@ -1902,6 +1902,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", @@ -4136,7 +4157,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", isSource: true, @@ -4156,7 +4177,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", isSource: true, diff --git a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-desktop-gitness.ts index 3403f9e485..963e04c5ff 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-desktop-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:44 GMT + * Generated on Mon, 17 Mar 2025 12:06:54 GMT * Copyright (c) Harness. */ @@ -393,13 +393,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -409,13 +409,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, @@ -432,13 +432,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -448,13 +448,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", @@ -4157,7 +4178,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast.json", isSource: true, @@ -4177,7 +4198,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast.json", isSource: true, diff --git a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-desktop-harness.ts index 7c1f4d7490..3fa8ae6b81 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-desktop-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:44 GMT + * Generated on Mon, 17 Mar 2025 12:06:53 GMT * Copyright (c) Harness. */ @@ -393,13 +393,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -409,13 +409,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, @@ -432,13 +432,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -448,13 +448,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/dark/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", @@ -4157,7 +4178,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast.json", isSource: true, @@ -4177,7 +4198,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast.json", isSource: true, diff --git a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-deuteranopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-deuteranopia-desktop-gitness.ts index d880a5d491..f2e2ccd9d4 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-deuteranopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-deuteranopia-desktop-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:47 GMT + * Generated on Mon, 17 Mar 2025 12:07:06 GMT * Copyright (c) Harness. */ @@ -393,13 +393,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -409,13 +409,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, @@ -432,13 +432,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -448,13 +448,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", @@ -4158,7 +4179,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", isSource: true, @@ -4178,7 +4199,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", isSource: true, diff --git a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-deuteranopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-deuteranopia-desktop-harness.ts index b99b9b2ee2..3a399a68f5 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-deuteranopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-deuteranopia-desktop-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:47 GMT + * Generated on Mon, 17 Mar 2025 12:07:05 GMT * Copyright (c) Harness. */ @@ -393,13 +393,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -409,13 +409,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, @@ -432,13 +432,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -448,13 +448,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", @@ -4158,7 +4179,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", isSource: true, @@ -4178,7 +4199,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", isSource: true, diff --git a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-protanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-protanopia-desktop-gitness.ts index 9fde989d42..f6e6e519eb 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-protanopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-protanopia-desktop-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:46 GMT + * Generated on Mon, 17 Mar 2025 12:07:00 GMT * Copyright (c) Harness. */ @@ -393,13 +393,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -409,13 +409,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, @@ -432,13 +432,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -448,13 +448,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", @@ -4157,7 +4178,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", isSource: true, @@ -4177,7 +4198,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", isSource: true, diff --git a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-protanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-protanopia-desktop-harness.ts index ea90c184d6..767c02cc91 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-protanopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-protanopia-desktop-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:45 GMT + * Generated on Mon, 17 Mar 2025 12:06:59 GMT * Copyright (c) Harness. */ @@ -393,13 +393,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -409,13 +409,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, @@ -432,13 +432,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -448,13 +448,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", @@ -4157,7 +4178,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", isSource: true, @@ -4177,7 +4198,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", isSource: true, diff --git a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-tritanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-tritanopia-desktop-gitness.ts index 40abea4615..697744d4e2 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-tritanopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-tritanopia-desktop-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:49 GMT + * Generated on Mon, 17 Mar 2025 12:07:12 GMT * Copyright (c) Harness. */ @@ -393,13 +393,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -409,13 +409,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, @@ -432,13 +432,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -448,13 +448,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", @@ -4157,7 +4178,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", isSource: true, @@ -4177,7 +4198,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", isSource: true, diff --git a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-tritanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-tritanopia-desktop-harness.ts index b5933efac9..9d23e54ac1 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-tritanopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/source-dark-high-contrast-tritanopia-desktop-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:49 GMT + * Generated on Mon, 17 Mar 2025 12:07:11 GMT * Copyright (c) Harness. */ @@ -393,13 +393,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -409,13 +409,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, @@ -432,13 +432,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -448,13 +448,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(3.66% 1.93 285.7)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", @@ -4157,7 +4178,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", isSource: true, @@ -4177,7 +4198,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", isSource: true, diff --git a/packages/core-design-system/src/styles-esm/source-dark-protanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-dark-protanopia-desktop-gitness.ts index 86baba1336..fcc62a05a5 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-protanopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/source-dark-protanopia-desktop-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:45 GMT + * Generated on Mon, 17 Mar 2025 12:06:56 GMT * Copyright (c) Harness. */ @@ -393,13 +393,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -409,13 +409,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, @@ -432,13 +432,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -448,13 +448,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", @@ -4157,7 +4178,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/default-protanopia.json", isSource: true, @@ -4177,7 +4198,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/default-protanopia.json", isSource: true, diff --git a/packages/core-design-system/src/styles-esm/source-dark-protanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-dark-protanopia-desktop-harness.ts index eda6552b1c..230961c761 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-protanopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/source-dark-protanopia-desktop-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:44 GMT + * Generated on Mon, 17 Mar 2025 12:06:55 GMT * Copyright (c) Harness. */ @@ -393,13 +393,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -409,13 +409,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, @@ -432,13 +432,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -448,13 +448,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/dark/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", @@ -4157,7 +4178,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/default-protanopia.json", isSource: true, @@ -4177,7 +4198,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/default-protanopia.json", isSource: true, diff --git a/packages/core-design-system/src/styles-esm/source-dark-tritanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-dark-tritanopia-desktop-gitness.ts index 0f19924c28..859fc11440 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-tritanopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/source-dark-tritanopia-desktop-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:48 GMT + * Generated on Mon, 17 Mar 2025 12:07:09 GMT * Copyright (c) Harness. */ @@ -393,13 +393,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -409,13 +409,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, @@ -432,13 +432,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -448,13 +448,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", @@ -4157,7 +4178,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/default-tritanopia.json", isSource: true, @@ -4177,7 +4198,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/default-tritanopia.json", isSource: true, diff --git a/packages/core-design-system/src/styles-esm/source-dark-tritanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-dark-tritanopia-desktop-harness.ts index 381ca7ebd3..1fb6d3287f 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-tritanopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/source-dark-tritanopia-desktop-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:48 GMT + * Generated on Mon, 17 Mar 2025 12:07:07 GMT * Copyright (c) Harness. */ @@ -393,13 +393,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -409,13 +409,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.15", + value: "0.08", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, @@ -432,13 +432,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -448,13 +448,13 @@ export default { "studio.tokens": { modify: { type: "alpha", - value: "0.2", + value: "0.1", space: "lch", }, }, }, $type: "color", - $value: "{colors.chrome.700}", + $value: "{colors.pure.white}", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(5.2% 3.07 285.78)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/dark/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", @@ -4157,7 +4178,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/default-tritanopia.json", isSource: true, @@ -4177,7 +4198,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/default-tritanopia.json", isSource: true, diff --git a/packages/core-design-system/src/styles-esm/source-light-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-light-desktop-gitness.ts index 9693ee2eea..b063a8b18f 100644 --- a/packages/core-design-system/src/styles-esm/source-light-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/source-light-desktop-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:43 GMT + * Generated on Mon, 17 Mar 2025 12:06:53 GMT * Copyright (c) Harness. */ @@ -491,14 +491,14 @@ export default { }, background: { $type: "color", - $value: "lch(74.37% 4.52 285.5)", + $value: "lch(85.99% 3.77 285.34)", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", filePath: "design-tokens/mode/light/default.json", isSource: true, original: { $type: "color", - $value: "{colors.chrome.300}", + $value: "{colors.chrome.150}", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", diff --git a/packages/core-design-system/src/styles-esm/source-light-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-light-desktop-harness.ts index 7cfc379efe..09629adbdd 100644 --- a/packages/core-design-system/src/styles-esm/source-light-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/source-light-desktop-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:43 GMT + * Generated on Mon, 17 Mar 2025 12:06:52 GMT * Copyright (c) Harness. */ @@ -491,14 +491,14 @@ export default { }, background: { $type: "color", - $value: "lch(74.37% 4.52 285.5)", + $value: "lch(85.99% 3.77 285.34)", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", filePath: "design-tokens/mode/light/default.json", isSource: true, original: { $type: "color", - $value: "{colors.chrome.300}", + $value: "{colors.chrome.150}", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/light/default.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", diff --git a/packages/core-design-system/src/styles-esm/source-light-deuteranopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-light-deuteranopia-desktop-gitness.ts index 66fd5dc7c5..f94b1d88e7 100644 --- a/packages/core-design-system/src/styles-esm/source-light-deuteranopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/source-light-deuteranopia-desktop-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:52 GMT + * Generated on Mon, 17 Mar 2025 12:07:24 GMT * Copyright (c) Harness. */ @@ -491,14 +491,14 @@ export default { }, background: { $type: "color", - $value: "lch(74.37% 4.52 285.5)", + $value: "lch(85.99% 3.77 285.34)", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", filePath: "design-tokens/mode/light/default-deuteranopia.json", isSource: true, original: { $type: "color", - $value: "{colors.chrome.300}", + $value: "{colors.chrome.150}", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", diff --git a/packages/core-design-system/src/styles-esm/source-light-deuteranopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-light-deuteranopia-desktop-harness.ts index bcc1d01679..5745239660 100644 --- a/packages/core-design-system/src/styles-esm/source-light-deuteranopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/source-light-deuteranopia-desktop-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:52 GMT + * Generated on Mon, 17 Mar 2025 12:07:23 GMT * Copyright (c) Harness. */ @@ -491,14 +491,14 @@ export default { }, background: { $type: "color", - $value: "lch(74.37% 4.52 285.5)", + $value: "lch(85.99% 3.77 285.34)", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", filePath: "design-tokens/mode/light/default-deuteranopia.json", isSource: true, original: { $type: "color", - $value: "{colors.chrome.300}", + $value: "{colors.chrome.150}", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/light/default-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", diff --git a/packages/core-design-system/src/styles-esm/source-light-dimmer-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-light-dimmer-desktop-gitness.ts index 2e15b9ea91..f9d7766d76 100644 --- a/packages/core-design-system/src/styles-esm/source-light-dimmer-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/source-light-dimmer-desktop-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:49 GMT + * Generated on Mon, 17 Mar 2025 12:07:15 GMT * Copyright (c) Harness. */ @@ -509,14 +509,14 @@ export default { }, background: { $type: "color", - $value: "lch(74.37% 4.52 285.5)", + $value: "lch(85.99% 3.77 285.34)", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", filePath: "design-tokens/mode/light/dimmer.json", isSource: true, original: { $type: "color", - $value: "{colors.chrome.300}", + $value: "{colors.chrome.150}", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, @@ -1938,6 +1938,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", diff --git a/packages/core-design-system/src/styles-esm/source-light-dimmer-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-light-dimmer-desktop-harness.ts index 8c917ce879..c1a8523924 100644 --- a/packages/core-design-system/src/styles-esm/source-light-dimmer-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/source-light-dimmer-desktop-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:49 GMT + * Generated on Mon, 17 Mar 2025 12:07:14 GMT * Copyright (c) Harness. */ @@ -509,14 +509,14 @@ export default { }, background: { $type: "color", - $value: "lch(74.37% 4.52 285.5)", + $value: "lch(85.99% 3.77 285.34)", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", filePath: "design-tokens/mode/light/dimmer.json", isSource: true, original: { $type: "color", - $value: "{colors.chrome.300}", + $value: "{colors.chrome.150}", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, @@ -1938,6 +1938,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/light/dimmer.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", diff --git a/packages/core-design-system/src/styles-esm/source-light-dimmer-deuteranopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-light-dimmer-deuteranopia-desktop-gitness.ts index 8bd357ea56..6188042d3f 100644 --- a/packages/core-design-system/src/styles-esm/source-light-dimmer-deuteranopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/source-light-dimmer-deuteranopia-desktop-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:52 GMT + * Generated on Mon, 17 Mar 2025 12:07:25 GMT * Copyright (c) Harness. */ @@ -509,14 +509,14 @@ export default { }, background: { $type: "color", - $value: "lch(74.37% 4.52 285.5)", + $value: "lch(85.99% 3.77 285.34)", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", isSource: true, original: { $type: "color", - $value: "{colors.chrome.300}", + $value: "{colors.chrome.150}", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, @@ -1938,6 +1938,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", diff --git a/packages/core-design-system/src/styles-esm/source-light-dimmer-deuteranopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-light-dimmer-deuteranopia-desktop-harness.ts index 4d94213ae0..95a25fa612 100644 --- a/packages/core-design-system/src/styles-esm/source-light-dimmer-deuteranopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/source-light-dimmer-deuteranopia-desktop-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:52 GMT + * Generated on Mon, 17 Mar 2025 12:07:25 GMT * Copyright (c) Harness. */ @@ -509,14 +509,14 @@ export default { }, background: { $type: "color", - $value: "lch(74.37% 4.52 285.5)", + $value: "lch(85.99% 3.77 285.34)", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", isSource: true, original: { $type: "color", - $value: "{colors.chrome.300}", + $value: "{colors.chrome.150}", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, @@ -1938,6 +1938,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", diff --git a/packages/core-design-system/src/styles-esm/source-light-dimmer-protanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-light-dimmer-protanopia-desktop-gitness.ts index f43c30ad3f..8bddecedae 100644 --- a/packages/core-design-system/src/styles-esm/source-light-dimmer-protanopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/source-light-dimmer-protanopia-desktop-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:51 GMT + * Generated on Mon, 17 Mar 2025 12:07:20 GMT * Copyright (c) Harness. */ @@ -509,14 +509,14 @@ export default { }, background: { $type: "color", - $value: "lch(74.37% 4.52 285.5)", + $value: "lch(85.99% 3.77 285.34)", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", isSource: true, original: { $type: "color", - $value: "{colors.chrome.300}", + $value: "{colors.chrome.150}", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, @@ -1938,6 +1938,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", diff --git a/packages/core-design-system/src/styles-esm/source-light-dimmer-protanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-light-dimmer-protanopia-desktop-harness.ts index 3c574d1799..d0939796cd 100644 --- a/packages/core-design-system/src/styles-esm/source-light-dimmer-protanopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/source-light-dimmer-protanopia-desktop-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:51 GMT + * Generated on Mon, 17 Mar 2025 12:07:20 GMT * Copyright (c) Harness. */ @@ -509,14 +509,14 @@ export default { }, background: { $type: "color", - $value: "lch(74.37% 4.52 285.5)", + $value: "lch(85.99% 3.77 285.34)", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", isSource: true, original: { $type: "color", - $value: "{colors.chrome.300}", + $value: "{colors.chrome.150}", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, @@ -1938,6 +1938,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/light/dimmer-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", diff --git a/packages/core-design-system/src/styles-esm/source-light-dimmer-tritanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-light-dimmer-tritanopia-desktop-gitness.ts index 675dc18bb0..eebf420c90 100644 --- a/packages/core-design-system/src/styles-esm/source-light-dimmer-tritanopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/source-light-dimmer-tritanopia-desktop-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:54 GMT + * Generated on Mon, 17 Mar 2025 12:07:30 GMT * Copyright (c) Harness. */ @@ -509,14 +509,14 @@ export default { }, background: { $type: "color", - $value: "lch(74.37% 4.52 285.5)", + $value: "lch(85.99% 3.77 285.34)", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", isSource: true, original: { $type: "color", - $value: "{colors.chrome.300}", + $value: "{colors.chrome.150}", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, @@ -1938,6 +1938,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", diff --git a/packages/core-design-system/src/styles-esm/source-light-dimmer-tritanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-light-dimmer-tritanopia-desktop-harness.ts index fed74e454f..90f4d9e1ba 100644 --- a/packages/core-design-system/src/styles-esm/source-light-dimmer-tritanopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/source-light-dimmer-tritanopia-desktop-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:54 GMT + * Generated on Mon, 17 Mar 2025 12:07:29 GMT * Copyright (c) Harness. */ @@ -509,14 +509,14 @@ export default { }, background: { $type: "color", - $value: "lch(74.37% 4.52 285.5)", + $value: "lch(85.99% 3.77 285.34)", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", isSource: true, original: { $type: "color", - $value: "{colors.chrome.300}", + $value: "{colors.chrome.150}", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, @@ -1938,6 +1938,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/light/dimmer-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", diff --git a/packages/core-design-system/src/styles-esm/source-light-high-contrast-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-light-high-contrast-desktop-gitness.ts index d953be3bf8..7d3f09386d 100644 --- a/packages/core-design-system/src/styles-esm/source-light-high-contrast-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/source-light-high-contrast-desktop-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:50 GMT + * Generated on Mon, 17 Mar 2025 12:07:16 GMT * Copyright (c) Harness. */ @@ -491,14 +491,14 @@ export default { }, background: { $type: "color", - $value: "lch(90.71% 0.38 284.93)", + $value: "lch(85.99% 3.77 285.34)", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", filePath: "design-tokens/mode/light/high-contrast.json", isSource: true, original: { $type: "color", - $value: "{colors.chrome.100}", + $value: "{colors.chrome.150}", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", diff --git a/packages/core-design-system/src/styles-esm/source-light-high-contrast-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-light-high-contrast-desktop-harness.ts index 8a7c86273f..dcddbb9b92 100644 --- a/packages/core-design-system/src/styles-esm/source-light-high-contrast-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/source-light-high-contrast-desktop-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:50 GMT + * Generated on Mon, 17 Mar 2025 12:07:15 GMT * Copyright (c) Harness. */ @@ -491,14 +491,14 @@ export default { }, background: { $type: "color", - $value: "lch(90.71% 0.38 284.93)", + $value: "lch(85.99% 3.77 285.34)", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", filePath: "design-tokens/mode/light/high-contrast.json", isSource: true, original: { $type: "color", - $value: "{colors.chrome.100}", + $value: "{colors.chrome.150}", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/light/high-contrast.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", diff --git a/packages/core-design-system/src/styles-esm/source-light-high-contrast-deuteranopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-light-high-contrast-deuteranopia-desktop-gitness.ts index 8c1202be0f..d7745fcf40 100644 --- a/packages/core-design-system/src/styles-esm/source-light-high-contrast-deuteranopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/source-light-high-contrast-deuteranopia-desktop-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:53 GMT + * Generated on Mon, 17 Mar 2025 12:07:27 GMT * Copyright (c) Harness. */ @@ -491,14 +491,14 @@ export default { }, background: { $type: "color", - $value: "lch(90.71% 0.38 284.93)", + $value: "lch(85.99% 3.77 285.34)", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", isSource: true, original: { $type: "color", - $value: "{colors.chrome.100}", + $value: "{colors.chrome.150}", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", diff --git a/packages/core-design-system/src/styles-esm/source-light-high-contrast-deuteranopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-light-high-contrast-deuteranopia-desktop-harness.ts index 3890375f84..e498d64d70 100644 --- a/packages/core-design-system/src/styles-esm/source-light-high-contrast-deuteranopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/source-light-high-contrast-deuteranopia-desktop-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:53 GMT + * Generated on Mon, 17 Mar 2025 12:07:26 GMT * Copyright (c) Harness. */ @@ -491,14 +491,14 @@ export default { }, background: { $type: "color", - $value: "lch(90.71% 0.38 284.93)", + $value: "lch(85.99% 3.77 285.34)", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", isSource: true, original: { $type: "color", - $value: "{colors.chrome.100}", + $value: "{colors.chrome.150}", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", diff --git a/packages/core-design-system/src/styles-esm/source-light-high-contrast-protanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-light-high-contrast-protanopia-desktop-gitness.ts index 8af8088647..fc1d2b0f7d 100644 --- a/packages/core-design-system/src/styles-esm/source-light-high-contrast-protanopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/source-light-high-contrast-protanopia-desktop-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:51 GMT + * Generated on Mon, 17 Mar 2025 12:07:22 GMT * Copyright (c) Harness. */ @@ -491,14 +491,14 @@ export default { }, background: { $type: "color", - $value: "lch(90.71% 0.38 284.93)", + $value: "lch(85.99% 3.77 285.34)", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", isSource: true, original: { $type: "color", - $value: "{colors.chrome.100}", + $value: "{colors.chrome.150}", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", diff --git a/packages/core-design-system/src/styles-esm/source-light-high-contrast-protanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-light-high-contrast-protanopia-desktop-harness.ts index aa4782474d..c25af5ff93 100644 --- a/packages/core-design-system/src/styles-esm/source-light-high-contrast-protanopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/source-light-high-contrast-protanopia-desktop-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:51 GMT + * Generated on Mon, 17 Mar 2025 12:07:21 GMT * Copyright (c) Harness. */ @@ -491,14 +491,14 @@ export default { }, background: { $type: "color", - $value: "lch(90.71% 0.38 284.93)", + $value: "lch(85.99% 3.77 285.34)", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", isSource: true, original: { $type: "color", - $value: "{colors.chrome.100}", + $value: "{colors.chrome.150}", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/light/high-contrast-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", diff --git a/packages/core-design-system/src/styles-esm/source-light-high-contrast-tritanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-light-high-contrast-tritanopia-desktop-gitness.ts index 427d4eeeb8..2ef4c37e48 100644 --- a/packages/core-design-system/src/styles-esm/source-light-high-contrast-tritanopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/source-light-high-contrast-tritanopia-desktop-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:54 GMT + * Generated on Mon, 17 Mar 2025 12:07:32 GMT * Copyright (c) Harness. */ @@ -491,14 +491,14 @@ export default { }, background: { $type: "color", - $value: "lch(90.71% 0.38 284.93)", + $value: "lch(85.99% 3.77 285.34)", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", isSource: true, original: { $type: "color", - $value: "{colors.chrome.100}", + $value: "{colors.chrome.150}", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", diff --git a/packages/core-design-system/src/styles-esm/source-light-high-contrast-tritanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-light-high-contrast-tritanopia-desktop-harness.ts index 89edcb23eb..e03639b1d1 100644 --- a/packages/core-design-system/src/styles-esm/source-light-high-contrast-tritanopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/source-light-high-contrast-tritanopia-desktop-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:54 GMT + * Generated on Mon, 17 Mar 2025 12:07:31 GMT * Copyright (c) Harness. */ @@ -491,14 +491,14 @@ export default { }, background: { $type: "color", - $value: "lch(90.71% 0.38 284.93)", + $value: "lch(85.99% 3.77 285.34)", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", isSource: true, original: { $type: "color", - $value: "{colors.chrome.100}", + $value: "{colors.chrome.150}", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(98.27% 0.36 135.2)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", diff --git a/packages/core-design-system/src/styles-esm/source-light-protanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-light-protanopia-desktop-gitness.ts index ac52bf3c8b..2d5754cb33 100644 --- a/packages/core-design-system/src/styles-esm/source-light-protanopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/source-light-protanopia-desktop-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:50 GMT + * Generated on Mon, 17 Mar 2025 12:07:19 GMT * Copyright (c) Harness. */ @@ -491,14 +491,14 @@ export default { }, background: { $type: "color", - $value: "lch(74.37% 4.52 285.5)", + $value: "lch(85.99% 3.77 285.34)", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", filePath: "design-tokens/mode/light/default-protanopia.json", isSource: true, original: { $type: "color", - $value: "{colors.chrome.300}", + $value: "{colors.chrome.150}", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", diff --git a/packages/core-design-system/src/styles-esm/source-light-protanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-light-protanopia-desktop-harness.ts index 1d0bd47753..5cbadd65d4 100644 --- a/packages/core-design-system/src/styles-esm/source-light-protanopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/source-light-protanopia-desktop-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:50 GMT + * Generated on Mon, 17 Mar 2025 12:07:17 GMT * Copyright (c) Harness. */ @@ -491,14 +491,14 @@ export default { }, background: { $type: "color", - $value: "lch(74.37% 4.52 285.5)", + $value: "lch(85.99% 3.77 285.34)", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", filePath: "design-tokens/mode/light/default-protanopia.json", isSource: true, original: { $type: "color", - $value: "{colors.chrome.300}", + $value: "{colors.chrome.150}", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/light/default-protanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", diff --git a/packages/core-design-system/src/styles-esm/source-light-tritanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/source-light-tritanopia-desktop-gitness.ts index edf56fdcf1..f20a933fe4 100644 --- a/packages/core-design-system/src/styles-esm/source-light-tritanopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/source-light-tritanopia-desktop-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:53 GMT + * Generated on Mon, 17 Mar 2025 12:07:29 GMT * Copyright (c) Harness. */ @@ -491,14 +491,14 @@ export default { }, background: { $type: "color", - $value: "lch(74.37% 4.52 285.5)", + $value: "lch(85.99% 3.77 285.34)", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", filePath: "design-tokens/mode/light/default-tritanopia.json", isSource: true, original: { $type: "color", - $value: "{colors.chrome.300}", + $value: "{colors.chrome.150}", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", diff --git a/packages/core-design-system/src/styles-esm/source-light-tritanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/source-light-tritanopia-desktop-harness.ts index db6492bf5e..ef82b845b0 100644 --- a/packages/core-design-system/src/styles-esm/source-light-tritanopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/source-light-tritanopia-desktop-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:53 GMT + * Generated on Mon, 17 Mar 2025 12:07:28 GMT * Copyright (c) Harness. */ @@ -491,14 +491,14 @@ export default { }, background: { $type: "color", - $value: "lch(74.37% 4.52 285.5)", + $value: "lch(85.99% 3.77 285.34)", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", filePath: "design-tokens/mode/light/default-tritanopia.json", isSource: true, original: { $type: "color", - $value: "{colors.chrome.300}", + $value: "{colors.chrome.150}", $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, @@ -1920,6 +1920,27 @@ export default { }, }, outline: { + background: { + $type: "color", + $value: "lch(100% 0 134.54)", + $description: "Background color for outline buttons.", + filePath: "design-tokens/mode/light/default-tritanopia.json", + isSource: true, + original: { + $type: "color", + $value: "{background.2}", + $description: "Background color for outline buttons.", + }, + name: "canary-component-btn-outline-background", + attributes: { + category: "component", + type: "btn", + item: "outline", + subitem: "background", + themeable: true, + }, + path: ["component", "btn", "outline", "background"], + }, unselected: { text: { $type: "color", diff --git a/packages/core-design-system/src/styles/breakpoint.css b/packages/core-design-system/src/styles/breakpoint.css index a1fb8c38b7..feac1b2ca6 100644 --- a/packages/core-design-system/src/styles/breakpoint.css +++ b/packages/core-design-system/src/styles/breakpoint.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:42 GMT + * Generated on Mon, 17 Mar 2025 12:07:32 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/colors.css b/packages/core-design-system/src/styles/colors.css index dedb7388ca..a9745a3f2a 100644 --- a/packages/core-design-system/src/styles/colors.css +++ b/packages/core-design-system/src/styles/colors.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:42 GMT + * Generated on Mon, 17 Mar 2025 12:07:32 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/components.css b/packages/core-design-system/src/styles/components.css index dccbb0e2e7..e7952a44ec 100644 --- a/packages/core-design-system/src/styles/components.css +++ b/packages/core-design-system/src/styles/components.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:42 GMT + * Generated on Mon, 17 Mar 2025 12:07:32 GMT * Copyright (c) Harness. */ @@ -17,45 +17,19 @@ --canary-input-gap: var(--canary-spacing-1-half); --canary-input-px: var(--canary-spacing-3); /* 12px horizontal padding */ --canary-input-py: var(--canary-spacing-2); /* 8px vertical padding */ - /** - * 4px - * - */ - --canary-dropdown-item-px: var(--canary-spacing-1); - --canary-dropdown-item-gap: var(--canary-spacing-2-half); /* 8px */ - --canary-dropdown-sub-item-px: var(--canary-spacing-3); /* 12px */ - --canary-dropdown-sub-item-py: var(--canary-spacing-2); /* 8px */ - --canary-dropdown-sub-item-gap: var(--canary-spacing-2-half); - --canary-dropdown-sub-item-radius: var(--canary-rounded-1); - --canary-dropdown-sub-item-size: var(--canary-size-8); - --canary-dropdown-sub-item-gap-y: var(--canary-spacing-1); /* 4px gap between text */ - /** - * 4px - * - */ - --canary-dropdown-container-py: var(--canary-spacing-1); - --canary-dropdown-container-radius: var(--canary-rounded-3); /* 6px */ - --canary-dropdown-menu-item-branch-selector-tag-px: var(--canary-spacing-2); /* 8px horizontal padding */ - /** - * 20px height - * - */ - --canary-dropdown-menu-item-branch-selector-tag-size: var(--canary-size-5); - --canary-dropdown-menu-items-header-footer-px: var(--canary-spacing-4); /* 16px horizontal padding */ - --canary-dropdown-menu-items-header-footer-py: var(--canary-spacing-2-half); /* 10px vertical padding */ --canary-btn-size-sm: var(--canary-size-7); --canary-btn-size-default: var(--canary-size-8); --canary-btn-size-icon: var(--canary-size-8); --canary-btn-size-lg: var(--canary-size-10); --canary-btn-gap-sm: var(--canary-spacing-1-half); - --canary-btn-gap-default: var(--canary-spacing-2-half); + --canary-btn-gap-default: var(--canary-spacing-1-half); --canary-btn-gap-lg: var(--canary-spacing-2-half); --canary-btn-default-radius: var(--canary-rounded-2); --canary-btn-rounded-radius: var(--canary-rounded-full); --canary-btn-border: var(--canary-border-width-1); - --canary-btn-px-sm: var(--canary-spacing-5); - --canary-btn-px-default: var(--canary-spacing-5); - --canary-btn-px-lg: var(--canary-spacing-6); + --canary-btn-px-sm: var(--canary-spacing-3); + --canary-btn-px-default: var(--canary-spacing-4); + --canary-btn-px-lg: var(--canary-spacing-5); --canary-btn-py-sm: var(--canary-spacing-1-half); --canary-btn-py-default: var(--canary-spacing-2); --canary-btn-py-lg: var(--canary-spacing-3); @@ -82,5 +56,31 @@ --canary-tag-split-left-radius-r: var(--canary-rounded-none); --canary-tag-split-left-radius-l: var(--canary-rounded-2); --canary-tag-border: var(--canary-border-width-1); + /** + * 4px + * + */ + --canary-dropdown-item-px: var(--canary-spacing-1); + --canary-dropdown-item-gap: var(--canary-spacing-2-half); /* 8px */ + --canary-dropdown-sub-item-px: var(--canary-spacing-3); /* 12px */ + --canary-dropdown-sub-item-py: var(--canary-spacing-2); /* 8px */ + --canary-dropdown-sub-item-gap: var(--canary-spacing-2-half); + --canary-dropdown-sub-item-radius: var(--canary-rounded-1); + --canary-dropdown-sub-item-size: var(--canary-size-8); + --canary-dropdown-sub-item-gap-y: var(--canary-spacing-1); /* 4px gap between text */ + /** + * 4px + * + */ + --canary-dropdown-container-py: var(--canary-spacing-1); + --canary-dropdown-container-radius: var(--canary-rounded-3); /* 6px */ + --canary-dropdown-menu-item-branch-selector-tag-px: var(--canary-spacing-2); /* 8px horizontal padding */ + /** + * 20px height + * + */ + --canary-dropdown-menu-item-branch-selector-tag-size: var(--canary-size-5); + --canary-dropdown-menu-items-header-footer-px: var(--canary-spacing-4); /* 16px horizontal padding */ + --canary-dropdown-menu-items-header-footer-py: var(--canary-spacing-2-half); /* 10px vertical padding */ --canary-dropdown-item-radius: var(--canary-dropdown-sub-item-radius); } diff --git a/packages/core-design-system/src/styles/core.css b/packages/core-design-system/src/styles/core.css index ad5e0ecdf6..7ace6671f4 100644 --- a/packages/core-design-system/src/styles/core.css +++ b/packages/core-design-system/src/styles/core.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:42 GMT + * Generated on Mon, 17 Mar 2025 12:07:32 GMT * Copyright (c) Harness. */ @@ -82,6 +82,84 @@ --canary-font-size-11: 4.5rem; /* 72px */ --canary-font-size-12: 6rem; /* 96px */ --canary-font-size-13: 8rem; /* 128px */ + --canary-line-height-1-none: 0.75rem; + --canary-line-height-1-tight: 0.9375rem; + --canary-line-height-1-snug: 1.0313rem; + --canary-line-height-1-normal: 1.125rem; + --canary-line-height-1-relaxed: 1.2188rem; + --canary-line-height-1-loose: 1.5rem; + --canary-line-height-2-none: 0.875rem; + --canary-line-height-2-tight: 1.0938rem; + --canary-line-height-2-snug: 1.2031rem; + --canary-line-height-2-normal: 1.3125rem; + --canary-line-height-2-relaxed: 1.4219rem; + --canary-line-height-2-loose: 1.75rem; + --canary-line-height-3-none: 1rem; + --canary-line-height-3-tight: 1.25rem; + --canary-line-height-3-snug: 1.375rem; + --canary-line-height-3-normal: 1.5rem; + --canary-line-height-3-relaxed: 1.625rem; + --canary-line-height-3-loose: 2rem; + --canary-line-height-4-none: 1.125rem; + --canary-line-height-4-tight: 1.4063rem; + --canary-line-height-4-snug: 1.5469rem; + --canary-line-height-4-normal: 1.6875rem; + --canary-line-height-4-relaxed: 1.8281rem; + --canary-line-height-4-loose: 2.25rem; + --canary-line-height-5-none: 1.25rem; + --canary-line-height-5-tight: 1.5625rem; + --canary-line-height-5-snug: 1.7188rem; + --canary-line-height-5-normal: 1.875rem; + --canary-line-height-5-relaxed: 2.0313rem; + --canary-line-height-5-loose: 2.5rem; + --canary-line-height-6-none: 1.5rem; + --canary-line-height-6-tight: 1.875rem; + --canary-line-height-6-snug: 2.0625rem; + --canary-line-height-6-normal: 2.25rem; + --canary-line-height-6-relaxed: 2.4375rem; + --canary-line-height-6-loose: 3rem; + --canary-line-height-7-none: 1.875rem; + --canary-line-height-7-tight: 2.3438rem; + --canary-line-height-7-snug: 2.5781rem; + --canary-line-height-7-normal: 2.8125rem; + --canary-line-height-7-relaxed: 3.0469rem; + --canary-line-height-7-loose: 3.75rem; + --canary-line-height-8-none: 2.25rem; + --canary-line-height-8-tight: 2.8125rem; + --canary-line-height-8-snug: 3.0938rem; + --canary-line-height-8-normal: 3.375rem; + --canary-line-height-8-relaxed: 3.6563rem; + --canary-line-height-8-loose: 4.5rem; + --canary-line-height-9-none: 3rem; + --canary-line-height-9-tight: 3.75rem; + --canary-line-height-9-snug: 4.125rem; + --canary-line-height-9-normal: 4.5rem; + --canary-line-height-9-relaxed: 4.875rem; + --canary-line-height-9-loose: 6rem; + --canary-line-height-10-none: 3.75rem; + --canary-line-height-10-tight: 4.6875rem; + --canary-line-height-10-snug: 5.1563rem; + --canary-line-height-10-normal: 5.625rem; + --canary-line-height-10-relaxed: 6.0938rem; + --canary-line-height-10-loose: 7.5rem; + --canary-line-height-11-none: 4.5rem; + --canary-line-height-11-tight: 5.625rem; + --canary-line-height-11-snug: 6.1875rem; + --canary-line-height-11-normal: 6.75rem; + --canary-line-height-11-relaxed: 7.3125rem; + --canary-line-height-11-loose: 9rem; + --canary-line-height-12-none: 6rem; + --canary-line-height-12-tight: 7.5rem; + --canary-line-height-12-snug: 8.25rem; + --canary-line-height-12-normal: 9rem; + --canary-line-height-12-relaxed: 9.75rem; + --canary-line-height-12-loose: 12rem; + --canary-line-height-13-none: 8rem; + --canary-line-height-13-tight: 10rem; + --canary-line-height-13-snug: 11rem; + --canary-line-height-13-normal: 12rem; + --canary-line-height-13-relaxed: 13rem; + --canary-line-height-13-loose: 16rem; --canary-line-height-none: 1; --canary-line-height-tight: 1.25; --canary-line-height-snug: 1.375; @@ -172,92 +250,14 @@ --canary-border-width-2: 2px; /* Medium border width (border-2) */ --canary-border-width-4: 4px; /* Thick border width (border-4) */ --canary-border-width-8: 8px; /* Extra thick border width (border-8) */ - --canary-line-height-1-none: var(--canary-font-size-1)*var(--canary-line-height-none); - --canary-line-height-1-tight: var(--canary-font-size-1)*var(--canary-line-height-tight); - --canary-line-height-1-snug: var(--canary-font-size-1)*var(--canary-line-height-snug); - --canary-line-height-1-normal: var(--canary-font-size-1)*var(--canary-line-height-normal); - --canary-line-height-1-relaxed: var(--canary-font-size-1)*var(--canary-line-height-relaxed); - --canary-line-height-1-loose: var(--canary-font-size-1)*var(--canary-line-height-loose); - --canary-line-height-2-none: var(--canary-font-size-2)*var(--canary-line-height-none); - --canary-line-height-2-tight: var(--canary-font-size-2)*var(--canary-line-height-tight); - --canary-line-height-2-snug: var(--canary-font-size-2)*var(--canary-line-height-snug); - --canary-line-height-2-normal: var(--canary-font-size-2)*var(--canary-line-height-normal); - --canary-line-height-2-relaxed: var(--canary-font-size-2)*var(--canary-line-height-relaxed); - --canary-line-height-2-loose: var(--canary-font-size-2)*var(--canary-line-height-loose); - --canary-line-height-3-none: var(--canary-font-size-3)*var(--canary-line-height-none); - --canary-line-height-3-tight: var(--canary-font-size-3)*var(--canary-line-height-tight); - --canary-line-height-3-snug: var(--canary-font-size-3)*var(--canary-line-height-snug); - --canary-line-height-3-normal: var(--canary-font-size-3)*var(--canary-line-height-normal); - --canary-line-height-3-relaxed: var(--canary-font-size-3)*var(--canary-line-height-relaxed); - --canary-line-height-3-loose: var(--canary-font-size-3)*var(--canary-line-height-loose); - --canary-line-height-4-none: var(--canary-font-size-4)*var(--canary-line-height-none); - --canary-line-height-4-tight: var(--canary-font-size-4)*var(--canary-line-height-tight); - --canary-line-height-4-snug: var(--canary-font-size-4)*var(--canary-line-height-snug); - --canary-line-height-4-normal: var(--canary-font-size-4)*var(--canary-line-height-normal); - --canary-line-height-4-relaxed: var(--canary-font-size-4)*var(--canary-line-height-relaxed); - --canary-line-height-4-loose: var(--canary-font-size-4)*var(--canary-line-height-loose); - --canary-line-height-5-none: var(--canary-font-size-5)*var(--canary-line-height-none); - --canary-line-height-5-tight: var(--canary-font-size-5)*var(--canary-line-height-tight); - --canary-line-height-5-snug: var(--canary-font-size-5)*var(--canary-line-height-snug); - --canary-line-height-5-normal: var(--canary-font-size-5)*var(--canary-line-height-normal); - --canary-line-height-5-relaxed: var(--canary-font-size-5)*var(--canary-line-height-relaxed); - --canary-line-height-5-loose: var(--canary-font-size-5)*var(--canary-line-height-loose); - --canary-line-height-6-none: var(--canary-font-size-6)*var(--canary-line-height-none); - --canary-line-height-6-tight: var(--canary-font-size-6)*var(--canary-line-height-tight); - --canary-line-height-6-snug: var(--canary-font-size-6)*var(--canary-line-height-snug); - --canary-line-height-6-normal: var(--canary-font-size-6)*var(--canary-line-height-normal); - --canary-line-height-6-relaxed: var(--canary-font-size-6)*var(--canary-line-height-relaxed); - --canary-line-height-6-loose: var(--canary-font-size-6)*var(--canary-line-height-loose); - --canary-line-height-7-none: var(--canary-font-size-7)*var(--canary-line-height-none); - --canary-line-height-7-tight: var(--canary-font-size-7)*var(--canary-line-height-tight); - --canary-line-height-7-snug: var(--canary-font-size-7)*var(--canary-line-height-snug); - --canary-line-height-7-normal: var(--canary-font-size-7)*var(--canary-line-height-normal); - --canary-line-height-7-relaxed: var(--canary-font-size-7)*var(--canary-line-height-relaxed); - --canary-line-height-7-loose: var(--canary-font-size-7)*var(--canary-line-height-loose); - --canary-line-height-8-none: var(--canary-font-size-8)*var(--canary-line-height-none); - --canary-line-height-8-tight: var(--canary-font-size-8)*var(--canary-line-height-tight); - --canary-line-height-8-snug: var(--canary-font-size-8)*var(--canary-line-height-snug); - --canary-line-height-8-normal: var(--canary-font-size-8)*var(--canary-line-height-normal); - --canary-line-height-8-relaxed: var(--canary-font-size-8)*var(--canary-line-height-relaxed); - --canary-line-height-8-loose: var(--canary-font-size-8)*var(--canary-line-height-loose); - --canary-line-height-9-none: var(--canary-font-size-9)*var(--canary-line-height-none); - --canary-line-height-9-tight: var(--canary-font-size-9)*var(--canary-line-height-tight); - --canary-line-height-9-snug: var(--canary-font-size-9)*var(--canary-line-height-snug); - --canary-line-height-9-normal: var(--canary-font-size-9)*var(--canary-line-height-normal); - --canary-line-height-9-relaxed: var(--canary-font-size-9)*var(--canary-line-height-relaxed); - --canary-line-height-9-loose: var(--canary-font-size-9)*var(--canary-line-height-loose); - --canary-line-height-10-none: var(--canary-font-size-10)*var(--canary-line-height-none); - --canary-line-height-10-tight: var(--canary-font-size-10)*var(--canary-line-height-tight); - --canary-line-height-10-snug: var(--canary-font-size-10)*var(--canary-line-height-snug); - --canary-line-height-10-normal: var(--canary-font-size-10)*var(--canary-line-height-normal); - --canary-line-height-10-relaxed: var(--canary-font-size-10)*var(--canary-line-height-relaxed); - --canary-line-height-10-loose: var(--canary-font-size-10)*var(--canary-line-height-loose); - --canary-line-height-11-none: var(--canary-font-size-11)*var(--canary-line-height-none); - --canary-line-height-11-tight: var(--canary-font-size-11)*var(--canary-line-height-tight); - --canary-line-height-11-snug: var(--canary-font-size-11)*var(--canary-line-height-snug); - --canary-line-height-11-normal: var(--canary-font-size-11)*var(--canary-line-height-normal); - --canary-line-height-11-relaxed: var(--canary-font-size-11)*var(--canary-line-height-relaxed); - --canary-line-height-11-loose: var(--canary-font-size-11)*var(--canary-line-height-loose); - --canary-line-height-12-none: var(--canary-font-size-12)*var(--canary-line-height-none); - --canary-line-height-12-tight: var(--canary-font-size-12)*var(--canary-line-height-tight); - --canary-line-height-12-snug: var(--canary-font-size-12)*var(--canary-line-height-snug); - --canary-line-height-12-normal: var(--canary-font-size-12)*var(--canary-line-height-normal); - --canary-line-height-12-relaxed: var(--canary-font-size-12)*var(--canary-line-height-relaxed); - --canary-line-height-12-loose: var(--canary-font-size-12)*var(--canary-line-height-loose); - --canary-line-height-13-none: var(--canary-font-size-13)*var(--canary-line-height-none); - --canary-line-height-13-tight: var(--canary-font-size-13)*var(--canary-line-height-tight); - --canary-line-height-13-snug: var(--canary-font-size-13)*var(--canary-line-height-snug); - --canary-line-height-13-normal: var(--canary-font-size-13)*var(--canary-line-height-normal); - --canary-line-height-13-relaxed: var(--canary-font-size-13)*var(--canary-line-height-relaxed); - --canary-line-height-13-loose: var(--canary-font-size-13)*var(--canary-line-height-loose); - --canary-icon-size-xxs: var(--canary-size-2); - --canary-icon-size-xs: var(--canary-size-3); - --canary-icon-size-sm: var(--canary-size-3-half); - --canary-icon-size-default: var(--canary-size-4); - --canary-icon-size-md: var(--canary-size-5); + --canary-icon-size-xxs: 8px; + --canary-icon-size-xs: 12px; + --canary-icon-size-sm: 14px; + --canary-icon-size-default: 16px; + --canary-icon-size-md: 20px; /** * * */ - --canary-icon-size-lg: var(--canary-size-8); + --canary-icon-size-lg: 32px; } diff --git a/packages/core-design-system/src/styles/index.css b/packages/core-design-system/src/styles/index.css index 971e28bdd3..4f9dd4a92d 100644 --- a/packages/core-design-system/src/styles/index.css +++ b/packages/core-design-system/src/styles/index.css @@ -2,7 +2,7 @@ * Harness Design System * Main stylesheet importing all token files * DO NOT UPDATE IT MANUALLY - * Generated on Fri, 14 Mar 2025 15:14:42 GMT + * Generated on Mon, 17 Mar 2025 12:07:32 GMT */ /* Core tokens */ diff --git a/packages/core-design-system/src/styles/source-dark-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-desktop-gitness.css index b46fda0b72..18b3cb9315 100644 --- a/packages/core-design-system/src/styles/source-dark-desktop-gitness.css +++ b/packages/core-design-system/src/styles/source-dark-desktop-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:34 GMT + * Generated on Mon, 17 Mar 2025 12:06:48 GMT * Copyright (c) Harness. */ @@ -107,13 +107,13 @@ * * Common uses: Button hover states, link hover states, soft interactions, menu items. */ - --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.05); + --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); /** * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. * * Common uses: Selected list items, active tabs, chosen options, current navigation item. */ - --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.08); + --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); /** * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. * @@ -332,6 +332,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-1); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-dark-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-desktop-harness.css index bd65196d4b..63251fb9ae 100644 --- a/packages/core-design-system/src/styles/source-dark-desktop-harness.css +++ b/packages/core-design-system/src/styles/source-dark-desktop-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:34 GMT + * Generated on Mon, 17 Mar 2025 12:06:48 GMT * Copyright (c) Harness. */ @@ -107,13 +107,13 @@ * * Common uses: Button hover states, link hover states, soft interactions, menu items. */ - --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.05); + --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); /** * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. * * Common uses: Selected list items, active tabs, chosen options, current navigation item. */ - --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.08); + --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); /** * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. * @@ -332,6 +332,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-1); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-dark-deuteranopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-deuteranopia-desktop-gitness.css index 7795594da9..04ca3c7fcf 100644 --- a/packages/core-design-system/src/styles/source-dark-deuteranopia-desktop-gitness.css +++ b/packages/core-design-system/src/styles/source-dark-deuteranopia-desktop-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:37 GMT + * Generated on Mon, 17 Mar 2025 12:07:02 GMT * Copyright (c) Harness. */ @@ -107,13 +107,13 @@ * * Common uses: Button hover states, link hover states, soft interactions, menu items. */ - --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); /** * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. * * Common uses: Selected list items, active tabs, chosen options, current navigation item. */ - --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); /** * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. * @@ -332,6 +332,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-dark-deuteranopia-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-deuteranopia-desktop-harness.css index 90d0237065..53e4faea49 100644 --- a/packages/core-design-system/src/styles/source-dark-deuteranopia-desktop-harness.css +++ b/packages/core-design-system/src/styles/source-dark-deuteranopia-desktop-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:36 GMT + * Generated on Mon, 17 Mar 2025 12:07:01 GMT * Copyright (c) Harness. */ @@ -107,13 +107,13 @@ * * Common uses: Button hover states, link hover states, soft interactions, menu items. */ - --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); /** * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. * * Common uses: Selected list items, active tabs, chosen options, current navigation item. */ - --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); /** * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. * @@ -332,6 +332,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-dark-dimmer-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-dimmer-desktop-gitness.css index 56cf1f9245..ea9d0cda39 100644 --- a/packages/core-design-system/src/styles/source-dark-dimmer-desktop-gitness.css +++ b/packages/core-design-system/src/styles/source-dark-dimmer-desktop-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:34 GMT + * Generated on Mon, 17 Mar 2025 12:06:51 GMT * Copyright (c) Harness. */ @@ -107,13 +107,13 @@ * * Common uses: Button hover states, link hover states, soft interactions, menu items. */ - --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); /** * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. * * Common uses: Selected list items, active tabs, chosen options, current navigation item. */ - --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); /** * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. * @@ -333,6 +333,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-dark-dimmer-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-dimmer-desktop-harness.css index 42c78a120d..ad2c9a4c40 100644 --- a/packages/core-design-system/src/styles/source-dark-dimmer-desktop-harness.css +++ b/packages/core-design-system/src/styles/source-dark-dimmer-desktop-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:34 GMT + * Generated on Mon, 17 Mar 2025 12:06:50 GMT * Copyright (c) Harness. */ @@ -107,13 +107,13 @@ * * Common uses: Button hover states, link hover states, soft interactions, menu items. */ - --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); /** * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. * * Common uses: Selected list items, active tabs, chosen options, current navigation item. */ - --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); /** * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. * @@ -333,6 +333,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-dark-dimmer-deuteranopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-dimmer-deuteranopia-desktop-gitness.css index fed02487aa..e3014fd1f4 100644 --- a/packages/core-design-system/src/styles/source-dark-dimmer-deuteranopia-desktop-gitness.css +++ b/packages/core-design-system/src/styles/source-dark-dimmer-deuteranopia-desktop-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:37 GMT + * Generated on Mon, 17 Mar 2025 12:07:04 GMT * Copyright (c) Harness. */ @@ -107,13 +107,13 @@ * * Common uses: Button hover states, link hover states, soft interactions, menu items. */ - --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); /** * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. * * Common uses: Selected list items, active tabs, chosen options, current navigation item. */ - --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); /** * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. * @@ -332,6 +332,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-dark-dimmer-deuteranopia-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-dimmer-deuteranopia-desktop-harness.css index d9681c202c..2a53587673 100644 --- a/packages/core-design-system/src/styles/source-dark-dimmer-deuteranopia-desktop-harness.css +++ b/packages/core-design-system/src/styles/source-dark-dimmer-deuteranopia-desktop-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:37 GMT + * Generated on Mon, 17 Mar 2025 12:07:03 GMT * Copyright (c) Harness. */ @@ -107,13 +107,13 @@ * * Common uses: Button hover states, link hover states, soft interactions, menu items. */ - --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); /** * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. * * Common uses: Selected list items, active tabs, chosen options, current navigation item. */ - --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); /** * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. * @@ -332,6 +332,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-dark-dimmer-protanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-dimmer-protanopia-desktop-gitness.css index 1c69119609..3ecc1b3ee1 100644 --- a/packages/core-design-system/src/styles/source-dark-dimmer-protanopia-desktop-gitness.css +++ b/packages/core-design-system/src/styles/source-dark-dimmer-protanopia-desktop-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:36 GMT + * Generated on Mon, 17 Mar 2025 12:06:58 GMT * Copyright (c) Harness. */ @@ -107,13 +107,13 @@ * * Common uses: Button hover states, link hover states, soft interactions, menu items. */ - --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); /** * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. * * Common uses: Selected list items, active tabs, chosen options, current navigation item. */ - --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); /** * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. * @@ -332,6 +332,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-dark-dimmer-protanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-dimmer-protanopia-desktop-harness.css index 7ff4df9dea..a81f41fdc3 100644 --- a/packages/core-design-system/src/styles/source-dark-dimmer-protanopia-desktop-harness.css +++ b/packages/core-design-system/src/styles/source-dark-dimmer-protanopia-desktop-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:36 GMT + * Generated on Mon, 17 Mar 2025 12:06:57 GMT * Copyright (c) Harness. */ @@ -107,13 +107,13 @@ * * Common uses: Button hover states, link hover states, soft interactions, menu items. */ - --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); /** * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. * * Common uses: Selected list items, active tabs, chosen options, current navigation item. */ - --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); /** * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. * @@ -332,6 +332,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-dark-dimmer-tritanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-dimmer-tritanopia-desktop-gitness.css index c0ecb7e700..24ed455aae 100644 --- a/packages/core-design-system/src/styles/source-dark-dimmer-tritanopia-desktop-gitness.css +++ b/packages/core-design-system/src/styles/source-dark-dimmer-tritanopia-desktop-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:38 GMT + * Generated on Mon, 17 Mar 2025 12:07:10 GMT * Copyright (c) Harness. */ @@ -107,13 +107,13 @@ * * Common uses: Button hover states, link hover states, soft interactions, menu items. */ - --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); /** * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. * * Common uses: Selected list items, active tabs, chosen options, current navigation item. */ - --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); /** * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. * @@ -332,6 +332,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-dark-dimmer-tritanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-dimmer-tritanopia-desktop-harness.css index 4187703d26..2f229a0c19 100644 --- a/packages/core-design-system/src/styles/source-dark-dimmer-tritanopia-desktop-harness.css +++ b/packages/core-design-system/src/styles/source-dark-dimmer-tritanopia-desktop-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:38 GMT + * Generated on Mon, 17 Mar 2025 12:07:10 GMT * Copyright (c) Harness. */ @@ -107,13 +107,13 @@ * * Common uses: Button hover states, link hover states, soft interactions, menu items. */ - --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); /** * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. * * Common uses: Selected list items, active tabs, chosen options, current navigation item. */ - --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); /** * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. * @@ -332,6 +332,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-dark-high-contrast-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-high-contrast-desktop-gitness.css index dcf72df168..858318f4c1 100644 --- a/packages/core-design-system/src/styles/source-dark-high-contrast-desktop-gitness.css +++ b/packages/core-design-system/src/styles/source-dark-high-contrast-desktop-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:35 GMT + * Generated on Mon, 17 Mar 2025 12:06:54 GMT * Copyright (c) Harness. */ @@ -107,13 +107,13 @@ * * Common uses: Button hover states, link hover states, soft interactions, menu items. */ - --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); /** * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. * * Common uses: Selected list items, active tabs, chosen options, current navigation item. */ - --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); /** * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. * @@ -332,6 +332,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-dark-high-contrast-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-high-contrast-desktop-harness.css index dd17061d73..31444da571 100644 --- a/packages/core-design-system/src/styles/source-dark-high-contrast-desktop-harness.css +++ b/packages/core-design-system/src/styles/source-dark-high-contrast-desktop-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:35 GMT + * Generated on Mon, 17 Mar 2025 12:06:53 GMT * Copyright (c) Harness. */ @@ -107,13 +107,13 @@ * * Common uses: Button hover states, link hover states, soft interactions, menu items. */ - --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); /** * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. * * Common uses: Selected list items, active tabs, chosen options, current navigation item. */ - --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); /** * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. * @@ -332,6 +332,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-dark-high-contrast-deuteranopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-high-contrast-deuteranopia-desktop-gitness.css index bde92ffcfd..81fb040879 100644 --- a/packages/core-design-system/src/styles/source-dark-high-contrast-deuteranopia-desktop-gitness.css +++ b/packages/core-design-system/src/styles/source-dark-high-contrast-deuteranopia-desktop-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:38 GMT + * Generated on Mon, 17 Mar 2025 12:07:06 GMT * Copyright (c) Harness. */ @@ -107,13 +107,13 @@ * * Common uses: Button hover states, link hover states, soft interactions, menu items. */ - --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); /** * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. * * Common uses: Selected list items, active tabs, chosen options, current navigation item. */ - --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); /** * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. * @@ -332,6 +332,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-dark-high-contrast-deuteranopia-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-high-contrast-deuteranopia-desktop-harness.css index 572351c038..4ce941a3f6 100644 --- a/packages/core-design-system/src/styles/source-dark-high-contrast-deuteranopia-desktop-harness.css +++ b/packages/core-design-system/src/styles/source-dark-high-contrast-deuteranopia-desktop-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:37 GMT + * Generated on Mon, 17 Mar 2025 12:07:05 GMT * Copyright (c) Harness. */ @@ -107,13 +107,13 @@ * * Common uses: Button hover states, link hover states, soft interactions, menu items. */ - --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); /** * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. * * Common uses: Selected list items, active tabs, chosen options, current navigation item. */ - --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); /** * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. * @@ -332,6 +332,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-dark-high-contrast-protanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-high-contrast-protanopia-desktop-gitness.css index a8a79e2530..69288ded0d 100644 --- a/packages/core-design-system/src/styles/source-dark-high-contrast-protanopia-desktop-gitness.css +++ b/packages/core-design-system/src/styles/source-dark-high-contrast-protanopia-desktop-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:36 GMT + * Generated on Mon, 17 Mar 2025 12:07:00 GMT * Copyright (c) Harness. */ @@ -107,13 +107,13 @@ * * Common uses: Button hover states, link hover states, soft interactions, menu items. */ - --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); /** * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. * * Common uses: Selected list items, active tabs, chosen options, current navigation item. */ - --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); /** * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. * @@ -332,6 +332,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-dark-high-contrast-protanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-high-contrast-protanopia-desktop-harness.css index a25d036618..c1b51870ff 100644 --- a/packages/core-design-system/src/styles/source-dark-high-contrast-protanopia-desktop-harness.css +++ b/packages/core-design-system/src/styles/source-dark-high-contrast-protanopia-desktop-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:36 GMT + * Generated on Mon, 17 Mar 2025 12:06:59 GMT * Copyright (c) Harness. */ @@ -107,13 +107,13 @@ * * Common uses: Button hover states, link hover states, soft interactions, menu items. */ - --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); /** * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. * * Common uses: Selected list items, active tabs, chosen options, current navigation item. */ - --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); /** * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. * @@ -332,6 +332,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-dark-high-contrast-tritanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-high-contrast-tritanopia-desktop-gitness.css index 8473239e71..4d3ecd41f1 100644 --- a/packages/core-design-system/src/styles/source-dark-high-contrast-tritanopia-desktop-gitness.css +++ b/packages/core-design-system/src/styles/source-dark-high-contrast-tritanopia-desktop-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:39 GMT + * Generated on Mon, 17 Mar 2025 12:07:12 GMT * Copyright (c) Harness. */ @@ -119,13 +119,13 @@ * * Common uses: Button hover states, link hover states, soft interactions, menu items. */ - --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); /** * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. * * Common uses: Selected list items, active tabs, chosen options, current navigation item. */ - --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); /** * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. * @@ -335,6 +335,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-dark-high-contrast-tritanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-high-contrast-tritanopia-desktop-harness.css index 7761848b8d..025b9909d0 100644 --- a/packages/core-design-system/src/styles/source-dark-high-contrast-tritanopia-desktop-harness.css +++ b/packages/core-design-system/src/styles/source-dark-high-contrast-tritanopia-desktop-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:38 GMT + * Generated on Mon, 17 Mar 2025 12:07:11 GMT * Copyright (c) Harness. */ @@ -119,13 +119,13 @@ * * Common uses: Button hover states, link hover states, soft interactions, menu items. */ - --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); /** * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. * * Common uses: Selected list items, active tabs, chosen options, current navigation item. */ - --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); /** * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. * @@ -335,6 +335,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-dark-protanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-protanopia-desktop-gitness.css index acc0823e6a..6e908f2351 100644 --- a/packages/core-design-system/src/styles/source-dark-protanopia-desktop-gitness.css +++ b/packages/core-design-system/src/styles/source-dark-protanopia-desktop-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:36 GMT + * Generated on Mon, 17 Mar 2025 12:06:56 GMT * Copyright (c) Harness. */ @@ -107,13 +107,13 @@ * * Common uses: Button hover states, link hover states, soft interactions, menu items. */ - --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); /** * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. * * Common uses: Selected list items, active tabs, chosen options, current navigation item. */ - --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); /** * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. * @@ -332,6 +332,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-dark-protanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-protanopia-desktop-harness.css index 20630041d7..92509c46f7 100644 --- a/packages/core-design-system/src/styles/source-dark-protanopia-desktop-harness.css +++ b/packages/core-design-system/src/styles/source-dark-protanopia-desktop-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:35 GMT + * Generated on Mon, 17 Mar 2025 12:06:55 GMT * Copyright (c) Harness. */ @@ -107,13 +107,13 @@ * * Common uses: Button hover states, link hover states, soft interactions, menu items. */ - --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); /** * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. * * Common uses: Selected list items, active tabs, chosen options, current navigation item. */ - --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); /** * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. * @@ -332,6 +332,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-dark-tritanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-tritanopia-desktop-gitness.css index 892fdf54e3..e491fbfcf2 100644 --- a/packages/core-design-system/src/styles/source-dark-tritanopia-desktop-gitness.css +++ b/packages/core-design-system/src/styles/source-dark-tritanopia-desktop-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:38 GMT + * Generated on Mon, 17 Mar 2025 12:07:09 GMT * Copyright (c) Harness. */ @@ -107,13 +107,13 @@ * * Common uses: Button hover states, link hover states, soft interactions, menu items. */ - --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); /** * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. * * Common uses: Selected list items, active tabs, chosen options, current navigation item. */ - --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); /** * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. * @@ -332,6 +332,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-dark-tritanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-tritanopia-desktop-harness.css index 604d9e0cc1..49515df5c7 100644 --- a/packages/core-design-system/src/styles/source-dark-tritanopia-desktop-harness.css +++ b/packages/core-design-system/src/styles/source-dark-tritanopia-desktop-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:38 GMT + * Generated on Mon, 17 Mar 2025 12:07:07 GMT * Copyright (c) Harness. */ @@ -107,13 +107,13 @@ * * Common uses: Button hover states, link hover states, soft interactions, menu items. */ - --canary-state-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); + --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); /** * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. * * Common uses: Selected list items, active tabs, chosen options, current navigation item. */ - --canary-state-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); + --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); /** * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. * @@ -332,6 +332,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-light-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-desktop-gitness.css index 193fdf42c8..8ee7f3b7e8 100644 --- a/packages/core-design-system/src/styles/source-light-desktop-gitness.css +++ b/packages/core-design-system/src/styles/source-light-desktop-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:35 GMT + * Generated on Mon, 17 Mar 2025 12:06:53 GMT * Copyright (c) Harness. */ @@ -125,7 +125,7 @@ * * Common uses: Disabled buttons, inactive form controls, unavailable options. */ - --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-state-disabled-background: var(--canary-colors-chrome-150); --canary-component-alert-danger-title: var(--canary-colors-red-800); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ @@ -349,6 +349,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-light-desktop-harness.css b/packages/core-design-system/src/styles/source-light-desktop-harness.css index 19750eaaa8..1accb4853f 100644 --- a/packages/core-design-system/src/styles/source-light-desktop-harness.css +++ b/packages/core-design-system/src/styles/source-light-desktop-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:35 GMT + * Generated on Mon, 17 Mar 2025 12:06:52 GMT * Copyright (c) Harness. */ @@ -125,7 +125,7 @@ * * Common uses: Disabled buttons, inactive form controls, unavailable options. */ - --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-state-disabled-background: var(--canary-colors-chrome-150); --canary-component-alert-danger-title: var(--canary-colors-red-800); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ @@ -349,6 +349,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-light-deuteranopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-deuteranopia-desktop-gitness.css index 87d94c2867..85b3758d23 100644 --- a/packages/core-design-system/src/styles/source-light-deuteranopia-desktop-gitness.css +++ b/packages/core-design-system/src/styles/source-light-deuteranopia-desktop-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:40 GMT + * Generated on Mon, 17 Mar 2025 12:07:24 GMT * Copyright (c) Harness. */ @@ -125,7 +125,7 @@ * * Common uses: Disabled buttons, inactive form controls, unavailable options. */ - --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-state-disabled-background: var(--canary-colors-chrome-150); --canary-component-alert-danger-title: var(--canary-colors-orange-800); /* Text color for danger alerts. Communicates critical information through high-contrast orange text. */ --canary-component-alert-danger-description: var(--canary-colors-orange-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ --canary-component-alert-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ @@ -349,6 +349,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-light-deuteranopia-desktop-harness.css b/packages/core-design-system/src/styles/source-light-deuteranopia-desktop-harness.css index 9362c8a924..5c8d52306a 100644 --- a/packages/core-design-system/src/styles/source-light-deuteranopia-desktop-harness.css +++ b/packages/core-design-system/src/styles/source-light-deuteranopia-desktop-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:40 GMT + * Generated on Mon, 17 Mar 2025 12:07:23 GMT * Copyright (c) Harness. */ @@ -125,7 +125,7 @@ * * Common uses: Disabled buttons, inactive form controls, unavailable options. */ - --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-state-disabled-background: var(--canary-colors-chrome-150); --canary-component-alert-danger-title: var(--canary-colors-orange-800); /* Text color for danger alerts. Communicates critical information through high-contrast orange text. */ --canary-component-alert-danger-description: var(--canary-colors-orange-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ --canary-component-alert-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ @@ -349,6 +349,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-light-dimmer-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-dimmer-desktop-gitness.css index 1b014f401b..1eca3b8291 100644 --- a/packages/core-design-system/src/styles/source-light-dimmer-desktop-gitness.css +++ b/packages/core-design-system/src/styles/source-light-dimmer-desktop-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:39 GMT + * Generated on Mon, 17 Mar 2025 12:07:15 GMT * Copyright (c) Harness. */ @@ -125,7 +125,7 @@ * * Common uses: Disabled buttons, inactive form controls, unavailable options. */ - --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-state-disabled-background: var(--canary-colors-chrome-150); --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ --canary-component-alert-danger-description: var(--canary-colors-red-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ @@ -348,6 +348,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-light-dimmer-desktop-harness.css b/packages/core-design-system/src/styles/source-light-dimmer-desktop-harness.css index 6e5e264737..6827636722 100644 --- a/packages/core-design-system/src/styles/source-light-dimmer-desktop-harness.css +++ b/packages/core-design-system/src/styles/source-light-dimmer-desktop-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:39 GMT + * Generated on Mon, 17 Mar 2025 12:07:14 GMT * Copyright (c) Harness. */ @@ -125,7 +125,7 @@ * * Common uses: Disabled buttons, inactive form controls, unavailable options. */ - --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-state-disabled-background: var(--canary-colors-chrome-150); --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ --canary-component-alert-danger-description: var(--canary-colors-red-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ @@ -348,6 +348,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-light-dimmer-deuteranopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-dimmer-deuteranopia-desktop-gitness.css index 757b1c80f5..852767c3b3 100644 --- a/packages/core-design-system/src/styles/source-light-dimmer-deuteranopia-desktop-gitness.css +++ b/packages/core-design-system/src/styles/source-light-dimmer-deuteranopia-desktop-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:41 GMT + * Generated on Mon, 17 Mar 2025 12:07:25 GMT * Copyright (c) Harness. */ @@ -125,7 +125,7 @@ * * Common uses: Disabled buttons, inactive form controls, unavailable options. */ - --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-state-disabled-background: var(--canary-colors-chrome-150); --canary-component-alert-danger-title: var(--canary-colors-orange-700); /* Text color for danger alerts. Communicates critical information through high-contrast orange text. */ --canary-component-alert-danger-description: var(--canary-colors-orange-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ --canary-component-alert-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ @@ -348,6 +348,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-light-dimmer-deuteranopia-desktop-harness.css b/packages/core-design-system/src/styles/source-light-dimmer-deuteranopia-desktop-harness.css index 23ebe1a21b..bfee67b4fe 100644 --- a/packages/core-design-system/src/styles/source-light-dimmer-deuteranopia-desktop-harness.css +++ b/packages/core-design-system/src/styles/source-light-dimmer-deuteranopia-desktop-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:40 GMT + * Generated on Mon, 17 Mar 2025 12:07:25 GMT * Copyright (c) Harness. */ @@ -125,7 +125,7 @@ * * Common uses: Disabled buttons, inactive form controls, unavailable options. */ - --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-state-disabled-background: var(--canary-colors-chrome-150); --canary-component-alert-danger-title: var(--canary-colors-orange-700); /* Text color for danger alerts. Communicates critical information through high-contrast orange text. */ --canary-component-alert-danger-description: var(--canary-colors-orange-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ --canary-component-alert-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ @@ -348,6 +348,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-light-dimmer-protanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-dimmer-protanopia-desktop-gitness.css index bd0de6ef19..e127095669 100644 --- a/packages/core-design-system/src/styles/source-light-dimmer-protanopia-desktop-gitness.css +++ b/packages/core-design-system/src/styles/source-light-dimmer-protanopia-desktop-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:40 GMT + * Generated on Mon, 17 Mar 2025 12:07:20 GMT * Copyright (c) Harness. */ @@ -125,7 +125,7 @@ * * Common uses: Disabled buttons, inactive form controls, unavailable options. */ - --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-state-disabled-background: var(--canary-colors-chrome-150); --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ --canary-component-alert-danger-description: var(--canary-colors-red-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ @@ -348,6 +348,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-light-dimmer-protanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-light-dimmer-protanopia-desktop-harness.css index 69e832e1f0..9025635d1f 100644 --- a/packages/core-design-system/src/styles/source-light-dimmer-protanopia-desktop-harness.css +++ b/packages/core-design-system/src/styles/source-light-dimmer-protanopia-desktop-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:40 GMT + * Generated on Mon, 17 Mar 2025 12:07:20 GMT * Copyright (c) Harness. */ @@ -125,7 +125,7 @@ * * Common uses: Disabled buttons, inactive form controls, unavailable options. */ - --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-state-disabled-background: var(--canary-colors-chrome-150); --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ --canary-component-alert-danger-description: var(--canary-colors-red-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ @@ -348,6 +348,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-light-dimmer-tritanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-dimmer-tritanopia-desktop-gitness.css index 83df04f6ec..0be958c9b7 100644 --- a/packages/core-design-system/src/styles/source-light-dimmer-tritanopia-desktop-gitness.css +++ b/packages/core-design-system/src/styles/source-light-dimmer-tritanopia-desktop-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:41 GMT + * Generated on Mon, 17 Mar 2025 12:07:30 GMT * Copyright (c) Harness. */ @@ -125,7 +125,7 @@ * * Common uses: Disabled buttons, inactive form controls, unavailable options. */ - --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-state-disabled-background: var(--canary-colors-chrome-150); --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ --canary-component-alert-danger-description: var(--canary-colors-red-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ @@ -348,6 +348,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-light-dimmer-tritanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-light-dimmer-tritanopia-desktop-harness.css index 2a1953671f..5b21c477c4 100644 --- a/packages/core-design-system/src/styles/source-light-dimmer-tritanopia-desktop-harness.css +++ b/packages/core-design-system/src/styles/source-light-dimmer-tritanopia-desktop-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:41 GMT + * Generated on Mon, 17 Mar 2025 12:07:29 GMT * Copyright (c) Harness. */ @@ -125,7 +125,7 @@ * * Common uses: Disabled buttons, inactive form controls, unavailable options. */ - --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-state-disabled-background: var(--canary-colors-chrome-150); --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ --canary-component-alert-danger-description: var(--canary-colors-red-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ @@ -348,6 +348,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-light-high-contrast-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-high-contrast-desktop-gitness.css index b29cd42cff..2d17323c4d 100644 --- a/packages/core-design-system/src/styles/source-light-high-contrast-desktop-gitness.css +++ b/packages/core-design-system/src/styles/source-light-high-contrast-desktop-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:39 GMT + * Generated on Mon, 17 Mar 2025 12:07:16 GMT * Copyright (c) Harness. */ @@ -125,7 +125,7 @@ * * Common uses: Disabled buttons, inactive form controls, unavailable options. */ - --canary-state-disabled-background: var(--canary-colors-chrome-100); + --canary-state-disabled-background: var(--canary-colors-chrome-150); --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ --canary-component-alert-danger-background: lch(from var(--canary-colors-red-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ @@ -353,6 +353,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-light-high-contrast-desktop-harness.css b/packages/core-design-system/src/styles/source-light-high-contrast-desktop-harness.css index ca180c93c1..1c66261e91 100644 --- a/packages/core-design-system/src/styles/source-light-high-contrast-desktop-harness.css +++ b/packages/core-design-system/src/styles/source-light-high-contrast-desktop-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:39 GMT + * Generated on Mon, 17 Mar 2025 12:07:15 GMT * Copyright (c) Harness. */ @@ -125,7 +125,7 @@ * * Common uses: Disabled buttons, inactive form controls, unavailable options. */ - --canary-state-disabled-background: var(--canary-colors-chrome-100); + --canary-state-disabled-background: var(--canary-colors-chrome-150); --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ --canary-component-alert-danger-background: lch(from var(--canary-colors-red-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ @@ -353,6 +353,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-light-high-contrast-deuteranopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-high-contrast-deuteranopia-desktop-gitness.css index 822a9611a2..57a0a8d25f 100644 --- a/packages/core-design-system/src/styles/source-light-high-contrast-deuteranopia-desktop-gitness.css +++ b/packages/core-design-system/src/styles/source-light-high-contrast-deuteranopia-desktop-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:41 GMT + * Generated on Mon, 17 Mar 2025 12:07:27 GMT * Copyright (c) Harness. */ @@ -125,7 +125,7 @@ * * Common uses: Disabled buttons, inactive form controls, unavailable options. */ - --canary-state-disabled-background: var(--canary-colors-chrome-100); + --canary-state-disabled-background: var(--canary-colors-chrome-150); --canary-component-alert-danger-title: var(--canary-colors-orange-700); /* Text color for danger alerts. Communicates critical information through high-contrast orange text. */ --canary-component-alert-danger-description: var(--canary-colors-orange-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ --canary-component-alert-danger-background: lch(from var(--canary-colors-orange-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ @@ -353,6 +353,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-light-high-contrast-deuteranopia-desktop-harness.css b/packages/core-design-system/src/styles/source-light-high-contrast-deuteranopia-desktop-harness.css index 8c0839f9b5..6337abecea 100644 --- a/packages/core-design-system/src/styles/source-light-high-contrast-deuteranopia-desktop-harness.css +++ b/packages/core-design-system/src/styles/source-light-high-contrast-deuteranopia-desktop-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:41 GMT + * Generated on Mon, 17 Mar 2025 12:07:26 GMT * Copyright (c) Harness. */ @@ -125,7 +125,7 @@ * * Common uses: Disabled buttons, inactive form controls, unavailable options. */ - --canary-state-disabled-background: var(--canary-colors-chrome-100); + --canary-state-disabled-background: var(--canary-colors-chrome-150); --canary-component-alert-danger-title: var(--canary-colors-orange-700); /* Text color for danger alerts. Communicates critical information through high-contrast orange text. */ --canary-component-alert-danger-description: var(--canary-colors-orange-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ --canary-component-alert-danger-background: lch(from var(--canary-colors-orange-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ @@ -353,6 +353,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-light-high-contrast-protanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-high-contrast-protanopia-desktop-gitness.css index a0163dacd1..2680fb5e39 100644 --- a/packages/core-design-system/src/styles/source-light-high-contrast-protanopia-desktop-gitness.css +++ b/packages/core-design-system/src/styles/source-light-high-contrast-protanopia-desktop-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:40 GMT + * Generated on Mon, 17 Mar 2025 12:07:22 GMT * Copyright (c) Harness. */ @@ -125,7 +125,7 @@ * * Common uses: Disabled buttons, inactive form controls, unavailable options. */ - --canary-state-disabled-background: var(--canary-colors-chrome-100); + --canary-state-disabled-background: var(--canary-colors-chrome-150); --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ --canary-component-alert-danger-background: lch(from var(--canary-colors-red-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ @@ -353,6 +353,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-light-high-contrast-protanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-light-high-contrast-protanopia-desktop-harness.css index e841c6d09b..74d0796946 100644 --- a/packages/core-design-system/src/styles/source-light-high-contrast-protanopia-desktop-harness.css +++ b/packages/core-design-system/src/styles/source-light-high-contrast-protanopia-desktop-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:40 GMT + * Generated on Mon, 17 Mar 2025 12:07:21 GMT * Copyright (c) Harness. */ @@ -125,7 +125,7 @@ * * Common uses: Disabled buttons, inactive form controls, unavailable options. */ - --canary-state-disabled-background: var(--canary-colors-chrome-100); + --canary-state-disabled-background: var(--canary-colors-chrome-150); --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ --canary-component-alert-danger-background: lch(from var(--canary-colors-red-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ @@ -353,6 +353,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-light-high-contrast-tritanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-high-contrast-tritanopia-desktop-gitness.css index 7f7263dbcd..e3c6b2455b 100644 --- a/packages/core-design-system/src/styles/source-light-high-contrast-tritanopia-desktop-gitness.css +++ b/packages/core-design-system/src/styles/source-light-high-contrast-tritanopia-desktop-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:42 GMT + * Generated on Mon, 17 Mar 2025 12:07:32 GMT * Copyright (c) Harness. */ @@ -125,7 +125,7 @@ * * Common uses: Disabled buttons, inactive form controls, unavailable options. */ - --canary-state-disabled-background: var(--canary-colors-chrome-100); + --canary-state-disabled-background: var(--canary-colors-chrome-150); --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ --canary-component-alert-danger-background: lch(from var(--canary-colors-red-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ @@ -353,6 +353,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-light-high-contrast-tritanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-light-high-contrast-tritanopia-desktop-harness.css index af51921b2a..d9bbb03c73 100644 --- a/packages/core-design-system/src/styles/source-light-high-contrast-tritanopia-desktop-harness.css +++ b/packages/core-design-system/src/styles/source-light-high-contrast-tritanopia-desktop-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:41 GMT + * Generated on Mon, 17 Mar 2025 12:07:31 GMT * Copyright (c) Harness. */ @@ -125,7 +125,7 @@ * * Common uses: Disabled buttons, inactive form controls, unavailable options. */ - --canary-state-disabled-background: var(--canary-colors-chrome-100); + --canary-state-disabled-background: var(--canary-colors-chrome-150); --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ --canary-component-alert-danger-background: lch(from var(--canary-colors-red-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ @@ -353,6 +353,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-light-protanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-protanopia-desktop-gitness.css index 79e8954673..67359c8b18 100644 --- a/packages/core-design-system/src/styles/source-light-protanopia-desktop-gitness.css +++ b/packages/core-design-system/src/styles/source-light-protanopia-desktop-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:39 GMT + * Generated on Mon, 17 Mar 2025 12:07:19 GMT * Copyright (c) Harness. */ @@ -125,7 +125,7 @@ * * Common uses: Disabled buttons, inactive form controls, unavailable options. */ - --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-state-disabled-background: var(--canary-colors-chrome-150); --canary-component-alert-danger-title: var(--canary-colors-red-800); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ @@ -349,6 +349,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-light-protanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-light-protanopia-desktop-harness.css index 45204dde26..be591910d8 100644 --- a/packages/core-design-system/src/styles/source-light-protanopia-desktop-harness.css +++ b/packages/core-design-system/src/styles/source-light-protanopia-desktop-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:39 GMT + * Generated on Mon, 17 Mar 2025 12:07:17 GMT * Copyright (c) Harness. */ @@ -125,7 +125,7 @@ * * Common uses: Disabled buttons, inactive form controls, unavailable options. */ - --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-state-disabled-background: var(--canary-colors-chrome-150); --canary-component-alert-danger-title: var(--canary-colors-red-800); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ @@ -349,6 +349,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-light-tritanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-tritanopia-desktop-gitness.css index a19d154ba8..0971cbbe76 100644 --- a/packages/core-design-system/src/styles/source-light-tritanopia-desktop-gitness.css +++ b/packages/core-design-system/src/styles/source-light-tritanopia-desktop-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:41 GMT + * Generated on Mon, 17 Mar 2025 12:07:29 GMT * Copyright (c) Harness. */ @@ -125,7 +125,7 @@ * * Common uses: Disabled buttons, inactive form controls, unavailable options. */ - --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-state-disabled-background: var(--canary-colors-chrome-150); --canary-component-alert-danger-title: var(--canary-colors-red-800); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ @@ -349,6 +349,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/core-design-system/src/styles/source-light-tritanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-light-tritanopia-desktop-harness.css index f8b848a17d..2cba1948c3 100644 --- a/packages/core-design-system/src/styles/source-light-tritanopia-desktop-harness.css +++ b/packages/core-design-system/src/styles/source-light-tritanopia-desktop-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Fri, 14 Mar 2025 15:14:41 GMT + * Generated on Mon, 17 Mar 2025 12:07:28 GMT * Copyright (c) Harness. */ @@ -125,7 +125,7 @@ * * Common uses: Disabled buttons, inactive form controls, unavailable options. */ - --canary-state-disabled-background: var(--canary-colors-chrome-300); + --canary-state-disabled-background: var(--canary-colors-chrome-150); --canary-component-alert-danger-title: var(--canary-colors-red-800); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ @@ -349,6 +349,7 @@ --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ diff --git a/packages/ui/design-tokens/$metadata.json b/packages/ui/design-tokens/$metadata.json deleted file mode 100644 index 8bdbe4788f..0000000000 --- a/packages/ui/design-tokens/$metadata.json +++ /dev/null @@ -1,42 +0,0 @@ -{ - "tokenSetOrder": [ - "core/colors_hex", - "core/colors_lch", - "core/typography", - "core/dimensions", - "brand/Gitness", - "brand/Harness", - "mode/dark/default", - "mode/dark/dimmer", - "mode/dark/high-contrast", - "mode/dark/default-protanopia", - "mode/dark/dimmer-protanopia", - "mode/dark/high-contrast-protanopia", - "mode/dark/default-deuteranopia", - "mode/dark/dimmer-deuteranopia", - "mode/dark/high-contrast-deuteranopia", - "mode/dark/default-tritanopia", - "mode/dark/dimmer-tritanopia", - "mode/dark/high-contrast-tritanopia", - "mode/light/default", - "mode/light/dimmer", - "mode/light/high-contrast", - "mode/light/default-protanopia", - "mode/light/dimmer-protanopia", - "mode/light/high-contrast-protanopia", - "mode/light/default-deuteranopia", - "mode/light/dimmer-deuteranopia", - "mode/light/high-contrast-deuteranopia", - "mode/light/default-tritanopia", - "mode/light/dimmer-tritanopia", - "mode/light/high-contrast-tritanopia", - "breakpoint/desktop", - "components/desktop/base/btn", - "components/desktop/base/input", - "components/desktop/base/badge", - "components/desktop/base/tag", - "components/desktop/base/dropdown menu", - "components/desktop/base/pagination", - "components/desktop/base/tooltip" - ] -} \ No newline at end of file diff --git a/packages/ui/design-tokens/$themes.json b/packages/ui/design-tokens/$themes.json deleted file mode 100644 index 5870ddb5f6..0000000000 --- a/packages/ui/design-tokens/$themes.json +++ /dev/null @@ -1,8903 +0,0 @@ -[ - { - "id": "89bf9a3ab61c40d6291a24c452efc1591c4d41c0", - "name": "source", - "selectedTokenSets": { - "core/typography": "source", - "core/dimensions": "enabled", - "core/colors_lch": "source" - }, - "$figmaStyleReferences": { - "colors.pure.white": "S:3cdd1e94ddf267f0a1b6df9582438d6230d12c7c,", - "colors.pure.black": "S:980160d1011e3095bf035aa757e9dfdfdef23104,", - "colors.chrome.50": "S:14982fbd36599a8ef51a26e860fb642bd67b12fc,", - "colors.chrome.100": "S:1339797e4a93333114a84305ba0228198695bbda,", - "colors.chrome.150": "S:796fe61fe1be7bdc09696ff76a07baf5913f6bfe,", - "colors.chrome.200": "S:6cfba187c16addeb24890b083f210ce2300f42bf,", - "colors.chrome.300": "S:c1be919a8086c0c89f53b67fb19dcd09380be4b3,", - "colors.chrome.400": "S:78d8069a003773b2eebe1f68f095cb3ecb43a410,", - "colors.chrome.500": "S:290005a863be0447c1fe10a7441a9fd426436811,", - "colors.chrome.600": "S:921ea774a65fc4ef99a111b6c74fcf88599bfd62,", - "colors.chrome.700": "S:fa2e68492afd10e3499d84a30924d9faf13c63e4,", - "colors.chrome.800": "S:e25c1a1e2554b3c36241dd3194b8635e1ddbea12,", - "colors.chrome.850": "S:baf126a42ac18ba7fa38602dfa0eefbae6e4e113,", - "colors.chrome.900": "S:da539cb2649cf46d7c6a5503104b62c0e8c4e5a9,", - "colors.chrome.950": "S:f63e7eaa1bd452f2db158d026672354c82324750,", - "colors.chrome.1000": "S:747dcd1b88f0549c37f2fa18c7bb278efc1a8f5b,", - "colors.accent.50": "S:30860081c090e77dabc72c95abf70ef53738355f,", - "colors.accent.100": "S:c2dc8fc9d70ecdab15b02f5ce26eb3ee6ada63be,", - "colors.accent.150": "S:547a4b71424a0a080cb9991a800ce19f06dd6ca6,", - "colors.accent.200": "S:3ec31d0fd1d03f7e480be9fe97c11aa755565c5c,", - "colors.accent.300": "S:56d728a1de9baafcca8622efa58edcdde92474e1,", - "colors.accent.400": "S:0c7ecde42114a3bb3d5a4337df1f7a91ce1232a3,", - "colors.accent.500": "S:1edb2cf3895dab78a522054dc3a968de7086b8d9,", - "colors.accent.600": "S:0293847388ebfe0811ad7f1de9ee0f4e2714b7c2,", - "colors.accent.700": "S:f5bfd79099ac49264509569aba08b098184ea6ff,", - "colors.accent.800": "S:0266247b5e3c548070ff3ccce2c7ec353d1cd213,", - "colors.accent.850": "S:1f35f711a4bf1e6cc411a2bbe4b7097f867697bb,", - "colors.accent.900": "S:930f1d981db1904ec5f75fc836e2327aa9222a2d,", - "colors.accent.950": "S:74a740866517a3c0f37cfe149f21b8a39f262f1f,", - "colors.red.50": "S:57d3ab6430b8e542b823afc0d3044ede5d9494ff,", - "colors.red.100": "S:a9102751ac72cb6274c28e60e10e3ad93c3a4557,", - "colors.red.150": "S:ca777f31405e45f6ecd5e08a0714c877196174e8,", - "colors.red.200": "S:8bac02a57620a63d9e9b7e1c868a429b3d749ecf,", - "colors.red.300": "S:d38f2f215507a0b6904f151a779ff5a79b776520,", - "colors.red.400": "S:46de725d9c0aff945f68201bc235ba1314bec527,", - "colors.red.500": "S:0938292c6aff72af2a30643571c7481fd3e9b81a,", - "colors.red.600": "S:c2169b2a72c3ff6dd8c37a950ee6e96100c9ee82,", - "colors.red.700": "S:8702ae60a5dfc7e7334831f8ef1c521e380592ea,", - "colors.red.800": "S:b34c817cd6d9d60e3a93061919cd048076930c61,", - "colors.red.850": "S:58ec4987d03d708ec1df04bbf2453390e74008cf,", - "colors.red.900": "S:0ea863ef7d1f16f76b3b17a5d939ef49acc5fa61,", - "colors.red.950": "S:5bab94948699b878519766ddf2e258ab8224a30a,", - "colors.pink.50": "S:87efb09ae2491fd0f898278644606dbafd259325,", - "colors.pink.100": "S:c73c52a23311af91767a5b2913ba1a28e763a1e9,", - "colors.pink.150": "S:d17ac3dfb2b2859ffdfd1bcef5d249ab7c077a5e,", - "colors.pink.200": "S:a34a28471eb0379fc988b03495e276a7f4c4f9da,", - "colors.pink.300": "S:4fc0441607f4e9f216669fb6f5b3120a91643966,", - "colors.pink.400": "S:0b97a044acd2f26487c5d1f495c1ee6a20e62ccb,", - "colors.pink.500": "S:95443fc74a2c599b14bd640d78c962b39f346da9,", - "colors.pink.600": "S:27c8cef7b80a2323b44ad9e6e07aab92ed411b78,", - "colors.pink.700": "S:2e0f60710431f905a54a196c749b69ae6cbf1956,", - "colors.pink.800": "S:2be9de1a4750f0c309dab1ccc01e1870df573edd,", - "colors.pink.850": "S:16840a8eea48034ed0fe09f9e6a4100386e7fdd5,", - "colors.pink.900": "S:f57a3b28e3dfcd4011911adb21c0d1821cd8e3ef,", - "colors.pink.950": "S:9f58261bf4fb4e3421ffb0f3fa3c6e628feb26c9,", - "colors.yellow.50": "S:d6b2e2aa7312dbcbde7bb8f0149ae88fc4450f96,", - "colors.yellow.100": "S:eb8370a113f00ea9b963ff5e4d1c892fda526192,", - "colors.yellow.150": "S:cd3b504ad6611cdac7f3f9d5d3e53b365c7d21ec,", - "colors.yellow.200": "S:ab53bb133398bcd8e707a9d3b4ef75b52e5fbb74,", - "colors.yellow.300": "S:94bca786a603ab90a3854dffc03b4b155956bd1a,", - "colors.yellow.400": "S:61055f64c9377c4f0e18c0043691825daaa01467,", - "colors.yellow.500": "S:6a4febd19e64b68453be6e9d93b6b11f161e3b23,", - "colors.yellow.600": "S:3cc9a655afb7f6c6c15fbec16863a20c5dd4c8c2,", - "colors.yellow.700": "S:0b72cc5c6df976ac8a0913a9f4d317cec1e8085a,", - "colors.yellow.800": "S:0c5043b7d369254b6ff40d01fe99ddbcd5d63e96,", - "colors.yellow.850": "S:7e8d683dc24ceb6155a407de90915e9945a02129,", - "colors.yellow.900": "S:24ca96403ff679b2780c6c10d92149ebf059005a,", - "colors.yellow.950": "S:da6766fb51b37aab9d50d734201d9c7b94796aa1,", - "colors.amber.50": "S:f68d9ac00998f0a5b8d18257dad9627439975a66,", - "colors.amber.100": "S:6d300b1e2d6b4d21c09a049e6e748cb1497bf29d,", - "colors.amber.150": "S:1ac4773f6e42acc3df6c9bd7c6960f0fc28b3ede,", - "colors.amber.200": "S:a7f47abddcadfdbb3edc6cf3307b94c76ac3a6e8,", - "colors.amber.300": "S:de6ca3b13b9479c63ef4bc33cb4016cc4d0f4597,", - "colors.amber.400": "S:9cd24711905b275e1fc645ae5481799bba2d7c4c,", - "colors.amber.500": "S:483b8b175df2de3635d694b210b05349bc5967b0,", - "colors.amber.600": "S:7f528dd16b545903bde166874efdc8c11cd08390,", - "colors.amber.700": "S:6805fb0c1734c6349fee9973bc4803dfa440a1ef,", - "colors.amber.800": "S:279feaf8b14b673702bad563f704a2a6ffaa18a4,", - "colors.amber.850": "S:3d4dfbff0a18611fa00d113b1c3596b844376823,", - "colors.amber.900": "S:54ac16558b657d7a97bcbb1cb8cfc5cfe2e56b42,", - "colors.amber.950": "S:0c388600c68691accbbb552be1e13169d7ef3723,", - "colors.orange.50": "S:8dda4d7aaadcbdd2fdf2ba99290dd10a8126d082,", - "colors.orange.100": "S:240ec89f6ffb88755f0ed6021388f1d565315949,", - "colors.orange.150": "S:2e3351569ec5bc39bb9c9bb6d314a55911354b97,", - "colors.orange.200": "S:9408f4047bf79d082fd13431cb4df9a6809a715e,", - "colors.orange.300": "S:bbaae4c06da45349ebe5d368ec970b01ba7f8193,", - "colors.orange.400": "S:0191821c9f40d7c8d0001d4c0c541f2f9ea54180,", - "colors.orange.500": "S:0a11039def68d22600ec9feceb637e90a5490b76,", - "colors.orange.600": "S:1f7dc51b216498dcd34e0aef67e06f20013020e3,", - "colors.orange.700": "S:ae6f16d65900971fc0cf295c64f1987ef737f315,", - "colors.orange.800": "S:484dff234cdc52bbc13543a75adcb35219a1e314,", - "colors.orange.850": "S:23ca0db212d4428cfc9087230ff2f8603db7fbd0,", - "colors.orange.900": "S:bd595411bf9a1718030656c398345dcdb3fe102d,", - "colors.orange.950": "S:a2eaa234678e373d7f9fdc888fabcebfe02897c5,", - "colors.brown.50": "S:d7195ea718cde2193cb091de46800da2135f8545,", - "colors.brown.100": "S:5209b0f44c44b0597eba47a57be5bb3a1fe01d36,", - "colors.brown.150": "S:6d595dd34de785773340a514ecf87f4b67f55c0d,", - "colors.brown.200": "S:5bc755edbd4afc290b91873e39506d71672247be,", - "colors.brown.300": "S:341841de51b4d43ef1bd8b448435217a312f4e37,", - "colors.brown.400": "S:a4f1e4d5d909be308b1ef7075200b073ef6fccb7,", - "colors.brown.500": "S:cad13cbaeaba37b72d108e285438046a03406e56,", - "colors.brown.600": "S:355f7aa669f64e61fa57ba0bbf0fb0f40729bc7b,", - "colors.brown.700": "S:6c8b181b226a2a65616ab889e4f6e19ea5ab71db,", - "colors.brown.800": "S:54ec2ab5899dde275ccceba844b97894d6f4f165,", - "colors.brown.850": "S:3d4706796ea95ab3257355fbf606fd164d91e177,", - "colors.brown.900": "S:596e3383f643cf322125f12a60bf07722b292603,", - "colors.brown.950": "S:a2bb23389951df0395a867d0605683abd74f72b0,", - "colors.mint.50": "S:60626958a155c3fca1e5aa61c26cdf8958ac0bd6,", - "colors.mint.100": "S:86f8f7e705419ae2fa973a4e6ea0d55d9a1bfa40,", - "colors.mint.150": "S:4c3cda63035c29dbf2461096f15276ee638d8937,", - "colors.mint.200": "S:68a86b119e3ca808b54f12cfaeb562bf34d02dee,", - "colors.mint.300": "S:5a4b30d63ce85e42377bf757413a3499caa4979c,", - "colors.mint.400": "S:2101c9780124fb06dca7bccebbe2b0bd65e5bcba,", - "colors.mint.500": "S:10381c88191bf8eb7e1be28e27166bdb436be44c,", - "colors.mint.600": "S:22970a52cbcce455da3c9473ee563a333ed9ea59,", - "colors.mint.700": "S:b0196d3dc75372970dc991cfa57621d1c4071034,", - "colors.mint.800": "S:f025469de49d52a789fbc90123fa00084f2f84e8,", - "colors.mint.850": "S:665af79232b73fc43ec367d55876aca564bdd442,", - "colors.mint.900": "S:3e6d85ec6beafa8e15a3e3482e647700883dfbbb,", - "colors.mint.950": "S:fd865da91b28a4134b1966aa347a9ec39736d6ad,", - "colors.lime.50": "S:bf0ecb827f14895df28d446a2480a26351e68482,", - "colors.lime.100": "S:8ab08ce1811850b79a444837a201955dba8eddf9,", - "colors.lime.150": "S:8eac2b8d7cc283e74e835c10f62b52e54fd6bf49,", - "colors.lime.200": "S:3f5a21e82df2fec756c261637863b815aa4f0d04,", - "colors.lime.300": "S:40b4ffcd3a0305742fde6bf387455f7a5d247c61,", - "colors.lime.400": "S:849632d5a39a0d571291a17bdc9e2c593c3b52e5,", - "colors.lime.500": "S:9ab7caeb4ec38b1333460fd73d3cf3583aa6768d,", - "colors.lime.600": "S:41b9cab6a3a28f64a438281344df9368c1c12c10,", - "colors.lime.700": "S:aad37e052b594bb5af57a9ca405d7d7fa37a62f6,", - "colors.lime.800": "S:66e8c5453cbe3229103d8c382fe2496dde3c681e,", - "colors.lime.850": "S:b3146af14ef8d0224aefea2439c0366ba38fe79f,", - "colors.lime.900": "S:0999d98475735b9033c03e3eb69f81226a567ccd,", - "colors.lime.950": "S:169feb35f4e560165cd4a9b7ed40df69f2d1057d,", - "colors.green.50": "S:8471aa9755fc39503907446148864f018881a750,", - "colors.green.100": "S:d72fe2e23ae1b0a91454185bc8e135ca31542b7c,", - "colors.green.150": "S:0bae96cfcef4ccd39d89784a910330de23182afc,", - "colors.green.200": "S:23ac98f9e4286898dd99d8b84a5f3076731ea26a,", - "colors.green.300": "S:74a2f20e9abb2c206cc1481ae8bef7bb8a3b9ee9,", - "colors.green.400": "S:ad92635bdb49d20aa2e483b0f7330029a5e6747d,", - "colors.green.500": "S:718fc3fdba03fd760d08be8df20fc12a8fb403b0,", - "colors.green.600": "S:2e1a055739f390663243eafa40fac92d799a18d6,", - "colors.green.700": "S:8f651c2ce20f00309549509c55b516ba343349d9,", - "colors.green.800": "S:b5337dd4f79028776111dba6cee865635e41787c,", - "colors.green.850": "S:d9ba46c12443e9930703387d128a0ff9d2b6494b,", - "colors.green.900": "S:70cd3cee585a4641bb04eb5bdd5656fa2023134a,", - "colors.green.950": "S:8365acc2fe8e9286ea67d6ce61a6023d43fdf67a,", - "colors.purple.50": "S:ea6286c6f6aa0776a8d7ec08fc587287269cc8f8,", - "colors.purple.100": "S:b9e033cbdb3f75527c86285643a3075f6188a67b,", - "colors.purple.150": "S:f039efbc62fb11b0613048d1aa8a9dd34e1b2de3,", - "colors.purple.200": "S:dc179cb953ded049ba030661a09fd023bccf9ff0,", - "colors.purple.300": "S:b3b00219dce88dcf27f46de7618b4be64f47369c,", - "colors.purple.400": "S:46e020da543eebfaee53410892ed271364a2dd71,", - "colors.purple.500": "S:3d47a2bde7d96146c65c04926abc3369fbb89728,", - "colors.purple.600": "S:f365dd00a7381ac90c6d57d45605a8133cd39134,", - "colors.purple.700": "S:3736b20cd5b9e49ccdd1378b61def16883ec1a26,", - "colors.purple.800": "S:a15c5bcfa837f8b106d300c0e060552925bf0d93,", - "colors.purple.850": "S:795a440d32f512ee888462aa344428aa198fc01a,", - "colors.purple.900": "S:ae533e7497117de374d9c1b5d38768801bf0b9f4,", - "colors.purple.950": "S:51cc3d3cc497a91653c334f069fb0d1667bd7036,", - "colors.violet.50": "S:16a6c4ef25ef354973931bc9eba194669fd173af,", - "colors.violet.100": "S:c77cc89089caa665ffda155cb926f12cb604fa53,", - "colors.violet.150": "S:e450a2b7eeaef3968b6bc97d19be6eeab6561d11,", - "colors.violet.200": "S:b44c3a836b9e1e667dffb2407e2c605ab8e6a6ca,", - "colors.violet.300": "S:3844ae9e74208194697cd9e0963e408793e19c4d,", - "colors.violet.400": "S:7cb0b897a4862c1111deb992aa7dfd164cec117b,", - "colors.violet.500": "S:955543d4b1943fcadc31217148946e12e0c57e0d,", - "colors.violet.600": "S:25d65a4ce28b587aa1909ffca8b098f583fb5534,", - "colors.violet.700": "S:f602e65cd972e3f6e0fd3f983c977a731f9db2a7,", - "colors.violet.800": "S:8fe6ecee6488bf761c640603a55d2edcc0045022,", - "colors.violet.850": "S:c6f95c7e4f7034d68505ac73c9337519e8aa7bb0,", - "colors.violet.900": "S:d034daa0e6e74083f44193a8e011420b7b5c4ffa,", - "colors.violet.950": "S:4d2ba2d6214e0097cb439b348b69b14940ecdc65,", - "colors.indigo.50": "S:80e000c51363925907ae2b129130b254fb1a23bd,", - "colors.indigo.100": "S:99cdc2fb3f63c4643171c505b3ef6b226377b5f9,", - "colors.indigo.150": "S:20584dca14c7c3f5c2e366a215e96bf18a50da10,", - "colors.indigo.200": "S:de1e1f227f3c2459b67d936071d20669673ba27a,", - "colors.indigo.300": "S:5a9b65530df005bb93424dcf3a647a8cb75afce5,", - "colors.indigo.400": "S:d897017af2d233af4fe200e5898cc1c7871dd7d6,", - "colors.indigo.500": "S:d085f2ff4865d9b856d2b2827ee86ff6d3887989,", - "colors.indigo.600": "S:b942c8441a2c0fcefb2ac23adb08215d2df4b084,", - "colors.indigo.700": "S:43d9c49257be2e0fccf77b04ab42e9e17a172b44,", - "colors.indigo.800": "S:f098677954435ea07463402ad4918d6dde65b965,", - "colors.indigo.850": "S:d432f2bd3659fc3f090def0319b5ad103c75a53b,", - "colors.indigo.900": "S:8cb5f907ce1c98909b0d4f881d9385bcf45da4ae,", - "colors.indigo.950": "S:4f523e8e9ebf260abbc497b919cea028d3d1d059,", - "colors.cyan.50": "S:9805f3a915cdd2cb3d14e2707e787d158c47a15e,", - "colors.cyan.100": "S:9ba294755ce72c2d13d13635b16ddfd49757bb91,", - "colors.cyan.150": "S:61fccd1789e0c1f06a7ceffa9bb5bc9cf499f7b9,", - "colors.cyan.200": "S:39bfc216ed94b1813d212a513eea5176ccd4b0dd,", - "colors.cyan.300": "S:57f1679e25d558662c817b80dcbc5b4c37fa39ff,", - "colors.cyan.400": "S:188aeaa5842c563848f5ef307564987627f43016,", - "colors.cyan.500": "S:03955d99bae727c67927a90b31c573d0cea0d6cc,", - "colors.cyan.600": "S:70bd24ac3b0fb744a30e28b62e85a068a3e6b35d,", - "colors.cyan.700": "S:7d8f5fa05ec5546fec68153cb1c1d8ad7fa856b0,", - "colors.cyan.800": "S:246d8fadfb7032f28118f32089244d682279378f,", - "colors.cyan.850": "S:f01dbbcd4b223bcc9200fcb73dfb8334cd43ac9c,", - "colors.cyan.900": "S:55a89b2ff7d6b213a97b322fe3a2502eb1315754,", - "colors.cyan.950": "S:ed1c5739ce64a92d78b896f258466ecefc5308e4,", - "colors.peach.50": "S:654d604da6a6ca8434cb17b90593fda09f6b77ea,", - "colors.peach.100": "S:4a26933090dc32c8e1f80cfc23905ede4465b6aa,", - "colors.peach.150": "S:ccd5f944ef6fc999073d2aa94595512a33174222,", - "colors.peach.200": "S:2a41c382d69e9f47426b03ca8f6229a5b8ecf853,", - "colors.peach.300": "S:6e7e8c9a42a0ad7abf06b5b34233b65d5a557a7f,", - "colors.peach.400": "S:cc96b34010c476fd05298ef8158d77ad0ba4e493,", - "colors.peach.500": "S:97e293e601c1d7dd74e82ff04c0570db737f3f7e,", - "colors.peach.600": "S:ca0ed35b316ffd0295a844b1fbd3a4dd89a4b818,", - "colors.peach.700": "S:4355aa38c203d18b66deb48183944d1e36abfc38,", - "colors.peach.800": "S:ceaac36426558fe1a257888d9df8afe9f5882188,", - "colors.peach.850": "S:78a70f05b78c933396f35f61ca0e13688257541d,", - "colors.peach.900": "S:e77dd05221f4a0cb21bec8d4389c2089189845a0,", - "colors.peach.950": "S:e19893526d724fb6f4b86c854bfd7d7d2c4dd1cf," - }, - "$figmaVariableReferences": { - "spacing.0": "475f43f27d46745efb1151d34181ca93e485c323", - "spacing.1": "a88d7f7fa50cfde706a203262c7981abf2275b7d", - "spacing.2": "15d295c3581f15a4b4cc29bc3b2c9c4f02e88009", - "spacing.3": "a6fc69939f4e101df0846ffd8b244aa7f02b5b17", - "spacing.4": "d3e5a4611b45e280bf565885815d34b4f35b341f", - "spacing.5": "647b25f3b73bba5e0e7cad5197964902c3172271", - "spacing.6": "77538eb6f928a531f96653e917be0b3f0b04f1b2", - "spacing.7": "eabc95bcaec14d0cf6221b477c47891a1304c2d6", - "spacing.8": "559997e9c6f60fdd365bf970c84053807f2913ad", - "spacing.9": "4ca8e5e378ea054ccd38f617af4ec9db95487a17", - "spacing.10": "ca471ca65f9c794ddad2490cfb1e0e7e7467571d", - "spacing.11": "efe2a2a5b2a60d05c078a1c7a7950588a3a030c6", - "spacing.12": "ef37fcfa576beb8e91c51010ec3329ddbe985742", - "spacing.14": "1ae0ed4cd0c32b858ff791415edad283ef1c2af5", - "spacing.16": "0d515ad8f73ae192356bd3fce04347ff8914bfa5", - "spacing.20": "8b4d19c935a89483725be041ce3e19182d81638b", - "spacing.24": "7b33d80680ee7f444bc05e404bf74b2fa7caac3b", - "spacing.28": "9e4816803f1f3739c0321eb5d351764da7ba9465", - "spacing.32": "f4344da90bf121d27d8fa80ddceeaa8d7c3e0f8e", - "spacing.36": "0127ed64e28cefa0e9b851a33c4eadc7ab340b30", - "spacing.40": "51e40236139d4fb0f3ef7d0e977093002253bc61", - "spacing.44": "648106e96c726104a5e737698f73f8f4dc85c150", - "spacing.48": "95524ca9ea66ebf7d20704e37d6672cbf39853b0", - "spacing.52": "dbf3f8ffb198ed478221f41f596efece5b17c59d", - "spacing.56": "3a73be8db57fa234fe23fb6c3debdc70e638ea55", - "spacing.60": "152dc4ff6aa1872e7691165d5769dbf8a4a45834", - "spacing.64": "b0478a9dae383d519e21253c882dfc85f702beb1", - "spacing.72": "c88ec41927fa21f2e77b259b95fdb95c420f60fe", - "spacing.80": "ec7856d13178d1e67c332ca681f3f8b407efecef", - "spacing.96": "bb4095e6118ca10fbb01085092263e8969247eba", - "spacing.px": "16fe4e3bc0b07f7f3d861c3fdee494d9d6d763e3", - "spacing.half": "ecfb730316867f575ec291afc3da55c32d57e10f", - "spacing.1-half": "ce6ffd93850926f8eb936f880fd2e006cf31c390", - "spacing.2-half": "0c948ab41410d710ba691e61e04d7523ebe2598e", - "spacing.3-half": "4e6064233484460281223f420b5015d31aeb5efc", - "rounded.1": "4c8e9b29af661054f065ecfb517ffbf725d128ae", - "rounded.2": "5c9a222659e74e39ecb528719f03049f267ba7b6", - "rounded.3": "546448f107049e61fca518fd32468633bba50a51", - "rounded.4": "8355a7d82d6f8643701db782be4fb5cc61e0fe2a", - "rounded.5": "babea9851a66e652c1b014b1b4e5ae3703efb06a", - "rounded.6": "00e5a4d652385f2496ba39014f6c1daca0e26736", - "rounded.7": "f36f7c646daf87ab3f745e9f73c885a957b414e8", - "rounded.none": "dee9b0b76ac1ec8e902c7f542c80e776ce9fee0f", - "rounded.full": "4691cfbd097fadbf1bcc96d2f48a40f9852cc7bf", - "size.0": "995df3a4b1b9b4f63001434f1d6725f9b299eac0", - "size.1": "c84e4d0afc5158ef9686053a2bd5d6de68929ed9", - "size.2": "2d22b5c7aa2af1b3c275a61921eedea63b897388", - "size.3": "9f9e971446627d49af5f282dde4d32278b01e4ea", - "size.4": "7ec1913fa9d0ba99a9c9ab479c214d2134048880", - "size.5": "8735292eb38dbebd85dc8ee43f2d23ec7b42d283", - "size.6": "52822e56506b18300e0fbbdf2bb7e365e7bf7ff2", - "size.7": "6e063a94e51cebd7c9a219d176c7d787ca821d47", - "size.8": "a49fe5980cf079c97127f5438130dd0c5849570d", - "size.9": "9538fa61069ecb323a822444b1a50c5c31cc9a76", - "size.10": "58d1040e7172436e7ee0e20affe14526f17cdb1d", - "size.11": "a09585144f13eeed9212adba9567769b0f50fe0f", - "size.12": "e6dd420d85cc30a8bac1788e21d7b6572f069cde", - "size.14": "827d8aab20a4c2491204ab2667997e5290363d01", - "size.16": "5b7b04b1ade9b423f1d5b9720898fd4776956a36", - "size.20": "51754ed1d031bdf73b871a0194e054b6bcdb99d2", - "size.24": "c9ff66a843bc50465f8632bd973a3805f551c773", - "size.28": "3d67fc88f56362f7cf66ac51f2f88cd9bb61385c", - "size.32": "3f3df7e30c35ec68258af2b3cf03322b3c12fccd", - "size.36": "0a36770ba6fc4a8dfad5e6ef9cea63dd3922547b", - "size.40": "4c98adca6ab6f590dcc5dcb8a25d8b32a8b9cffd", - "size.44": "19cc767ac465f9c37655b12bcd8a66ce8be013b0", - "size.48": "442e1202060ff89b13c597f3ec9a29ddf3eaf839", - "size.52": "662fff88f39d26ffe3870ec41daeb3759e47163d", - "size.56": "e2bc8e5ee61c219b9e4ba8b4183d693867bbe248", - "size.60": "6f80ba41ca6c5d047a9d4ce27d1bfe05846ff2f6", - "size.64": "1c15ed3b9ec4bf2bdc3ff99093f7ec93633b944e", - "size.72": "c49f20e7589d9e10bb30c4b7ad45440a9a789d01", - "size.80": "f0e6046ee68bb26d971366e664771f36ffd3964f", - "size.96": "481530a9303c4b3abe4882fc4b13c01e82d6d32f", - "size.px": "facc62d09b9290c8ae5a39e684e076f0078cce60", - "size.half": "a18c6726902f0dd03d09fda796c7793f1e5a3be9", - "size.1-half": "84a71e411cbd12832d0ab8d7d4581fcf24fa8f45", - "size.2-half": "a1e7743b917f7797d104b2a158c78db905590160", - "size.3-half": "ce599118fc3730b354fa05d449bc8f9b99f91720", - "borderWidth.0": "950d5f6e9b3fed7b192e5a150f74927b462bca29", - "borderWidth.1": "554d33ab7c952fbe9558f3c9562483abda105891", - "borderWidth.2": "c259dae921de08038e1efb5f295d8ab4be540990", - "borderWidth.4": "4f4280b0a24f816e2dfb5ba5a39199c24d7c4b61", - "borderWidth.8": "c1632660a255d86cde0647e810c28fb8bb6e8f65", - "iconSize.xxs": "8d5005a5ba007398f6a50a4eec1283323aff945c", - "iconSize.xs": "7094639967ebfc8bd85f38a38d26f021655fec1a", - "iconSize.sm": "60a419ef3a3707069d4332226fd5de5026262723", - "iconSize.default": "f857bc614dc0f9dafc613bf5f04eb305d194fe36", - "iconSize.md": "30dfaa7e6c403c1b81191920634c612f67662aea", - "iconSize.lg": "1da69111eca3d6355427d1523736d7ef13fb460c" - }, - "$figmaCollectionId": "VariableCollectionId:426:491161", - "$figmaModeId": "426:0", - "group": "core" - }, - { - "id": "06c0447b12ae4d0bf224a0eb90b673f151ba8f24", - "name": "dark", - "selectedTokenSets": { - "mode/dark/default": "enabled" - }, - "$figmaStyleReferences": { - "brand_typography.text-xl": "S:1befb2b289e263331f60edbfe130631462dc9883,", - "brand_typography.text-2xl": "S:559234cafcead30f61482c0711adf13750438bba,", - "brand_typography.text-3xl": "S:3832dc6cb8083be9bc74c713a7bee10704e0c98a,", - "brand_typography.text-4xl": "S:aaf40dee5c8d5e2c645138942fcc83dc8e3116b2,", - "brand_typography.text-5xl": "S:3d94b9564e44dcec497470ddcc4f9e253238bde0,", - "brand_typography.text-6xl": "S:8036f3d246fa457788173794fe353cac43d75a02,", - "brand_typography.text-7xl": "S:e20290596bc10c63b0245c98b442eb0321d89b14,", - "brand_typography.text-8xl": "S:8898aa9191a0c5c019b43d38afb350b9078da9f0,", - "brand_typography.text-sm.default": "S:4d9a60a9a7b5cf8f2b809b884ac0de54a707427b,", - "brand_typography.text-sm.bold": "S:a52b0b9b0305915c205e4734b7af2b68ad0b50b3,", - "brand_typography.text-base.default": "S:c883d1e6e22458180cbbe80658cadf5bd6636cc4,", - "brand_typography.text-sm.underline": "S:bf4ee08ca7dfe0aec044be2d744570462ea510d9,", - "brand_typography.text-base.bold": "S:b9abb65f1be9fdf2a38822d23fc64298fd93a99e,", - "brand_typography.text-base.underline": "S:bf84250619e894e0544f7bbc9f66db609963ee0b,", - "brand_typography.text-lg.default": "S:bf62d831a4d0ef968d1fe5494c58d006a645b418,", - "brand_typography.text-base.numbers": "S:250f185032e8bd141d92e4340a1ed8382bbbbf3a,", - "brand_typography.text-lg.bold": "S:e5262efff66b39802cb559e69152c6b6da9a7235,", - "brand_typography.text-lg.underline": "S:28d3e50cf6bd4742b62cbc5ae84a21a22779e859,", - "ring.focus": "S:062018f6483f54f1255b952aa1759b028d502ac3,", - "shadow.inner": "S:2805cdc40176a4707d5cfc549b4c12e7ec4e74ff,", - "background.canvas": "S:331b5c29b3008e603fb2238b4114756bd590539f,", - "background.surface": "S:9d874b54f2ede343927838fc24489aa75abc2abf,", - "background.highlight": "S:85744aa4f44ae1e5a57281310c886deb484de63a,", - "background.overlay": "S:6bb43972c60cdf364cc1bc631bc61fa61baef9a9,", - "background.nav": "S:f14cc0888fdfafe9bd0e2a0ebcab0b04f2f4122d,", - "foreground.highlight": "S:a341979c2c8d5ee0831e6c04419ec45c6be0c49f,", - "foreground.base": "S:e478cc6c7af830bd68afc7d877ed423d442eb31c,", - "foreground.secondary": "S:a327b82c742540cd3a29527fc15e47c3a510de4a,", - "foreground.muted": "S:a9c2cd0dae700a4c60c5b380c36a249b39da3c56,", - "foreground.accent": "S:27a17495a8eee67b0d9ac9e7aa0a08dcdb374aed,", - "border.base": "S:1519009d62ab9c4213d5d54d1ccf9d31db9382d0,", - "border.interactive": "S:5d3554cbcf69aa4af436fc8fb5a865f0e29d5a00,", - "border.subtle": "S:a5f61041ecf22b5dbceabda2d4e7e0e9f96d59f5,", - "border.ring": "S:8e97d8846d61b1b9f79c32c6efdd6f7996860a95,", - "action.primary.solid.default.background": "S:832c9b5c07ccad51b50f318e141cec16c35a4802,", - "action.primary.solid.default.foreground": "S:177fb4c4118fc2f13dd45fb226db4f864e5ac648,", - "action.primary.solid.hover.background": "S:711a1f1e0354fe07e7a59e4eb57de5daa38e09c1,", - "action.primary.solid.hover.foreground": "S:de62147ac84ae3ec876685240b4a1406d8b16c58,", - "action.primary.solid.active.background": "S:8744f04fe43d9f89489e78e0ad1186411155bab4,", - "action.primary.solid.active.foreground": "S:8501427cea56c77d54c9e9f9ea9150908a7ae815,", - "action.primary.solid.disabled.background": "S:d7418882e916e92f05b8735bc17689cf5475a7be,", - "action.primary.solid.disabled.foreground": "S:e97c8c547d2d52dd56141c2e9da669edc4c4faf2,", - "action.secondary.solid.default.background": "S:5427d5699d4ccb4c4bc339f519ffdda7d47d0afd,", - "action.secondary.solid.default.foreground": "S:0fec659f28d28dc7a469ec43354d45a02503b46c,", - "action.secondary.solid.hover.background": "S:3eb0ac495336d562ebe530f727b221a782ed016c,", - "action.secondary.solid.hover.foreground": "S:8ea06b95b452a034fcb1b17d39f04fcc6ae0f035,", - "action.secondary.solid.active.background": "S:f102ef4273a91c15e3275e3bda69056defad0989,", - "action.secondary.solid.active.foreground": "S:260e53769e8a6f046d32026fd78e46176813f3da,", - "action.secondary.solid.disabled.background": "S:9930826affc56c1ee4f6df855c7d89c1701a13d5,", - "action.secondary.solid.disabled.foreground": "S:f6e38c508d82b9836b5e8c46a2ed573dacaa5498,", - "action.secondary.ghost.default.border": "S:2ff4c102a833d49c488b110cb8fec2868de51edd,", - "action.secondary.ghost.default.foreground": "S:cc19d993956ec7792de5218957ab340bc95d651a,", - "action.secondary.ghost.hover.border": "S:39243026068bc051825b8abcec5e0e626a40ba17,", - "action.secondary.ghost.hover.foreground": "S:17c60092a7ec06616d5112cbd55c1316bc7e0bc4,", - "action.secondary.ghost.hover.background": "S:90918e1eebfee85d8b992bfb1611aa21ea4d5e69,", - "action.secondary.ghost.active.border": "S:42f70c32a046021d15b7222865b39944aca2fbe0,", - "action.secondary.ghost.active.foreground": "S:d80bd8e090f2124aa9cd6b6515a81a8523f6ba2b,", - "action.secondary.ghost.active.background": "S:fcc7ffe628484881e3ff09fbadb3dbb763ac1441,", - "action.secondary.ghost.disabled.border": "S:1e2a92c1babcf13e25fd980e197536e4a8d605f3,", - "action.secondary.ghost.disabled.foreground": "S:6f3f3bceed7c4b277bea9b1dfaec4e0718d0cf1a,", - "control.interactive.default.background": "S:e2f8c3b63b45473bb94f5c1089cde27ecda2fb73,", - "control.interactive.default.foreground": "S:59a3e3381be25ebc0e18dfa3f5c91af6c8c11393,", - "control.interactive.default.border": "S:06f1186f4e3d9b7cea8bd248786da269448cf2d1,", - "control.interactive.default.icon": "S:6ebd7a8790126c0dafea0dedab6c5875b56e2db2,", - "control.interactive.hover.background": "S:c898cfdd553b0dae2a8836f91c8289e022690456,", - "control.interactive.hover.foreground": "S:c0c0d370d4c36ff9874002395cdcf265a6af117c,", - "control.interactive.hover.border": "S:828abc05cf672e7305e85312eb89bf9da517ecaa,", - "control.interactive.hover.icon": "S:eb8dc03976c90144a4f9cc56826f6ab75a5dd993,", - "control.interactive.active.background": "S:614c5a9384c19db799bc2e6a746446ca43b926b2,", - "control.interactive.active.foreground": "S:ad7782c6af492c1a990ea4f1a92763255231e9e3,", - "control.interactive.active.border": "S:cb9044dac28a3d74716a7bfec6dd2ee750715019,", - "control.interactive.active.icon": "S:e4ef20e9f36e8b97ce22bb0f551516938307b0cb,", - "control.interactive.disabled.background": "S:67873eb43d7192b472e75f4d8e02fef7a26a97c4,", - "control.interactive.disabled.foreground": "S:5936efc582c95e1aada1ed22ee2e4c0a688a6473,", - "control.interactive.disabled.border": "S:0dc465fe2d61b410ee80cba92da0b68c210f8ef2,", - "control.interactive.disabled.icon": "S:8a9e2661044f515a0f8aa516a83af53ff0bb8550,", - "control.selection.unselected.background": "S:3d5dc5af9866a40bdeb486f5f5d5b555508b3df0,", - "control.selection.unselected.foreground": "S:50370d074cfa6639ed5575331dd76623a1741c16,", - "control.selection.unselected.border": "S:7a777babee327f6f50c9be7119111d4e09585f3c,", - "control.selection.hover.background": "S:fe41d281c38562426582de4dde20b37e548fc44c,", - "control.selection.hover.foreground": "S:ce0ca76ae8f851ee9055d4e9691c24bbe5ddee52,", - "control.selection.hover.border": "S:68a72175fcbd756660ca5283c9fbe871455751cd,", - "control.selection.selected.background": "S:a8cff9f7d4fff1dc7d64b56f81bf872387db9453,", - "control.selection.selected.foreground": "S:3baf852280afce66217cad994da2e9cceae7b6fd,", - "control.selection.selected.border": "S:d36bdef8d7f35c083f891fbb5bce797383b7f0b4,", - "control.selection.disabled.background": "S:4fd454549de1c6e734482e0204e956bc10fea9d5,", - "control.selection.disabled.foreground": "S:e899cebdf3c505b1abd5967788626c9807c0f1ef,", - "control.selection.disabled.border": "S:4bf423a685a4e4fb33dbf9f6fed1856152893159,", - "control.adjustment.track.base": "S:ae2033397464918dea98b635b504b70c97b574b8,", - "control.adjustment.track.progress": "S:8af16fe038d88d530937c17c0be95d733ebb845e,", - "control.adjustment.track.segments.base": "S:6cbf54ed1cff9ae3af38625f13e261a5ddaad3bf,", - "control.adjustment.track.segments.progress": "S:57f2b1b64fce489a3f326396750bfbe82460aafe,", - "control.adjustment.handle.default.background": "S:9c02956aa237f92cea0a5eabba608ec7bea53f1b,", - "control.adjustment.handle.default.border": "S:0bf3b1ff8ae99549a725dfae98f992730612cb69,", - "control.adjustment.handle.hover.background": "S:0a68e64ac420372327f36105a26a4fc58b1a89a9,", - "control.adjustment.handle.hover.border": "S:c14daa83c65174ac20b32e3a8ec3c159a50b1207,", - "control.adjustment.handle.active.background": "S:3fc8766daeee12af9ab837bfb408ef4a2460e562,", - "control.adjustment.handle.active.border": "S:380ebc7a97fddf5b0e0f05e722f6bd99973caad9,", - "control.adjustment.handle.disabled.background": "S:aa67d76c852e85044e90b214fbc1907260698313,", - "control.adjustment.handle.disabled.border": "S:ad242f34b724d78128bae2d69366d5523affe527,", - "feedback.success.foreground": "S:3033602ffb191e77c5c5a5e43bb99c26e92d1eda,", - "feedback.success.border": "S:c619cc7b9ef1000e693621a145121cc54c15bb7f,", - "feedback.success.intense.foreground": "S:93534496ca567a397e40cc17a66d4709867c9aa8,", - "feedback.success.intense.background": "S:6fdb5788dc1d932b2e7331a17b4462f9269e1811,", - "feedback.success.subtle.default.background": "S:7da60dfc6d272943eb2294b33a2792275b2c7fd2,", - "feedback.success.subtle.default.foreground": "S:59cb977959ad042a511d137ff6e7b275ce391ebf,", - "feedback.success.subtle.default.border": "S:1958dc17bfbc1aa71404de92e727b0998a30c703,", - "feedback.success.subtle.hover.background": "S:80b73cb63db7abfa5b272d9d5ffcb2115cf31d7d,", - "feedback.success.subtle.hover.foreground": "S:c598a2325737242309afa6d3e9eb1ea417b725be,", - "feedback.success.subtle.hover.border": "S:e4a781c02200fb3f32133148049ecc48480acb32,", - "feedback.success.subtle.active.background": "S:3d1ac54bec5806d1c9f7927f455256f97510e6c6,", - "feedback.success.subtle.active.foreground": "S:5bf47516b5df212aef5757e8a15f2aa0dfce64fd,", - "feedback.success.subtle.active.border": "S:1e4f10e42487c8fd6fd466b56b1c8ef6eb54594d,", - "feedback.success.subtle.disabled.background": "S:63e44fc3ff084943e82b831e9eda82754fbb9405,", - "feedback.success.subtle.disabled.foreground": "S:9a31b159e69d3e826348a766e34ac223b7e6ae84,", - "feedback.success.subtle.disabled.border": "S:f4ae51979a6afd262ec9eb50394dfca16834ecd5,", - "feedback.danger.foreground": "S:3ef404726ed330d15f3a6790481cbc1f4b8a2284,", - "feedback.danger.border": "S:6764e5f7c43746c6c525bdfb9997ea3062056d14,", - "feedback.danger.intense.background": "S:7c0f8421c97d51827b2f2750dd04e89d0cccfc9c,", - "feedback.danger.intense.foreground": "S:fb76efa1d9eb6cc166587c77b3de88a9de0c3b8e,", - "feedback.danger.subtle.default.background": "S:2599e4a288f1c931e0cf269d596ddd4eb9def5c8,", - "feedback.danger.subtle.default.foreground": "S:d0109f1613a2f0ef05d5ba65bd8392a3770ccca1,", - "feedback.danger.subtle.default.border": "S:ad1868a5a24bc4dc804cd14c9b9a9b76fffa6887,", - "feedback.danger.subtle.hover.background": "S:c71ad0ebfd0944204021d49f0e638d6457ca15a0,", - "feedback.danger.subtle.hover.foreground": "S:13ead71651fb5146c9257290c09642e12e2028d0,", - "feedback.danger.subtle.hover.border": "S:837f2cbf7d96c96e1b8ee2eb4809248de56c8fe7,", - "feedback.danger.subtle.active.background": "S:03ea6106ce0f8a1674103df84ebf7dd68cb5864b,", - "feedback.danger.subtle.active.foreground": "S:3bd5564eb5e9278fc1ec640a1a3fd3d8f520b1b5,", - "feedback.danger.subtle.active.border": "S:bb0a827c0d367636a44d4a4908a8b36157ef429e,", - "feedback.danger.subtle.disabled.background": "S:ceeba44b3ef0e7a6a9b17be22c8bd756ca6fecd3,", - "feedback.danger.subtle.disabled.foreground": "S:5b736b191e2bd64eefb6b31d3bc59a33eb6520b8,", - "feedback.danger.subtle.disabled.border": "S:3795e81454614990b4d69d12c396f6285b060e63,", - "feedback.warning.foreground": "S:54cae4cd416a9ca82a32e4a43e7fb55127d36309,", - "feedback.warning.border": "S:c0560206648e89c6af40de87d47f59274f41e60d,", - "feedback.warning.intense.background": "S:6e305fdb4a2d7cc5e31db79d6c4dc9097811ff4c,", - "feedback.warning.intense.foreground": "S:ec506542c2225d3d3f8e952b2ba9441583116a72,", - "feedback.warning.subtle.default.background": "S:d2e0abedc3eab630aae54b2209263be8e43ed60c,", - "feedback.warning.subtle.default.foreground": "S:453fe964ed20ab51e755a4a51bdea7f5278c17df,", - "feedback.warning.subtle.default.border": "S:0f14fe6ba5afd78049996d4964bc2b0b070c10a0,", - "feedback.warning.subtle.hover.background": "S:ab4b5a049770a614bab522d050b20c24c1891f1e,", - "feedback.warning.subtle.hover.foreground": "S:906de1a458fa9d8b17c3f60a5b69100c7e8025bd,", - "feedback.warning.subtle.hover.border": "S:88ed9c12b37d89033b10f2db3d529f100d7efd53,", - "feedback.warning.subtle.active.background": "S:e69c7d0927219bf670298cb5c1e8ccabcd245816,", - "feedback.warning.subtle.active.foreground": "S:8023a65c3aaabd3a4bdd7273e017dbdb06df5a23,", - "feedback.warning.subtle.active.border": "S:9fbfbe31ebc457488abc684dabd8300872ed0a08,", - "feedback.warning.subtle.disabled.background": "S:2c040c2625033dba6e425117a5d7c316b71aa0ce,", - "feedback.warning.subtle.disabled.foreground": "S:ac06df8f1d6f6b18ded5f66dfb3451a62b58ca0d,", - "feedback.warning.subtle.disabled.border": "S:571547de9bc3305c4f3ab13ce958f52932b239b4,", - "feedback.neutral.intense.foreground": "S:8826dc8b45425b18c4660a9ed2a33e933a3eb317,", - "feedback.neutral.intense.background": "S:25504f584cec9624c281303a1311dc53ae67840d,", - "feedback.neutral.subtle.default.background": "S:9c75d8356c306392cecc47b4dfb2692ae4208af6,", - "feedback.neutral.subtle.default.foreground": "S:63d645fa2d8a35c097e1cbd75aff137311633c8a,", - "feedback.neutral.subtle.default.border": "S:479131247fa79794a1346c99b51fea0cb7648f2a,", - "feedback.neutral.subtle.hover.background": "S:ffef5c55723848b5119139c7381248e01319d78a,", - "feedback.neutral.subtle.hover.foreground": "S:b7292ab703823d5f9bef5b6a32de9eee739cca69,", - "feedback.neutral.subtle.hover.border": "S:3ce49a5e9e020c2179ea8bd862711bc92d00aa8f,", - "feedback.neutral.subtle.active.background": "S:84fe44dede8f54a1cad9070e79f1783061e20103,", - "feedback.neutral.subtle.active.foreground": "S:5d61750e46617564f05ca7fa8489e231c2e78c6f,", - "feedback.neutral.subtle.active.border": "S:d5faf283dc7301c8e316807c7a66af70f1d5d6b4,", - "feedback.neutral.subtle.disabled.background": "S:330821fcee1f97301f8f4895c1cf1b0cfd281358,", - "feedback.neutral.subtle.disabled.foreground": "S:231e3175bf8c022db4a9180cbdb3803c13e5b859,", - "feedback.neutral.subtle.disabled.border": "S:1b181d8bdfee9f2b1fd08620a9088894b7398a4b,", - "overlay.hover": "S:a2fbefde236ba0dcb33162f26e399c903f3f3aa1,", - "overlay.intense": "S:c4431bd130603b9b058db482f58b59410785949c,", - "overlay.backdrop": "S:737ef8b57f25262207167508e4997c0a820ee37a,", - "shadow.color.none": "S:d80795e1743b3d7562c45abb6384b2a57bf98b66,", - "shadow.color.sm": "S:b3aa1c9446e0ba8245ab2c952b4ba60f59b647e3,", - "shadow.color.base": "S:3500080d4e1c2523893346441ecbb69f861d29f4,", - "shadow.color.md": "S:d0cdf836ede16764f91fd4f889c25cb4c874729e,", - "shadow.color.lg": "S:5bf5ffae85af867449fda04def92b4b60527fd66,", - "shadow.color.xl": "S:8ad7583b0a0f718ee4ea5159996b8a2ef70aaa8b,", - "shadow.color.2xl": "S:4905d4597dff436b65f8109882592e33b1b2a5de,", - "shadow.color.inner": "S:ab4a6797a4b15d39a7511a1a7b1a8fa39c49c482,", - "components.link.default": "S:b828313d4babf42ef77b4051a69d25b27cd2cac6,", - "components.link.hover": "S:470c092ad5781caa7de5e946dbc4e9119aecff1d,", - "components.label.red.foreground": "S:2376561d86aaba3baac87c44852872c039ae4904,", - "components.label.red.background": "S:7064d0fcf95f0b26f6efd8e250f2a07b9590cb53,", - "components.label.red.background-subtle": "S:31d55f365d311a26e410b2d3bcf684484008dd4c,", - "components.label.green.foreground": "S:10e9444500dcc41920fc4d44ecdd1d931b2d1e8e,", - "components.label.green.background": "S:3454e0848b708959b3ba63dceae8698fcb40cab4,", - "components.label.green.background-subtle": "S:04f1a652fc004d9d5692bc3d5d95974c121e2f42,", - "components.label.yellow.foreground": "S:6561b55a80c906f36c0f888b061099066bc36896,", - "components.label.yellow.background": "S:0e6524e023005b387bb921515e650b663e0a0efa,", - "components.label.yellow.background-subtle": "S:72ace5e7dc67be3ce1d46c9bd32c3c7a65604c7a,", - "components.label.blue.foreground": "S:b18dd4ad3ff96d8d919c7d6c686e25d8d291c4fc,", - "components.label.blue.background": "S:8dade2ecf0b6f8f358ed3564d499f2c4da8c892d,", - "components.label.blue.background-subtle": "S:e60cb72542f0be9a6117b8e476af5b53b9f7e8e7,", - "components.label.pink.foreground": "S:520df9d38e7a1af3482074944234fd377c9f9885,", - "components.label.pink.background": "S:c1f78db30af7cc77421784afe1414492fa3cad8f,", - "components.label.pink.background-subtle": "S:b5a63db81d86371f45a1c3be76ace93c795f16bb,", - "components.label.purple.foreground": "S:ba843868b9ff11805ddd2f27d83fde01a987244e,", - "components.label.purple.background": "S:46c99fecebb0f5040ac0e1764c7f40a718725edc,", - "components.label.purple.background-subtle": "S:6033a110925f2399f2394cd8609ac9ed3374ed32,", - "components.label.violet.foreground": "S:d4e6179c068b429a1ee2a09f96260913d956baa0,", - "components.label.violet.background": "S:b9a806af9917c7b1ee5a3deece2e0fbcb3165fe4,", - "components.label.violet.background-subtle": "S:cfe58081188d94849890e4949529493174093289,", - "components.label.indigo.foreground": "S:0252a1a7f245d2aae92dc2c17dd5c64f6bbf2795,", - "components.label.indigo.background": "S:9fa9ff9a15ba4fc10844a7aef164b4454e3790cd,", - "components.label.indigo.background-subtle": "S:5c3eb9c94d4db9cc7cc3525d09effb3c4f368523,", - "components.label.cyan.foreground": "S:d6c95f6902a180bcb904bd169ee7e356b5e7004a,", - "components.label.cyan.background": "S:7b0d3f2d93864b8e936d3239e71e612c18ca56c5,", - "components.label.cyan.background-subtle": "S:05a1195cd6352776a5ac09de688a18bb00730eab,", - "components.label.orange.foreground": "S:b67ef665d170137b7e80e30b8415a76681a65705,", - "components.label.orange.background": "S:6deadc7d8179689308d6d4228153648c77cb6ac7,", - "components.label.orange.background-subtle": "S:169fb93506b7f48d42b912d2b9afb0348f82aa8a,", - "components.label.brown.foreground": "S:bda65457145eaee61b0923d22a7ff49688f41082,", - "components.label.brown.background": "S:00f3480a4617150d3c0269ee0da2d5fa18556c89,", - "components.label.brown.background-subtle": "S:d3949888b3059151eba2fa02dfb0c3d79000ee8e,", - "components.label.mint.foreground": "S:6a323842ebd9716c7f5784be6ce634adb10a86ed,", - "components.label.mint.background": "S:609072fb974b8143f462e5e9792de69b6a75fc32,", - "components.label.mint.background-subtle": "S:621789bc28ca76cff2ad0e3b88d4719ba4b3bf20,", - "components.label.lime.foreground": "S:ec7bbe3845cb6fa823feb57ace32f763b1a9dcb4,", - "components.label.lime.background": "S:8c959d680e119ef0adb46731bac85f9accafcddb,", - "components.label.lime.background-subtle": "S:7f8376c58f083de0a8913396566d8f47b4c23e6c,", - "components.link.visited": "S:ed520fd50bda49275069ab5026bdafd02a1f61e1,", - "foreground.success": "S:b383b4979389247194900c8c9d812e058b7c5a45,", - "foreground.danger": "S:c4fc3e61ebc883cb944dd77768c09195e265d3b6,", - "foreground.warning": "S:bc2af0b3a9f4622ba0a47ec23af9ae32da45f607,", - "border.success": "S:87464eb0d037ea15196db6058cb527437a8448e6,", - "border.danger": "S:513fe670e326c095b007603dfef9c94559055a1e,", - "border.warning": "S:5477ee51efc7690f5094733e7f08234d65c4dca3,", - "ai.gradient-stop-1": "S:8120f1beb08dfd4e3b6e25b43c0e126bd99d2cd1,", - "ai.gradient-stop-2": "S:4d3ae9f921ddb2dcd79644b9058db5279f4910b1,", - "ai.gradient-step-3": "S:4f8adea1b6b771f117ae5c5c73c93e706053b564,", - "ai.gradient-step-4": "S:1f3b81b1e9737fca59551bf2035945cf3b7ff11e,", - "shadow.0": "S:a2ed3778198048e91067a04633c27ba20e9fcbec,", - "shadow.1": "S:947694488889f7271c428950bec937ee79f8a536,", - "shadow.2": "S:70378f090cb66b03ee4b18e25742743934f37757,", - "shadow.3": "S:aa7e83fd47e75f5a1ae3e17f64417d5e9fcb96ae,", - "shadow.4": "S:5dfba690094db266c4ab7686fccbbedd8c16385f,", - "shadow.5": "S:d6752151a8dd3bd4b4bf12ad15a80c522f760731,", - "shadow.6": "S:da8e7b5b0f1352215fbaab66eff62a3e19d22b67,", - "btn.ai.gradient": "S:4ebdcb6ac88a1ed9475ff8b1b20648b0afd80123,", - "border.1": "S:da339b899ea994c3106fafc0693c71a7fc7554a1,", - "border.2": "S:e65bec621a9f447de1831a795fc7cec039df5215,", - "background.1": "S:d69148935f2d76aad3db3c62d145732188280842,", - "background.2": "S:8d269e7f0088c967c3e3d4ca04f02c3f53c13df0,", - "background.3": "S:2bcda799267359c8341f0f70fb269ec67b3fb08a,", - "text.1": "S:27f24a806b8e4ebafce608072f1e76cfee984476,", - "text.2": "S:aaae1b145d11b0773e88c8e3f227ea13cbb20da5,", - "text.3": "S:af0c6ef6578b54ceb001fc602de924e51bf2e495,", - "text.accent": "S:cdf4121d6909cc34c066429f836bb715ca30b1bf,", - "text.success": "S:5454d9257e676d34cda9b27de43de51f5e8a5124,", - "text.danger": "S:d03ab67b4dc0cb1eef220e3819e08f0d325f9a5c,", - "text.warning": "S:e40dea7de987a83a099a84f37b3acd8b7600cbc4,", - "border.3": "S:e7344d45fb7a239651aa069f235ef36d85a11eba,", - "border.focus": "S:4d16ce303d186f3ae148261b8655a08d06760b45,", - "state.hover": "S:d3d79023582e21daa779039106b0a51cca52e94a,", - "state.selected": "S:22193c95536ff81ea9b20f3f16bda252f4734fb4,", - "state.disabled.text": "S:68d8b95fc6f641eec513e2f3ad8c3c2db1be7be5,", - "state.disabled.background": "S:808312e64be39e9f20fd687b1f20346ccd2562bc,", - "state.disabled.border": "S:e5fc779cd185a50c944fe2a247dc393e2ebb8cf7,", - "component.accordion.title": "S:aceb489df4cf7d604942e1053713ec36bc7ad0be,", - "component.accordion.description": "S:daca5976fadde76d201570a3f628b89e0954db0c,", - "component.accordion.chevron": "S:98d0dafcd0866f576ab75da132f20f3e97248cae,", - "component.accordion.border": "S:e2e8f61aa21febff50ff750fbd0697f589844369,", - "component.alert.default.title": "S:5a3aeb07807c596e138dc6fc17e6105410d8788a,", - "component.alert.default.description": "S:a7e5dc2f81c2118fc59a2d54c9db0cfbddb32cd3,", - "component.alert.default.background": "S:4675195115352b21b270317a8de733f6c1cfc985,", - "component.alert.default.border": "S:9adbec45afdf6df461b64c04cc91e809e0e80b29,", - "component.alert.danger.title": "S:db5ac3e68f3a0958c718b006dd173b935b9221f4,", - "component.alert.danger.description": "S:37259ea489d5a49ae1853e43ed97eecf4e6cee1c,", - "component.alert.danger.background": "S:aeebc614d1256dd22b9126b1590fdf0c031c71ee,", - "component.alert.danger.border": "S:4abcb034e00183956dee713764f525a38b74300a,", - "component.avatar.text": "S:2c0aed4d2433def24089ecacf7f76f593969fed6,", - "component.avatar.background": "S:96084f14e6c66f1d6511af0dcdc294b00dcdaff8,", - "component.avatar.border": "S:ff4533fb82d71f8be102bb34440b1f8af4b9d118,", - "component.badge.default.text": "S:c30e4231de0e42122a00f236e52050aa4e2cebd6,", - "component.badge.default.background": "S:cb17e87e2fde43cdf65f832b16b0c60c669a10d8,", - "component.badge.default.border": "S:b959b2ee1c9614e965b448228c76a9d4fe4c6177,", - "component.badge.neutral.text": "S:74a63721b3099ab916d68733e20b9bb928746a75,", - "component.badge.neutral.background": "S:22b73e515c1ba112fc358ceae8bd1deba83c01c6,", - "component.badge.neutral.border": "S:cd14e2054e4823cca9ffbcf2f5ecf7397c764c47,", - "component.badge.success.text": "S:d8ce8623e3ad77732e72a8d8edb4ee356c23f63f,", - "component.badge.success.border": "S:6a9a589e92f03a447d5da686a2aa2e627a3bf747,", - "component.badge.success.background": "S:308df9c5983f20139f25b029f1a02ade5fe2c5ea,", - "component.badge.danger.text": "S:7d9321d5f3320ca34265fa3e680a6c4fdd78319b,", - "component.badge.danger.border": "S:999475a1159812d763aed3349141c5da7c77237e,", - "component.badge.danger.background": "S:e38046e30c68956c9703e6a9538cc90e2c90c84f,", - "component.badge.warning.text": "S:03b97cb2b150bd8b4ff2cd05aca7bddaaab5f8a0,", - "component.badge.warning.border": "S:e0f965ebb83a3c8055eefd9d1692611cf3c0074c,", - "component.badge.warning.background": "S:ead82ad4f1b2845eafad3746b8443a51330b4009,", - "component.badge.running.text": "S:c2a2f7b5e63e5d8163e92def33f6164d00595d04,", - "component.badge.running.border": "S:ab155f4a7da7654a985a55d5ba0bc4e433fe6117,", - "component.badge.running.background": "S:12086499bcd0bea9c3e25705219e9a8875c84ce6,", - "component.badge.merged.text": "S:b05bd695d0ca58c22bee4550b207326ab426cb29,", - "component.badge.merged.border": "S:b2de991f6dc7060ad5675ef35c183ddf878d8af2,", - "component.badge.merged.background": "S:75009a111025e5f3646fa5112fba435f51bb0085,", - "component.badge.ai.text": "S:86046560e6c9cd9218627316b7811fac33fb157e,", - "component.badge.ai.background": "S:b95b5eff63761d7ba79363889a38b07cca0bfb25,", - "component.badge.ai.border": "S:9b437ca9744576650425c26aacb75b8305a3af03,", - "component.breadcrumb.item-inactive": "S:9a76eae080732023af91e82d3da64e1e1537bf67,", - "component.breadcrumb.item-current": "S:42f3494800dcf47f42fe2b7d299e56175a9b38af,", - "component.breadcrumb.separator": "S:dca946e971e9a70d55eb6098b7954caf95854525,", - "component.btn.primary.text": "S:7dcbb47acb652f1a677be915bd127c2d67ac806d,", - "component.btn.primary.background": "S:ec79f1c603a398db507be45921291306d32fcb70,", - "component.btn.primary.border": "S:5b0455acb6b783a7c7340d1c4b0240171e6fc94a,", - "component.btn.secondary.text": "S:c90b59572ff09ddf407cd1db7095283b53835a32,", - "component.btn.secondary.background": "S:8c7023a87b0e7b3b3f3bfef97a81425dd7359600,", - "component.btn.secondary.border": "S:f44c979e5b4e3cd9dcb1617fe717786c4b6a3503,", - "component.btn.outline.unselected.text": "S:0685f4cb24be093ddf75e01e92ecc454b62f33db,", - "component.btn.outline.unselected.icon": "S:1a517b32c8f74666155e90811d4b1227a0a0053c,", - "component.btn.outline.unselected.border": "S:64c265313fcae071b12c391a91f58af2f77ed06f,", - "component.btn.outline.selected.text": "S:f6c5f5d3d377addeb3aa5fd3b14949afecf56532,", - "component.btn.outline.selected.icon": "S:a40a2270d83a8ff6a445d046c26d602e271daaea,", - "component.btn.outline.selected.border": "S:0c605e3c8637e8541771116167d304bc1b503c5b,", - "component.btn.ghost.unselected.text": "S:c787f10cdfa780a3e62ffe5e7f587659c3abe098,", - "component.btn.ghost.unselected.icon": "S:64e1e6b3dc628de5c41dd81137842f35fe4e2d0e,", - "component.btn.ghost.selected.text": "S:36aa27e2f31c70703a417994f8fc3a7aa483eeaf,", - "component.btn.ghost.selected.icon": "S:3ac792d4d3c5b4135e2df66b57ff01d82fafb48f,", - "component.btn.success.text": "S:90fa64271435bd2db7575c86a7b758c448d599d7,", - "component.btn.success.background": "S:95a6eb3a649ec08825c95a24d03105601b1cf2d8,", - "component.btn.success.border": "S:d473b1c416522a299181315ee87f3805752fe2f6,", - "component.btn.success.state.hover": "S:d02e2ab7cedefb20a7467bc7eb9d8330d8715034,", - "component.btn.success.state.active": "S:cd51230747b0ce38e9cf998fad253ab1ccc6a501,", - "component.btn.danger.text": "S:e82f0e46b29e74114bdfb666719958047053a886,", - "component.btn.danger.background": "S:6f099cd417d25f5efae274b34aa2614133d9be2b,", - "component.btn.danger.border": "S:b3ee974d4dbbaa97f6071a0ae232bec9b748d9ce,", - "component.btn.danger.state.hover": "S:6007377fcc6d5c6229c5cb01ba330d800940e3cd,", - "component.btn.danger.state.active": "S:908d334fb73021eedfc51f97f9515820cd1ef52e,", - "component.btn.ai.text": "S:5d6873378f86c73980b8075c9412faddabad5350,", - "component.btn.ai.border": "S:d9422d7a29db92a08a272bc3cee2cfb787d35378,", - "component.card.background": "S:607768b26c2f755ab7e06d0024046c6c4eb5f1aa,", - "component.card.border": "S:85916a0ea5045381a37f281ec253a6f62c8d8d0c,", - "component.dialog.title": "S:dc7f6001247fa8a5259d91dd984ad1f9998ee264,", - "component.dialog.description": "S:f95b66e606b65cc167e9915884182c1e161067fb,", - "component.dialog.background": "S:67d1ab7f2df205268c15861718f971ecd369ed89,", - "component.dialog.backdrop": "S:741b194294e18bfaabc7c4b0843e9d4c0c360157,", - "component.dropdown.background": "S:9b0da8b2570e738372ccdba107624f811ad801ef,", - "component.dropdown.border": "S:e29c6d14ec7b2a04b1b2e071609ce9a40911ae97,", - "component.dropdown.item.text": "S:8d66f83cce4a028264f42a2bc0db405fcb66c32c,", - "component.dropdown.item.separator": "S:ca50344f82c8fa8116eb32e4543ae7729b9ec818,", - "component.input.text": "S:e7623800c2ad5070e386959ac3d121d7f0222f0b,", - "component.input.placeholder": "S:9505bd858e28a64bdc964574b77ff61ab589eabf,", - "component.input.icon": "S:d69a52774b198de4a5ee43546cfe8e6482d0411a,", - "component.input.background": "S:29b1057f661ef552dc12d2a4e6d31fec911b87de,", - "component.input.border": "S:d2125260b46daeb3b44da73323203892cf21df51,", - "component.label.text": "S:2d9563ed0a82301036adf4c81e79089b081e5694,", - "component.link.default": "S:00eeb0ac1873e6aeead94510942f15aca4b4505c,", - "component.link.hover": "S:ff04ef41b534811bde2b299f36b06c29845ea186,", - "component.link.visited": "S:78342ba3aa0dbd094edd5b2e60822a700d22cb7a,", - "component.nav.background": "S:1fb6dbd3752457d8d054cae599639150d3ad30a5,", - "component.nav.border": "S:6d29d463c4482f6dc3d5abe7c04f628498fd7f69,", - "component.nav.separator": "S:07bce0c03ca53104b30f770b1c776ffd694f0ad5,", - "component.nav.item.unselected.text": "S:4c5544e28be5c7c5477f58608745841b473471f1,", - "component.nav.item.unselected.icon": "S:310ad8a1fe64a91614384a3411f582e85fe60546,", - "component.nav.item.selected.text": "S:6516f044144901260c4a8d142216c3bd333b00c7,", - "component.nav.item.selected.icon": "S:c16104fa914a2ac0f7c1c77ccf4cbce509132f4d,", - "component.pipeline.arrow.border": "S:3219828cee0942c462515d61768a43d4ff52c287,", - "component.pipeline.arrow.running.border": "S:a8c8914542a3ed2ca5d5e8317879f74e5f476868,", - "component.pipeline.card.background": "S:e2c672f4c10940ae847c04e5c693ba2bdc91120a,", - "component.pipeline.card.border": "S:b4d496628c84e24e4f77c365e219313804cae6e0,", - "component.pipeline.card.running.border": "S:2d9b5d178d217ac1bf0f5e9728d7fe6f00dd4ad5,", - "component.pipeline.card.error.border": "S:f662d6a23982ad8f2e15649dcda9face09b0c2c1,", - "component.pipeline.card.completed.border": "S:57017b41d4ad8911712a0980b50800970fa0865f,", - "component.scrollbar.thumb": "S:5773d0889a947b729a61142ab8cab15b42d205c3,", - "component.selection.unselected.text": "S:b941ec622697dcc434c96cd000367bac15e1461d,", - "component.selection.unselected.background": "S:ce3f699554409b3a34487aa35c96a825a28769d0,", - "component.selection.unselected.border": "S:e6c02982e347b7dfb240027796d05e42097aafd9,", - "component.selection.selected.text": "S:1d849c4dcdadb27ec951be56c3902eb627280b92,", - "component.selection.selected.background": "S:5490f0235a4e37f034b048093d33cffb8728de0d,", - "component.selection.selected.border": "S:7785025866f89355adf7cf125759a0a926930a9b,", - "component.separator.background": "S:ff5d6bb0019b68515d47abf5280852ee079242c1,", - "component.skeleton.background": "S:c073785c767f161ba380b465f747f8bc49e090f1,", - "component.slider.track.base": "S:b0fc4bddbb4a8ee0249ca46d16e26b8b53266807,", - "component.slider.track.progress": "S:a405744771229c2ed4190182cc8479fcd1e59827,", - "component.slider.track-segments.base": "S:92a5281023551910dcdbc275c92c0e4f0498c1cd,", - "component.slider.track-segments.progress": "S:c92ae848bd8dffdd9649da3da692153e8f4c5699,", - "component.slider.handle.background": "S:e0c017aad3fc18a1fb329a3795bccc82454af54e,", - "component.slider.handle.border": "S:5660f7d4f97dc2847ed180257362e29ffa4291e4,", - "component.status-indicator.success": "S:31dd1da955eb5f6958f61935dca97953e7226491,", - "component.status-indicator.danger": "S:439f47e456016248f9388466cf86bb8ed005f106,", - "component.status-indicator.warning": "S:a31d7ec11946cc25750b76735054bad6b7bd0798,", - "component.status-indicator.running": "S:1f935e422a4a7bc52798f6c6150a4d7d426aae85,", - "component.status-indicator.merged": "S:d8fef29bf817258caaf0c810439c4695cd0d6367,", - "component.status-indicator.pending": "S:a6fb9f78ee67b1f8a4cdd4579b044cb9f1d09ef3,", - "component.switch.unselected.thumb": "S:9f2bc931f7490d22d4956897147d4283bcc0c425,", - "component.switch.unselected.background": "S:7bd8f98b87438c8e682180b19f8a7d6f5af4014d,", - "component.switch.selected.thumb": "S:b0686763f34513ef62b1dd66f170a9d490338b8f,", - "component.switch.selected.background": "S:23b653d5b83a3ef8bef2d2b9f24fbc79b93d8a0c,", - "component.table.header.text": "S:52dff74841d3d79d22564f4c7f4f6f838bf9f281,", - "component.table.header.background": "S:ef00f7e36a8de9ea45b912a8048a80690493cd1a,", - "component.table.row.alternate-background": "S:0742d0361156628c07beeeb268d135004fb9c0f7,", - "component.table.row.border": "S:e8a094c271d9b5c3e39b70235bfdcf2b958ab892,", - "component.table.cell.text": "S:9f818bfd7386773aad9d54ad817bedc6756d7189,", - "component.tabs.background": "S:63ec6f1e67fc58ea553e85b2c1187567c0ff8cb8,", - "component.tabs.border": "S:de989b7003c0be28749d7fc5f5e5d2b2f561c363,", - "component.tabs.item.unselected.text": "S:dea88df8dd0f8a6eb7f879f5e0c43929c72a5646,", - "component.tabs.item.unselected.background": "S:fd50ae82aa272ceb6e1238f37a98c0745471358a,", - "component.tabs.item.unselected.border": "S:3cb4c651b97f44ea2114ebef6a8094b0d85d1c5c,", - "component.tabs.item.selected.text": "S:c178b127ad90fd29fce712f0ac3a7dbc1d59b351,", - "component.tabs.item.selected.background": "S:b0e2393c40efaf32eb0d4598a835c5c7ac8fce33,", - "component.tabs.item.selected.border": "S:54e2f9b8044d6e2fe64fedc019cf1f8c97c358ee,", - "component.tag.blue.text": "S:7106cb2957b6f18e2748dcd5295827511dc12ffd,", - "component.tag.blue.background": "S:43596e96899a42d4f1b9fe0534980c6e144e01e6,", - "component.tag.blue.background-subtle": "S:25ddea04f01807776f308c48d8db4cb80ead1799,", - "component.tag.brown.text": "S:a98e0f85423e05163d4c141ad1cf70da61d45326,", - "component.tag.brown.background": "S:8542aa58fa047e516ad5998830ce12996d4cf5de,", - "component.tag.brown.background-subtle": "S:7546467920c8c721ea28c11e1505b0eb5bdfd138,", - "component.tag.cyan.text": "S:13c674ca8d25604a0f9109b0c529e1f6399d48bf,", - "component.tag.cyan.background": "S:85012a2c7a97b25a7016f42ddcab281b87b9f770,", - "component.tag.cyan.background-subtle": "S:e0eed59a1539386e5084700b78a65508f876a6c9,", - "component.tag.green.text": "S:5b0d0e40994ff3d26d3266c2b8aa5a500a658454,", - "component.tag.green.background": "S:4b0d273361a995a8e54d93ea1fe6533fe4922b27,", - "component.tag.green.background-subtle": "S:aaad1dea2c8744ffc4fee1d395cd28d6cfdf917d,", - "component.tag.indigo.text": "S:f58c376fcfd8c5fbcaa755e762c15f8c71163fae,", - "component.tag.indigo.background": "S:93b9a875cd79fa300a972710ba2a0d4cf6b6a9a4,", - "component.tag.indigo.background-subtle": "S:12d95c5bb11f21cdb734c52246aaa8675e1f2e41,", - "component.tag.lime.text": "S:42db0d1029f1f83d05d9d4c25a2acb8ccc69b3b1,", - "component.tag.lime.background": "S:a3866690646495a9f600f258f43fceaf1e26d5d6,", - "component.tag.lime.background-subtle": "S:d9951b09f41c21e44153724b17729430875c71c6,", - "component.tag.mint.text": "S:bd750d8c1b3026048918ebc5a0b49496d982a7a3,", - "component.tag.mint.background": "S:7501851132d66f50f93d7824f33a11adc15c8f75,", - "component.tag.mint.background-subtle": "S:ee085b6bf2862a184fc33fa381aaf8f5c2b1c99d,", - "component.tag.orange.text": "S:31b51bcd381db77bea1a835811ec3bf65fa4e027,", - "component.tag.orange.background": "S:91ad8ec4a2cf0e00ae847f94dc7256bbb13b1954,", - "component.tag.orange.background-subtle": "S:55326688c6f5b97154067e6e5b9528b81782d402,", - "component.tag.pink.text": "S:49023f2c1a027fedee5177b88193982e537aa911,", - "component.tag.pink.background": "S:0445b0b525644dce13e50ff734333d8f7d4cf62e,", - "component.tag.pink.background-subtle": "S:8b7d5ee514ac1333ab63782d2a46d52b7533df6f,", - "component.tag.purple.text": "S:44643a40f76e48733baae9860b3411841a26151f,", - "component.tag.purple.background": "S:c4190baab4dd5fa222c31b47953c152cb51afcd3,", - "component.tag.purple.background-subtle": "S:5e2a106408a7102071ed5a198f7a43b966a8947a,", - "component.tag.red.text": "S:a6c74e63266e97aedd7bec5d1fd3faf87c431fd0,", - "component.tag.red.background": "S:fd9c44c38c9e3b721a1488f3f0c4bf0104806fc4,", - "component.tag.red.background-subtle": "S:674d4d570e140a651d5ae70f77267add2b8ba5a3,", - "component.tag.violet.text": "S:f1cea17289f92216a8aa0e0ca7e217923168a287,", - "component.tag.violet.background": "S:4ea0ffc1bc379cac45435329ff85e4ae8bdf4fbd,", - "component.tag.violet.background-subtle": "S:3573442416355641132a0dde9ead452620e43f34,", - "component.tag.yellow.text": "S:57b7845a28a11a6223792663e698554495080ae1,", - "component.tag.yellow.background": "S:3bd6eb90224bfa3561bea018494a793385b64a2f,", - "component.tag.yellow.background-subtle": "S:e7ce55473297a6e7a5cbaf4c6a9abd1f78f1fac2,", - "component.toast.default.title": "S:c12e36cadaac79b25818f8e4003345dc1ce75d46,", - "component.toast.default.description": "S:0e5b4bb2782c32b52155917dc851e83896e9a9f0,", - "component.toast.default.background": "S:e9c8a25e4c990e1b016d1bc5ad022495b08e7bc0,", - "component.toast.default.border": "S:707f3c77c086efe29a439b6993d51e88cae74f64,", - "component.toast.danger.title": "S:4284aad2723cb4ccd5d9c0aa964fc030b7f6b3c8,", - "component.toast.danger.description": "S:8ed858ae507fc1f501e7b2257f3ed0645d039878,", - "component.toast.danger.background": "S:eefc6159fa4042d525a9c62a9e8e77dcf8332ea2,", - "component.toast.danger.border": "S:693913e4291f715154bd497d2ce1adb1f845444b,", - "component.tooltip.text": "S:e5f8fb1d9c83065cbba0cbd4134dcc218c6f4ca7,", - "component.tooltip.background": "S:1655af89e865f427378ec05e512f829113cd6f7b,", - "shadow-color.0": "S:adcf7390b552af2418e3d9519ae8d21a38fbcce8,", - "shadow-color.1": "S:25c58032dad187f605736144e605c941f530b26a,", - "shadow-color.2": "S:0e71f8bc413ef0817c33518aa6888f2730a6540c,", - "shadow-color.3": "S:5ceac75b859f62585f553493b591e08a9dc7028f,", - "shadow-color.4": "S:f74451a22bcbb3f8acaf6d185c9a4e07b587ce7f,", - "shadow-color.5": "S:bc2bf9d8a7891dfe1584b89f8532b4228d5f1bd4,", - "shadow-color.6": "S:19d5fab0640eaa444b75757aadfaaa9b050d5cbc,", - "shadow-color.inner": "S:f91508fb6c54c4f8f4bcb3e596b9c0e6532b129f,", - "gradient.ai.gradient-stop-1": "S:54235f89b8aeb88a040beb21de72957150dc42ee,", - "gradient.ai.gradient-stop-2": "S:bb4857db707f57fd8da7ecc680f8424b2d35652d,", - "gradient.ai.gradient-stop-3": "S:bbba28b3e777ec5ba5c38a1133373e097637d252,", - "gradient.ai.gradient-stop-4": "S:d5692c43eea6b18fec0454fe5d9e21052b215982,", - "gradient.skeleton.gradient-stop-1": "S:fb0d9edb3002320ef7f1855007c2e0194b6a575c,", - "gradient.skeleton.gradient-stop-2": "S:edbc9bb1b9cf045bc9440a2019684eae2b4fbde3,", - "gradient.skeleton.gradient-stop-3": "S:bd871ba5e93ea904b793a54a95df136f617a8004,", - "gradient.pipeline.running.gradient-stop-1": "S:7cc754808d358a410e3994632cb13896db2252fe,", - "gradient.pipeline.running.gradient-stop-2": "S:c6bc9105136aa12ea99a12f0eebc3bd7f483b3ac,", - "gradient.pipeline.running.gradient-stop-3": "S:eea36c311c09256eadba428fdff1ede95c995d0e,", - "gradient.pipeline.arrows.gradient-stop-1": "S:f86391ee96e501af289438519682b450ac7be631,", - "gradient.pipeline.arrows.gradient-stop-2": "S:9727f80e8a278f75f415e3e9372d888a9340bebd,", - "gradient.pipeline.arrows.gradient-stop-3": "S:c9b22e2ed0d0ede68e20224952ec402ff8c0b7f3,", - "gradient.pipeline.card.background.gradient-from": "S:4c52aeeaff06bffe26bea086dc359f822835b4de,", - "gradient.pipeline.card.background.gradient-to": "S:40c54ab4f7bd98a2a2147a9fcac2b3ad2fe927f9,", - "gradient.pipeline.card.border.gradient-from": "S:6ae22fe10d5edc380fa82dfbd52c73c7d8bc64c9,", - "gradient.pipeline.card.border.gradient-to": "S:6453c172da494efabd070f23bc3695c04ac4b8ba,", - "gradient.pipeline.widget.number.gradient-from": "S:8450d941f816fe3e99b6719887c1baa4200e8175,", - "gradient.pipeline.widget.number.gradient-to": "S:76f9868dc0dd15e380825b032a7dc10f5161d2ff,", - "gradient.pipeline.widget.blob.big.gradient-from": "S:809092fd2d0adc85b8ad68099c44813f827ee2b4,", - "gradient.pipeline.widget.blob.big.gradient-to": "S:de57c556a007855760766adf5625d210ef58c26b,", - "gradient.pipeline.widget.blob.small.gradient-from": "S:4d538f0471e6f6f1bc0a66e56e2212d5c5efb730,", - "gradient.pipeline.widget.blob.small.gradient-to": "S:a0d5a6f95abeca4fc2b43f3d8df15316041b4403,", - "component.dropdown.item.delete.text": "S:845446d58ca0664a116d33b80eff8f1523e802af,", - "component.dropdown.item.delete.state.hover": "S:cf5c31fe20a31491fe3ff3583a1f4c9a501cde80," - }, - "$figmaVariableReferences": { - "background.1": "633e5f77aa1bd1bd133852d8372b9c9f1231a9e4", - "background.2": "14e8d4b56cc273b508af8a2c58cb00e99e08d1d3", - "background.3": "33554ff11e1eab35e50aa3570f51d53f16f46d6a", - "text.1": "38382b9984a98f9d26692a7f2882dfb5c5d51825", - "text.2": "115f62efd02491e85a63dfd601b03725d3711f23", - "text.3": "1c7327f01cf759b17fd0523cb540afa8700c1dc7", - "text.accent": "0b3cd5357659e6542cca163ccfd96c0cac059203", - "text.success": "ee56057b81e6d0872a84ca6b29affc8911fe333e", - "text.danger": "c7e38d7c7afc899f4d40392dbd6bc5ed6580264d", - "text.warning": "b03334e4c9db4b76269e4be886df6c1abf74d0ca", - "border.1": "5ad2231a611605964ba70f80e7aabb48f04bc704", - "border.2": "9084bef359e38136e0dddac25a464896456a9b1a", - "border.3": "5ff5d5233f7cb0233ce7634bc480026668c818f6", - "border.focus": "8db219e896acc4d828aaaf4add646d96540a84ea", - "border.success": "b13758973865eab0b4d79028a48e457eae8bec47", - "border.danger": "33d53c1486021bb3c9edce4123b484a2aabc8de0", - "border.warning": "027e57e08a1edcaaa7fbe033902bb3f65497abb4", - "state.hover": "78426caca2a07ee56132762a720ae07e2810f03b", - "state.selected": "ef914056c9c9dbaef00fa8795702a3cb933ee761", - "state.disabled.text": "967ab1b863941c100f58cc55e611ee2709051f01", - "state.disabled.background": "7a192b5ddcc570f0c8e3a5dbfd54d780e2832bbd", - "state.disabled.border": "067fd26e80ad39a28f738a3b76d21d354092d551", - "component.accordion.title": "5e49d6ddf7f2b21724b474d4a5545256143dce54", - "component.accordion.description": "bc47401a69d07fa71f0371765ed940745fc7a5b9", - "component.accordion.chevron": "5dd530f96134323125031668d4ea98a36ea0de86", - "component.accordion.border": "0b3fcc0e02a2a86625b2b4a9cfeebfad9486bc3a", - "component.alert.default.title": "d8e59ed205399e9727b0dcecdccad3d8daaaa622", - "component.alert.default.description": "f9ec7fec91747435740f000fb642f9009e8fc2db", - "component.alert.default.background": "7fbbdfcc33a3051394f89675798db2159741a5fc", - "component.alert.default.border": "549692bf2f70f6b40c7d55259f8890189aa6cc98", - "component.alert.danger.title": "c8da1cdbba8e0f86edda5fd3869f6186d53881ca", - "component.alert.danger.description": "366849405bd53c78f0b73d72585034a52f05d9a7", - "component.alert.danger.background": "5756a9bdba027993a9879b32ed129e3034028cdf", - "component.alert.danger.border": "a1a3be9eefab6edf2e996a46537872680dc45a09", - "component.avatar.text": "23018f4c7f22c4afb3b7e49f585a1fbb591209de", - "component.avatar.background": "57703fddbd26d363509fdba3aea037bd2f515ee0", - "component.avatar.border": "d651f4cb9082aa4d6e6af2c5abab700d683a5c85", - "component.badge.default.text": "ab90828e3b8c6adce5dc10bf85107b001b958e95", - "component.badge.default.background": "706b070b298e2d2a97665baf7af05187eefeb4fe", - "component.badge.default.border": "a935a2968ca4ecfb8cc58a18f31ae8fe65eb516b", - "component.badge.neutral.text": "82d39f1786c4371303ae21e4c02db79989c54e36", - "component.badge.neutral.background": "f5480b1a2b648fdb0561acda7515c38271cfb04b", - "component.badge.neutral.border": "00f05792ddf6e53bff79346df6a34144426d50e0", - "component.badge.success.text": "71014a6138e8747257a21144f8114b906cfe0f0a", - "component.badge.success.border": "190589c6021debb7bb676f05ac7f063c237fd4aa", - "component.badge.success.background": "177eb9f406784ddb958232cd643ebbb3490a53d4", - "component.badge.danger.text": "6c0c04f17c2bc0ee085d09bf0f205dcbc66c1e17", - "component.badge.danger.border": "6bb014acbbd68a796ed0c4d8c4f73e8e9e619923", - "component.badge.danger.background": "4162b10332d17800585d97ed45e45d69c2006808", - "component.badge.warning.text": "8581620d95e5b92a8c85341ebf63f21fcf7133d0", - "component.badge.warning.border": "71cb519182108ac72ffef823935546e4bff62bbc", - "component.badge.warning.background": "74c13457a85684a054426bd833859fe93eaec978", - "component.badge.running.text": "0b0c1be217e557a5b14c1cb25e988e4ac6d40583", - "component.badge.running.border": "27d3c48d3c316bc4f980282759b5e82f8aaaf49d", - "component.badge.running.background": "a85fddc26baf586ac7ba79e381e5f8fefca87c65", - "component.badge.merged.text": "a83d66ef53e8a094a62f2b32a4d17e58d552b1ef", - "component.badge.merged.border": "755392bca643af0a3fe5492069881a870aa11dc3", - "component.badge.merged.background": "4f4c81b1fe43bfe0d721a22d0aeb93079776cf6d", - "component.badge.ai.text": "bb4daee92817073da0366090742d0a17babb5728", - "component.badge.ai.background": "c5764a2304bf0e8a153c9ce0da20827696a76b41", - "component.breadcrumb.item-inactive": "2f009ca6cafb50c994205c9df02ee2d2503f7d23", - "component.breadcrumb.item-current": "7b502cc2e72f66bb501fdc5f480d0133d1b3841a", - "component.breadcrumb.separator": "1cd28c3ff97ab2f529a19c632d89dd44af0aad80", - "component.btn.primary.text": "9d32f032da93c9aab8b3bc6087c26aa12f507ad7", - "component.btn.primary.background": "410d584a3469233e067d0592a366fdebbe1049bc", - "component.btn.primary.border": "1491ac71f9681307c2d6528e443504e079061988", - "component.btn.secondary.text": "12c93d1b08ae50645a3b8f59256fcec00a4f84ca", - "component.btn.secondary.background": "86434310c95f5c055783011cc0e7c7918f67a35c", - "component.btn.secondary.border": "66bda91f87154efd3cefdc7a634ecb8afa8cd285", - "component.btn.outline.unselected.text": "9cf2c495178d6fdfd8f1360376242acbd4dc5e75", - "component.btn.outline.unselected.icon": "af1510c6050f671219d2089e0e59d5febb4422d6", - "component.btn.outline.unselected.border": "2b3013d632e566301e9f5f1a5cbb6aab4e7ec53f", - "component.btn.outline.selected.text": "13b50089245dec1899db2012412efcf649e2c0b4", - "component.btn.outline.selected.icon": "2bdf2c92b22e814109f4e05ec4d41d92f934a15d", - "component.btn.outline.selected.border": "ef10f4599233f62203def151b386013ddaa63afb", - "component.btn.ghost.unselected.text": "43fa10dd413cddb9a2e2142ead9ca3b4a91b49a6", - "component.btn.ghost.unselected.icon": "5ce332f51238b374104ec53067d685c26882f38e", - "component.btn.ghost.selected.text": "74cbf3b86016e05517f8c7bc64652281c940363e", - "component.btn.ghost.selected.icon": "1d8c6206a136d9c176ffba600a1e94618c4b96f8", - "component.btn.success.text": "52a336440e013bbc849ad67a43d0e136cf4f0b51", - "component.btn.success.background": "608ca6930129b4e5ff36d7f38508ae2537b66629", - "component.btn.success.border": "1f74d9985a10fe20e0acc4647cf4949005e9d4f1", - "component.btn.success.state.hover": "d05bde38a6539a11e3ccd87345af113ccd6bd113", - "component.btn.success.state.active": "f6e48e68dba6c32de27fadcaca3d1959f081d2e5", - "component.btn.danger.text": "49c02562362b8f775cfc2c4c614ecd646dcc2716", - "component.btn.danger.background": "0b015d0a4f456781969d7ffaf135c7c2a8858440", - "component.btn.danger.border": "9f99ee56f1ae2b7eb2f98300b83d4f53b15fd763", - "component.btn.danger.state.hover": "e7756e1d022d893bfa5fdd619f181d26fb7b117b", - "component.btn.danger.state.active": "23c7c85ff6104e098a208b6f4b86c1d0eef0f543", - "component.btn.ai.text": "380368600319fa12b73538ff52acd9d0e977e367", - "component.btn.ai.background": "8c9a1d07e05837f50588b642a4b51462f883887d", - "component.card.background": "256878745d17a46b7159919d8e30a3e960f59575", - "component.card.border": "3688ffcc56c4fb44dc0e221b8e09a958fd9e509d", - "component.dialog.title": "e6e0ff2bf1f3802eb21492e8b833c5f5e679cd82", - "component.dialog.description": "301509fcf2faac8497b2136f7879b9b0b3c64433", - "component.dialog.background": "ff2918d712798a4b487b6f6e5befe7b3eef59883", - "component.dialog.border": "4a6cb3732ad8b36bb9de0d15cbed575c87996088", - "component.dialog.backdrop": "893e60ed671f891241a3084707057185398446ed", - "component.dropdown.background": "09b2dca27ba9efabfe838d713a14ca6e6ac46685", - "component.dropdown.border": "c8cdfff63f4e142d651070ff1056b69a638aaab7", - "component.dropdown.item.delete.text": "864396a8c9b5df0fd948ded7d520ded936d74a8b", - "component.dropdown.item.delete.state.hover": "308dc9064be8e754f8385b0e8ff5489563d7c984", - "component.diff.grey": "43bf4f466a6e231c9951a639313740579c29d824", - "component.diff.add-content": "eb4eccf789a2bda6f3d3875c3310ef0579fd3555", - "component.diff.add-lineNumber": "61583aa6e36aaddd0be173a4a082a450e2522d3a", - "component.diff.add-content-highlight": "ad544fc527ca8b4c297993fe0722b8a7a96ef903", - "component.diff.add-widget": "c1def698ab707194d8f1558e16b05c55d50920d9", - "component.diff.add-widget-color": "a27c504a1f1151974669cf06054c1d0f704ecc38", - "component.diff.del-content": "465e6eb3613967f489cfee4b04f0b283b9e88f91", - "component.diff.del-lineNumber": "4cbe83072b6781d6e3edff645ccb2fb7426c5628", - "component.diff.del-content-highlight": "3e635e401a1a37a259211d093bef70e3a0c507ea", - "component.diff.plain-content": "984456faee2f6a5c202cfd76078ef5b6cd3a05f1", - "component.diff.plain-lineNumber": "6a5550287e7c58afa9d2375c5bfdca4d6c214cf1", - "component.diff.plain-lineNumber-color": "7c1186d20725b53cbefe87f56c5bc6db4e77d898", - "component.diff.empty-content": "712d93a0c1bc9503abda77ae50d624bd328c0057", - "component.diff.hunk-content": "79ad0dfc599f9bc246a6618c85bc1dc59744537f", - "component.diff.hunk-lineNumber": "bccfad80b84e35edf4b47af2ca30057eba2b2ebf", - "component.diff.hunk-content-color": "68c5d6a95d475f7275062e3eb58dba464df3d059", - "component.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", - "component.input.text": "df946237ac2ea0d177f3f2818a673fdf876944c7", - "component.input.placeholder": "85d7632aba08fd476083e508cc2660b17c30981a", - "component.input.icon": "75ca1f38c16fbd5e2697a36c74b0b1dd01f3f5c0", - "component.input.background": "585327333fbbf97bb8db21fbc613025719ca8a87", - "component.input.border": "911dac823dac21c9ccf4e35e10b2eb82a9c6f0ef", - "component.label.text": "80403cd630bba01a064550d9783313227b1d010f", - "component.link.default": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", - "component.link.visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", - "component.nav-tabs.unselected.text": "c085805657bb81574da85d3cb29f89ca08980daa", - "component.nav-tabs.selected.text": "16aa825c8038347237cbe91f7eeece4d2a8d1a2b", - "component.nav-tabs.selected.border": "3427b967112facd59f09fa310c863d7193ea4ffe", - "component.nav-tabs.border": "791d71ca187934e4b98ddff04bc9447a10358699", - "component.nav-tabs.background": "b92549e37390005f2bd1cfce06f9dfb8f67e39e0", - "component.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", - "component.pipeline.card.background": "f207dcff97f000326c4f28293fdbd2830860ce54", - "component.pipeline.card.border": "aa9d9528b1e8e25f9e6dae387b76d9beb2de35a8", - "component.pipeline.card.running.border": "179c0e4d47becc896eb1fbb7f9e8461779b3f680", - "component.pipeline.card.error.border": "1c0b41b41e25250cfb65bdb539bd573be66b0d00", - "component.pipeline.card.completed.border": "14251a54f431aae617af6b9577454a0e212ad76f", - "component.pipeline.card-canvas.1.background": "01bd392d5ddafe85e5575296d08254e52054ba8d", - "component.pipeline.card-canvas.1.border": "b9510abf89f82fb7b779bb730caa1bf393c83bd4", - "component.pipeline.card-canvas.2.background": "87b6b3e65b995fc4180dfb7bf613efb0098d1fff", - "component.pipeline.card-canvas.2.border": "1f9fa1e95134d87995a21738a3877f1c15158e5e", - "component.pipeline.background.dotes": "2784742abff27552789cdd4f2b51cab1331abb4a", - "component.sidebar.background": "8b6619fafae38e8ad94fffd488f2cf53d3c31d76", - "component.sidebar.border": "2263230eae16609a3d95ba5863aa3cc343010131", - "component.sidebar.separator": "a0c913dd38e81e3b2c20ee17642433da6da5f147", - "component.sidebar.hover": "4925b4511178bd2853a6b7b329683d036508aec1", - "component.sidebar.selected": "31f335ecde0aedb12407221718069f5b13574d41", - "component.sidebar.item.unselected.text": "9609e0ad8d79127a3784876f0204d02964f09e43", - "component.sidebar.item.unselected.icon": "5afba128858cf7494fb8a326a435860faf00b0ee", - "component.sidebar.item.selected.text": "5f1daf88cebaea07bd4c2a57c862638340827496", - "component.sidebar.item.selected.icon": "18325fda8139122c4a7cdf6debe2cd1f25d120b7", - "component.sidebar.logo.text": "a3ffa09fdf368badab24aecdbd26709ed7b3c2b2", - "component.sidebar.logo.icon": "c572d382a2018718d719f6a427d31fc9a42f57bd", - "component.sidebar.search.background": "33822e390046e5ec8f71a07fc041514a28778e74", - "component.sidebar.search.border": "f2044f7e8cf503f8809a48a14a88c5ef6466176f", - "component.sidebar.search.placeholder": "665cc00a32edd27b62371ee820d3c3250e629e78", - "component.sidebar.search.btn.background": "70c80e61b9ec397214c809c51de4fdf8177185da", - "component.sidebar.search.btn.border": "1c434c7d16cd4ba880e2d57520c90bc37f6b3879", - "component.sidebar.search.btn.text": "589c7d0162d67165a8752ea54a2c63bb63ee3ad7", - "component.sidebar.footer.username": "68298a8f471bb04f2f0305d9433a2b59613abd8d", - "component.sidebar.footer.data": "6a681d2abb90c2b62a39e20a1d29419c5086f01a", - "component.scrollbar.thumb": "9818c03d003381a966d08d3c6da75af8468bb8ef", - "component.selection.unselected.item": "7a7cad2aa2d6b2803a52eb26c78ea177b84ce241", - "component.selection.unselected.background": "a63ba949d12afc99020e77f95d0538bddba457b3", - "component.selection.unselected.border": "6ef997ebe03bb209ca568a648eb0cc8be69746a6", - "component.selection.selected.item": "f1f43c8acf2d4da10ee2e0d164d4dbe955816018", - "component.selection.selected.background": "1d1bbb9958f047744b66861fd8bd75dc2726dc25", - "component.selection.selected.border": "44b31378ed175b87b50ebad88cfd4a73a66ab9d5", - "component.separator.background": "9f4c82c269bc5aff0fa55d52a0ed59f914057be0", - "component.slider.track.base": "34dc3b5be6733e38f6c28d24d4f3699b2d7ea6f3", - "component.slider.track.progress": "38d8cac26c1cfb91293198eee25299e4aef9c1d8", - "component.slider.track-segments.base": "cb752791a51ff48c6d481426a1affb15048a152a", - "component.slider.track-segments.progress": "a7943fda0e4646e7018046354a9be54cf7d03075", - "component.slider.handle.background": "5c423cc3b672079f1e7dc0d1c8170dade368711a", - "component.slider.handle.border": "94347a2ed2900445946d18c653fb179b8602c533", - "component.status-indicator.completed": "c4c3bce2d28c84c25db4f444f9144b94523737b7", - "component.status-indicator.cancelled": "5aa15732d9ebc41f14b111e252819e2e36617124", - "component.status-indicator.warning": "4dc6e5ea4c736869aee4ebd0ee006f2d73861423", - "component.status-indicator.running": "07ce029f27cf34bf8d6fe3b9a6a600be01c8947e", - "component.status-indicator.merged": "d9eb24404452e6cc2617094fe8f29c69a760ea55", - "component.status-indicator.action-required": "2f1b8543c44b5d93cebddd80b5a9ee2d60fdb146", - "component.status-indicator.waiting": "62f68d300850ce20cf0be8c07d82a41bf1a56ecd", - "component.switch.unselected.thumb": "94d5f0b3a97924583ff697d56db74727b133ba95", - "component.switch.unselected.background": "a8ae87c7bb7ba7f4bfa71f2fdd5f404d19c3a1be", - "component.switch.selected.thumb": "cf6964ec11d69899d5dd39e82d322ea544367e90", - "component.switch.selected.background": "bba05ff96eae08a4adc31a6406e417022d9e5dad", - "component.table.header.text": "65cfc045aa01e3d3eeae4a227cac9be150839db8", - "component.table.header.background": "137c4f2e14bb8cadaf6f900a443700fe928a1fcd", - "component.table.row.alternate-background": "2863f92db433f88f24f62dda4cc9fd50c48130be", - "component.table.row.border": "445d945c4fe4426c3b73cf6f8fe0a572e4525798", - "component.table.cell.text": "73a28f25ba54aff507877ecbfd9942a6ea9f3cea", - "component.tabs.background": "8689ee01219675fb951a2517c2397fba52487971", - "component.tabs.border": "e5bc8cfac224234021c11b381f505da5fcac84ed", - "component.tabs.item.unselected.text": "4af8a5b79c55621f1ed11a7b6fc605657934dc1e", - "component.tabs.item.unselected.background": "fa041cdeb34ba5da6f1bd4cd6d8bb4b8273e0e70", - "component.tabs.item.unselected.border": "79b1a6fe839c012efec923edf40b3bfa2bcdab19", - "component.tabs.item.selected.text": "d048f7001829ff9949b2712b8ca746c8f3f49767", - "component.tabs.item.selected.background": "33269e9854800d565f728ba2a85c5cd3e549b5e8", - "component.tabs.item.selected.border": "11b7e5aeb83fd2f5d968021c750af2ceb5ba5841", - "component.tag.blue.text": "b35e0aebd9d1ebf0fd5d24bbd5ad184db9e11b86", - "component.tag.blue.background": "072fc2901d8ad0199c07bc339d46db086c7b0379", - "component.tag.blue.background-subtle": "67307c003cb91d76e00ef0f3777318e25efac628", - "component.tag.blue.border": "680fb2a6a11251e2619789595cd28c7861aaa530", - "component.tag.brown.text": "b48491f46d15503df99e2d8d9394aa552d09461b", - "component.tag.brown.background": "90b0ee0df4ebe7f06bfd07a7acbe812a45d621a4", - "component.tag.brown.background-subtle": "134ffd2a91ef027e197db6a5331d2726bc080ad6", - "component.tag.brown.border": "675776ff7a30540c297579d72b7f00779d778c14", - "component.tag.cyan.text": "6bf9361c5931ba40663d2c412f28f15382498517", - "component.tag.cyan.background": "83107c8cff314c553ed2cea5c9af1ff3356485e5", - "component.tag.cyan.background-subtle": "7f2724127eebb6e01713828af3736cd2e3734436", - "component.tag.cyan.border": "3286065f931626298e8f3dab2328297e83a79771", - "component.tag.green.text": "699a30f1d5f76ed4e631faa3da63be65e88af039", - "component.tag.green.background": "8b06c35974700260dff1a712c0a3976d4ddb0df5", - "component.tag.green.background-subtle": "c4f47c34772d8367bc3b00645420511f37aaecad", - "component.tag.green.border": "db85545b7d00ef9e199bf863dcdcc2be520f520c", - "component.tag.indigo.text": "d641d4626278e4d17ff4d98202112da9580a6b89", - "component.tag.indigo.background": "bb4af9a068f716c2f0b4f77c228b88009ac049c9", - "component.tag.indigo.background-subtle": "877e3b4ee6040ed581a8349c8fdb5e49ed36dfe0", - "component.tag.indigo.border": "885fdb80c956855c30666c660d5839dc357d1f5f", - "component.tag.lime.text": "763399447b243f761b7cce55f7dcf2fbb1797ee3", - "component.tag.lime.background": "d51cede4c823e16ac204bcaddb65d49c325c3cbe", - "component.tag.lime.background-subtle": "556934df078200ab014c762eeaa04deecd05422e", - "component.tag.lime.border": "fbb53e37ef7cb87cfae5298e69a5ffe4f99a23a7", - "component.tag.mint.text": "d3d406bffbadb1b894e4bb6aef7b1f5a1945094c", - "component.tag.mint.background": "04568a7d0bff5fbc11600bf840916f5451a0fe62", - "component.tag.mint.background-subtle": "1d39716bceda8510beb02e19847c391523e3690a", - "component.tag.mint.border": "c703cecfc8bd82c593dc9d81ce18748edd6ecf4d", - "component.tag.orange.text": "ba407492439b283fedf30a8ab8b16774c0931a9f", - "component.tag.orange.background": "ef766412f340a4aa62c8888a6fdfb2890f3ea207", - "component.tag.orange.background-subtle": "05e823662de8b1f99a062cea3c0f24df69b29362", - "component.tag.orange.border": "2f3023f2311c12acb44cdd28beb888f64d6d2183", - "component.tag.pink.text": "83b73e0e328485233004d42baa8a0948ff2198b0", - "component.tag.pink.background": "b23a211249a71f32bf15757316d0596fdb395962", - "component.tag.pink.background-subtle": "c144f19e07b839d68f20eb5c51ebd94e0f333a82", - "component.tag.pink.border": "b4874a81a08261362f3d8237833b80e68a851b76", - "component.tag.purple.text": "9869d8aad416ac3f9e530b0d62b05dda66906de4", - "component.tag.purple.background": "bc59008310427ba5883f71079b19b8cb4c6dd862", - "component.tag.purple.background-subtle": "a3598602d6e6b1d03f638f1a941801f147f4657a", - "component.tag.purple.border": "de1d577bd170613ab46460e9c50ca8de420152f6", - "component.tag.red.text": "aca8c1832317ac859b4263769855f423840a8569", - "component.tag.red.background": "9008e05416a00096c234511275b92be7204363b6", - "component.tag.red.background-subtle": "986bdd3f8d16488337ca9f46b71b04195d7578b0", - "component.tag.red.border": "f7f9067262546ee6eb77955e38aa0a451fc7f98a", - "component.tag.violet.text": "2ab996ff3465a0b97dee4d7c5606df3d46ab2a07", - "component.tag.violet.background": "4c9b9c2658479fc0e56894975a9b9b8d76df5b00", - "component.tag.violet.background-subtle": "fded9a84a20755592f57f081ebb594bfbaf8cfb3", - "component.tag.violet.border": "77de89ef1ab5168b7ff5e329bde8608047149a04", - "component.tag.yellow.text": "cadfcb4d0fe72fd5828cd764d54198026520e10c", - "component.tag.yellow.background": "a29464cd2a618a77586cb8760478a4d82b12b3ca", - "component.tag.yellow.background-subtle": "1b262be32c5779f024da5ad5696c805a83eb96c7", - "component.tag.yellow.border": "b595821fd5ef662361820415bb878e8ef4ab8939", - "component.tag.gray.text": "e7608c51a2421de226afebbcb909180c8a0cdb5a", - "component.tag.gray.background": "9bcc758ef67bbaac88637e99a702da5d7f7a3144", - "component.tag.gray.background-subtle": "76dfa99dd57cbaf2e7cbec9511cd1e1ddd92ee0e", - "component.tag.gray.border": "02e03f32969f9e6120bb6c7a3b781a5446f1bef1", - "component.toast.default.title": "f791d24eeab59c12cf4aad84f4677099bb4a01c1", - "component.toast.default.description": "6000da4ada3b9445750fb4b7b990726df120c271", - "component.toast.default.background": "5b9e9ea5b7de018a92d3deb902257e4e2bbb49f9", - "component.toast.default.border": "f74755bc7843dc9d7c788c54178b7ce3b83dea3f", - "component.toast.danger.title": "b5ad1c43fcee32eb251b980e884e77ea137c3369", - "component.toast.danger.description": "d281b5c13f2a4a293042f52b168e39f8bec398da", - "component.toast.danger.background": "8ba5c70e994ab44aeb72b3ed7f26ca9646d59cc0", - "component.toast.danger.border": "7f5252c13b96825084248b367f36377bb003ca96", - "component.tooltip.text": "b79a7ec441cdc7c6eee9313602f081d063327c1d", - "component.tooltip.background": "a35d0240a1c4de13350e6a4770dd1703a90a9227", - "component.tooltip.border": "d57b38546841813d61da59d66e98a8921f2f3ee7", - "shadow-color.0": "c0c282f63e107374a732d74c1742cf60d52e6e5c", - "shadow-color.1": "1ec33a9c84353664d23cd23d6c033d1c330c149a", - "shadow-color.2": "6200a000044d8dbee421ed4afb0c3ff42febb6ef", - "shadow-color.3": "77d99afb159d8e193a82f615dd84de3214e00703", - "shadow-color.4": "2b2e0307d252bdc6db53a23ce2cc2e9bb4f6b914", - "shadow-color.5": "5a6c707240bab54cb4403f47262abfe0756efc9a", - "shadow-color.6": "928283d00759150575a8f155da90180a582be438", - "shadow-color.inner": "6cb5a98fba0b13e952859b9f023259b5c06cfd1a", - "gradient.ai.gradient-stop-1": "8db516caa68afc5b8fdd6fc6e5a9bad7715c5f26", - "gradient.ai.gradient-stop-2": "33930f41665251a281973a37847f357480aedca3", - "gradient.ai.gradient-stop-3": "c9e14c3db8e622b10b1cd3e860115cd6f876ae49", - "gradient.ai.gradient-stop-4": "6e7d0850d7eb1e699f87b41f6ffd4cb8d73d72e8", - "gradient.skeleton.gradient-stop-1": "5427016b990b75f0d1ce60eef8cb9b96d75fbde2", - "gradient.skeleton.gradient-stop-2": "01442c311e6da751c30c3518fc32970306767274", - "gradient.skeleton.gradient-stop-3": "7fda4c834a3daf0c56bb59777c525670ae2dee3e", - "gradient.pipeline.running.gradient-stop-1": "0c187d1ebb015ec66bac356009795316f84807ae", - "gradient.pipeline.running.gradient-stop-2": "d1251f86c91bd0f29d8ac8cfa01056bc307156b4", - "gradient.pipeline.running.gradient-stop-3": "b09bdab234cdf7c204cb153ec94ea0a9b2bb4976", - "gradient.pipeline.arrows.gradient-stop-1": "0465e74baaf10a12f23b9eaa40fc1ae08485a0d5", - "gradient.pipeline.arrows.gradient-stop-2": "4cadc4f9a5e66f28eaa27fb54b6ce538ea430c7d", - "gradient.pipeline.arrows.gradient-stop-3": "5af16d4ae6b63ff8dcf3254009e712db4ac1a3f9", - "gradient.pipeline.card.background.gradient-from": "8404a4e146121987426681accb996902179fad72", - "gradient.pipeline.card.background.gradient-to": "037bbd7fb410d05993a48594626a7babb32605a6", - "gradient.pipeline.card.border.gradient-from": "342926ec7179e7cbe133981050c1e1e41d94ed7a", - "gradient.pipeline.card.border.gradient-to": "8e39428cc5ce20f3593127f2ef71f180b38ee9a4", - "gradient.pipeline.widget.number.gradient-from": "dc372cb50eedf6023cd80cb6a4520e5fdf91358b", - "gradient.pipeline.widget.number.gradient-to": "e505c8d9dd140f5a671c1291ffd519fcff5c3e2c", - "gradient.pipeline.widget.blob.big.gradient-from": "b518524b25a5b95804988c640c4d52ba7ebd4599", - "gradient.pipeline.widget.blob.big.gradient-to": "80a493af10245e0ebbc6a51f5452d61d836a3754", - "gradient.pipeline.widget.blob.small.gradient-from": "8d7be31e69f0e54dd2e493d9051c2268078ea5ed", - "gradient.pipeline.widget.blob.small.gradient-to": "198813cf6242881ce0e0d030ca22ef31f9190d13", - "iconStrokeWidth.xxs": "751ceaa292e27736009bef894b62f83c1b2d66d8", - "iconStrokeWidth.xs": "77ca59c88a0b47972554b1db3f6469a230a6ad8c", - "iconStrokeWidth.sm": "e445b22e1f18af07002a1dc76f900dada5477383", - "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", - "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", - "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "component.dropdown.item.title": "3c567118d89565ad0d2acc52fe0f910049244d8c", - "component.dropdown.item.description": "7cb98eaa88248c97343d15ad3a82aa9bd7c693b2" - }, - "$figmaCollectionId": "VariableCollectionId:1340:156918", - "$figmaModeId": "1340:3", - "group": "mode" - }, - { - "id": "38c994e3875f18c0e27f7d87766f0b85d58945db", - "name": "dark-dimmer", - "$figmaStyleReferences": { - "shadow.0": "S:a2ed3778198048e91067a04633c27ba20e9fcbec,", - "shadow.1": "S:947694488889f7271c428950bec937ee79f8a536,", - "shadow.2": "S:70378f090cb66b03ee4b18e25742743934f37757,", - "shadow.3": "S:aa7e83fd47e75f5a1ae3e17f64417d5e9fcb96ae,", - "shadow.4": "S:5dfba690094db266c4ab7686fccbbedd8c16385f,", - "shadow.5": "S:d6752151a8dd3bd4b4bf12ad15a80c522f760731,", - "shadow.6": "S:da8e7b5b0f1352215fbaab66eff62a3e19d22b67,", - "shadow.inner": "S:2805cdc40176a4707d5cfc549b4c12e7ec4e74ff,", - "ring.focus": "S:062018f6483f54f1255b952aa1759b028d502ac3," - }, - "selectedTokenSets": { - "mode/dark/dimmer": "enabled" - }, - "$figmaCollectionId": "VariableCollectionId:1340:156918", - "$figmaModeId": "1389:0", - "$figmaVariableReferences": { - "background.1": "633e5f77aa1bd1bd133852d8372b9c9f1231a9e4", - "background.2": "14e8d4b56cc273b508af8a2c58cb00e99e08d1d3", - "background.3": "33554ff11e1eab35e50aa3570f51d53f16f46d6a", - "text.1": "38382b9984a98f9d26692a7f2882dfb5c5d51825", - "text.2": "115f62efd02491e85a63dfd601b03725d3711f23", - "text.3": "1c7327f01cf759b17fd0523cb540afa8700c1dc7", - "text.accent": "0b3cd5357659e6542cca163ccfd96c0cac059203", - "text.success": "ee56057b81e6d0872a84ca6b29affc8911fe333e", - "text.danger": "c7e38d7c7afc899f4d40392dbd6bc5ed6580264d", - "text.warning": "b03334e4c9db4b76269e4be886df6c1abf74d0ca", - "border.1": "5ad2231a611605964ba70f80e7aabb48f04bc704", - "border.2": "9084bef359e38136e0dddac25a464896456a9b1a", - "border.3": "5ff5d5233f7cb0233ce7634bc480026668c818f6", - "border.focus": "8db219e896acc4d828aaaf4add646d96540a84ea", - "border.success": "b13758973865eab0b4d79028a48e457eae8bec47", - "border.danger": "33d53c1486021bb3c9edce4123b484a2aabc8de0", - "border.warning": "027e57e08a1edcaaa7fbe033902bb3f65497abb4", - "state.hover": "78426caca2a07ee56132762a720ae07e2810f03b", - "state.selected": "ef914056c9c9dbaef00fa8795702a3cb933ee761", - "state.disabled.text": "967ab1b863941c100f58cc55e611ee2709051f01", - "state.disabled.background": "7a192b5ddcc570f0c8e3a5dbfd54d780e2832bbd", - "state.disabled.border": "067fd26e80ad39a28f738a3b76d21d354092d551", - "component.accordion.title": "5e49d6ddf7f2b21724b474d4a5545256143dce54", - "component.accordion.description": "bc47401a69d07fa71f0371765ed940745fc7a5b9", - "component.accordion.chevron": "5dd530f96134323125031668d4ea98a36ea0de86", - "component.accordion.border": "0b3fcc0e02a2a86625b2b4a9cfeebfad9486bc3a", - "component.alert.default.title": "d8e59ed205399e9727b0dcecdccad3d8daaaa622", - "component.alert.default.description": "f9ec7fec91747435740f000fb642f9009e8fc2db", - "component.alert.default.background": "7fbbdfcc33a3051394f89675798db2159741a5fc", - "component.alert.default.border": "549692bf2f70f6b40c7d55259f8890189aa6cc98", - "component.alert.danger.title": "c8da1cdbba8e0f86edda5fd3869f6186d53881ca", - "component.alert.danger.description": "366849405bd53c78f0b73d72585034a52f05d9a7", - "component.alert.danger.background": "5756a9bdba027993a9879b32ed129e3034028cdf", - "component.alert.danger.border": "a1a3be9eefab6edf2e996a46537872680dc45a09", - "component.avatar.text": "23018f4c7f22c4afb3b7e49f585a1fbb591209de", - "component.avatar.background": "57703fddbd26d363509fdba3aea037bd2f515ee0", - "component.avatar.border": "d651f4cb9082aa4d6e6af2c5abab700d683a5c85", - "component.badge.default.text": "ab90828e3b8c6adce5dc10bf85107b001b958e95", - "component.badge.default.background": "706b070b298e2d2a97665baf7af05187eefeb4fe", - "component.badge.default.border": "a935a2968ca4ecfb8cc58a18f31ae8fe65eb516b", - "component.badge.neutral.text": "82d39f1786c4371303ae21e4c02db79989c54e36", - "component.badge.neutral.background": "f5480b1a2b648fdb0561acda7515c38271cfb04b", - "component.badge.neutral.border": "00f05792ddf6e53bff79346df6a34144426d50e0", - "component.badge.success.text": "71014a6138e8747257a21144f8114b906cfe0f0a", - "component.badge.success.border": "190589c6021debb7bb676f05ac7f063c237fd4aa", - "component.badge.success.background": "177eb9f406784ddb958232cd643ebbb3490a53d4", - "component.badge.danger.text": "6c0c04f17c2bc0ee085d09bf0f205dcbc66c1e17", - "component.badge.danger.border": "6bb014acbbd68a796ed0c4d8c4f73e8e9e619923", - "component.badge.danger.background": "4162b10332d17800585d97ed45e45d69c2006808", - "component.badge.warning.text": "8581620d95e5b92a8c85341ebf63f21fcf7133d0", - "component.badge.warning.border": "71cb519182108ac72ffef823935546e4bff62bbc", - "component.badge.warning.background": "74c13457a85684a054426bd833859fe93eaec978", - "component.badge.running.text": "0b0c1be217e557a5b14c1cb25e988e4ac6d40583", - "component.badge.running.border": "27d3c48d3c316bc4f980282759b5e82f8aaaf49d", - "component.badge.running.background": "a85fddc26baf586ac7ba79e381e5f8fefca87c65", - "component.badge.merged.text": "a83d66ef53e8a094a62f2b32a4d17e58d552b1ef", - "component.badge.merged.border": "755392bca643af0a3fe5492069881a870aa11dc3", - "component.badge.merged.background": "4f4c81b1fe43bfe0d721a22d0aeb93079776cf6d", - "component.badge.ai.text": "bb4daee92817073da0366090742d0a17babb5728", - "component.badge.ai.background": "c5764a2304bf0e8a153c9ce0da20827696a76b41", - "component.breadcrumb.item-inactive": "2f009ca6cafb50c994205c9df02ee2d2503f7d23", - "component.breadcrumb.item-current": "7b502cc2e72f66bb501fdc5f480d0133d1b3841a", - "component.breadcrumb.separator": "1cd28c3ff97ab2f529a19c632d89dd44af0aad80", - "component.btn.primary.text": "9d32f032da93c9aab8b3bc6087c26aa12f507ad7", - "component.btn.primary.background": "410d584a3469233e067d0592a366fdebbe1049bc", - "component.btn.primary.border": "1491ac71f9681307c2d6528e443504e079061988", - "component.btn.secondary.text": "12c93d1b08ae50645a3b8f59256fcec00a4f84ca", - "component.btn.secondary.background": "86434310c95f5c055783011cc0e7c7918f67a35c", - "component.btn.secondary.border": "66bda91f87154efd3cefdc7a634ecb8afa8cd285", - "component.btn.outline.unselected.text": "9cf2c495178d6fdfd8f1360376242acbd4dc5e75", - "component.btn.outline.unselected.icon": "af1510c6050f671219d2089e0e59d5febb4422d6", - "component.btn.outline.unselected.border": "2b3013d632e566301e9f5f1a5cbb6aab4e7ec53f", - "component.btn.outline.selected.text": "13b50089245dec1899db2012412efcf649e2c0b4", - "component.btn.outline.selected.icon": "2bdf2c92b22e814109f4e05ec4d41d92f934a15d", - "component.btn.outline.selected.border": "ef10f4599233f62203def151b386013ddaa63afb", - "component.btn.ghost.unselected.text": "43fa10dd413cddb9a2e2142ead9ca3b4a91b49a6", - "component.btn.ghost.unselected.icon": "5ce332f51238b374104ec53067d685c26882f38e", - "component.btn.ghost.selected.text": "74cbf3b86016e05517f8c7bc64652281c940363e", - "component.btn.ghost.selected.icon": "1d8c6206a136d9c176ffba600a1e94618c4b96f8", - "component.btn.success.text": "52a336440e013bbc849ad67a43d0e136cf4f0b51", - "component.btn.success.background": "608ca6930129b4e5ff36d7f38508ae2537b66629", - "component.btn.success.border": "1f74d9985a10fe20e0acc4647cf4949005e9d4f1", - "component.btn.success.state.hover": "d05bde38a6539a11e3ccd87345af113ccd6bd113", - "component.btn.success.state.active": "f6e48e68dba6c32de27fadcaca3d1959f081d2e5", - "component.btn.danger.text": "49c02562362b8f775cfc2c4c614ecd646dcc2716", - "component.btn.danger.background": "0b015d0a4f456781969d7ffaf135c7c2a8858440", - "component.btn.danger.border": "9f99ee56f1ae2b7eb2f98300b83d4f53b15fd763", - "component.btn.danger.state.hover": "e7756e1d022d893bfa5fdd619f181d26fb7b117b", - "component.btn.danger.state.active": "23c7c85ff6104e098a208b6f4b86c1d0eef0f543", - "component.btn.ai.text": "380368600319fa12b73538ff52acd9d0e977e367", - "component.btn.ai.background": "8c9a1d07e05837f50588b642a4b51462f883887d", - "component.card.background": "256878745d17a46b7159919d8e30a3e960f59575", - "component.card.border": "3688ffcc56c4fb44dc0e221b8e09a958fd9e509d", - "component.dialog.title": "e6e0ff2bf1f3802eb21492e8b833c5f5e679cd82", - "component.dialog.description": "301509fcf2faac8497b2136f7879b9b0b3c64433", - "component.dialog.background": "ff2918d712798a4b487b6f6e5befe7b3eef59883", - "component.dialog.border": "4a6cb3732ad8b36bb9de0d15cbed575c87996088", - "component.dialog.backdrop": "893e60ed671f891241a3084707057185398446ed", - "component.dropdown.background": "09b2dca27ba9efabfe838d713a14ca6e6ac46685", - "component.dropdown.border": "c8cdfff63f4e142d651070ff1056b69a638aaab7", - "component.dropdown.item.delete.text": "864396a8c9b5df0fd948ded7d520ded936d74a8b", - "component.dropdown.item.delete.state.hover": "308dc9064be8e754f8385b0e8ff5489563d7c984", - "component.diff.grey": "43bf4f466a6e231c9951a639313740579c29d824", - "component.diff.add-content": "eb4eccf789a2bda6f3d3875c3310ef0579fd3555", - "component.diff.add-lineNumber": "61583aa6e36aaddd0be173a4a082a450e2522d3a", - "component.diff.add-content-highlight": "ad544fc527ca8b4c297993fe0722b8a7a96ef903", - "component.diff.add-widget": "c1def698ab707194d8f1558e16b05c55d50920d9", - "component.diff.add-widget-color": "a27c504a1f1151974669cf06054c1d0f704ecc38", - "component.diff.del-content": "465e6eb3613967f489cfee4b04f0b283b9e88f91", - "component.diff.del-lineNumber": "4cbe83072b6781d6e3edff645ccb2fb7426c5628", - "component.diff.del-content-highlight": "3e635e401a1a37a259211d093bef70e3a0c507ea", - "component.diff.plain-content": "984456faee2f6a5c202cfd76078ef5b6cd3a05f1", - "component.diff.plain-lineNumber": "6a5550287e7c58afa9d2375c5bfdca4d6c214cf1", - "component.diff.plain-lineNumber-color": "7c1186d20725b53cbefe87f56c5bc6db4e77d898", - "component.diff.empty-content": "712d93a0c1bc9503abda77ae50d624bd328c0057", - "component.diff.hunk-content": "79ad0dfc599f9bc246a6618c85bc1dc59744537f", - "component.diff.hunk-lineNumber": "bccfad80b84e35edf4b47af2ca30057eba2b2ebf", - "component.diff.hunk-content-color": "68c5d6a95d475f7275062e3eb58dba464df3d059", - "component.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", - "component.input.text": "df946237ac2ea0d177f3f2818a673fdf876944c7", - "component.input.placeholder": "85d7632aba08fd476083e508cc2660b17c30981a", - "component.input.icon": "75ca1f38c16fbd5e2697a36c74b0b1dd01f3f5c0", - "component.input.background": "585327333fbbf97bb8db21fbc613025719ca8a87", - "component.input.border": "911dac823dac21c9ccf4e35e10b2eb82a9c6f0ef", - "component.label.text": "80403cd630bba01a064550d9783313227b1d010f", - "component.link.default": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", - "component.link.visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", - "component.nav-tabs.unselected.text": "c085805657bb81574da85d3cb29f89ca08980daa", - "component.nav-tabs.selected.text": "16aa825c8038347237cbe91f7eeece4d2a8d1a2b", - "component.nav-tabs.selected.border": "3427b967112facd59f09fa310c863d7193ea4ffe", - "component.nav-tabs.border": "791d71ca187934e4b98ddff04bc9447a10358699", - "component.nav-tabs.background": "b92549e37390005f2bd1cfce06f9dfb8f67e39e0", - "component.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", - "component.pipeline.card.background": "f207dcff97f000326c4f28293fdbd2830860ce54", - "component.pipeline.card.border": "aa9d9528b1e8e25f9e6dae387b76d9beb2de35a8", - "component.pipeline.card.running.border": "179c0e4d47becc896eb1fbb7f9e8461779b3f680", - "component.pipeline.card.error.border": "1c0b41b41e25250cfb65bdb539bd573be66b0d00", - "component.pipeline.card.completed.border": "14251a54f431aae617af6b9577454a0e212ad76f", - "component.pipeline.card-canvas.1.background": "01bd392d5ddafe85e5575296d08254e52054ba8d", - "component.pipeline.card-canvas.1.border": "b9510abf89f82fb7b779bb730caa1bf393c83bd4", - "component.pipeline.card-canvas.2.background": "87b6b3e65b995fc4180dfb7bf613efb0098d1fff", - "component.pipeline.card-canvas.2.border": "1f9fa1e95134d87995a21738a3877f1c15158e5e", - "component.pipeline.background.dotes": "2784742abff27552789cdd4f2b51cab1331abb4a", - "component.sidebar.background": "8b6619fafae38e8ad94fffd488f2cf53d3c31d76", - "component.sidebar.border": "2263230eae16609a3d95ba5863aa3cc343010131", - "component.sidebar.separator": "a0c913dd38e81e3b2c20ee17642433da6da5f147", - "component.sidebar.hover": "4925b4511178bd2853a6b7b329683d036508aec1", - "component.sidebar.selected": "31f335ecde0aedb12407221718069f5b13574d41", - "component.sidebar.item.unselected.text": "9609e0ad8d79127a3784876f0204d02964f09e43", - "component.sidebar.item.unselected.icon": "5afba128858cf7494fb8a326a435860faf00b0ee", - "component.sidebar.item.selected.text": "5f1daf88cebaea07bd4c2a57c862638340827496", - "component.sidebar.item.selected.icon": "18325fda8139122c4a7cdf6debe2cd1f25d120b7", - "component.sidebar.logo.text": "a3ffa09fdf368badab24aecdbd26709ed7b3c2b2", - "component.sidebar.logo.icon": "c572d382a2018718d719f6a427d31fc9a42f57bd", - "component.sidebar.search.background": "33822e390046e5ec8f71a07fc041514a28778e74", - "component.sidebar.search.border": "f2044f7e8cf503f8809a48a14a88c5ef6466176f", - "component.sidebar.search.placeholder": "665cc00a32edd27b62371ee820d3c3250e629e78", - "component.sidebar.search.btn.background": "70c80e61b9ec397214c809c51de4fdf8177185da", - "component.sidebar.search.btn.border": "1c434c7d16cd4ba880e2d57520c90bc37f6b3879", - "component.sidebar.search.btn.text": "589c7d0162d67165a8752ea54a2c63bb63ee3ad7", - "component.sidebar.footer.username": "68298a8f471bb04f2f0305d9433a2b59613abd8d", - "component.sidebar.footer.data": "6a681d2abb90c2b62a39e20a1d29419c5086f01a", - "component.scrollbar.thumb": "9818c03d003381a966d08d3c6da75af8468bb8ef", - "component.selection.unselected.item": "7a7cad2aa2d6b2803a52eb26c78ea177b84ce241", - "component.selection.unselected.background": "a63ba949d12afc99020e77f95d0538bddba457b3", - "component.selection.unselected.border": "6ef997ebe03bb209ca568a648eb0cc8be69746a6", - "component.selection.selected.item": "f1f43c8acf2d4da10ee2e0d164d4dbe955816018", - "component.selection.selected.background": "1d1bbb9958f047744b66861fd8bd75dc2726dc25", - "component.selection.selected.border": "44b31378ed175b87b50ebad88cfd4a73a66ab9d5", - "component.separator.background": "9f4c82c269bc5aff0fa55d52a0ed59f914057be0", - "component.slider.track.base": "34dc3b5be6733e38f6c28d24d4f3699b2d7ea6f3", - "component.slider.track.progress": "38d8cac26c1cfb91293198eee25299e4aef9c1d8", - "component.slider.track-segments.base": "cb752791a51ff48c6d481426a1affb15048a152a", - "component.slider.track-segments.progress": "a7943fda0e4646e7018046354a9be54cf7d03075", - "component.slider.handle.background": "5c423cc3b672079f1e7dc0d1c8170dade368711a", - "component.slider.handle.border": "94347a2ed2900445946d18c653fb179b8602c533", - "component.status-indicator.completed": "c4c3bce2d28c84c25db4f444f9144b94523737b7", - "component.status-indicator.cancelled": "5aa15732d9ebc41f14b111e252819e2e36617124", - "component.status-indicator.warning": "4dc6e5ea4c736869aee4ebd0ee006f2d73861423", - "component.status-indicator.running": "07ce029f27cf34bf8d6fe3b9a6a600be01c8947e", - "component.status-indicator.merged": "d9eb24404452e6cc2617094fe8f29c69a760ea55", - "component.status-indicator.action-required": "2f1b8543c44b5d93cebddd80b5a9ee2d60fdb146", - "component.status-indicator.waiting": "62f68d300850ce20cf0be8c07d82a41bf1a56ecd", - "component.switch.unselected.thumb": "94d5f0b3a97924583ff697d56db74727b133ba95", - "component.switch.unselected.background": "a8ae87c7bb7ba7f4bfa71f2fdd5f404d19c3a1be", - "component.switch.selected.thumb": "cf6964ec11d69899d5dd39e82d322ea544367e90", - "component.switch.selected.background": "bba05ff96eae08a4adc31a6406e417022d9e5dad", - "component.table.header.text": "65cfc045aa01e3d3eeae4a227cac9be150839db8", - "component.table.header.background": "137c4f2e14bb8cadaf6f900a443700fe928a1fcd", - "component.table.row.alternate-background": "2863f92db433f88f24f62dda4cc9fd50c48130be", - "component.table.row.border": "445d945c4fe4426c3b73cf6f8fe0a572e4525798", - "component.table.cell.text": "73a28f25ba54aff507877ecbfd9942a6ea9f3cea", - "component.tabs.background": "8689ee01219675fb951a2517c2397fba52487971", - "component.tabs.border": "e5bc8cfac224234021c11b381f505da5fcac84ed", - "component.tabs.item.unselected.text": "4af8a5b79c55621f1ed11a7b6fc605657934dc1e", - "component.tabs.item.unselected.background": "fa041cdeb34ba5da6f1bd4cd6d8bb4b8273e0e70", - "component.tabs.item.unselected.border": "79b1a6fe839c012efec923edf40b3bfa2bcdab19", - "component.tabs.item.selected.text": "d048f7001829ff9949b2712b8ca746c8f3f49767", - "component.tabs.item.selected.background": "33269e9854800d565f728ba2a85c5cd3e549b5e8", - "component.tabs.item.selected.border": "11b7e5aeb83fd2f5d968021c750af2ceb5ba5841", - "component.tag.blue.text": "b35e0aebd9d1ebf0fd5d24bbd5ad184db9e11b86", - "component.tag.blue.background": "072fc2901d8ad0199c07bc339d46db086c7b0379", - "component.tag.blue.background-subtle": "67307c003cb91d76e00ef0f3777318e25efac628", - "component.tag.blue.border": "680fb2a6a11251e2619789595cd28c7861aaa530", - "component.tag.brown.text": "b48491f46d15503df99e2d8d9394aa552d09461b", - "component.tag.brown.background": "90b0ee0df4ebe7f06bfd07a7acbe812a45d621a4", - "component.tag.brown.background-subtle": "134ffd2a91ef027e197db6a5331d2726bc080ad6", - "component.tag.brown.border": "675776ff7a30540c297579d72b7f00779d778c14", - "component.tag.cyan.text": "6bf9361c5931ba40663d2c412f28f15382498517", - "component.tag.cyan.background": "83107c8cff314c553ed2cea5c9af1ff3356485e5", - "component.tag.cyan.background-subtle": "7f2724127eebb6e01713828af3736cd2e3734436", - "component.tag.cyan.border": "3286065f931626298e8f3dab2328297e83a79771", - "component.tag.green.text": "699a30f1d5f76ed4e631faa3da63be65e88af039", - "component.tag.green.background": "8b06c35974700260dff1a712c0a3976d4ddb0df5", - "component.tag.green.background-subtle": "c4f47c34772d8367bc3b00645420511f37aaecad", - "component.tag.green.border": "db85545b7d00ef9e199bf863dcdcc2be520f520c", - "component.tag.indigo.text": "d641d4626278e4d17ff4d98202112da9580a6b89", - "component.tag.indigo.background": "bb4af9a068f716c2f0b4f77c228b88009ac049c9", - "component.tag.indigo.background-subtle": "877e3b4ee6040ed581a8349c8fdb5e49ed36dfe0", - "component.tag.indigo.border": "885fdb80c956855c30666c660d5839dc357d1f5f", - "component.tag.lime.text": "763399447b243f761b7cce55f7dcf2fbb1797ee3", - "component.tag.lime.background": "d51cede4c823e16ac204bcaddb65d49c325c3cbe", - "component.tag.lime.background-subtle": "556934df078200ab014c762eeaa04deecd05422e", - "component.tag.lime.border": "fbb53e37ef7cb87cfae5298e69a5ffe4f99a23a7", - "component.tag.mint.text": "d3d406bffbadb1b894e4bb6aef7b1f5a1945094c", - "component.tag.mint.background": "04568a7d0bff5fbc11600bf840916f5451a0fe62", - "component.tag.mint.background-subtle": "1d39716bceda8510beb02e19847c391523e3690a", - "component.tag.mint.border": "c703cecfc8bd82c593dc9d81ce18748edd6ecf4d", - "component.tag.orange.text": "ba407492439b283fedf30a8ab8b16774c0931a9f", - "component.tag.orange.background": "ef766412f340a4aa62c8888a6fdfb2890f3ea207", - "component.tag.orange.background-subtle": "05e823662de8b1f99a062cea3c0f24df69b29362", - "component.tag.orange.border": "2f3023f2311c12acb44cdd28beb888f64d6d2183", - "component.tag.pink.text": "83b73e0e328485233004d42baa8a0948ff2198b0", - "component.tag.pink.background": "b23a211249a71f32bf15757316d0596fdb395962", - "component.tag.pink.background-subtle": "c144f19e07b839d68f20eb5c51ebd94e0f333a82", - "component.tag.pink.border": "b4874a81a08261362f3d8237833b80e68a851b76", - "component.tag.purple.text": "9869d8aad416ac3f9e530b0d62b05dda66906de4", - "component.tag.purple.background": "bc59008310427ba5883f71079b19b8cb4c6dd862", - "component.tag.purple.background-subtle": "a3598602d6e6b1d03f638f1a941801f147f4657a", - "component.tag.purple.border": "de1d577bd170613ab46460e9c50ca8de420152f6", - "component.tag.red.text": "aca8c1832317ac859b4263769855f423840a8569", - "component.tag.red.background": "9008e05416a00096c234511275b92be7204363b6", - "component.tag.red.background-subtle": "986bdd3f8d16488337ca9f46b71b04195d7578b0", - "component.tag.red.border": "f7f9067262546ee6eb77955e38aa0a451fc7f98a", - "component.tag.violet.text": "2ab996ff3465a0b97dee4d7c5606df3d46ab2a07", - "component.tag.violet.background": "4c9b9c2658479fc0e56894975a9b9b8d76df5b00", - "component.tag.violet.background-subtle": "fded9a84a20755592f57f081ebb594bfbaf8cfb3", - "component.tag.violet.border": "77de89ef1ab5168b7ff5e329bde8608047149a04", - "component.tag.yellow.text": "cadfcb4d0fe72fd5828cd764d54198026520e10c", - "component.tag.yellow.background": "a29464cd2a618a77586cb8760478a4d82b12b3ca", - "component.tag.yellow.background-subtle": "1b262be32c5779f024da5ad5696c805a83eb96c7", - "component.tag.yellow.border": "b595821fd5ef662361820415bb878e8ef4ab8939", - "component.tag.gray.text": "e7608c51a2421de226afebbcb909180c8a0cdb5a", - "component.tag.gray.background": "9bcc758ef67bbaac88637e99a702da5d7f7a3144", - "component.tag.gray.background-subtle": "76dfa99dd57cbaf2e7cbec9511cd1e1ddd92ee0e", - "component.tag.gray.border": "02e03f32969f9e6120bb6c7a3b781a5446f1bef1", - "component.toast.default.title": "f791d24eeab59c12cf4aad84f4677099bb4a01c1", - "component.toast.default.description": "6000da4ada3b9445750fb4b7b990726df120c271", - "component.toast.default.background": "5b9e9ea5b7de018a92d3deb902257e4e2bbb49f9", - "component.toast.default.border": "f74755bc7843dc9d7c788c54178b7ce3b83dea3f", - "component.toast.danger.title": "b5ad1c43fcee32eb251b980e884e77ea137c3369", - "component.toast.danger.description": "d281b5c13f2a4a293042f52b168e39f8bec398da", - "component.toast.danger.background": "8ba5c70e994ab44aeb72b3ed7f26ca9646d59cc0", - "component.toast.danger.border": "7f5252c13b96825084248b367f36377bb003ca96", - "component.tooltip.text": "b79a7ec441cdc7c6eee9313602f081d063327c1d", - "component.tooltip.background": "a35d0240a1c4de13350e6a4770dd1703a90a9227", - "component.tooltip.border": "d57b38546841813d61da59d66e98a8921f2f3ee7", - "shadow-color.0": "c0c282f63e107374a732d74c1742cf60d52e6e5c", - "shadow-color.1": "1ec33a9c84353664d23cd23d6c033d1c330c149a", - "shadow-color.2": "6200a000044d8dbee421ed4afb0c3ff42febb6ef", - "shadow-color.3": "77d99afb159d8e193a82f615dd84de3214e00703", - "shadow-color.4": "2b2e0307d252bdc6db53a23ce2cc2e9bb4f6b914", - "shadow-color.5": "5a6c707240bab54cb4403f47262abfe0756efc9a", - "shadow-color.6": "928283d00759150575a8f155da90180a582be438", - "shadow-color.inner": "6cb5a98fba0b13e952859b9f023259b5c06cfd1a", - "gradient.ai.gradient-stop-1": "8db516caa68afc5b8fdd6fc6e5a9bad7715c5f26", - "gradient.ai.gradient-stop-2": "33930f41665251a281973a37847f357480aedca3", - "gradient.ai.gradient-stop-3": "c9e14c3db8e622b10b1cd3e860115cd6f876ae49", - "gradient.ai.gradient-stop-4": "6e7d0850d7eb1e699f87b41f6ffd4cb8d73d72e8", - "gradient.skeleton.gradient-stop-1": "5427016b990b75f0d1ce60eef8cb9b96d75fbde2", - "gradient.skeleton.gradient-stop-2": "01442c311e6da751c30c3518fc32970306767274", - "gradient.skeleton.gradient-stop-3": "7fda4c834a3daf0c56bb59777c525670ae2dee3e", - "gradient.pipeline.running.gradient-stop-1": "0c187d1ebb015ec66bac356009795316f84807ae", - "gradient.pipeline.running.gradient-stop-2": "d1251f86c91bd0f29d8ac8cfa01056bc307156b4", - "gradient.pipeline.running.gradient-stop-3": "b09bdab234cdf7c204cb153ec94ea0a9b2bb4976", - "gradient.pipeline.arrows.gradient-stop-1": "0465e74baaf10a12f23b9eaa40fc1ae08485a0d5", - "gradient.pipeline.arrows.gradient-stop-2": "4cadc4f9a5e66f28eaa27fb54b6ce538ea430c7d", - "gradient.pipeline.arrows.gradient-stop-3": "5af16d4ae6b63ff8dcf3254009e712db4ac1a3f9", - "gradient.pipeline.card.background.gradient-from": "8404a4e146121987426681accb996902179fad72", - "gradient.pipeline.card.background.gradient-to": "037bbd7fb410d05993a48594626a7babb32605a6", - "gradient.pipeline.card.border.gradient-from": "342926ec7179e7cbe133981050c1e1e41d94ed7a", - "gradient.pipeline.card.border.gradient-to": "8e39428cc5ce20f3593127f2ef71f180b38ee9a4", - "gradient.pipeline.widget.number.gradient-from": "dc372cb50eedf6023cd80cb6a4520e5fdf91358b", - "gradient.pipeline.widget.number.gradient-to": "e505c8d9dd140f5a671c1291ffd519fcff5c3e2c", - "gradient.pipeline.widget.blob.big.gradient-from": "b518524b25a5b95804988c640c4d52ba7ebd4599", - "gradient.pipeline.widget.blob.big.gradient-to": "80a493af10245e0ebbc6a51f5452d61d836a3754", - "gradient.pipeline.widget.blob.small.gradient-from": "8d7be31e69f0e54dd2e493d9051c2268078ea5ed", - "gradient.pipeline.widget.blob.small.gradient-to": "198813cf6242881ce0e0d030ca22ef31f9190d13", - "iconStrokeWidth.xxs": "751ceaa292e27736009bef894b62f83c1b2d66d8", - "iconStrokeWidth.xs": "77ca59c88a0b47972554b1db3f6469a230a6ad8c", - "iconStrokeWidth.sm": "e445b22e1f18af07002a1dc76f900dada5477383", - "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", - "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", - "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "component.dropdown.item.text": "2f1f1ea9d368ec8be380803506fbf657cabe6ac0" - }, - "group": "mode" - }, - { - "id": "1ab3cee078aadbe01119debf02edd406076ce57c", - "name": "light", - "$figmaStyleReferences": { - "shadow.0": "S:a2ed3778198048e91067a04633c27ba20e9fcbec,", - "shadow.1": "S:947694488889f7271c428950bec937ee79f8a536,", - "shadow.2": "S:70378f090cb66b03ee4b18e25742743934f37757,", - "shadow.3": "S:aa7e83fd47e75f5a1ae3e17f64417d5e9fcb96ae,", - "shadow.4": "S:5dfba690094db266c4ab7686fccbbedd8c16385f,", - "shadow.5": "S:d6752151a8dd3bd4b4bf12ad15a80c522f760731,", - "shadow.6": "S:da8e7b5b0f1352215fbaab66eff62a3e19d22b67,", - "shadow.inner": "S:2805cdc40176a4707d5cfc549b4c12e7ec4e74ff,", - "ring.focus": "S:062018f6483f54f1255b952aa1759b028d502ac3," - }, - "selectedTokenSets": { - "mode/light/default": "enabled" - }, - "$figmaCollectionId": "VariableCollectionId:1340:156918", - "$figmaModeId": "1340:4", - "$figmaVariableReferences": { - "background.1": "633e5f77aa1bd1bd133852d8372b9c9f1231a9e4", - "background.2": "14e8d4b56cc273b508af8a2c58cb00e99e08d1d3", - "background.3": "33554ff11e1eab35e50aa3570f51d53f16f46d6a", - "text.1": "38382b9984a98f9d26692a7f2882dfb5c5d51825", - "text.2": "115f62efd02491e85a63dfd601b03725d3711f23", - "text.3": "1c7327f01cf759b17fd0523cb540afa8700c1dc7", - "text.accent": "0b3cd5357659e6542cca163ccfd96c0cac059203", - "text.success": "ee56057b81e6d0872a84ca6b29affc8911fe333e", - "text.danger": "c7e38d7c7afc899f4d40392dbd6bc5ed6580264d", - "text.warning": "b03334e4c9db4b76269e4be886df6c1abf74d0ca", - "border.1": "5ad2231a611605964ba70f80e7aabb48f04bc704", - "border.2": "9084bef359e38136e0dddac25a464896456a9b1a", - "border.3": "5ff5d5233f7cb0233ce7634bc480026668c818f6", - "border.focus": "8db219e896acc4d828aaaf4add646d96540a84ea", - "border.success": "b13758973865eab0b4d79028a48e457eae8bec47", - "border.danger": "33d53c1486021bb3c9edce4123b484a2aabc8de0", - "border.warning": "027e57e08a1edcaaa7fbe033902bb3f65497abb4", - "state.hover": "78426caca2a07ee56132762a720ae07e2810f03b", - "state.selected": "ef914056c9c9dbaef00fa8795702a3cb933ee761", - "state.disabled.text": "967ab1b863941c100f58cc55e611ee2709051f01", - "state.disabled.background": "7a192b5ddcc570f0c8e3a5dbfd54d780e2832bbd", - "state.disabled.border": "067fd26e80ad39a28f738a3b76d21d354092d551", - "component.accordion.title": "5e49d6ddf7f2b21724b474d4a5545256143dce54", - "component.accordion.description": "bc47401a69d07fa71f0371765ed940745fc7a5b9", - "component.accordion.chevron": "5dd530f96134323125031668d4ea98a36ea0de86", - "component.accordion.border": "0b3fcc0e02a2a86625b2b4a9cfeebfad9486bc3a", - "component.alert.default.title": "d8e59ed205399e9727b0dcecdccad3d8daaaa622", - "component.alert.default.description": "f9ec7fec91747435740f000fb642f9009e8fc2db", - "component.alert.default.background": "7fbbdfcc33a3051394f89675798db2159741a5fc", - "component.alert.default.border": "549692bf2f70f6b40c7d55259f8890189aa6cc98", - "component.alert.danger.title": "c8da1cdbba8e0f86edda5fd3869f6186d53881ca", - "component.alert.danger.description": "366849405bd53c78f0b73d72585034a52f05d9a7", - "component.alert.danger.background": "5756a9bdba027993a9879b32ed129e3034028cdf", - "component.alert.danger.border": "a1a3be9eefab6edf2e996a46537872680dc45a09", - "component.avatar.text": "23018f4c7f22c4afb3b7e49f585a1fbb591209de", - "component.avatar.background": "57703fddbd26d363509fdba3aea037bd2f515ee0", - "component.avatar.border": "d651f4cb9082aa4d6e6af2c5abab700d683a5c85", - "component.badge.default.text": "ab90828e3b8c6adce5dc10bf85107b001b958e95", - "component.badge.default.background": "706b070b298e2d2a97665baf7af05187eefeb4fe", - "component.badge.default.border": "a935a2968ca4ecfb8cc58a18f31ae8fe65eb516b", - "component.badge.neutral.text": "82d39f1786c4371303ae21e4c02db79989c54e36", - "component.badge.neutral.background": "f5480b1a2b648fdb0561acda7515c38271cfb04b", - "component.badge.neutral.border": "00f05792ddf6e53bff79346df6a34144426d50e0", - "component.badge.success.text": "71014a6138e8747257a21144f8114b906cfe0f0a", - "component.badge.success.border": "190589c6021debb7bb676f05ac7f063c237fd4aa", - "component.badge.success.background": "177eb9f406784ddb958232cd643ebbb3490a53d4", - "component.badge.danger.text": "6c0c04f17c2bc0ee085d09bf0f205dcbc66c1e17", - "component.badge.danger.border": "6bb014acbbd68a796ed0c4d8c4f73e8e9e619923", - "component.badge.danger.background": "4162b10332d17800585d97ed45e45d69c2006808", - "component.badge.warning.text": "8581620d95e5b92a8c85341ebf63f21fcf7133d0", - "component.badge.warning.border": "71cb519182108ac72ffef823935546e4bff62bbc", - "component.badge.warning.background": "74c13457a85684a054426bd833859fe93eaec978", - "component.badge.running.text": "0b0c1be217e557a5b14c1cb25e988e4ac6d40583", - "component.badge.running.border": "27d3c48d3c316bc4f980282759b5e82f8aaaf49d", - "component.badge.running.background": "a85fddc26baf586ac7ba79e381e5f8fefca87c65", - "component.badge.merged.text": "a83d66ef53e8a094a62f2b32a4d17e58d552b1ef", - "component.badge.merged.border": "755392bca643af0a3fe5492069881a870aa11dc3", - "component.badge.merged.background": "4f4c81b1fe43bfe0d721a22d0aeb93079776cf6d", - "component.badge.ai.text": "bb4daee92817073da0366090742d0a17babb5728", - "component.badge.ai.background": "c5764a2304bf0e8a153c9ce0da20827696a76b41", - "component.breadcrumb.item-inactive": "2f009ca6cafb50c994205c9df02ee2d2503f7d23", - "component.breadcrumb.item-current": "7b502cc2e72f66bb501fdc5f480d0133d1b3841a", - "component.breadcrumb.separator": "1cd28c3ff97ab2f529a19c632d89dd44af0aad80", - "component.btn.primary.text": "9d32f032da93c9aab8b3bc6087c26aa12f507ad7", - "component.btn.primary.background": "410d584a3469233e067d0592a366fdebbe1049bc", - "component.btn.primary.border": "1491ac71f9681307c2d6528e443504e079061988", - "component.btn.secondary.text": "12c93d1b08ae50645a3b8f59256fcec00a4f84ca", - "component.btn.secondary.background": "86434310c95f5c055783011cc0e7c7918f67a35c", - "component.btn.secondary.border": "66bda91f87154efd3cefdc7a634ecb8afa8cd285", - "component.btn.outline.unselected.text": "9cf2c495178d6fdfd8f1360376242acbd4dc5e75", - "component.btn.outline.unselected.icon": "af1510c6050f671219d2089e0e59d5febb4422d6", - "component.btn.outline.unselected.border": "2b3013d632e566301e9f5f1a5cbb6aab4e7ec53f", - "component.btn.outline.selected.text": "13b50089245dec1899db2012412efcf649e2c0b4", - "component.btn.outline.selected.icon": "2bdf2c92b22e814109f4e05ec4d41d92f934a15d", - "component.btn.outline.selected.border": "ef10f4599233f62203def151b386013ddaa63afb", - "component.btn.ghost.unselected.text": "43fa10dd413cddb9a2e2142ead9ca3b4a91b49a6", - "component.btn.ghost.unselected.icon": "5ce332f51238b374104ec53067d685c26882f38e", - "component.btn.ghost.selected.text": "74cbf3b86016e05517f8c7bc64652281c940363e", - "component.btn.ghost.selected.icon": "1d8c6206a136d9c176ffba600a1e94618c4b96f8", - "component.btn.success.text": "52a336440e013bbc849ad67a43d0e136cf4f0b51", - "component.btn.success.background": "608ca6930129b4e5ff36d7f38508ae2537b66629", - "component.btn.success.border": "1f74d9985a10fe20e0acc4647cf4949005e9d4f1", - "component.btn.success.state.hover": "d05bde38a6539a11e3ccd87345af113ccd6bd113", - "component.btn.success.state.active": "f6e48e68dba6c32de27fadcaca3d1959f081d2e5", - "component.btn.danger.text": "49c02562362b8f775cfc2c4c614ecd646dcc2716", - "component.btn.danger.background": "0b015d0a4f456781969d7ffaf135c7c2a8858440", - "component.btn.danger.border": "9f99ee56f1ae2b7eb2f98300b83d4f53b15fd763", - "component.btn.danger.state.hover": "e7756e1d022d893bfa5fdd619f181d26fb7b117b", - "component.btn.danger.state.active": "23c7c85ff6104e098a208b6f4b86c1d0eef0f543", - "component.btn.ai.text": "380368600319fa12b73538ff52acd9d0e977e367", - "component.btn.ai.background": "8c9a1d07e05837f50588b642a4b51462f883887d", - "component.card.background": "256878745d17a46b7159919d8e30a3e960f59575", - "component.card.border": "3688ffcc56c4fb44dc0e221b8e09a958fd9e509d", - "component.dialog.title": "e6e0ff2bf1f3802eb21492e8b833c5f5e679cd82", - "component.dialog.description": "301509fcf2faac8497b2136f7879b9b0b3c64433", - "component.dialog.background": "ff2918d712798a4b487b6f6e5befe7b3eef59883", - "component.dialog.border": "4a6cb3732ad8b36bb9de0d15cbed575c87996088", - "component.dialog.backdrop": "893e60ed671f891241a3084707057185398446ed", - "component.dropdown.background": "09b2dca27ba9efabfe838d713a14ca6e6ac46685", - "component.dropdown.border": "c8cdfff63f4e142d651070ff1056b69a638aaab7", - "component.dropdown.item.delete.text": "864396a8c9b5df0fd948ded7d520ded936d74a8b", - "component.dropdown.item.delete.state.hover": "308dc9064be8e754f8385b0e8ff5489563d7c984", - "component.diff.grey": "43bf4f466a6e231c9951a639313740579c29d824", - "component.diff.add-content": "eb4eccf789a2bda6f3d3875c3310ef0579fd3555", - "component.diff.add-lineNumber": "61583aa6e36aaddd0be173a4a082a450e2522d3a", - "component.diff.add-content-highlight": "ad544fc527ca8b4c297993fe0722b8a7a96ef903", - "component.diff.add-widget": "c1def698ab707194d8f1558e16b05c55d50920d9", - "component.diff.add-widget-color": "a27c504a1f1151974669cf06054c1d0f704ecc38", - "component.diff.del-content": "465e6eb3613967f489cfee4b04f0b283b9e88f91", - "component.diff.del-lineNumber": "4cbe83072b6781d6e3edff645ccb2fb7426c5628", - "component.diff.del-content-highlight": "3e635e401a1a37a259211d093bef70e3a0c507ea", - "component.diff.plain-content": "984456faee2f6a5c202cfd76078ef5b6cd3a05f1", - "component.diff.plain-lineNumber": "6a5550287e7c58afa9d2375c5bfdca4d6c214cf1", - "component.diff.plain-lineNumber-color": "7c1186d20725b53cbefe87f56c5bc6db4e77d898", - "component.diff.empty-content": "712d93a0c1bc9503abda77ae50d624bd328c0057", - "component.diff.hunk-content": "79ad0dfc599f9bc246a6618c85bc1dc59744537f", - "component.diff.hunk-lineNumber": "bccfad80b84e35edf4b47af2ca30057eba2b2ebf", - "component.diff.hunk-content-color": "68c5d6a95d475f7275062e3eb58dba464df3d059", - "component.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", - "component.input.text": "df946237ac2ea0d177f3f2818a673fdf876944c7", - "component.input.placeholder": "85d7632aba08fd476083e508cc2660b17c30981a", - "component.input.icon": "75ca1f38c16fbd5e2697a36c74b0b1dd01f3f5c0", - "component.input.background": "585327333fbbf97bb8db21fbc613025719ca8a87", - "component.input.border": "911dac823dac21c9ccf4e35e10b2eb82a9c6f0ef", - "component.label.text": "80403cd630bba01a064550d9783313227b1d010f", - "component.link.default": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", - "component.link.visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", - "component.nav-tabs.unselected.text": "c085805657bb81574da85d3cb29f89ca08980daa", - "component.nav-tabs.selected.text": "16aa825c8038347237cbe91f7eeece4d2a8d1a2b", - "component.nav-tabs.selected.border": "3427b967112facd59f09fa310c863d7193ea4ffe", - "component.nav-tabs.border": "791d71ca187934e4b98ddff04bc9447a10358699", - "component.nav-tabs.background": "b92549e37390005f2bd1cfce06f9dfb8f67e39e0", - "component.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", - "component.pipeline.card.background": "f207dcff97f000326c4f28293fdbd2830860ce54", - "component.pipeline.card.border": "aa9d9528b1e8e25f9e6dae387b76d9beb2de35a8", - "component.pipeline.card.running.border": "179c0e4d47becc896eb1fbb7f9e8461779b3f680", - "component.pipeline.card.error.border": "1c0b41b41e25250cfb65bdb539bd573be66b0d00", - "component.pipeline.card.completed.border": "14251a54f431aae617af6b9577454a0e212ad76f", - "component.pipeline.card-canvas.1.background": "01bd392d5ddafe85e5575296d08254e52054ba8d", - "component.pipeline.card-canvas.1.border": "b9510abf89f82fb7b779bb730caa1bf393c83bd4", - "component.pipeline.card-canvas.2.background": "87b6b3e65b995fc4180dfb7bf613efb0098d1fff", - "component.pipeline.card-canvas.2.border": "1f9fa1e95134d87995a21738a3877f1c15158e5e", - "component.pipeline.background.dotes": "2784742abff27552789cdd4f2b51cab1331abb4a", - "component.sidebar.background": "8b6619fafae38e8ad94fffd488f2cf53d3c31d76", - "component.sidebar.border": "2263230eae16609a3d95ba5863aa3cc343010131", - "component.sidebar.separator": "a0c913dd38e81e3b2c20ee17642433da6da5f147", - "component.sidebar.hover": "4925b4511178bd2853a6b7b329683d036508aec1", - "component.sidebar.selected": "31f335ecde0aedb12407221718069f5b13574d41", - "component.sidebar.item.unselected.text": "9609e0ad8d79127a3784876f0204d02964f09e43", - "component.sidebar.item.unselected.icon": "5afba128858cf7494fb8a326a435860faf00b0ee", - "component.sidebar.item.selected.text": "5f1daf88cebaea07bd4c2a57c862638340827496", - "component.sidebar.item.selected.icon": "18325fda8139122c4a7cdf6debe2cd1f25d120b7", - "component.sidebar.logo.text": "a3ffa09fdf368badab24aecdbd26709ed7b3c2b2", - "component.sidebar.logo.icon": "c572d382a2018718d719f6a427d31fc9a42f57bd", - "component.sidebar.search.background": "33822e390046e5ec8f71a07fc041514a28778e74", - "component.sidebar.search.border": "f2044f7e8cf503f8809a48a14a88c5ef6466176f", - "component.sidebar.search.placeholder": "665cc00a32edd27b62371ee820d3c3250e629e78", - "component.sidebar.search.btn.background": "70c80e61b9ec397214c809c51de4fdf8177185da", - "component.sidebar.search.btn.border": "1c434c7d16cd4ba880e2d57520c90bc37f6b3879", - "component.sidebar.search.btn.text": "589c7d0162d67165a8752ea54a2c63bb63ee3ad7", - "component.sidebar.footer.username": "68298a8f471bb04f2f0305d9433a2b59613abd8d", - "component.sidebar.footer.data": "6a681d2abb90c2b62a39e20a1d29419c5086f01a", - "component.scrollbar.thumb": "9818c03d003381a966d08d3c6da75af8468bb8ef", - "component.selection.unselected.item": "7a7cad2aa2d6b2803a52eb26c78ea177b84ce241", - "component.selection.unselected.background": "a63ba949d12afc99020e77f95d0538bddba457b3", - "component.selection.unselected.border": "6ef997ebe03bb209ca568a648eb0cc8be69746a6", - "component.selection.selected.item": "f1f43c8acf2d4da10ee2e0d164d4dbe955816018", - "component.selection.selected.background": "1d1bbb9958f047744b66861fd8bd75dc2726dc25", - "component.selection.selected.border": "44b31378ed175b87b50ebad88cfd4a73a66ab9d5", - "component.separator.background": "9f4c82c269bc5aff0fa55d52a0ed59f914057be0", - "component.slider.track.base": "34dc3b5be6733e38f6c28d24d4f3699b2d7ea6f3", - "component.slider.track.progress": "38d8cac26c1cfb91293198eee25299e4aef9c1d8", - "component.slider.track-segments.base": "cb752791a51ff48c6d481426a1affb15048a152a", - "component.slider.track-segments.progress": "a7943fda0e4646e7018046354a9be54cf7d03075", - "component.slider.handle.background": "5c423cc3b672079f1e7dc0d1c8170dade368711a", - "component.slider.handle.border": "94347a2ed2900445946d18c653fb179b8602c533", - "component.status-indicator.completed": "c4c3bce2d28c84c25db4f444f9144b94523737b7", - "component.status-indicator.cancelled": "5aa15732d9ebc41f14b111e252819e2e36617124", - "component.status-indicator.warning": "4dc6e5ea4c736869aee4ebd0ee006f2d73861423", - "component.status-indicator.running": "07ce029f27cf34bf8d6fe3b9a6a600be01c8947e", - "component.status-indicator.merged": "d9eb24404452e6cc2617094fe8f29c69a760ea55", - "component.status-indicator.action-required": "2f1b8543c44b5d93cebddd80b5a9ee2d60fdb146", - "component.status-indicator.waiting": "62f68d300850ce20cf0be8c07d82a41bf1a56ecd", - "component.switch.unselected.thumb": "94d5f0b3a97924583ff697d56db74727b133ba95", - "component.switch.unselected.background": "a8ae87c7bb7ba7f4bfa71f2fdd5f404d19c3a1be", - "component.switch.selected.thumb": "cf6964ec11d69899d5dd39e82d322ea544367e90", - "component.switch.selected.background": "bba05ff96eae08a4adc31a6406e417022d9e5dad", - "component.table.header.text": "65cfc045aa01e3d3eeae4a227cac9be150839db8", - "component.table.header.background": "137c4f2e14bb8cadaf6f900a443700fe928a1fcd", - "component.table.row.alternate-background": "2863f92db433f88f24f62dda4cc9fd50c48130be", - "component.table.row.border": "445d945c4fe4426c3b73cf6f8fe0a572e4525798", - "component.table.cell.text": "73a28f25ba54aff507877ecbfd9942a6ea9f3cea", - "component.tabs.background": "8689ee01219675fb951a2517c2397fba52487971", - "component.tabs.border": "e5bc8cfac224234021c11b381f505da5fcac84ed", - "component.tabs.item.unselected.text": "4af8a5b79c55621f1ed11a7b6fc605657934dc1e", - "component.tabs.item.unselected.background": "fa041cdeb34ba5da6f1bd4cd6d8bb4b8273e0e70", - "component.tabs.item.unselected.border": "79b1a6fe839c012efec923edf40b3bfa2bcdab19", - "component.tabs.item.selected.text": "d048f7001829ff9949b2712b8ca746c8f3f49767", - "component.tabs.item.selected.background": "33269e9854800d565f728ba2a85c5cd3e549b5e8", - "component.tabs.item.selected.border": "11b7e5aeb83fd2f5d968021c750af2ceb5ba5841", - "component.tag.blue.text": "b35e0aebd9d1ebf0fd5d24bbd5ad184db9e11b86", - "component.tag.blue.background": "072fc2901d8ad0199c07bc339d46db086c7b0379", - "component.tag.blue.background-subtle": "67307c003cb91d76e00ef0f3777318e25efac628", - "component.tag.blue.border": "680fb2a6a11251e2619789595cd28c7861aaa530", - "component.tag.brown.text": "b48491f46d15503df99e2d8d9394aa552d09461b", - "component.tag.brown.background": "90b0ee0df4ebe7f06bfd07a7acbe812a45d621a4", - "component.tag.brown.background-subtle": "134ffd2a91ef027e197db6a5331d2726bc080ad6", - "component.tag.brown.border": "675776ff7a30540c297579d72b7f00779d778c14", - "component.tag.cyan.text": "6bf9361c5931ba40663d2c412f28f15382498517", - "component.tag.cyan.background": "83107c8cff314c553ed2cea5c9af1ff3356485e5", - "component.tag.cyan.background-subtle": "7f2724127eebb6e01713828af3736cd2e3734436", - "component.tag.cyan.border": "3286065f931626298e8f3dab2328297e83a79771", - "component.tag.green.text": "699a30f1d5f76ed4e631faa3da63be65e88af039", - "component.tag.green.background": "8b06c35974700260dff1a712c0a3976d4ddb0df5", - "component.tag.green.background-subtle": "c4f47c34772d8367bc3b00645420511f37aaecad", - "component.tag.green.border": "db85545b7d00ef9e199bf863dcdcc2be520f520c", - "component.tag.indigo.text": "d641d4626278e4d17ff4d98202112da9580a6b89", - "component.tag.indigo.background": "bb4af9a068f716c2f0b4f77c228b88009ac049c9", - "component.tag.indigo.background-subtle": "877e3b4ee6040ed581a8349c8fdb5e49ed36dfe0", - "component.tag.indigo.border": "885fdb80c956855c30666c660d5839dc357d1f5f", - "component.tag.lime.text": "763399447b243f761b7cce55f7dcf2fbb1797ee3", - "component.tag.lime.background": "d51cede4c823e16ac204bcaddb65d49c325c3cbe", - "component.tag.lime.background-subtle": "556934df078200ab014c762eeaa04deecd05422e", - "component.tag.lime.border": "fbb53e37ef7cb87cfae5298e69a5ffe4f99a23a7", - "component.tag.mint.text": "d3d406bffbadb1b894e4bb6aef7b1f5a1945094c", - "component.tag.mint.background": "04568a7d0bff5fbc11600bf840916f5451a0fe62", - "component.tag.mint.background-subtle": "1d39716bceda8510beb02e19847c391523e3690a", - "component.tag.mint.border": "c703cecfc8bd82c593dc9d81ce18748edd6ecf4d", - "component.tag.orange.text": "ba407492439b283fedf30a8ab8b16774c0931a9f", - "component.tag.orange.background": "ef766412f340a4aa62c8888a6fdfb2890f3ea207", - "component.tag.orange.background-subtle": "05e823662de8b1f99a062cea3c0f24df69b29362", - "component.tag.orange.border": "2f3023f2311c12acb44cdd28beb888f64d6d2183", - "component.tag.pink.text": "83b73e0e328485233004d42baa8a0948ff2198b0", - "component.tag.pink.background": "b23a211249a71f32bf15757316d0596fdb395962", - "component.tag.pink.background-subtle": "c144f19e07b839d68f20eb5c51ebd94e0f333a82", - "component.tag.pink.border": "b4874a81a08261362f3d8237833b80e68a851b76", - "component.tag.purple.text": "9869d8aad416ac3f9e530b0d62b05dda66906de4", - "component.tag.purple.background": "bc59008310427ba5883f71079b19b8cb4c6dd862", - "component.tag.purple.background-subtle": "a3598602d6e6b1d03f638f1a941801f147f4657a", - "component.tag.purple.border": "de1d577bd170613ab46460e9c50ca8de420152f6", - "component.tag.red.text": "aca8c1832317ac859b4263769855f423840a8569", - "component.tag.red.background": "9008e05416a00096c234511275b92be7204363b6", - "component.tag.red.background-subtle": "986bdd3f8d16488337ca9f46b71b04195d7578b0", - "component.tag.red.border": "f7f9067262546ee6eb77955e38aa0a451fc7f98a", - "component.tag.violet.text": "2ab996ff3465a0b97dee4d7c5606df3d46ab2a07", - "component.tag.violet.background": "4c9b9c2658479fc0e56894975a9b9b8d76df5b00", - "component.tag.violet.background-subtle": "fded9a84a20755592f57f081ebb594bfbaf8cfb3", - "component.tag.violet.border": "77de89ef1ab5168b7ff5e329bde8608047149a04", - "component.tag.yellow.text": "cadfcb4d0fe72fd5828cd764d54198026520e10c", - "component.tag.yellow.background": "a29464cd2a618a77586cb8760478a4d82b12b3ca", - "component.tag.yellow.background-subtle": "1b262be32c5779f024da5ad5696c805a83eb96c7", - "component.tag.yellow.border": "b595821fd5ef662361820415bb878e8ef4ab8939", - "component.tag.gray.text": "e7608c51a2421de226afebbcb909180c8a0cdb5a", - "component.tag.gray.background": "9bcc758ef67bbaac88637e99a702da5d7f7a3144", - "component.tag.gray.background-subtle": "76dfa99dd57cbaf2e7cbec9511cd1e1ddd92ee0e", - "component.tag.gray.border": "02e03f32969f9e6120bb6c7a3b781a5446f1bef1", - "component.toast.default.title": "f791d24eeab59c12cf4aad84f4677099bb4a01c1", - "component.toast.default.description": "6000da4ada3b9445750fb4b7b990726df120c271", - "component.toast.default.background": "5b9e9ea5b7de018a92d3deb902257e4e2bbb49f9", - "component.toast.default.border": "f74755bc7843dc9d7c788c54178b7ce3b83dea3f", - "component.toast.danger.title": "b5ad1c43fcee32eb251b980e884e77ea137c3369", - "component.toast.danger.description": "d281b5c13f2a4a293042f52b168e39f8bec398da", - "component.toast.danger.background": "8ba5c70e994ab44aeb72b3ed7f26ca9646d59cc0", - "component.toast.danger.border": "7f5252c13b96825084248b367f36377bb003ca96", - "component.tooltip.text": "b79a7ec441cdc7c6eee9313602f081d063327c1d", - "component.tooltip.background": "a35d0240a1c4de13350e6a4770dd1703a90a9227", - "shadow-color.0": "c0c282f63e107374a732d74c1742cf60d52e6e5c", - "shadow-color.1": "1ec33a9c84353664d23cd23d6c033d1c330c149a", - "shadow-color.2": "6200a000044d8dbee421ed4afb0c3ff42febb6ef", - "shadow-color.3": "77d99afb159d8e193a82f615dd84de3214e00703", - "shadow-color.4": "2b2e0307d252bdc6db53a23ce2cc2e9bb4f6b914", - "shadow-color.5": "5a6c707240bab54cb4403f47262abfe0756efc9a", - "shadow-color.6": "928283d00759150575a8f155da90180a582be438", - "shadow-color.inner": "6cb5a98fba0b13e952859b9f023259b5c06cfd1a", - "gradient.ai.gradient-stop-1": "8db516caa68afc5b8fdd6fc6e5a9bad7715c5f26", - "gradient.ai.gradient-stop-2": "33930f41665251a281973a37847f357480aedca3", - "gradient.ai.gradient-stop-3": "c9e14c3db8e622b10b1cd3e860115cd6f876ae49", - "gradient.ai.gradient-stop-4": "6e7d0850d7eb1e699f87b41f6ffd4cb8d73d72e8", - "gradient.skeleton.gradient-stop-1": "5427016b990b75f0d1ce60eef8cb9b96d75fbde2", - "gradient.skeleton.gradient-stop-2": "01442c311e6da751c30c3518fc32970306767274", - "gradient.skeleton.gradient-stop-3": "7fda4c834a3daf0c56bb59777c525670ae2dee3e", - "gradient.pipeline.running.gradient-stop-1": "0c187d1ebb015ec66bac356009795316f84807ae", - "gradient.pipeline.running.gradient-stop-2": "d1251f86c91bd0f29d8ac8cfa01056bc307156b4", - "gradient.pipeline.running.gradient-stop-3": "b09bdab234cdf7c204cb153ec94ea0a9b2bb4976", - "gradient.pipeline.arrows.gradient-stop-1": "0465e74baaf10a12f23b9eaa40fc1ae08485a0d5", - "gradient.pipeline.arrows.gradient-stop-2": "4cadc4f9a5e66f28eaa27fb54b6ce538ea430c7d", - "gradient.pipeline.arrows.gradient-stop-3": "5af16d4ae6b63ff8dcf3254009e712db4ac1a3f9", - "gradient.pipeline.card.background.gradient-from": "8404a4e146121987426681accb996902179fad72", - "gradient.pipeline.card.background.gradient-to": "037bbd7fb410d05993a48594626a7babb32605a6", - "gradient.pipeline.card.border.gradient-from": "342926ec7179e7cbe133981050c1e1e41d94ed7a", - "gradient.pipeline.card.border.gradient-to": "8e39428cc5ce20f3593127f2ef71f180b38ee9a4", - "gradient.pipeline.widget.number.gradient-from": "dc372cb50eedf6023cd80cb6a4520e5fdf91358b", - "gradient.pipeline.widget.number.gradient-to": "e505c8d9dd140f5a671c1291ffd519fcff5c3e2c", - "gradient.pipeline.widget.blob.big.gradient-from": "b518524b25a5b95804988c640c4d52ba7ebd4599", - "gradient.pipeline.widget.blob.big.gradient-to": "80a493af10245e0ebbc6a51f5452d61d836a3754", - "gradient.pipeline.widget.blob.small.gradient-from": "8d7be31e69f0e54dd2e493d9051c2268078ea5ed", - "gradient.pipeline.widget.blob.small.gradient-to": "198813cf6242881ce0e0d030ca22ef31f9190d13", - "iconStrokeWidth.xxs": "751ceaa292e27736009bef894b62f83c1b2d66d8", - "iconStrokeWidth.xs": "77ca59c88a0b47972554b1db3f6469a230a6ad8c", - "iconStrokeWidth.sm": "e445b22e1f18af07002a1dc76f900dada5477383", - "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", - "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", - "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "component.dropdown.item.text": "2f1f1ea9d368ec8be380803506fbf657cabe6ac0" - }, - "group": "mode" - }, - { - "id": "9fb64e70b44bb178e7fa56a196dc42d9954f86a5", - "name": "dark-high-contrast", - "$figmaStyleReferences": { - "shadow.0": "S:a2ed3778198048e91067a04633c27ba20e9fcbec,", - "shadow.1": "S:947694488889f7271c428950bec937ee79f8a536,", - "shadow.2": "S:70378f090cb66b03ee4b18e25742743934f37757,", - "shadow.3": "S:aa7e83fd47e75f5a1ae3e17f64417d5e9fcb96ae,", - "shadow.4": "S:5dfba690094db266c4ab7686fccbbedd8c16385f,", - "shadow.5": "S:d6752151a8dd3bd4b4bf12ad15a80c522f760731,", - "shadow.6": "S:da8e7b5b0f1352215fbaab66eff62a3e19d22b67,", - "shadow.inner": "S:2805cdc40176a4707d5cfc549b4c12e7ec4e74ff,", - "ring.focus": "S:062018f6483f54f1255b952aa1759b028d502ac3," - }, - "selectedTokenSets": { - "mode/dark/high-contrast": "enabled" - }, - "$figmaCollectionId": "VariableCollectionId:1340:156918", - "$figmaModeId": "1389:1", - "$figmaVariableReferences": { - "background.1": "633e5f77aa1bd1bd133852d8372b9c9f1231a9e4", - "background.2": "14e8d4b56cc273b508af8a2c58cb00e99e08d1d3", - "background.3": "33554ff11e1eab35e50aa3570f51d53f16f46d6a", - "text.1": "38382b9984a98f9d26692a7f2882dfb5c5d51825", - "text.2": "115f62efd02491e85a63dfd601b03725d3711f23", - "text.3": "1c7327f01cf759b17fd0523cb540afa8700c1dc7", - "text.accent": "0b3cd5357659e6542cca163ccfd96c0cac059203", - "text.success": "ee56057b81e6d0872a84ca6b29affc8911fe333e", - "text.danger": "c7e38d7c7afc899f4d40392dbd6bc5ed6580264d", - "text.warning": "b03334e4c9db4b76269e4be886df6c1abf74d0ca", - "border.1": "5ad2231a611605964ba70f80e7aabb48f04bc704", - "border.2": "9084bef359e38136e0dddac25a464896456a9b1a", - "border.3": "5ff5d5233f7cb0233ce7634bc480026668c818f6", - "border.focus": "8db219e896acc4d828aaaf4add646d96540a84ea", - "border.success": "b13758973865eab0b4d79028a48e457eae8bec47", - "border.danger": "33d53c1486021bb3c9edce4123b484a2aabc8de0", - "border.warning": "027e57e08a1edcaaa7fbe033902bb3f65497abb4", - "state.hover": "78426caca2a07ee56132762a720ae07e2810f03b", - "state.selected": "ef914056c9c9dbaef00fa8795702a3cb933ee761", - "state.disabled.text": "967ab1b863941c100f58cc55e611ee2709051f01", - "state.disabled.background": "7a192b5ddcc570f0c8e3a5dbfd54d780e2832bbd", - "state.disabled.border": "067fd26e80ad39a28f738a3b76d21d354092d551", - "component.accordion.title": "5e49d6ddf7f2b21724b474d4a5545256143dce54", - "component.accordion.description": "bc47401a69d07fa71f0371765ed940745fc7a5b9", - "component.accordion.chevron": "5dd530f96134323125031668d4ea98a36ea0de86", - "component.accordion.border": "0b3fcc0e02a2a86625b2b4a9cfeebfad9486bc3a", - "component.alert.default.title": "d8e59ed205399e9727b0dcecdccad3d8daaaa622", - "component.alert.default.description": "f9ec7fec91747435740f000fb642f9009e8fc2db", - "component.alert.default.background": "7fbbdfcc33a3051394f89675798db2159741a5fc", - "component.alert.default.border": "549692bf2f70f6b40c7d55259f8890189aa6cc98", - "component.alert.danger.title": "c8da1cdbba8e0f86edda5fd3869f6186d53881ca", - "component.alert.danger.description": "366849405bd53c78f0b73d72585034a52f05d9a7", - "component.alert.danger.background": "5756a9bdba027993a9879b32ed129e3034028cdf", - "component.alert.danger.border": "a1a3be9eefab6edf2e996a46537872680dc45a09", - "component.avatar.text": "23018f4c7f22c4afb3b7e49f585a1fbb591209de", - "component.avatar.background": "57703fddbd26d363509fdba3aea037bd2f515ee0", - "component.avatar.border": "d651f4cb9082aa4d6e6af2c5abab700d683a5c85", - "component.badge.default.text": "ab90828e3b8c6adce5dc10bf85107b001b958e95", - "component.badge.default.background": "706b070b298e2d2a97665baf7af05187eefeb4fe", - "component.badge.default.border": "a935a2968ca4ecfb8cc58a18f31ae8fe65eb516b", - "component.badge.neutral.text": "82d39f1786c4371303ae21e4c02db79989c54e36", - "component.badge.neutral.background": "f5480b1a2b648fdb0561acda7515c38271cfb04b", - "component.badge.neutral.border": "00f05792ddf6e53bff79346df6a34144426d50e0", - "component.badge.success.text": "71014a6138e8747257a21144f8114b906cfe0f0a", - "component.badge.success.border": "190589c6021debb7bb676f05ac7f063c237fd4aa", - "component.badge.success.background": "177eb9f406784ddb958232cd643ebbb3490a53d4", - "component.badge.danger.text": "6c0c04f17c2bc0ee085d09bf0f205dcbc66c1e17", - "component.badge.danger.border": "6bb014acbbd68a796ed0c4d8c4f73e8e9e619923", - "component.badge.danger.background": "4162b10332d17800585d97ed45e45d69c2006808", - "component.badge.warning.text": "8581620d95e5b92a8c85341ebf63f21fcf7133d0", - "component.badge.warning.border": "71cb519182108ac72ffef823935546e4bff62bbc", - "component.badge.warning.background": "74c13457a85684a054426bd833859fe93eaec978", - "component.badge.running.text": "0b0c1be217e557a5b14c1cb25e988e4ac6d40583", - "component.badge.running.border": "27d3c48d3c316bc4f980282759b5e82f8aaaf49d", - "component.badge.running.background": "a85fddc26baf586ac7ba79e381e5f8fefca87c65", - "component.badge.merged.text": "a83d66ef53e8a094a62f2b32a4d17e58d552b1ef", - "component.badge.merged.border": "755392bca643af0a3fe5492069881a870aa11dc3", - "component.badge.merged.background": "4f4c81b1fe43bfe0d721a22d0aeb93079776cf6d", - "component.badge.ai.text": "bb4daee92817073da0366090742d0a17babb5728", - "component.badge.ai.background": "c5764a2304bf0e8a153c9ce0da20827696a76b41", - "component.breadcrumb.item-inactive": "2f009ca6cafb50c994205c9df02ee2d2503f7d23", - "component.breadcrumb.item-current": "7b502cc2e72f66bb501fdc5f480d0133d1b3841a", - "component.breadcrumb.separator": "1cd28c3ff97ab2f529a19c632d89dd44af0aad80", - "component.btn.primary.text": "9d32f032da93c9aab8b3bc6087c26aa12f507ad7", - "component.btn.primary.background": "410d584a3469233e067d0592a366fdebbe1049bc", - "component.btn.primary.border": "1491ac71f9681307c2d6528e443504e079061988", - "component.btn.secondary.text": "12c93d1b08ae50645a3b8f59256fcec00a4f84ca", - "component.btn.secondary.background": "86434310c95f5c055783011cc0e7c7918f67a35c", - "component.btn.secondary.border": "66bda91f87154efd3cefdc7a634ecb8afa8cd285", - "component.btn.outline.unselected.text": "9cf2c495178d6fdfd8f1360376242acbd4dc5e75", - "component.btn.outline.unselected.icon": "af1510c6050f671219d2089e0e59d5febb4422d6", - "component.btn.outline.unselected.border": "2b3013d632e566301e9f5f1a5cbb6aab4e7ec53f", - "component.btn.outline.selected.text": "13b50089245dec1899db2012412efcf649e2c0b4", - "component.btn.outline.selected.icon": "2bdf2c92b22e814109f4e05ec4d41d92f934a15d", - "component.btn.outline.selected.border": "ef10f4599233f62203def151b386013ddaa63afb", - "component.btn.ghost.unselected.text": "43fa10dd413cddb9a2e2142ead9ca3b4a91b49a6", - "component.btn.ghost.unselected.icon": "5ce332f51238b374104ec53067d685c26882f38e", - "component.btn.ghost.selected.text": "74cbf3b86016e05517f8c7bc64652281c940363e", - "component.btn.ghost.selected.icon": "1d8c6206a136d9c176ffba600a1e94618c4b96f8", - "component.btn.success.text": "52a336440e013bbc849ad67a43d0e136cf4f0b51", - "component.btn.success.background": "608ca6930129b4e5ff36d7f38508ae2537b66629", - "component.btn.success.border": "1f74d9985a10fe20e0acc4647cf4949005e9d4f1", - "component.btn.success.state.hover": "d05bde38a6539a11e3ccd87345af113ccd6bd113", - "component.btn.success.state.active": "f6e48e68dba6c32de27fadcaca3d1959f081d2e5", - "component.btn.danger.text": "49c02562362b8f775cfc2c4c614ecd646dcc2716", - "component.btn.danger.background": "0b015d0a4f456781969d7ffaf135c7c2a8858440", - "component.btn.danger.border": "9f99ee56f1ae2b7eb2f98300b83d4f53b15fd763", - "component.btn.danger.state.hover": "e7756e1d022d893bfa5fdd619f181d26fb7b117b", - "component.btn.danger.state.active": "23c7c85ff6104e098a208b6f4b86c1d0eef0f543", - "component.btn.ai.text": "380368600319fa12b73538ff52acd9d0e977e367", - "component.btn.ai.background": "8c9a1d07e05837f50588b642a4b51462f883887d", - "component.card.background": "256878745d17a46b7159919d8e30a3e960f59575", - "component.card.border": "3688ffcc56c4fb44dc0e221b8e09a958fd9e509d", - "component.dialog.title": "e6e0ff2bf1f3802eb21492e8b833c5f5e679cd82", - "component.dialog.description": "301509fcf2faac8497b2136f7879b9b0b3c64433", - "component.dialog.background": "ff2918d712798a4b487b6f6e5befe7b3eef59883", - "component.dialog.border": "4a6cb3732ad8b36bb9de0d15cbed575c87996088", - "component.dialog.backdrop": "893e60ed671f891241a3084707057185398446ed", - "component.dropdown.background": "09b2dca27ba9efabfe838d713a14ca6e6ac46685", - "component.dropdown.border": "c8cdfff63f4e142d651070ff1056b69a638aaab7", - "component.dropdown.item.delete.text": "864396a8c9b5df0fd948ded7d520ded936d74a8b", - "component.dropdown.item.delete.state.hover": "308dc9064be8e754f8385b0e8ff5489563d7c984", - "component.diff.grey": "43bf4f466a6e231c9951a639313740579c29d824", - "component.diff.add-content": "eb4eccf789a2bda6f3d3875c3310ef0579fd3555", - "component.diff.add-lineNumber": "61583aa6e36aaddd0be173a4a082a450e2522d3a", - "component.diff.add-content-highlight": "ad544fc527ca8b4c297993fe0722b8a7a96ef903", - "component.diff.add-widget": "c1def698ab707194d8f1558e16b05c55d50920d9", - "component.diff.add-widget-color": "a27c504a1f1151974669cf06054c1d0f704ecc38", - "component.diff.del-content": "465e6eb3613967f489cfee4b04f0b283b9e88f91", - "component.diff.del-lineNumber": "4cbe83072b6781d6e3edff645ccb2fb7426c5628", - "component.diff.del-content-highlight": "3e635e401a1a37a259211d093bef70e3a0c507ea", - "component.diff.plain-content": "984456faee2f6a5c202cfd76078ef5b6cd3a05f1", - "component.diff.plain-lineNumber": "6a5550287e7c58afa9d2375c5bfdca4d6c214cf1", - "component.diff.plain-lineNumber-color": "7c1186d20725b53cbefe87f56c5bc6db4e77d898", - "component.diff.empty-content": "712d93a0c1bc9503abda77ae50d624bd328c0057", - "component.diff.hunk-content": "79ad0dfc599f9bc246a6618c85bc1dc59744537f", - "component.diff.hunk-lineNumber": "bccfad80b84e35edf4b47af2ca30057eba2b2ebf", - "component.diff.hunk-content-color": "68c5d6a95d475f7275062e3eb58dba464df3d059", - "component.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", - "component.input.text": "df946237ac2ea0d177f3f2818a673fdf876944c7", - "component.input.placeholder": "85d7632aba08fd476083e508cc2660b17c30981a", - "component.input.icon": "75ca1f38c16fbd5e2697a36c74b0b1dd01f3f5c0", - "component.input.background": "585327333fbbf97bb8db21fbc613025719ca8a87", - "component.input.border": "911dac823dac21c9ccf4e35e10b2eb82a9c6f0ef", - "component.label.text": "80403cd630bba01a064550d9783313227b1d010f", - "component.link.default": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", - "component.link.visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", - "component.nav-tabs.unselected.text": "c085805657bb81574da85d3cb29f89ca08980daa", - "component.nav-tabs.selected.text": "16aa825c8038347237cbe91f7eeece4d2a8d1a2b", - "component.nav-tabs.selected.border": "3427b967112facd59f09fa310c863d7193ea4ffe", - "component.nav-tabs.border": "791d71ca187934e4b98ddff04bc9447a10358699", - "component.nav-tabs.background": "b92549e37390005f2bd1cfce06f9dfb8f67e39e0", - "component.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", - "component.pipeline.card.background": "f207dcff97f000326c4f28293fdbd2830860ce54", - "component.pipeline.card.border": "aa9d9528b1e8e25f9e6dae387b76d9beb2de35a8", - "component.pipeline.card.running.border": "179c0e4d47becc896eb1fbb7f9e8461779b3f680", - "component.pipeline.card.error.border": "1c0b41b41e25250cfb65bdb539bd573be66b0d00", - "component.pipeline.card.completed.border": "14251a54f431aae617af6b9577454a0e212ad76f", - "component.pipeline.card-canvas.1.background": "01bd392d5ddafe85e5575296d08254e52054ba8d", - "component.pipeline.card-canvas.1.border": "b9510abf89f82fb7b779bb730caa1bf393c83bd4", - "component.pipeline.card-canvas.2.background": "87b6b3e65b995fc4180dfb7bf613efb0098d1fff", - "component.pipeline.card-canvas.2.border": "1f9fa1e95134d87995a21738a3877f1c15158e5e", - "component.pipeline.background.dotes": "2784742abff27552789cdd4f2b51cab1331abb4a", - "component.sidebar.background": "8b6619fafae38e8ad94fffd488f2cf53d3c31d76", - "component.sidebar.border": "2263230eae16609a3d95ba5863aa3cc343010131", - "component.sidebar.separator": "a0c913dd38e81e3b2c20ee17642433da6da5f147", - "component.sidebar.hover": "4925b4511178bd2853a6b7b329683d036508aec1", - "component.sidebar.selected": "31f335ecde0aedb12407221718069f5b13574d41", - "component.sidebar.item.unselected.text": "9609e0ad8d79127a3784876f0204d02964f09e43", - "component.sidebar.item.unselected.icon": "5afba128858cf7494fb8a326a435860faf00b0ee", - "component.sidebar.item.selected.text": "5f1daf88cebaea07bd4c2a57c862638340827496", - "component.sidebar.item.selected.icon": "18325fda8139122c4a7cdf6debe2cd1f25d120b7", - "component.sidebar.logo.text": "a3ffa09fdf368badab24aecdbd26709ed7b3c2b2", - "component.sidebar.logo.icon": "c572d382a2018718d719f6a427d31fc9a42f57bd", - "component.sidebar.search.background": "33822e390046e5ec8f71a07fc041514a28778e74", - "component.sidebar.search.border": "f2044f7e8cf503f8809a48a14a88c5ef6466176f", - "component.sidebar.search.placeholder": "665cc00a32edd27b62371ee820d3c3250e629e78", - "component.sidebar.search.btn.background": "70c80e61b9ec397214c809c51de4fdf8177185da", - "component.sidebar.search.btn.border": "1c434c7d16cd4ba880e2d57520c90bc37f6b3879", - "component.sidebar.search.btn.text": "589c7d0162d67165a8752ea54a2c63bb63ee3ad7", - "component.sidebar.footer.username": "68298a8f471bb04f2f0305d9433a2b59613abd8d", - "component.sidebar.footer.data": "6a681d2abb90c2b62a39e20a1d29419c5086f01a", - "component.scrollbar.thumb": "9818c03d003381a966d08d3c6da75af8468bb8ef", - "component.selection.unselected.item": "7a7cad2aa2d6b2803a52eb26c78ea177b84ce241", - "component.selection.unselected.background": "a63ba949d12afc99020e77f95d0538bddba457b3", - "component.selection.unselected.border": "6ef997ebe03bb209ca568a648eb0cc8be69746a6", - "component.selection.selected.item": "f1f43c8acf2d4da10ee2e0d164d4dbe955816018", - "component.selection.selected.background": "1d1bbb9958f047744b66861fd8bd75dc2726dc25", - "component.selection.selected.border": "44b31378ed175b87b50ebad88cfd4a73a66ab9d5", - "component.separator.background": "9f4c82c269bc5aff0fa55d52a0ed59f914057be0", - "component.slider.track.base": "34dc3b5be6733e38f6c28d24d4f3699b2d7ea6f3", - "component.slider.track.progress": "38d8cac26c1cfb91293198eee25299e4aef9c1d8", - "component.slider.track-segments.base": "cb752791a51ff48c6d481426a1affb15048a152a", - "component.slider.track-segments.progress": "a7943fda0e4646e7018046354a9be54cf7d03075", - "component.slider.handle.background": "5c423cc3b672079f1e7dc0d1c8170dade368711a", - "component.slider.handle.border": "94347a2ed2900445946d18c653fb179b8602c533", - "component.status-indicator.completed": "c4c3bce2d28c84c25db4f444f9144b94523737b7", - "component.status-indicator.cancelled": "5aa15732d9ebc41f14b111e252819e2e36617124", - "component.status-indicator.warning": "4dc6e5ea4c736869aee4ebd0ee006f2d73861423", - "component.status-indicator.running": "07ce029f27cf34bf8d6fe3b9a6a600be01c8947e", - "component.status-indicator.merged": "d9eb24404452e6cc2617094fe8f29c69a760ea55", - "component.status-indicator.action-required": "2f1b8543c44b5d93cebddd80b5a9ee2d60fdb146", - "component.status-indicator.waiting": "62f68d300850ce20cf0be8c07d82a41bf1a56ecd", - "component.switch.unselected.thumb": "94d5f0b3a97924583ff697d56db74727b133ba95", - "component.switch.unselected.background": "a8ae87c7bb7ba7f4bfa71f2fdd5f404d19c3a1be", - "component.switch.selected.thumb": "cf6964ec11d69899d5dd39e82d322ea544367e90", - "component.switch.selected.background": "bba05ff96eae08a4adc31a6406e417022d9e5dad", - "component.table.header.text": "65cfc045aa01e3d3eeae4a227cac9be150839db8", - "component.table.header.background": "137c4f2e14bb8cadaf6f900a443700fe928a1fcd", - "component.table.row.alternate-background": "2863f92db433f88f24f62dda4cc9fd50c48130be", - "component.table.row.border": "445d945c4fe4426c3b73cf6f8fe0a572e4525798", - "component.table.cell.text": "73a28f25ba54aff507877ecbfd9942a6ea9f3cea", - "component.tabs.background": "8689ee01219675fb951a2517c2397fba52487971", - "component.tabs.border": "e5bc8cfac224234021c11b381f505da5fcac84ed", - "component.tabs.item.unselected.text": "4af8a5b79c55621f1ed11a7b6fc605657934dc1e", - "component.tabs.item.unselected.background": "fa041cdeb34ba5da6f1bd4cd6d8bb4b8273e0e70", - "component.tabs.item.unselected.border": "79b1a6fe839c012efec923edf40b3bfa2bcdab19", - "component.tabs.item.selected.text": "d048f7001829ff9949b2712b8ca746c8f3f49767", - "component.tabs.item.selected.background": "33269e9854800d565f728ba2a85c5cd3e549b5e8", - "component.tabs.item.selected.border": "11b7e5aeb83fd2f5d968021c750af2ceb5ba5841", - "component.tag.blue.text": "b35e0aebd9d1ebf0fd5d24bbd5ad184db9e11b86", - "component.tag.blue.background": "072fc2901d8ad0199c07bc339d46db086c7b0379", - "component.tag.blue.background-subtle": "67307c003cb91d76e00ef0f3777318e25efac628", - "component.tag.blue.border": "680fb2a6a11251e2619789595cd28c7861aaa530", - "component.tag.brown.text": "b48491f46d15503df99e2d8d9394aa552d09461b", - "component.tag.brown.background": "90b0ee0df4ebe7f06bfd07a7acbe812a45d621a4", - "component.tag.brown.background-subtle": "134ffd2a91ef027e197db6a5331d2726bc080ad6", - "component.tag.brown.border": "675776ff7a30540c297579d72b7f00779d778c14", - "component.tag.cyan.text": "6bf9361c5931ba40663d2c412f28f15382498517", - "component.tag.cyan.background": "83107c8cff314c553ed2cea5c9af1ff3356485e5", - "component.tag.cyan.background-subtle": "7f2724127eebb6e01713828af3736cd2e3734436", - "component.tag.cyan.border": "3286065f931626298e8f3dab2328297e83a79771", - "component.tag.green.text": "699a30f1d5f76ed4e631faa3da63be65e88af039", - "component.tag.green.background": "8b06c35974700260dff1a712c0a3976d4ddb0df5", - "component.tag.green.background-subtle": "c4f47c34772d8367bc3b00645420511f37aaecad", - "component.tag.green.border": "db85545b7d00ef9e199bf863dcdcc2be520f520c", - "component.tag.indigo.text": "d641d4626278e4d17ff4d98202112da9580a6b89", - "component.tag.indigo.background": "bb4af9a068f716c2f0b4f77c228b88009ac049c9", - "component.tag.indigo.background-subtle": "877e3b4ee6040ed581a8349c8fdb5e49ed36dfe0", - "component.tag.indigo.border": "885fdb80c956855c30666c660d5839dc357d1f5f", - "component.tag.lime.text": "763399447b243f761b7cce55f7dcf2fbb1797ee3", - "component.tag.lime.background": "d51cede4c823e16ac204bcaddb65d49c325c3cbe", - "component.tag.lime.background-subtle": "556934df078200ab014c762eeaa04deecd05422e", - "component.tag.lime.border": "fbb53e37ef7cb87cfae5298e69a5ffe4f99a23a7", - "component.tag.mint.text": "d3d406bffbadb1b894e4bb6aef7b1f5a1945094c", - "component.tag.mint.background": "04568a7d0bff5fbc11600bf840916f5451a0fe62", - "component.tag.mint.background-subtle": "1d39716bceda8510beb02e19847c391523e3690a", - "component.tag.mint.border": "c703cecfc8bd82c593dc9d81ce18748edd6ecf4d", - "component.tag.orange.text": "ba407492439b283fedf30a8ab8b16774c0931a9f", - "component.tag.orange.background": "ef766412f340a4aa62c8888a6fdfb2890f3ea207", - "component.tag.orange.background-subtle": "05e823662de8b1f99a062cea3c0f24df69b29362", - "component.tag.orange.border": "2f3023f2311c12acb44cdd28beb888f64d6d2183", - "component.tag.pink.text": "83b73e0e328485233004d42baa8a0948ff2198b0", - "component.tag.pink.background": "b23a211249a71f32bf15757316d0596fdb395962", - "component.tag.pink.background-subtle": "c144f19e07b839d68f20eb5c51ebd94e0f333a82", - "component.tag.pink.border": "b4874a81a08261362f3d8237833b80e68a851b76", - "component.tag.purple.text": "9869d8aad416ac3f9e530b0d62b05dda66906de4", - "component.tag.purple.background": "bc59008310427ba5883f71079b19b8cb4c6dd862", - "component.tag.purple.background-subtle": "a3598602d6e6b1d03f638f1a941801f147f4657a", - "component.tag.purple.border": "de1d577bd170613ab46460e9c50ca8de420152f6", - "component.tag.red.text": "aca8c1832317ac859b4263769855f423840a8569", - "component.tag.red.background": "9008e05416a00096c234511275b92be7204363b6", - "component.tag.red.background-subtle": "986bdd3f8d16488337ca9f46b71b04195d7578b0", - "component.tag.red.border": "f7f9067262546ee6eb77955e38aa0a451fc7f98a", - "component.tag.violet.text": "2ab996ff3465a0b97dee4d7c5606df3d46ab2a07", - "component.tag.violet.background": "4c9b9c2658479fc0e56894975a9b9b8d76df5b00", - "component.tag.violet.background-subtle": "fded9a84a20755592f57f081ebb594bfbaf8cfb3", - "component.tag.violet.border": "77de89ef1ab5168b7ff5e329bde8608047149a04", - "component.tag.yellow.text": "cadfcb4d0fe72fd5828cd764d54198026520e10c", - "component.tag.yellow.background": "a29464cd2a618a77586cb8760478a4d82b12b3ca", - "component.tag.yellow.background-subtle": "1b262be32c5779f024da5ad5696c805a83eb96c7", - "component.tag.yellow.border": "b595821fd5ef662361820415bb878e8ef4ab8939", - "component.tag.gray.text": "e7608c51a2421de226afebbcb909180c8a0cdb5a", - "component.tag.gray.background": "9bcc758ef67bbaac88637e99a702da5d7f7a3144", - "component.tag.gray.background-subtle": "76dfa99dd57cbaf2e7cbec9511cd1e1ddd92ee0e", - "component.tag.gray.border": "02e03f32969f9e6120bb6c7a3b781a5446f1bef1", - "component.toast.default.title": "f791d24eeab59c12cf4aad84f4677099bb4a01c1", - "component.toast.default.description": "6000da4ada3b9445750fb4b7b990726df120c271", - "component.toast.default.background": "5b9e9ea5b7de018a92d3deb902257e4e2bbb49f9", - "component.toast.default.border": "f74755bc7843dc9d7c788c54178b7ce3b83dea3f", - "component.toast.danger.title": "b5ad1c43fcee32eb251b980e884e77ea137c3369", - "component.toast.danger.description": "d281b5c13f2a4a293042f52b168e39f8bec398da", - "component.toast.danger.background": "8ba5c70e994ab44aeb72b3ed7f26ca9646d59cc0", - "component.toast.danger.border": "7f5252c13b96825084248b367f36377bb003ca96", - "component.tooltip.text": "b79a7ec441cdc7c6eee9313602f081d063327c1d", - "component.tooltip.background": "a35d0240a1c4de13350e6a4770dd1703a90a9227", - "component.tooltip.border": "d57b38546841813d61da59d66e98a8921f2f3ee7", - "shadow-color.0": "c0c282f63e107374a732d74c1742cf60d52e6e5c", - "shadow-color.1": "1ec33a9c84353664d23cd23d6c033d1c330c149a", - "shadow-color.2": "6200a000044d8dbee421ed4afb0c3ff42febb6ef", - "shadow-color.3": "77d99afb159d8e193a82f615dd84de3214e00703", - "shadow-color.4": "2b2e0307d252bdc6db53a23ce2cc2e9bb4f6b914", - "shadow-color.5": "5a6c707240bab54cb4403f47262abfe0756efc9a", - "shadow-color.6": "928283d00759150575a8f155da90180a582be438", - "shadow-color.inner": "6cb5a98fba0b13e952859b9f023259b5c06cfd1a", - "gradient.ai.gradient-stop-1": "8db516caa68afc5b8fdd6fc6e5a9bad7715c5f26", - "gradient.ai.gradient-stop-2": "33930f41665251a281973a37847f357480aedca3", - "gradient.ai.gradient-stop-3": "c9e14c3db8e622b10b1cd3e860115cd6f876ae49", - "gradient.ai.gradient-stop-4": "6e7d0850d7eb1e699f87b41f6ffd4cb8d73d72e8", - "gradient.skeleton.gradient-stop-1": "5427016b990b75f0d1ce60eef8cb9b96d75fbde2", - "gradient.skeleton.gradient-stop-2": "01442c311e6da751c30c3518fc32970306767274", - "gradient.skeleton.gradient-stop-3": "7fda4c834a3daf0c56bb59777c525670ae2dee3e", - "gradient.pipeline.running.gradient-stop-1": "0c187d1ebb015ec66bac356009795316f84807ae", - "gradient.pipeline.running.gradient-stop-2": "d1251f86c91bd0f29d8ac8cfa01056bc307156b4", - "gradient.pipeline.running.gradient-stop-3": "b09bdab234cdf7c204cb153ec94ea0a9b2bb4976", - "gradient.pipeline.arrows.gradient-stop-1": "0465e74baaf10a12f23b9eaa40fc1ae08485a0d5", - "gradient.pipeline.arrows.gradient-stop-2": "4cadc4f9a5e66f28eaa27fb54b6ce538ea430c7d", - "gradient.pipeline.arrows.gradient-stop-3": "5af16d4ae6b63ff8dcf3254009e712db4ac1a3f9", - "gradient.pipeline.card.background.gradient-from": "8404a4e146121987426681accb996902179fad72", - "gradient.pipeline.card.background.gradient-to": "037bbd7fb410d05993a48594626a7babb32605a6", - "gradient.pipeline.card.border.gradient-from": "342926ec7179e7cbe133981050c1e1e41d94ed7a", - "gradient.pipeline.card.border.gradient-to": "8e39428cc5ce20f3593127f2ef71f180b38ee9a4", - "gradient.pipeline.widget.number.gradient-from": "dc372cb50eedf6023cd80cb6a4520e5fdf91358b", - "gradient.pipeline.widget.number.gradient-to": "e505c8d9dd140f5a671c1291ffd519fcff5c3e2c", - "gradient.pipeline.widget.blob.big.gradient-from": "b518524b25a5b95804988c640c4d52ba7ebd4599", - "gradient.pipeline.widget.blob.big.gradient-to": "80a493af10245e0ebbc6a51f5452d61d836a3754", - "gradient.pipeline.widget.blob.small.gradient-from": "8d7be31e69f0e54dd2e493d9051c2268078ea5ed", - "gradient.pipeline.widget.blob.small.gradient-to": "198813cf6242881ce0e0d030ca22ef31f9190d13", - "iconStrokeWidth.xxs": "751ceaa292e27736009bef894b62f83c1b2d66d8", - "iconStrokeWidth.xs": "77ca59c88a0b47972554b1db3f6469a230a6ad8c", - "iconStrokeWidth.sm": "e445b22e1f18af07002a1dc76f900dada5477383", - "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", - "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", - "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "component.dropdown.item.text": "2f1f1ea9d368ec8be380803506fbf657cabe6ac0" - }, - "group": "mode" - }, - { - "id": "465affa895afefa955b28d7f6e4f4fb8ac1216f0", - "name": "dark-protanopia", - "$figmaStyleReferences": { - "shadow.0": "S:a2ed3778198048e91067a04633c27ba20e9fcbec,", - "shadow.1": "S:947694488889f7271c428950bec937ee79f8a536,", - "shadow.2": "S:70378f090cb66b03ee4b18e25742743934f37757,", - "shadow.3": "S:aa7e83fd47e75f5a1ae3e17f64417d5e9fcb96ae,", - "shadow.4": "S:5dfba690094db266c4ab7686fccbbedd8c16385f,", - "shadow.5": "S:d6752151a8dd3bd4b4bf12ad15a80c522f760731,", - "shadow.6": "S:da8e7b5b0f1352215fbaab66eff62a3e19d22b67,", - "shadow.inner": "S:2805cdc40176a4707d5cfc549b4c12e7ec4e74ff,", - "ring.focus": "S:062018f6483f54f1255b952aa1759b028d502ac3," - }, - "selectedTokenSets": { - "mode/dark/default-protanopia": "enabled" - }, - "$figmaCollectionId": "VariableCollectionId:1340:156918", - "$figmaModeId": "1389:2", - "$figmaVariableReferences": { - "background.1": "633e5f77aa1bd1bd133852d8372b9c9f1231a9e4", - "background.2": "14e8d4b56cc273b508af8a2c58cb00e99e08d1d3", - "background.3": "33554ff11e1eab35e50aa3570f51d53f16f46d6a", - "text.1": "38382b9984a98f9d26692a7f2882dfb5c5d51825", - "text.2": "115f62efd02491e85a63dfd601b03725d3711f23", - "text.3": "1c7327f01cf759b17fd0523cb540afa8700c1dc7", - "text.accent": "0b3cd5357659e6542cca163ccfd96c0cac059203", - "text.success": "ee56057b81e6d0872a84ca6b29affc8911fe333e", - "text.danger": "c7e38d7c7afc899f4d40392dbd6bc5ed6580264d", - "text.warning": "b03334e4c9db4b76269e4be886df6c1abf74d0ca", - "border.1": "5ad2231a611605964ba70f80e7aabb48f04bc704", - "border.2": "9084bef359e38136e0dddac25a464896456a9b1a", - "border.3": "5ff5d5233f7cb0233ce7634bc480026668c818f6", - "border.focus": "8db219e896acc4d828aaaf4add646d96540a84ea", - "border.success": "b13758973865eab0b4d79028a48e457eae8bec47", - "border.danger": "33d53c1486021bb3c9edce4123b484a2aabc8de0", - "border.warning": "027e57e08a1edcaaa7fbe033902bb3f65497abb4", - "state.hover": "78426caca2a07ee56132762a720ae07e2810f03b", - "state.selected": "ef914056c9c9dbaef00fa8795702a3cb933ee761", - "state.disabled.text": "967ab1b863941c100f58cc55e611ee2709051f01", - "state.disabled.background": "7a192b5ddcc570f0c8e3a5dbfd54d780e2832bbd", - "state.disabled.border": "067fd26e80ad39a28f738a3b76d21d354092d551", - "component.accordion.title": "5e49d6ddf7f2b21724b474d4a5545256143dce54", - "component.accordion.description": "bc47401a69d07fa71f0371765ed940745fc7a5b9", - "component.accordion.chevron": "5dd530f96134323125031668d4ea98a36ea0de86", - "component.accordion.border": "0b3fcc0e02a2a86625b2b4a9cfeebfad9486bc3a", - "component.alert.default.title": "d8e59ed205399e9727b0dcecdccad3d8daaaa622", - "component.alert.default.description": "f9ec7fec91747435740f000fb642f9009e8fc2db", - "component.alert.default.background": "7fbbdfcc33a3051394f89675798db2159741a5fc", - "component.alert.default.border": "549692bf2f70f6b40c7d55259f8890189aa6cc98", - "component.alert.danger.title": "c8da1cdbba8e0f86edda5fd3869f6186d53881ca", - "component.alert.danger.description": "366849405bd53c78f0b73d72585034a52f05d9a7", - "component.alert.danger.background": "5756a9bdba027993a9879b32ed129e3034028cdf", - "component.alert.danger.border": "a1a3be9eefab6edf2e996a46537872680dc45a09", - "component.avatar.text": "23018f4c7f22c4afb3b7e49f585a1fbb591209de", - "component.avatar.background": "57703fddbd26d363509fdba3aea037bd2f515ee0", - "component.avatar.border": "d651f4cb9082aa4d6e6af2c5abab700d683a5c85", - "component.badge.default.text": "ab90828e3b8c6adce5dc10bf85107b001b958e95", - "component.badge.default.background": "706b070b298e2d2a97665baf7af05187eefeb4fe", - "component.badge.default.border": "a935a2968ca4ecfb8cc58a18f31ae8fe65eb516b", - "component.badge.neutral.text": "82d39f1786c4371303ae21e4c02db79989c54e36", - "component.badge.neutral.background": "f5480b1a2b648fdb0561acda7515c38271cfb04b", - "component.badge.neutral.border": "00f05792ddf6e53bff79346df6a34144426d50e0", - "component.badge.success.text": "71014a6138e8747257a21144f8114b906cfe0f0a", - "component.badge.success.border": "190589c6021debb7bb676f05ac7f063c237fd4aa", - "component.badge.success.background": "177eb9f406784ddb958232cd643ebbb3490a53d4", - "component.badge.danger.text": "6c0c04f17c2bc0ee085d09bf0f205dcbc66c1e17", - "component.badge.danger.border": "6bb014acbbd68a796ed0c4d8c4f73e8e9e619923", - "component.badge.danger.background": "4162b10332d17800585d97ed45e45d69c2006808", - "component.badge.warning.text": "8581620d95e5b92a8c85341ebf63f21fcf7133d0", - "component.badge.warning.border": "71cb519182108ac72ffef823935546e4bff62bbc", - "component.badge.warning.background": "74c13457a85684a054426bd833859fe93eaec978", - "component.badge.running.text": "0b0c1be217e557a5b14c1cb25e988e4ac6d40583", - "component.badge.running.border": "27d3c48d3c316bc4f980282759b5e82f8aaaf49d", - "component.badge.running.background": "a85fddc26baf586ac7ba79e381e5f8fefca87c65", - "component.badge.merged.text": "a83d66ef53e8a094a62f2b32a4d17e58d552b1ef", - "component.badge.merged.border": "755392bca643af0a3fe5492069881a870aa11dc3", - "component.badge.merged.background": "4f4c81b1fe43bfe0d721a22d0aeb93079776cf6d", - "component.badge.ai.text": "bb4daee92817073da0366090742d0a17babb5728", - "component.badge.ai.background": "c5764a2304bf0e8a153c9ce0da20827696a76b41", - "component.breadcrumb.item-inactive": "2f009ca6cafb50c994205c9df02ee2d2503f7d23", - "component.breadcrumb.item-current": "7b502cc2e72f66bb501fdc5f480d0133d1b3841a", - "component.breadcrumb.separator": "1cd28c3ff97ab2f529a19c632d89dd44af0aad80", - "component.btn.primary.text": "9d32f032da93c9aab8b3bc6087c26aa12f507ad7", - "component.btn.primary.background": "410d584a3469233e067d0592a366fdebbe1049bc", - "component.btn.primary.border": "1491ac71f9681307c2d6528e443504e079061988", - "component.btn.secondary.text": "12c93d1b08ae50645a3b8f59256fcec00a4f84ca", - "component.btn.secondary.background": "86434310c95f5c055783011cc0e7c7918f67a35c", - "component.btn.secondary.border": "66bda91f87154efd3cefdc7a634ecb8afa8cd285", - "component.btn.outline.unselected.text": "9cf2c495178d6fdfd8f1360376242acbd4dc5e75", - "component.btn.outline.unselected.icon": "af1510c6050f671219d2089e0e59d5febb4422d6", - "component.btn.outline.unselected.border": "2b3013d632e566301e9f5f1a5cbb6aab4e7ec53f", - "component.btn.outline.selected.text": "13b50089245dec1899db2012412efcf649e2c0b4", - "component.btn.outline.selected.icon": "2bdf2c92b22e814109f4e05ec4d41d92f934a15d", - "component.btn.outline.selected.border": "ef10f4599233f62203def151b386013ddaa63afb", - "component.btn.ghost.unselected.text": "43fa10dd413cddb9a2e2142ead9ca3b4a91b49a6", - "component.btn.ghost.unselected.icon": "5ce332f51238b374104ec53067d685c26882f38e", - "component.btn.ghost.selected.text": "74cbf3b86016e05517f8c7bc64652281c940363e", - "component.btn.ghost.selected.icon": "1d8c6206a136d9c176ffba600a1e94618c4b96f8", - "component.btn.success.text": "52a336440e013bbc849ad67a43d0e136cf4f0b51", - "component.btn.success.background": "608ca6930129b4e5ff36d7f38508ae2537b66629", - "component.btn.success.border": "1f74d9985a10fe20e0acc4647cf4949005e9d4f1", - "component.btn.success.state.hover": "d05bde38a6539a11e3ccd87345af113ccd6bd113", - "component.btn.success.state.active": "f6e48e68dba6c32de27fadcaca3d1959f081d2e5", - "component.btn.danger.text": "49c02562362b8f775cfc2c4c614ecd646dcc2716", - "component.btn.danger.background": "0b015d0a4f456781969d7ffaf135c7c2a8858440", - "component.btn.danger.border": "9f99ee56f1ae2b7eb2f98300b83d4f53b15fd763", - "component.btn.danger.state.hover": "e7756e1d022d893bfa5fdd619f181d26fb7b117b", - "component.btn.danger.state.active": "23c7c85ff6104e098a208b6f4b86c1d0eef0f543", - "component.btn.ai.text": "380368600319fa12b73538ff52acd9d0e977e367", - "component.btn.ai.background": "8c9a1d07e05837f50588b642a4b51462f883887d", - "component.card.background": "256878745d17a46b7159919d8e30a3e960f59575", - "component.card.border": "3688ffcc56c4fb44dc0e221b8e09a958fd9e509d", - "component.dialog.title": "e6e0ff2bf1f3802eb21492e8b833c5f5e679cd82", - "component.dialog.description": "301509fcf2faac8497b2136f7879b9b0b3c64433", - "component.dialog.background": "ff2918d712798a4b487b6f6e5befe7b3eef59883", - "component.dialog.border": "4a6cb3732ad8b36bb9de0d15cbed575c87996088", - "component.dialog.backdrop": "893e60ed671f891241a3084707057185398446ed", - "component.dropdown.background": "09b2dca27ba9efabfe838d713a14ca6e6ac46685", - "component.dropdown.border": "c8cdfff63f4e142d651070ff1056b69a638aaab7", - "component.dropdown.item.delete.text": "864396a8c9b5df0fd948ded7d520ded936d74a8b", - "component.dropdown.item.delete.state.hover": "308dc9064be8e754f8385b0e8ff5489563d7c984", - "component.diff.grey": "43bf4f466a6e231c9951a639313740579c29d824", - "component.diff.add-content": "eb4eccf789a2bda6f3d3875c3310ef0579fd3555", - "component.diff.add-lineNumber": "61583aa6e36aaddd0be173a4a082a450e2522d3a", - "component.diff.add-content-highlight": "ad544fc527ca8b4c297993fe0722b8a7a96ef903", - "component.diff.add-widget": "c1def698ab707194d8f1558e16b05c55d50920d9", - "component.diff.add-widget-color": "a27c504a1f1151974669cf06054c1d0f704ecc38", - "component.diff.del-content": "465e6eb3613967f489cfee4b04f0b283b9e88f91", - "component.diff.del-lineNumber": "4cbe83072b6781d6e3edff645ccb2fb7426c5628", - "component.diff.del-content-highlight": "3e635e401a1a37a259211d093bef70e3a0c507ea", - "component.diff.plain-content": "984456faee2f6a5c202cfd76078ef5b6cd3a05f1", - "component.diff.plain-lineNumber": "6a5550287e7c58afa9d2375c5bfdca4d6c214cf1", - "component.diff.plain-lineNumber-color": "7c1186d20725b53cbefe87f56c5bc6db4e77d898", - "component.diff.empty-content": "712d93a0c1bc9503abda77ae50d624bd328c0057", - "component.diff.hunk-content": "79ad0dfc599f9bc246a6618c85bc1dc59744537f", - "component.diff.hunk-lineNumber": "bccfad80b84e35edf4b47af2ca30057eba2b2ebf", - "component.diff.hunk-content-color": "68c5d6a95d475f7275062e3eb58dba464df3d059", - "component.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", - "component.input.text": "df946237ac2ea0d177f3f2818a673fdf876944c7", - "component.input.placeholder": "85d7632aba08fd476083e508cc2660b17c30981a", - "component.input.icon": "75ca1f38c16fbd5e2697a36c74b0b1dd01f3f5c0", - "component.input.background": "585327333fbbf97bb8db21fbc613025719ca8a87", - "component.input.border": "911dac823dac21c9ccf4e35e10b2eb82a9c6f0ef", - "component.label.text": "80403cd630bba01a064550d9783313227b1d010f", - "component.link.default": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", - "component.link.visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", - "component.nav-tabs.unselected.text": "c085805657bb81574da85d3cb29f89ca08980daa", - "component.nav-tabs.selected.text": "16aa825c8038347237cbe91f7eeece4d2a8d1a2b", - "component.nav-tabs.selected.border": "3427b967112facd59f09fa310c863d7193ea4ffe", - "component.nav-tabs.border": "791d71ca187934e4b98ddff04bc9447a10358699", - "component.nav-tabs.background": "b92549e37390005f2bd1cfce06f9dfb8f67e39e0", - "component.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", - "component.pipeline.card.background": "f207dcff97f000326c4f28293fdbd2830860ce54", - "component.pipeline.card.border": "aa9d9528b1e8e25f9e6dae387b76d9beb2de35a8", - "component.pipeline.card.running.border": "179c0e4d47becc896eb1fbb7f9e8461779b3f680", - "component.pipeline.card.error.border": "1c0b41b41e25250cfb65bdb539bd573be66b0d00", - "component.pipeline.card.completed.border": "14251a54f431aae617af6b9577454a0e212ad76f", - "component.pipeline.card-canvas.1.background": "01bd392d5ddafe85e5575296d08254e52054ba8d", - "component.pipeline.card-canvas.1.border": "b9510abf89f82fb7b779bb730caa1bf393c83bd4", - "component.pipeline.card-canvas.2.background": "87b6b3e65b995fc4180dfb7bf613efb0098d1fff", - "component.pipeline.card-canvas.2.border": "1f9fa1e95134d87995a21738a3877f1c15158e5e", - "component.pipeline.background.dotes": "2784742abff27552789cdd4f2b51cab1331abb4a", - "component.sidebar.background": "8b6619fafae38e8ad94fffd488f2cf53d3c31d76", - "component.sidebar.border": "2263230eae16609a3d95ba5863aa3cc343010131", - "component.sidebar.separator": "a0c913dd38e81e3b2c20ee17642433da6da5f147", - "component.sidebar.hover": "4925b4511178bd2853a6b7b329683d036508aec1", - "component.sidebar.selected": "31f335ecde0aedb12407221718069f5b13574d41", - "component.sidebar.item.unselected.text": "9609e0ad8d79127a3784876f0204d02964f09e43", - "component.sidebar.item.unselected.icon": "5afba128858cf7494fb8a326a435860faf00b0ee", - "component.sidebar.item.selected.text": "5f1daf88cebaea07bd4c2a57c862638340827496", - "component.sidebar.item.selected.icon": "18325fda8139122c4a7cdf6debe2cd1f25d120b7", - "component.sidebar.logo.text": "a3ffa09fdf368badab24aecdbd26709ed7b3c2b2", - "component.sidebar.logo.icon": "c572d382a2018718d719f6a427d31fc9a42f57bd", - "component.sidebar.search.background": "33822e390046e5ec8f71a07fc041514a28778e74", - "component.sidebar.search.border": "f2044f7e8cf503f8809a48a14a88c5ef6466176f", - "component.sidebar.search.placeholder": "665cc00a32edd27b62371ee820d3c3250e629e78", - "component.sidebar.search.btn.background": "70c80e61b9ec397214c809c51de4fdf8177185da", - "component.sidebar.search.btn.border": "1c434c7d16cd4ba880e2d57520c90bc37f6b3879", - "component.sidebar.search.btn.text": "589c7d0162d67165a8752ea54a2c63bb63ee3ad7", - "component.sidebar.footer.username": "68298a8f471bb04f2f0305d9433a2b59613abd8d", - "component.sidebar.footer.data": "6a681d2abb90c2b62a39e20a1d29419c5086f01a", - "component.scrollbar.thumb": "9818c03d003381a966d08d3c6da75af8468bb8ef", - "component.selection.unselected.item": "7a7cad2aa2d6b2803a52eb26c78ea177b84ce241", - "component.selection.unselected.background": "a63ba949d12afc99020e77f95d0538bddba457b3", - "component.selection.unselected.border": "6ef997ebe03bb209ca568a648eb0cc8be69746a6", - "component.selection.selected.item": "f1f43c8acf2d4da10ee2e0d164d4dbe955816018", - "component.selection.selected.background": "1d1bbb9958f047744b66861fd8bd75dc2726dc25", - "component.selection.selected.border": "44b31378ed175b87b50ebad88cfd4a73a66ab9d5", - "component.separator.background": "9f4c82c269bc5aff0fa55d52a0ed59f914057be0", - "component.slider.track.base": "34dc3b5be6733e38f6c28d24d4f3699b2d7ea6f3", - "component.slider.track.progress": "38d8cac26c1cfb91293198eee25299e4aef9c1d8", - "component.slider.track-segments.base": "cb752791a51ff48c6d481426a1affb15048a152a", - "component.slider.track-segments.progress": "a7943fda0e4646e7018046354a9be54cf7d03075", - "component.slider.handle.background": "5c423cc3b672079f1e7dc0d1c8170dade368711a", - "component.slider.handle.border": "94347a2ed2900445946d18c653fb179b8602c533", - "component.status-indicator.completed": "c4c3bce2d28c84c25db4f444f9144b94523737b7", - "component.status-indicator.cancelled": "5aa15732d9ebc41f14b111e252819e2e36617124", - "component.status-indicator.warning": "4dc6e5ea4c736869aee4ebd0ee006f2d73861423", - "component.status-indicator.running": "07ce029f27cf34bf8d6fe3b9a6a600be01c8947e", - "component.status-indicator.merged": "d9eb24404452e6cc2617094fe8f29c69a760ea55", - "component.status-indicator.action-required": "2f1b8543c44b5d93cebddd80b5a9ee2d60fdb146", - "component.status-indicator.waiting": "62f68d300850ce20cf0be8c07d82a41bf1a56ecd", - "component.switch.unselected.thumb": "94d5f0b3a97924583ff697d56db74727b133ba95", - "component.switch.unselected.background": "a8ae87c7bb7ba7f4bfa71f2fdd5f404d19c3a1be", - "component.switch.selected.thumb": "cf6964ec11d69899d5dd39e82d322ea544367e90", - "component.switch.selected.background": "bba05ff96eae08a4adc31a6406e417022d9e5dad", - "component.table.header.text": "65cfc045aa01e3d3eeae4a227cac9be150839db8", - "component.table.header.background": "137c4f2e14bb8cadaf6f900a443700fe928a1fcd", - "component.table.row.alternate-background": "2863f92db433f88f24f62dda4cc9fd50c48130be", - "component.table.row.border": "445d945c4fe4426c3b73cf6f8fe0a572e4525798", - "component.table.cell.text": "73a28f25ba54aff507877ecbfd9942a6ea9f3cea", - "component.tabs.background": "8689ee01219675fb951a2517c2397fba52487971", - "component.tabs.border": "e5bc8cfac224234021c11b381f505da5fcac84ed", - "component.tabs.item.unselected.text": "4af8a5b79c55621f1ed11a7b6fc605657934dc1e", - "component.tabs.item.unselected.background": "fa041cdeb34ba5da6f1bd4cd6d8bb4b8273e0e70", - "component.tabs.item.unselected.border": "79b1a6fe839c012efec923edf40b3bfa2bcdab19", - "component.tabs.item.selected.text": "d048f7001829ff9949b2712b8ca746c8f3f49767", - "component.tabs.item.selected.background": "33269e9854800d565f728ba2a85c5cd3e549b5e8", - "component.tabs.item.selected.border": "11b7e5aeb83fd2f5d968021c750af2ceb5ba5841", - "component.tag.blue.text": "b35e0aebd9d1ebf0fd5d24bbd5ad184db9e11b86", - "component.tag.blue.background": "072fc2901d8ad0199c07bc339d46db086c7b0379", - "component.tag.blue.background-subtle": "67307c003cb91d76e00ef0f3777318e25efac628", - "component.tag.blue.border": "680fb2a6a11251e2619789595cd28c7861aaa530", - "component.tag.brown.text": "b48491f46d15503df99e2d8d9394aa552d09461b", - "component.tag.brown.background": "90b0ee0df4ebe7f06bfd07a7acbe812a45d621a4", - "component.tag.brown.background-subtle": "134ffd2a91ef027e197db6a5331d2726bc080ad6", - "component.tag.brown.border": "675776ff7a30540c297579d72b7f00779d778c14", - "component.tag.cyan.text": "6bf9361c5931ba40663d2c412f28f15382498517", - "component.tag.cyan.background": "83107c8cff314c553ed2cea5c9af1ff3356485e5", - "component.tag.cyan.background-subtle": "7f2724127eebb6e01713828af3736cd2e3734436", - "component.tag.cyan.border": "3286065f931626298e8f3dab2328297e83a79771", - "component.tag.green.text": "699a30f1d5f76ed4e631faa3da63be65e88af039", - "component.tag.green.background": "8b06c35974700260dff1a712c0a3976d4ddb0df5", - "component.tag.green.background-subtle": "c4f47c34772d8367bc3b00645420511f37aaecad", - "component.tag.green.border": "db85545b7d00ef9e199bf863dcdcc2be520f520c", - "component.tag.indigo.text": "d641d4626278e4d17ff4d98202112da9580a6b89", - "component.tag.indigo.background": "bb4af9a068f716c2f0b4f77c228b88009ac049c9", - "component.tag.indigo.background-subtle": "877e3b4ee6040ed581a8349c8fdb5e49ed36dfe0", - "component.tag.indigo.border": "885fdb80c956855c30666c660d5839dc357d1f5f", - "component.tag.lime.text": "763399447b243f761b7cce55f7dcf2fbb1797ee3", - "component.tag.lime.background": "d51cede4c823e16ac204bcaddb65d49c325c3cbe", - "component.tag.lime.background-subtle": "556934df078200ab014c762eeaa04deecd05422e", - "component.tag.lime.border": "fbb53e37ef7cb87cfae5298e69a5ffe4f99a23a7", - "component.tag.mint.text": "d3d406bffbadb1b894e4bb6aef7b1f5a1945094c", - "component.tag.mint.background": "04568a7d0bff5fbc11600bf840916f5451a0fe62", - "component.tag.mint.background-subtle": "1d39716bceda8510beb02e19847c391523e3690a", - "component.tag.mint.border": "c703cecfc8bd82c593dc9d81ce18748edd6ecf4d", - "component.tag.orange.text": "ba407492439b283fedf30a8ab8b16774c0931a9f", - "component.tag.orange.background": "ef766412f340a4aa62c8888a6fdfb2890f3ea207", - "component.tag.orange.background-subtle": "05e823662de8b1f99a062cea3c0f24df69b29362", - "component.tag.orange.border": "2f3023f2311c12acb44cdd28beb888f64d6d2183", - "component.tag.pink.text": "83b73e0e328485233004d42baa8a0948ff2198b0", - "component.tag.pink.background": "b23a211249a71f32bf15757316d0596fdb395962", - "component.tag.pink.background-subtle": "c144f19e07b839d68f20eb5c51ebd94e0f333a82", - "component.tag.pink.border": "b4874a81a08261362f3d8237833b80e68a851b76", - "component.tag.purple.text": "9869d8aad416ac3f9e530b0d62b05dda66906de4", - "component.tag.purple.background": "bc59008310427ba5883f71079b19b8cb4c6dd862", - "component.tag.purple.background-subtle": "a3598602d6e6b1d03f638f1a941801f147f4657a", - "component.tag.purple.border": "de1d577bd170613ab46460e9c50ca8de420152f6", - "component.tag.red.text": "aca8c1832317ac859b4263769855f423840a8569", - "component.tag.red.background": "9008e05416a00096c234511275b92be7204363b6", - "component.tag.red.background-subtle": "986bdd3f8d16488337ca9f46b71b04195d7578b0", - "component.tag.red.border": "f7f9067262546ee6eb77955e38aa0a451fc7f98a", - "component.tag.violet.text": "2ab996ff3465a0b97dee4d7c5606df3d46ab2a07", - "component.tag.violet.background": "4c9b9c2658479fc0e56894975a9b9b8d76df5b00", - "component.tag.violet.background-subtle": "fded9a84a20755592f57f081ebb594bfbaf8cfb3", - "component.tag.violet.border": "77de89ef1ab5168b7ff5e329bde8608047149a04", - "component.tag.yellow.text": "cadfcb4d0fe72fd5828cd764d54198026520e10c", - "component.tag.yellow.background": "a29464cd2a618a77586cb8760478a4d82b12b3ca", - "component.tag.yellow.background-subtle": "1b262be32c5779f024da5ad5696c805a83eb96c7", - "component.tag.yellow.border": "b595821fd5ef662361820415bb878e8ef4ab8939", - "component.tag.gray.text": "e7608c51a2421de226afebbcb909180c8a0cdb5a", - "component.tag.gray.background": "9bcc758ef67bbaac88637e99a702da5d7f7a3144", - "component.tag.gray.background-subtle": "76dfa99dd57cbaf2e7cbec9511cd1e1ddd92ee0e", - "component.tag.gray.border": "02e03f32969f9e6120bb6c7a3b781a5446f1bef1", - "component.toast.default.title": "f791d24eeab59c12cf4aad84f4677099bb4a01c1", - "component.toast.default.description": "6000da4ada3b9445750fb4b7b990726df120c271", - "component.toast.default.background": "5b9e9ea5b7de018a92d3deb902257e4e2bbb49f9", - "component.toast.default.border": "f74755bc7843dc9d7c788c54178b7ce3b83dea3f", - "component.toast.danger.title": "b5ad1c43fcee32eb251b980e884e77ea137c3369", - "component.toast.danger.description": "d281b5c13f2a4a293042f52b168e39f8bec398da", - "component.toast.danger.background": "8ba5c70e994ab44aeb72b3ed7f26ca9646d59cc0", - "component.toast.danger.border": "7f5252c13b96825084248b367f36377bb003ca96", - "component.tooltip.text": "b79a7ec441cdc7c6eee9313602f081d063327c1d", - "component.tooltip.background": "a35d0240a1c4de13350e6a4770dd1703a90a9227", - "component.tooltip.border": "d57b38546841813d61da59d66e98a8921f2f3ee7", - "shadow-color.0": "c0c282f63e107374a732d74c1742cf60d52e6e5c", - "shadow-color.1": "1ec33a9c84353664d23cd23d6c033d1c330c149a", - "shadow-color.2": "6200a000044d8dbee421ed4afb0c3ff42febb6ef", - "shadow-color.3": "77d99afb159d8e193a82f615dd84de3214e00703", - "shadow-color.4": "2b2e0307d252bdc6db53a23ce2cc2e9bb4f6b914", - "shadow-color.5": "5a6c707240bab54cb4403f47262abfe0756efc9a", - "shadow-color.6": "928283d00759150575a8f155da90180a582be438", - "shadow-color.inner": "6cb5a98fba0b13e952859b9f023259b5c06cfd1a", - "gradient.ai.gradient-stop-1": "8db516caa68afc5b8fdd6fc6e5a9bad7715c5f26", - "gradient.ai.gradient-stop-2": "33930f41665251a281973a37847f357480aedca3", - "gradient.ai.gradient-stop-3": "c9e14c3db8e622b10b1cd3e860115cd6f876ae49", - "gradient.ai.gradient-stop-4": "6e7d0850d7eb1e699f87b41f6ffd4cb8d73d72e8", - "gradient.skeleton.gradient-stop-1": "5427016b990b75f0d1ce60eef8cb9b96d75fbde2", - "gradient.skeleton.gradient-stop-2": "01442c311e6da751c30c3518fc32970306767274", - "gradient.skeleton.gradient-stop-3": "7fda4c834a3daf0c56bb59777c525670ae2dee3e", - "gradient.pipeline.running.gradient-stop-1": "0c187d1ebb015ec66bac356009795316f84807ae", - "gradient.pipeline.running.gradient-stop-2": "d1251f86c91bd0f29d8ac8cfa01056bc307156b4", - "gradient.pipeline.running.gradient-stop-3": "b09bdab234cdf7c204cb153ec94ea0a9b2bb4976", - "gradient.pipeline.arrows.gradient-stop-1": "0465e74baaf10a12f23b9eaa40fc1ae08485a0d5", - "gradient.pipeline.arrows.gradient-stop-2": "4cadc4f9a5e66f28eaa27fb54b6ce538ea430c7d", - "gradient.pipeline.arrows.gradient-stop-3": "5af16d4ae6b63ff8dcf3254009e712db4ac1a3f9", - "gradient.pipeline.card.background.gradient-from": "8404a4e146121987426681accb996902179fad72", - "gradient.pipeline.card.background.gradient-to": "037bbd7fb410d05993a48594626a7babb32605a6", - "gradient.pipeline.card.border.gradient-from": "342926ec7179e7cbe133981050c1e1e41d94ed7a", - "gradient.pipeline.card.border.gradient-to": "8e39428cc5ce20f3593127f2ef71f180b38ee9a4", - "gradient.pipeline.widget.number.gradient-from": "dc372cb50eedf6023cd80cb6a4520e5fdf91358b", - "gradient.pipeline.widget.number.gradient-to": "e505c8d9dd140f5a671c1291ffd519fcff5c3e2c", - "gradient.pipeline.widget.blob.big.gradient-from": "b518524b25a5b95804988c640c4d52ba7ebd4599", - "gradient.pipeline.widget.blob.big.gradient-to": "80a493af10245e0ebbc6a51f5452d61d836a3754", - "gradient.pipeline.widget.blob.small.gradient-from": "8d7be31e69f0e54dd2e493d9051c2268078ea5ed", - "gradient.pipeline.widget.blob.small.gradient-to": "198813cf6242881ce0e0d030ca22ef31f9190d13", - "iconStrokeWidth.xxs": "751ceaa292e27736009bef894b62f83c1b2d66d8", - "iconStrokeWidth.xs": "77ca59c88a0b47972554b1db3f6469a230a6ad8c", - "iconStrokeWidth.sm": "e445b22e1f18af07002a1dc76f900dada5477383", - "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", - "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", - "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "component.dropdown.item.text": "2f1f1ea9d368ec8be380803506fbf657cabe6ac0" - }, - "group": "mode" - }, - { - "id": "16a6184320ed89d5fb0974f727a0c264ed771695", - "name": "dark-dimmer-protanopia", - "$figmaStyleReferences": { - "shadow.0": "S:a2ed3778198048e91067a04633c27ba20e9fcbec,", - "shadow.1": "S:947694488889f7271c428950bec937ee79f8a536,", - "shadow.2": "S:70378f090cb66b03ee4b18e25742743934f37757,", - "shadow.3": "S:aa7e83fd47e75f5a1ae3e17f64417d5e9fcb96ae,", - "shadow.4": "S:5dfba690094db266c4ab7686fccbbedd8c16385f,", - "shadow.5": "S:d6752151a8dd3bd4b4bf12ad15a80c522f760731,", - "shadow.6": "S:da8e7b5b0f1352215fbaab66eff62a3e19d22b67,", - "shadow.inner": "S:2805cdc40176a4707d5cfc549b4c12e7ec4e74ff,", - "ring.focus": "S:062018f6483f54f1255b952aa1759b028d502ac3," - }, - "selectedTokenSets": { - "mode/dark/dimmer-protanopia": "enabled" - }, - "$figmaCollectionId": "VariableCollectionId:1340:156918", - "$figmaModeId": "1389:3", - "$figmaVariableReferences": { - "background.1": "633e5f77aa1bd1bd133852d8372b9c9f1231a9e4", - "background.2": "14e8d4b56cc273b508af8a2c58cb00e99e08d1d3", - "background.3": "33554ff11e1eab35e50aa3570f51d53f16f46d6a", - "text.1": "38382b9984a98f9d26692a7f2882dfb5c5d51825", - "text.2": "115f62efd02491e85a63dfd601b03725d3711f23", - "text.3": "1c7327f01cf759b17fd0523cb540afa8700c1dc7", - "text.accent": "0b3cd5357659e6542cca163ccfd96c0cac059203", - "text.success": "ee56057b81e6d0872a84ca6b29affc8911fe333e", - "text.danger": "c7e38d7c7afc899f4d40392dbd6bc5ed6580264d", - "text.warning": "b03334e4c9db4b76269e4be886df6c1abf74d0ca", - "border.1": "5ad2231a611605964ba70f80e7aabb48f04bc704", - "border.2": "9084bef359e38136e0dddac25a464896456a9b1a", - "border.3": "5ff5d5233f7cb0233ce7634bc480026668c818f6", - "border.focus": "8db219e896acc4d828aaaf4add646d96540a84ea", - "border.success": "b13758973865eab0b4d79028a48e457eae8bec47", - "border.danger": "33d53c1486021bb3c9edce4123b484a2aabc8de0", - "border.warning": "027e57e08a1edcaaa7fbe033902bb3f65497abb4", - "state.hover": "78426caca2a07ee56132762a720ae07e2810f03b", - "state.selected": "ef914056c9c9dbaef00fa8795702a3cb933ee761", - "state.disabled.text": "967ab1b863941c100f58cc55e611ee2709051f01", - "state.disabled.background": "7a192b5ddcc570f0c8e3a5dbfd54d780e2832bbd", - "state.disabled.border": "067fd26e80ad39a28f738a3b76d21d354092d551", - "component.accordion.title": "5e49d6ddf7f2b21724b474d4a5545256143dce54", - "component.accordion.description": "bc47401a69d07fa71f0371765ed940745fc7a5b9", - "component.accordion.chevron": "5dd530f96134323125031668d4ea98a36ea0de86", - "component.accordion.border": "0b3fcc0e02a2a86625b2b4a9cfeebfad9486bc3a", - "component.alert.default.title": "d8e59ed205399e9727b0dcecdccad3d8daaaa622", - "component.alert.default.description": "f9ec7fec91747435740f000fb642f9009e8fc2db", - "component.alert.default.background": "7fbbdfcc33a3051394f89675798db2159741a5fc", - "component.alert.default.border": "549692bf2f70f6b40c7d55259f8890189aa6cc98", - "component.alert.danger.title": "c8da1cdbba8e0f86edda5fd3869f6186d53881ca", - "component.alert.danger.description": "366849405bd53c78f0b73d72585034a52f05d9a7", - "component.alert.danger.background": "5756a9bdba027993a9879b32ed129e3034028cdf", - "component.alert.danger.border": "a1a3be9eefab6edf2e996a46537872680dc45a09", - "component.avatar.text": "23018f4c7f22c4afb3b7e49f585a1fbb591209de", - "component.avatar.background": "57703fddbd26d363509fdba3aea037bd2f515ee0", - "component.avatar.border": "d651f4cb9082aa4d6e6af2c5abab700d683a5c85", - "component.badge.default.text": "ab90828e3b8c6adce5dc10bf85107b001b958e95", - "component.badge.default.background": "706b070b298e2d2a97665baf7af05187eefeb4fe", - "component.badge.default.border": "a935a2968ca4ecfb8cc58a18f31ae8fe65eb516b", - "component.badge.neutral.text": "82d39f1786c4371303ae21e4c02db79989c54e36", - "component.badge.neutral.background": "f5480b1a2b648fdb0561acda7515c38271cfb04b", - "component.badge.neutral.border": "00f05792ddf6e53bff79346df6a34144426d50e0", - "component.badge.success.text": "71014a6138e8747257a21144f8114b906cfe0f0a", - "component.badge.success.border": "190589c6021debb7bb676f05ac7f063c237fd4aa", - "component.badge.success.background": "177eb9f406784ddb958232cd643ebbb3490a53d4", - "component.badge.danger.text": "6c0c04f17c2bc0ee085d09bf0f205dcbc66c1e17", - "component.badge.danger.border": "6bb014acbbd68a796ed0c4d8c4f73e8e9e619923", - "component.badge.danger.background": "4162b10332d17800585d97ed45e45d69c2006808", - "component.badge.warning.text": "8581620d95e5b92a8c85341ebf63f21fcf7133d0", - "component.badge.warning.border": "71cb519182108ac72ffef823935546e4bff62bbc", - "component.badge.warning.background": "74c13457a85684a054426bd833859fe93eaec978", - "component.badge.running.text": "0b0c1be217e557a5b14c1cb25e988e4ac6d40583", - "component.badge.running.border": "27d3c48d3c316bc4f980282759b5e82f8aaaf49d", - "component.badge.running.background": "a85fddc26baf586ac7ba79e381e5f8fefca87c65", - "component.badge.merged.text": "a83d66ef53e8a094a62f2b32a4d17e58d552b1ef", - "component.badge.merged.border": "755392bca643af0a3fe5492069881a870aa11dc3", - "component.badge.merged.background": "4f4c81b1fe43bfe0d721a22d0aeb93079776cf6d", - "component.badge.ai.text": "bb4daee92817073da0366090742d0a17babb5728", - "component.badge.ai.background": "c5764a2304bf0e8a153c9ce0da20827696a76b41", - "component.breadcrumb.item-inactive": "2f009ca6cafb50c994205c9df02ee2d2503f7d23", - "component.breadcrumb.item-current": "7b502cc2e72f66bb501fdc5f480d0133d1b3841a", - "component.breadcrumb.separator": "1cd28c3ff97ab2f529a19c632d89dd44af0aad80", - "component.btn.primary.text": "9d32f032da93c9aab8b3bc6087c26aa12f507ad7", - "component.btn.primary.background": "410d584a3469233e067d0592a366fdebbe1049bc", - "component.btn.primary.border": "1491ac71f9681307c2d6528e443504e079061988", - "component.btn.secondary.text": "12c93d1b08ae50645a3b8f59256fcec00a4f84ca", - "component.btn.secondary.background": "86434310c95f5c055783011cc0e7c7918f67a35c", - "component.btn.secondary.border": "66bda91f87154efd3cefdc7a634ecb8afa8cd285", - "component.btn.outline.unselected.text": "9cf2c495178d6fdfd8f1360376242acbd4dc5e75", - "component.btn.outline.unselected.icon": "af1510c6050f671219d2089e0e59d5febb4422d6", - "component.btn.outline.unselected.border": "2b3013d632e566301e9f5f1a5cbb6aab4e7ec53f", - "component.btn.outline.selected.text": "13b50089245dec1899db2012412efcf649e2c0b4", - "component.btn.outline.selected.icon": "2bdf2c92b22e814109f4e05ec4d41d92f934a15d", - "component.btn.outline.selected.border": "ef10f4599233f62203def151b386013ddaa63afb", - "component.btn.ghost.unselected.text": "43fa10dd413cddb9a2e2142ead9ca3b4a91b49a6", - "component.btn.ghost.unselected.icon": "5ce332f51238b374104ec53067d685c26882f38e", - "component.btn.ghost.selected.text": "74cbf3b86016e05517f8c7bc64652281c940363e", - "component.btn.ghost.selected.icon": "1d8c6206a136d9c176ffba600a1e94618c4b96f8", - "component.btn.success.text": "52a336440e013bbc849ad67a43d0e136cf4f0b51", - "component.btn.success.background": "608ca6930129b4e5ff36d7f38508ae2537b66629", - "component.btn.success.border": "1f74d9985a10fe20e0acc4647cf4949005e9d4f1", - "component.btn.success.state.hover": "d05bde38a6539a11e3ccd87345af113ccd6bd113", - "component.btn.success.state.active": "f6e48e68dba6c32de27fadcaca3d1959f081d2e5", - "component.btn.danger.text": "49c02562362b8f775cfc2c4c614ecd646dcc2716", - "component.btn.danger.background": "0b015d0a4f456781969d7ffaf135c7c2a8858440", - "component.btn.danger.border": "9f99ee56f1ae2b7eb2f98300b83d4f53b15fd763", - "component.btn.danger.state.hover": "e7756e1d022d893bfa5fdd619f181d26fb7b117b", - "component.btn.danger.state.active": "23c7c85ff6104e098a208b6f4b86c1d0eef0f543", - "component.btn.ai.text": "380368600319fa12b73538ff52acd9d0e977e367", - "component.btn.ai.background": "8c9a1d07e05837f50588b642a4b51462f883887d", - "component.card.background": "256878745d17a46b7159919d8e30a3e960f59575", - "component.card.border": "3688ffcc56c4fb44dc0e221b8e09a958fd9e509d", - "component.dialog.title": "e6e0ff2bf1f3802eb21492e8b833c5f5e679cd82", - "component.dialog.description": "301509fcf2faac8497b2136f7879b9b0b3c64433", - "component.dialog.background": "ff2918d712798a4b487b6f6e5befe7b3eef59883", - "component.dialog.border": "4a6cb3732ad8b36bb9de0d15cbed575c87996088", - "component.dialog.backdrop": "893e60ed671f891241a3084707057185398446ed", - "component.dropdown.background": "09b2dca27ba9efabfe838d713a14ca6e6ac46685", - "component.dropdown.border": "c8cdfff63f4e142d651070ff1056b69a638aaab7", - "component.dropdown.item.delete.text": "864396a8c9b5df0fd948ded7d520ded936d74a8b", - "component.dropdown.item.delete.state.hover": "308dc9064be8e754f8385b0e8ff5489563d7c984", - "component.diff.grey": "43bf4f466a6e231c9951a639313740579c29d824", - "component.diff.add-content": "eb4eccf789a2bda6f3d3875c3310ef0579fd3555", - "component.diff.add-lineNumber": "61583aa6e36aaddd0be173a4a082a450e2522d3a", - "component.diff.add-content-highlight": "ad544fc527ca8b4c297993fe0722b8a7a96ef903", - "component.diff.add-widget": "c1def698ab707194d8f1558e16b05c55d50920d9", - "component.diff.add-widget-color": "a27c504a1f1151974669cf06054c1d0f704ecc38", - "component.diff.del-content": "465e6eb3613967f489cfee4b04f0b283b9e88f91", - "component.diff.del-lineNumber": "4cbe83072b6781d6e3edff645ccb2fb7426c5628", - "component.diff.del-content-highlight": "3e635e401a1a37a259211d093bef70e3a0c507ea", - "component.diff.plain-content": "984456faee2f6a5c202cfd76078ef5b6cd3a05f1", - "component.diff.plain-lineNumber": "6a5550287e7c58afa9d2375c5bfdca4d6c214cf1", - "component.diff.plain-lineNumber-color": "7c1186d20725b53cbefe87f56c5bc6db4e77d898", - "component.diff.empty-content": "712d93a0c1bc9503abda77ae50d624bd328c0057", - "component.diff.hunk-content": "79ad0dfc599f9bc246a6618c85bc1dc59744537f", - "component.diff.hunk-lineNumber": "bccfad80b84e35edf4b47af2ca30057eba2b2ebf", - "component.diff.hunk-content-color": "68c5d6a95d475f7275062e3eb58dba464df3d059", - "component.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", - "component.input.text": "df946237ac2ea0d177f3f2818a673fdf876944c7", - "component.input.placeholder": "85d7632aba08fd476083e508cc2660b17c30981a", - "component.input.icon": "75ca1f38c16fbd5e2697a36c74b0b1dd01f3f5c0", - "component.input.background": "585327333fbbf97bb8db21fbc613025719ca8a87", - "component.input.border": "911dac823dac21c9ccf4e35e10b2eb82a9c6f0ef", - "component.label.text": "80403cd630bba01a064550d9783313227b1d010f", - "component.link.default": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", - "component.link.visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", - "component.nav-tabs.unselected.text": "c085805657bb81574da85d3cb29f89ca08980daa", - "component.nav-tabs.selected.text": "16aa825c8038347237cbe91f7eeece4d2a8d1a2b", - "component.nav-tabs.selected.border": "3427b967112facd59f09fa310c863d7193ea4ffe", - "component.nav-tabs.border": "791d71ca187934e4b98ddff04bc9447a10358699", - "component.nav-tabs.background": "b92549e37390005f2bd1cfce06f9dfb8f67e39e0", - "component.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", - "component.pipeline.card.background": "f207dcff97f000326c4f28293fdbd2830860ce54", - "component.pipeline.card.border": "aa9d9528b1e8e25f9e6dae387b76d9beb2de35a8", - "component.pipeline.card.running.border": "179c0e4d47becc896eb1fbb7f9e8461779b3f680", - "component.pipeline.card.error.border": "1c0b41b41e25250cfb65bdb539bd573be66b0d00", - "component.pipeline.card.completed.border": "14251a54f431aae617af6b9577454a0e212ad76f", - "component.pipeline.card-canvas.1.background": "01bd392d5ddafe85e5575296d08254e52054ba8d", - "component.pipeline.card-canvas.1.border": "b9510abf89f82fb7b779bb730caa1bf393c83bd4", - "component.pipeline.card-canvas.2.background": "87b6b3e65b995fc4180dfb7bf613efb0098d1fff", - "component.pipeline.card-canvas.2.border": "1f9fa1e95134d87995a21738a3877f1c15158e5e", - "component.pipeline.background.dotes": "2784742abff27552789cdd4f2b51cab1331abb4a", - "component.sidebar.background": "8b6619fafae38e8ad94fffd488f2cf53d3c31d76", - "component.sidebar.border": "2263230eae16609a3d95ba5863aa3cc343010131", - "component.sidebar.separator": "a0c913dd38e81e3b2c20ee17642433da6da5f147", - "component.sidebar.hover": "4925b4511178bd2853a6b7b329683d036508aec1", - "component.sidebar.selected": "31f335ecde0aedb12407221718069f5b13574d41", - "component.sidebar.item.unselected.text": "9609e0ad8d79127a3784876f0204d02964f09e43", - "component.sidebar.item.unselected.icon": "5afba128858cf7494fb8a326a435860faf00b0ee", - "component.sidebar.item.selected.text": "5f1daf88cebaea07bd4c2a57c862638340827496", - "component.sidebar.item.selected.icon": "18325fda8139122c4a7cdf6debe2cd1f25d120b7", - "component.sidebar.logo.text": "a3ffa09fdf368badab24aecdbd26709ed7b3c2b2", - "component.sidebar.logo.icon": "c572d382a2018718d719f6a427d31fc9a42f57bd", - "component.sidebar.search.background": "33822e390046e5ec8f71a07fc041514a28778e74", - "component.sidebar.search.border": "f2044f7e8cf503f8809a48a14a88c5ef6466176f", - "component.sidebar.search.placeholder": "665cc00a32edd27b62371ee820d3c3250e629e78", - "component.sidebar.search.btn.background": "70c80e61b9ec397214c809c51de4fdf8177185da", - "component.sidebar.search.btn.border": "1c434c7d16cd4ba880e2d57520c90bc37f6b3879", - "component.sidebar.search.btn.text": "589c7d0162d67165a8752ea54a2c63bb63ee3ad7", - "component.sidebar.footer.username": "68298a8f471bb04f2f0305d9433a2b59613abd8d", - "component.sidebar.footer.data": "6a681d2abb90c2b62a39e20a1d29419c5086f01a", - "component.scrollbar.thumb": "9818c03d003381a966d08d3c6da75af8468bb8ef", - "component.selection.unselected.item": "7a7cad2aa2d6b2803a52eb26c78ea177b84ce241", - "component.selection.unselected.background": "a63ba949d12afc99020e77f95d0538bddba457b3", - "component.selection.unselected.border": "6ef997ebe03bb209ca568a648eb0cc8be69746a6", - "component.selection.selected.item": "f1f43c8acf2d4da10ee2e0d164d4dbe955816018", - "component.selection.selected.background": "1d1bbb9958f047744b66861fd8bd75dc2726dc25", - "component.selection.selected.border": "44b31378ed175b87b50ebad88cfd4a73a66ab9d5", - "component.separator.background": "9f4c82c269bc5aff0fa55d52a0ed59f914057be0", - "component.slider.track.base": "34dc3b5be6733e38f6c28d24d4f3699b2d7ea6f3", - "component.slider.track.progress": "38d8cac26c1cfb91293198eee25299e4aef9c1d8", - "component.slider.track-segments.base": "cb752791a51ff48c6d481426a1affb15048a152a", - "component.slider.track-segments.progress": "a7943fda0e4646e7018046354a9be54cf7d03075", - "component.slider.handle.background": "5c423cc3b672079f1e7dc0d1c8170dade368711a", - "component.slider.handle.border": "94347a2ed2900445946d18c653fb179b8602c533", - "component.status-indicator.completed": "c4c3bce2d28c84c25db4f444f9144b94523737b7", - "component.status-indicator.cancelled": "5aa15732d9ebc41f14b111e252819e2e36617124", - "component.status-indicator.warning": "4dc6e5ea4c736869aee4ebd0ee006f2d73861423", - "component.status-indicator.running": "07ce029f27cf34bf8d6fe3b9a6a600be01c8947e", - "component.status-indicator.merged": "d9eb24404452e6cc2617094fe8f29c69a760ea55", - "component.status-indicator.action-required": "2f1b8543c44b5d93cebddd80b5a9ee2d60fdb146", - "component.status-indicator.waiting": "62f68d300850ce20cf0be8c07d82a41bf1a56ecd", - "component.switch.unselected.thumb": "94d5f0b3a97924583ff697d56db74727b133ba95", - "component.switch.unselected.background": "a8ae87c7bb7ba7f4bfa71f2fdd5f404d19c3a1be", - "component.switch.selected.thumb": "cf6964ec11d69899d5dd39e82d322ea544367e90", - "component.switch.selected.background": "bba05ff96eae08a4adc31a6406e417022d9e5dad", - "component.table.header.text": "65cfc045aa01e3d3eeae4a227cac9be150839db8", - "component.table.header.background": "137c4f2e14bb8cadaf6f900a443700fe928a1fcd", - "component.table.row.alternate-background": "2863f92db433f88f24f62dda4cc9fd50c48130be", - "component.table.row.border": "445d945c4fe4426c3b73cf6f8fe0a572e4525798", - "component.table.cell.text": "73a28f25ba54aff507877ecbfd9942a6ea9f3cea", - "component.tabs.background": "8689ee01219675fb951a2517c2397fba52487971", - "component.tabs.border": "e5bc8cfac224234021c11b381f505da5fcac84ed", - "component.tabs.item.unselected.text": "4af8a5b79c55621f1ed11a7b6fc605657934dc1e", - "component.tabs.item.unselected.background": "fa041cdeb34ba5da6f1bd4cd6d8bb4b8273e0e70", - "component.tabs.item.unselected.border": "79b1a6fe839c012efec923edf40b3bfa2bcdab19", - "component.tabs.item.selected.text": "d048f7001829ff9949b2712b8ca746c8f3f49767", - "component.tabs.item.selected.background": "33269e9854800d565f728ba2a85c5cd3e549b5e8", - "component.tabs.item.selected.border": "11b7e5aeb83fd2f5d968021c750af2ceb5ba5841", - "component.tag.blue.text": "b35e0aebd9d1ebf0fd5d24bbd5ad184db9e11b86", - "component.tag.blue.background": "072fc2901d8ad0199c07bc339d46db086c7b0379", - "component.tag.blue.background-subtle": "67307c003cb91d76e00ef0f3777318e25efac628", - "component.tag.blue.border": "680fb2a6a11251e2619789595cd28c7861aaa530", - "component.tag.brown.text": "b48491f46d15503df99e2d8d9394aa552d09461b", - "component.tag.brown.background": "90b0ee0df4ebe7f06bfd07a7acbe812a45d621a4", - "component.tag.brown.background-subtle": "134ffd2a91ef027e197db6a5331d2726bc080ad6", - "component.tag.brown.border": "675776ff7a30540c297579d72b7f00779d778c14", - "component.tag.cyan.text": "6bf9361c5931ba40663d2c412f28f15382498517", - "component.tag.cyan.background": "83107c8cff314c553ed2cea5c9af1ff3356485e5", - "component.tag.cyan.background-subtle": "7f2724127eebb6e01713828af3736cd2e3734436", - "component.tag.cyan.border": "3286065f931626298e8f3dab2328297e83a79771", - "component.tag.green.text": "699a30f1d5f76ed4e631faa3da63be65e88af039", - "component.tag.green.background": "8b06c35974700260dff1a712c0a3976d4ddb0df5", - "component.tag.green.background-subtle": "c4f47c34772d8367bc3b00645420511f37aaecad", - "component.tag.green.border": "db85545b7d00ef9e199bf863dcdcc2be520f520c", - "component.tag.indigo.text": "d641d4626278e4d17ff4d98202112da9580a6b89", - "component.tag.indigo.background": "bb4af9a068f716c2f0b4f77c228b88009ac049c9", - "component.tag.indigo.background-subtle": "877e3b4ee6040ed581a8349c8fdb5e49ed36dfe0", - "component.tag.indigo.border": "885fdb80c956855c30666c660d5839dc357d1f5f", - "component.tag.lime.text": "763399447b243f761b7cce55f7dcf2fbb1797ee3", - "component.tag.lime.background": "d51cede4c823e16ac204bcaddb65d49c325c3cbe", - "component.tag.lime.background-subtle": "556934df078200ab014c762eeaa04deecd05422e", - "component.tag.lime.border": "fbb53e37ef7cb87cfae5298e69a5ffe4f99a23a7", - "component.tag.mint.text": "d3d406bffbadb1b894e4bb6aef7b1f5a1945094c", - "component.tag.mint.background": "04568a7d0bff5fbc11600bf840916f5451a0fe62", - "component.tag.mint.background-subtle": "1d39716bceda8510beb02e19847c391523e3690a", - "component.tag.mint.border": "c703cecfc8bd82c593dc9d81ce18748edd6ecf4d", - "component.tag.orange.text": "ba407492439b283fedf30a8ab8b16774c0931a9f", - "component.tag.orange.background": "ef766412f340a4aa62c8888a6fdfb2890f3ea207", - "component.tag.orange.background-subtle": "05e823662de8b1f99a062cea3c0f24df69b29362", - "component.tag.orange.border": "2f3023f2311c12acb44cdd28beb888f64d6d2183", - "component.tag.pink.text": "83b73e0e328485233004d42baa8a0948ff2198b0", - "component.tag.pink.background": "b23a211249a71f32bf15757316d0596fdb395962", - "component.tag.pink.background-subtle": "c144f19e07b839d68f20eb5c51ebd94e0f333a82", - "component.tag.pink.border": "b4874a81a08261362f3d8237833b80e68a851b76", - "component.tag.purple.text": "9869d8aad416ac3f9e530b0d62b05dda66906de4", - "component.tag.purple.background": "bc59008310427ba5883f71079b19b8cb4c6dd862", - "component.tag.purple.background-subtle": "a3598602d6e6b1d03f638f1a941801f147f4657a", - "component.tag.purple.border": "de1d577bd170613ab46460e9c50ca8de420152f6", - "component.tag.red.text": "aca8c1832317ac859b4263769855f423840a8569", - "component.tag.red.background": "9008e05416a00096c234511275b92be7204363b6", - "component.tag.red.background-subtle": "986bdd3f8d16488337ca9f46b71b04195d7578b0", - "component.tag.red.border": "f7f9067262546ee6eb77955e38aa0a451fc7f98a", - "component.tag.violet.text": "2ab996ff3465a0b97dee4d7c5606df3d46ab2a07", - "component.tag.violet.background": "4c9b9c2658479fc0e56894975a9b9b8d76df5b00", - "component.tag.violet.background-subtle": "fded9a84a20755592f57f081ebb594bfbaf8cfb3", - "component.tag.violet.border": "77de89ef1ab5168b7ff5e329bde8608047149a04", - "component.tag.yellow.text": "cadfcb4d0fe72fd5828cd764d54198026520e10c", - "component.tag.yellow.background": "a29464cd2a618a77586cb8760478a4d82b12b3ca", - "component.tag.yellow.background-subtle": "1b262be32c5779f024da5ad5696c805a83eb96c7", - "component.tag.yellow.border": "b595821fd5ef662361820415bb878e8ef4ab8939", - "component.tag.gray.text": "e7608c51a2421de226afebbcb909180c8a0cdb5a", - "component.tag.gray.background": "9bcc758ef67bbaac88637e99a702da5d7f7a3144", - "component.tag.gray.background-subtle": "76dfa99dd57cbaf2e7cbec9511cd1e1ddd92ee0e", - "component.tag.gray.border": "02e03f32969f9e6120bb6c7a3b781a5446f1bef1", - "component.toast.default.title": "f791d24eeab59c12cf4aad84f4677099bb4a01c1", - "component.toast.default.description": "6000da4ada3b9445750fb4b7b990726df120c271", - "component.toast.default.background": "5b9e9ea5b7de018a92d3deb902257e4e2bbb49f9", - "component.toast.default.border": "f74755bc7843dc9d7c788c54178b7ce3b83dea3f", - "component.toast.danger.title": "b5ad1c43fcee32eb251b980e884e77ea137c3369", - "component.toast.danger.description": "d281b5c13f2a4a293042f52b168e39f8bec398da", - "component.toast.danger.background": "8ba5c70e994ab44aeb72b3ed7f26ca9646d59cc0", - "component.toast.danger.border": "7f5252c13b96825084248b367f36377bb003ca96", - "component.tooltip.text": "b79a7ec441cdc7c6eee9313602f081d063327c1d", - "component.tooltip.background": "a35d0240a1c4de13350e6a4770dd1703a90a9227", - "component.tooltip.border": "d57b38546841813d61da59d66e98a8921f2f3ee7", - "shadow-color.0": "c0c282f63e107374a732d74c1742cf60d52e6e5c", - "shadow-color.1": "1ec33a9c84353664d23cd23d6c033d1c330c149a", - "shadow-color.2": "6200a000044d8dbee421ed4afb0c3ff42febb6ef", - "shadow-color.3": "77d99afb159d8e193a82f615dd84de3214e00703", - "shadow-color.4": "2b2e0307d252bdc6db53a23ce2cc2e9bb4f6b914", - "shadow-color.5": "5a6c707240bab54cb4403f47262abfe0756efc9a", - "shadow-color.6": "928283d00759150575a8f155da90180a582be438", - "shadow-color.inner": "6cb5a98fba0b13e952859b9f023259b5c06cfd1a", - "gradient.ai.gradient-stop-1": "8db516caa68afc5b8fdd6fc6e5a9bad7715c5f26", - "gradient.ai.gradient-stop-2": "33930f41665251a281973a37847f357480aedca3", - "gradient.ai.gradient-stop-3": "c9e14c3db8e622b10b1cd3e860115cd6f876ae49", - "gradient.ai.gradient-stop-4": "6e7d0850d7eb1e699f87b41f6ffd4cb8d73d72e8", - "gradient.skeleton.gradient-stop-1": "5427016b990b75f0d1ce60eef8cb9b96d75fbde2", - "gradient.skeleton.gradient-stop-2": "01442c311e6da751c30c3518fc32970306767274", - "gradient.skeleton.gradient-stop-3": "7fda4c834a3daf0c56bb59777c525670ae2dee3e", - "gradient.pipeline.running.gradient-stop-1": "0c187d1ebb015ec66bac356009795316f84807ae", - "gradient.pipeline.running.gradient-stop-2": "d1251f86c91bd0f29d8ac8cfa01056bc307156b4", - "gradient.pipeline.running.gradient-stop-3": "b09bdab234cdf7c204cb153ec94ea0a9b2bb4976", - "gradient.pipeline.arrows.gradient-stop-1": "0465e74baaf10a12f23b9eaa40fc1ae08485a0d5", - "gradient.pipeline.arrows.gradient-stop-2": "4cadc4f9a5e66f28eaa27fb54b6ce538ea430c7d", - "gradient.pipeline.arrows.gradient-stop-3": "5af16d4ae6b63ff8dcf3254009e712db4ac1a3f9", - "gradient.pipeline.card.background.gradient-from": "8404a4e146121987426681accb996902179fad72", - "gradient.pipeline.card.background.gradient-to": "037bbd7fb410d05993a48594626a7babb32605a6", - "gradient.pipeline.card.border.gradient-from": "342926ec7179e7cbe133981050c1e1e41d94ed7a", - "gradient.pipeline.card.border.gradient-to": "8e39428cc5ce20f3593127f2ef71f180b38ee9a4", - "gradient.pipeline.widget.number.gradient-from": "dc372cb50eedf6023cd80cb6a4520e5fdf91358b", - "gradient.pipeline.widget.number.gradient-to": "e505c8d9dd140f5a671c1291ffd519fcff5c3e2c", - "gradient.pipeline.widget.blob.big.gradient-from": "b518524b25a5b95804988c640c4d52ba7ebd4599", - "gradient.pipeline.widget.blob.big.gradient-to": "80a493af10245e0ebbc6a51f5452d61d836a3754", - "gradient.pipeline.widget.blob.small.gradient-from": "8d7be31e69f0e54dd2e493d9051c2268078ea5ed", - "gradient.pipeline.widget.blob.small.gradient-to": "198813cf6242881ce0e0d030ca22ef31f9190d13", - "iconStrokeWidth.xxs": "751ceaa292e27736009bef894b62f83c1b2d66d8", - "iconStrokeWidth.xs": "77ca59c88a0b47972554b1db3f6469a230a6ad8c", - "iconStrokeWidth.sm": "e445b22e1f18af07002a1dc76f900dada5477383", - "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", - "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", - "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "component.dropdown.item.text": "2f1f1ea9d368ec8be380803506fbf657cabe6ac0" - }, - "group": "mode" - }, - { - "id": "0bea34fa7b90e9f6c84366bfe10fdf7a9fe46738", - "name": "dark-high-contrast-protanopia", - "$figmaStyleReferences": { - "shadow.0": "S:a2ed3778198048e91067a04633c27ba20e9fcbec,", - "shadow.1": "S:947694488889f7271c428950bec937ee79f8a536,", - "shadow.2": "S:70378f090cb66b03ee4b18e25742743934f37757,", - "shadow.3": "S:aa7e83fd47e75f5a1ae3e17f64417d5e9fcb96ae,", - "shadow.4": "S:5dfba690094db266c4ab7686fccbbedd8c16385f,", - "shadow.5": "S:d6752151a8dd3bd4b4bf12ad15a80c522f760731,", - "shadow.6": "S:da8e7b5b0f1352215fbaab66eff62a3e19d22b67,", - "shadow.inner": "S:2805cdc40176a4707d5cfc549b4c12e7ec4e74ff,", - "ring.focus": "S:062018f6483f54f1255b952aa1759b028d502ac3," - }, - "selectedTokenSets": { - "mode/dark/high-contrast-protanopia": "enabled" - }, - "$figmaCollectionId": "VariableCollectionId:1340:156918", - "$figmaModeId": "1389:4", - "$figmaVariableReferences": { - "background.1": "633e5f77aa1bd1bd133852d8372b9c9f1231a9e4", - "background.2": "14e8d4b56cc273b508af8a2c58cb00e99e08d1d3", - "background.3": "33554ff11e1eab35e50aa3570f51d53f16f46d6a", - "text.1": "38382b9984a98f9d26692a7f2882dfb5c5d51825", - "text.2": "115f62efd02491e85a63dfd601b03725d3711f23", - "text.3": "1c7327f01cf759b17fd0523cb540afa8700c1dc7", - "text.accent": "0b3cd5357659e6542cca163ccfd96c0cac059203", - "text.success": "ee56057b81e6d0872a84ca6b29affc8911fe333e", - "text.danger": "c7e38d7c7afc899f4d40392dbd6bc5ed6580264d", - "text.warning": "b03334e4c9db4b76269e4be886df6c1abf74d0ca", - "border.1": "5ad2231a611605964ba70f80e7aabb48f04bc704", - "border.2": "9084bef359e38136e0dddac25a464896456a9b1a", - "border.3": "5ff5d5233f7cb0233ce7634bc480026668c818f6", - "border.focus": "8db219e896acc4d828aaaf4add646d96540a84ea", - "border.success": "b13758973865eab0b4d79028a48e457eae8bec47", - "border.danger": "33d53c1486021bb3c9edce4123b484a2aabc8de0", - "border.warning": "027e57e08a1edcaaa7fbe033902bb3f65497abb4", - "state.hover": "78426caca2a07ee56132762a720ae07e2810f03b", - "state.selected": "ef914056c9c9dbaef00fa8795702a3cb933ee761", - "state.disabled.text": "967ab1b863941c100f58cc55e611ee2709051f01", - "state.disabled.background": "7a192b5ddcc570f0c8e3a5dbfd54d780e2832bbd", - "state.disabled.border": "067fd26e80ad39a28f738a3b76d21d354092d551", - "component.accordion.title": "5e49d6ddf7f2b21724b474d4a5545256143dce54", - "component.accordion.description": "bc47401a69d07fa71f0371765ed940745fc7a5b9", - "component.accordion.chevron": "5dd530f96134323125031668d4ea98a36ea0de86", - "component.accordion.border": "0b3fcc0e02a2a86625b2b4a9cfeebfad9486bc3a", - "component.alert.default.title": "d8e59ed205399e9727b0dcecdccad3d8daaaa622", - "component.alert.default.description": "f9ec7fec91747435740f000fb642f9009e8fc2db", - "component.alert.default.background": "7fbbdfcc33a3051394f89675798db2159741a5fc", - "component.alert.default.border": "549692bf2f70f6b40c7d55259f8890189aa6cc98", - "component.alert.danger.title": "c8da1cdbba8e0f86edda5fd3869f6186d53881ca", - "component.alert.danger.description": "366849405bd53c78f0b73d72585034a52f05d9a7", - "component.alert.danger.background": "5756a9bdba027993a9879b32ed129e3034028cdf", - "component.alert.danger.border": "a1a3be9eefab6edf2e996a46537872680dc45a09", - "component.avatar.text": "23018f4c7f22c4afb3b7e49f585a1fbb591209de", - "component.avatar.background": "57703fddbd26d363509fdba3aea037bd2f515ee0", - "component.avatar.border": "d651f4cb9082aa4d6e6af2c5abab700d683a5c85", - "component.badge.default.text": "ab90828e3b8c6adce5dc10bf85107b001b958e95", - "component.badge.default.background": "706b070b298e2d2a97665baf7af05187eefeb4fe", - "component.badge.default.border": "a935a2968ca4ecfb8cc58a18f31ae8fe65eb516b", - "component.badge.neutral.text": "82d39f1786c4371303ae21e4c02db79989c54e36", - "component.badge.neutral.background": "f5480b1a2b648fdb0561acda7515c38271cfb04b", - "component.badge.neutral.border": "00f05792ddf6e53bff79346df6a34144426d50e0", - "component.badge.success.text": "71014a6138e8747257a21144f8114b906cfe0f0a", - "component.badge.success.border": "190589c6021debb7bb676f05ac7f063c237fd4aa", - "component.badge.success.background": "177eb9f406784ddb958232cd643ebbb3490a53d4", - "component.badge.danger.text": "6c0c04f17c2bc0ee085d09bf0f205dcbc66c1e17", - "component.badge.danger.border": "6bb014acbbd68a796ed0c4d8c4f73e8e9e619923", - "component.badge.danger.background": "4162b10332d17800585d97ed45e45d69c2006808", - "component.badge.warning.text": "8581620d95e5b92a8c85341ebf63f21fcf7133d0", - "component.badge.warning.border": "71cb519182108ac72ffef823935546e4bff62bbc", - "component.badge.warning.background": "74c13457a85684a054426bd833859fe93eaec978", - "component.badge.running.text": "0b0c1be217e557a5b14c1cb25e988e4ac6d40583", - "component.badge.running.border": "27d3c48d3c316bc4f980282759b5e82f8aaaf49d", - "component.badge.running.background": "a85fddc26baf586ac7ba79e381e5f8fefca87c65", - "component.badge.merged.text": "a83d66ef53e8a094a62f2b32a4d17e58d552b1ef", - "component.badge.merged.border": "755392bca643af0a3fe5492069881a870aa11dc3", - "component.badge.merged.background": "4f4c81b1fe43bfe0d721a22d0aeb93079776cf6d", - "component.badge.ai.text": "bb4daee92817073da0366090742d0a17babb5728", - "component.badge.ai.background": "c5764a2304bf0e8a153c9ce0da20827696a76b41", - "component.breadcrumb.item-inactive": "2f009ca6cafb50c994205c9df02ee2d2503f7d23", - "component.breadcrumb.item-current": "7b502cc2e72f66bb501fdc5f480d0133d1b3841a", - "component.breadcrumb.separator": "1cd28c3ff97ab2f529a19c632d89dd44af0aad80", - "component.btn.primary.text": "9d32f032da93c9aab8b3bc6087c26aa12f507ad7", - "component.btn.primary.background": "410d584a3469233e067d0592a366fdebbe1049bc", - "component.btn.primary.border": "1491ac71f9681307c2d6528e443504e079061988", - "component.btn.secondary.text": "12c93d1b08ae50645a3b8f59256fcec00a4f84ca", - "component.btn.secondary.background": "86434310c95f5c055783011cc0e7c7918f67a35c", - "component.btn.secondary.border": "66bda91f87154efd3cefdc7a634ecb8afa8cd285", - "component.btn.outline.unselected.text": "9cf2c495178d6fdfd8f1360376242acbd4dc5e75", - "component.btn.outline.unselected.icon": "af1510c6050f671219d2089e0e59d5febb4422d6", - "component.btn.outline.unselected.border": "2b3013d632e566301e9f5f1a5cbb6aab4e7ec53f", - "component.btn.outline.selected.text": "13b50089245dec1899db2012412efcf649e2c0b4", - "component.btn.outline.selected.icon": "2bdf2c92b22e814109f4e05ec4d41d92f934a15d", - "component.btn.outline.selected.border": "ef10f4599233f62203def151b386013ddaa63afb", - "component.btn.ghost.unselected.text": "43fa10dd413cddb9a2e2142ead9ca3b4a91b49a6", - "component.btn.ghost.unselected.icon": "5ce332f51238b374104ec53067d685c26882f38e", - "component.btn.ghost.selected.text": "74cbf3b86016e05517f8c7bc64652281c940363e", - "component.btn.ghost.selected.icon": "1d8c6206a136d9c176ffba600a1e94618c4b96f8", - "component.btn.success.text": "52a336440e013bbc849ad67a43d0e136cf4f0b51", - "component.btn.success.background": "608ca6930129b4e5ff36d7f38508ae2537b66629", - "component.btn.success.border": "1f74d9985a10fe20e0acc4647cf4949005e9d4f1", - "component.btn.success.state.hover": "d05bde38a6539a11e3ccd87345af113ccd6bd113", - "component.btn.success.state.active": "f6e48e68dba6c32de27fadcaca3d1959f081d2e5", - "component.btn.danger.text": "49c02562362b8f775cfc2c4c614ecd646dcc2716", - "component.btn.danger.background": "0b015d0a4f456781969d7ffaf135c7c2a8858440", - "component.btn.danger.border": "9f99ee56f1ae2b7eb2f98300b83d4f53b15fd763", - "component.btn.danger.state.hover": "e7756e1d022d893bfa5fdd619f181d26fb7b117b", - "component.btn.danger.state.active": "23c7c85ff6104e098a208b6f4b86c1d0eef0f543", - "component.btn.ai.text": "380368600319fa12b73538ff52acd9d0e977e367", - "component.btn.ai.background": "8c9a1d07e05837f50588b642a4b51462f883887d", - "component.card.background": "256878745d17a46b7159919d8e30a3e960f59575", - "component.card.border": "3688ffcc56c4fb44dc0e221b8e09a958fd9e509d", - "component.dialog.title": "e6e0ff2bf1f3802eb21492e8b833c5f5e679cd82", - "component.dialog.description": "301509fcf2faac8497b2136f7879b9b0b3c64433", - "component.dialog.background": "ff2918d712798a4b487b6f6e5befe7b3eef59883", - "component.dialog.border": "4a6cb3732ad8b36bb9de0d15cbed575c87996088", - "component.dialog.backdrop": "893e60ed671f891241a3084707057185398446ed", - "component.dropdown.background": "09b2dca27ba9efabfe838d713a14ca6e6ac46685", - "component.dropdown.border": "c8cdfff63f4e142d651070ff1056b69a638aaab7", - "component.dropdown.item.delete.text": "864396a8c9b5df0fd948ded7d520ded936d74a8b", - "component.dropdown.item.delete.state.hover": "308dc9064be8e754f8385b0e8ff5489563d7c984", - "component.diff.grey": "43bf4f466a6e231c9951a639313740579c29d824", - "component.diff.add-content": "eb4eccf789a2bda6f3d3875c3310ef0579fd3555", - "component.diff.add-lineNumber": "61583aa6e36aaddd0be173a4a082a450e2522d3a", - "component.diff.add-content-highlight": "ad544fc527ca8b4c297993fe0722b8a7a96ef903", - "component.diff.add-widget": "c1def698ab707194d8f1558e16b05c55d50920d9", - "component.diff.add-widget-color": "a27c504a1f1151974669cf06054c1d0f704ecc38", - "component.diff.del-content": "465e6eb3613967f489cfee4b04f0b283b9e88f91", - "component.diff.del-lineNumber": "4cbe83072b6781d6e3edff645ccb2fb7426c5628", - "component.diff.del-content-highlight": "3e635e401a1a37a259211d093bef70e3a0c507ea", - "component.diff.plain-content": "984456faee2f6a5c202cfd76078ef5b6cd3a05f1", - "component.diff.plain-lineNumber": "6a5550287e7c58afa9d2375c5bfdca4d6c214cf1", - "component.diff.plain-lineNumber-color": "7c1186d20725b53cbefe87f56c5bc6db4e77d898", - "component.diff.empty-content": "712d93a0c1bc9503abda77ae50d624bd328c0057", - "component.diff.hunk-content": "79ad0dfc599f9bc246a6618c85bc1dc59744537f", - "component.diff.hunk-lineNumber": "bccfad80b84e35edf4b47af2ca30057eba2b2ebf", - "component.diff.hunk-content-color": "68c5d6a95d475f7275062e3eb58dba464df3d059", - "component.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", - "component.input.text": "df946237ac2ea0d177f3f2818a673fdf876944c7", - "component.input.placeholder": "85d7632aba08fd476083e508cc2660b17c30981a", - "component.input.icon": "75ca1f38c16fbd5e2697a36c74b0b1dd01f3f5c0", - "component.input.background": "585327333fbbf97bb8db21fbc613025719ca8a87", - "component.input.border": "911dac823dac21c9ccf4e35e10b2eb82a9c6f0ef", - "component.label.text": "80403cd630bba01a064550d9783313227b1d010f", - "component.link.default": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", - "component.link.visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", - "component.nav-tabs.unselected.text": "c085805657bb81574da85d3cb29f89ca08980daa", - "component.nav-tabs.selected.text": "16aa825c8038347237cbe91f7eeece4d2a8d1a2b", - "component.nav-tabs.selected.border": "3427b967112facd59f09fa310c863d7193ea4ffe", - "component.nav-tabs.border": "791d71ca187934e4b98ddff04bc9447a10358699", - "component.nav-tabs.background": "b92549e37390005f2bd1cfce06f9dfb8f67e39e0", - "component.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", - "component.pipeline.card.background": "f207dcff97f000326c4f28293fdbd2830860ce54", - "component.pipeline.card.border": "aa9d9528b1e8e25f9e6dae387b76d9beb2de35a8", - "component.pipeline.card.running.border": "179c0e4d47becc896eb1fbb7f9e8461779b3f680", - "component.pipeline.card.error.border": "1c0b41b41e25250cfb65bdb539bd573be66b0d00", - "component.pipeline.card.completed.border": "14251a54f431aae617af6b9577454a0e212ad76f", - "component.pipeline.card-canvas.1.background": "01bd392d5ddafe85e5575296d08254e52054ba8d", - "component.pipeline.card-canvas.1.border": "b9510abf89f82fb7b779bb730caa1bf393c83bd4", - "component.pipeline.card-canvas.2.background": "87b6b3e65b995fc4180dfb7bf613efb0098d1fff", - "component.pipeline.card-canvas.2.border": "1f9fa1e95134d87995a21738a3877f1c15158e5e", - "component.pipeline.background.dotes": "2784742abff27552789cdd4f2b51cab1331abb4a", - "component.sidebar.background": "8b6619fafae38e8ad94fffd488f2cf53d3c31d76", - "component.sidebar.border": "2263230eae16609a3d95ba5863aa3cc343010131", - "component.sidebar.separator": "a0c913dd38e81e3b2c20ee17642433da6da5f147", - "component.sidebar.hover": "4925b4511178bd2853a6b7b329683d036508aec1", - "component.sidebar.selected": "31f335ecde0aedb12407221718069f5b13574d41", - "component.sidebar.item.unselected.text": "9609e0ad8d79127a3784876f0204d02964f09e43", - "component.sidebar.item.unselected.icon": "5afba128858cf7494fb8a326a435860faf00b0ee", - "component.sidebar.item.selected.text": "5f1daf88cebaea07bd4c2a57c862638340827496", - "component.sidebar.item.selected.icon": "18325fda8139122c4a7cdf6debe2cd1f25d120b7", - "component.sidebar.logo.text": "a3ffa09fdf368badab24aecdbd26709ed7b3c2b2", - "component.sidebar.logo.icon": "c572d382a2018718d719f6a427d31fc9a42f57bd", - "component.sidebar.search.background": "33822e390046e5ec8f71a07fc041514a28778e74", - "component.sidebar.search.border": "f2044f7e8cf503f8809a48a14a88c5ef6466176f", - "component.sidebar.search.placeholder": "665cc00a32edd27b62371ee820d3c3250e629e78", - "component.sidebar.search.btn.background": "70c80e61b9ec397214c809c51de4fdf8177185da", - "component.sidebar.search.btn.border": "1c434c7d16cd4ba880e2d57520c90bc37f6b3879", - "component.sidebar.search.btn.text": "589c7d0162d67165a8752ea54a2c63bb63ee3ad7", - "component.sidebar.footer.username": "68298a8f471bb04f2f0305d9433a2b59613abd8d", - "component.sidebar.footer.data": "6a681d2abb90c2b62a39e20a1d29419c5086f01a", - "component.scrollbar.thumb": "9818c03d003381a966d08d3c6da75af8468bb8ef", - "component.selection.unselected.item": "7a7cad2aa2d6b2803a52eb26c78ea177b84ce241", - "component.selection.unselected.background": "a63ba949d12afc99020e77f95d0538bddba457b3", - "component.selection.unselected.border": "6ef997ebe03bb209ca568a648eb0cc8be69746a6", - "component.selection.selected.item": "f1f43c8acf2d4da10ee2e0d164d4dbe955816018", - "component.selection.selected.background": "1d1bbb9958f047744b66861fd8bd75dc2726dc25", - "component.selection.selected.border": "44b31378ed175b87b50ebad88cfd4a73a66ab9d5", - "component.separator.background": "9f4c82c269bc5aff0fa55d52a0ed59f914057be0", - "component.slider.track.base": "34dc3b5be6733e38f6c28d24d4f3699b2d7ea6f3", - "component.slider.track.progress": "38d8cac26c1cfb91293198eee25299e4aef9c1d8", - "component.slider.track-segments.base": "cb752791a51ff48c6d481426a1affb15048a152a", - "component.slider.track-segments.progress": "a7943fda0e4646e7018046354a9be54cf7d03075", - "component.slider.handle.background": "5c423cc3b672079f1e7dc0d1c8170dade368711a", - "component.slider.handle.border": "94347a2ed2900445946d18c653fb179b8602c533", - "component.status-indicator.completed": "c4c3bce2d28c84c25db4f444f9144b94523737b7", - "component.status-indicator.cancelled": "5aa15732d9ebc41f14b111e252819e2e36617124", - "component.status-indicator.warning": "4dc6e5ea4c736869aee4ebd0ee006f2d73861423", - "component.status-indicator.running": "07ce029f27cf34bf8d6fe3b9a6a600be01c8947e", - "component.status-indicator.merged": "d9eb24404452e6cc2617094fe8f29c69a760ea55", - "component.status-indicator.action-required": "2f1b8543c44b5d93cebddd80b5a9ee2d60fdb146", - "component.status-indicator.waiting": "62f68d300850ce20cf0be8c07d82a41bf1a56ecd", - "component.switch.unselected.thumb": "94d5f0b3a97924583ff697d56db74727b133ba95", - "component.switch.unselected.background": "a8ae87c7bb7ba7f4bfa71f2fdd5f404d19c3a1be", - "component.switch.selected.thumb": "cf6964ec11d69899d5dd39e82d322ea544367e90", - "component.switch.selected.background": "bba05ff96eae08a4adc31a6406e417022d9e5dad", - "component.table.header.text": "65cfc045aa01e3d3eeae4a227cac9be150839db8", - "component.table.header.background": "137c4f2e14bb8cadaf6f900a443700fe928a1fcd", - "component.table.row.alternate-background": "2863f92db433f88f24f62dda4cc9fd50c48130be", - "component.table.row.border": "445d945c4fe4426c3b73cf6f8fe0a572e4525798", - "component.table.cell.text": "73a28f25ba54aff507877ecbfd9942a6ea9f3cea", - "component.tabs.background": "8689ee01219675fb951a2517c2397fba52487971", - "component.tabs.border": "e5bc8cfac224234021c11b381f505da5fcac84ed", - "component.tabs.item.unselected.text": "4af8a5b79c55621f1ed11a7b6fc605657934dc1e", - "component.tabs.item.unselected.background": "fa041cdeb34ba5da6f1bd4cd6d8bb4b8273e0e70", - "component.tabs.item.unselected.border": "79b1a6fe839c012efec923edf40b3bfa2bcdab19", - "component.tabs.item.selected.text": "d048f7001829ff9949b2712b8ca746c8f3f49767", - "component.tabs.item.selected.background": "33269e9854800d565f728ba2a85c5cd3e549b5e8", - "component.tabs.item.selected.border": "11b7e5aeb83fd2f5d968021c750af2ceb5ba5841", - "component.tag.blue.text": "b35e0aebd9d1ebf0fd5d24bbd5ad184db9e11b86", - "component.tag.blue.background": "072fc2901d8ad0199c07bc339d46db086c7b0379", - "component.tag.blue.background-subtle": "67307c003cb91d76e00ef0f3777318e25efac628", - "component.tag.blue.border": "680fb2a6a11251e2619789595cd28c7861aaa530", - "component.tag.brown.text": "b48491f46d15503df99e2d8d9394aa552d09461b", - "component.tag.brown.background": "90b0ee0df4ebe7f06bfd07a7acbe812a45d621a4", - "component.tag.brown.background-subtle": "134ffd2a91ef027e197db6a5331d2726bc080ad6", - "component.tag.brown.border": "675776ff7a30540c297579d72b7f00779d778c14", - "component.tag.cyan.text": "6bf9361c5931ba40663d2c412f28f15382498517", - "component.tag.cyan.background": "83107c8cff314c553ed2cea5c9af1ff3356485e5", - "component.tag.cyan.background-subtle": "7f2724127eebb6e01713828af3736cd2e3734436", - "component.tag.cyan.border": "3286065f931626298e8f3dab2328297e83a79771", - "component.tag.green.text": "699a30f1d5f76ed4e631faa3da63be65e88af039", - "component.tag.green.background": "8b06c35974700260dff1a712c0a3976d4ddb0df5", - "component.tag.green.background-subtle": "c4f47c34772d8367bc3b00645420511f37aaecad", - "component.tag.green.border": "db85545b7d00ef9e199bf863dcdcc2be520f520c", - "component.tag.indigo.text": "d641d4626278e4d17ff4d98202112da9580a6b89", - "component.tag.indigo.background": "bb4af9a068f716c2f0b4f77c228b88009ac049c9", - "component.tag.indigo.background-subtle": "877e3b4ee6040ed581a8349c8fdb5e49ed36dfe0", - "component.tag.indigo.border": "885fdb80c956855c30666c660d5839dc357d1f5f", - "component.tag.lime.text": "763399447b243f761b7cce55f7dcf2fbb1797ee3", - "component.tag.lime.background": "d51cede4c823e16ac204bcaddb65d49c325c3cbe", - "component.tag.lime.background-subtle": "556934df078200ab014c762eeaa04deecd05422e", - "component.tag.lime.border": "fbb53e37ef7cb87cfae5298e69a5ffe4f99a23a7", - "component.tag.mint.text": "d3d406bffbadb1b894e4bb6aef7b1f5a1945094c", - "component.tag.mint.background": "04568a7d0bff5fbc11600bf840916f5451a0fe62", - "component.tag.mint.background-subtle": "1d39716bceda8510beb02e19847c391523e3690a", - "component.tag.mint.border": "c703cecfc8bd82c593dc9d81ce18748edd6ecf4d", - "component.tag.orange.text": "ba407492439b283fedf30a8ab8b16774c0931a9f", - "component.tag.orange.background": "ef766412f340a4aa62c8888a6fdfb2890f3ea207", - "component.tag.orange.background-subtle": "05e823662de8b1f99a062cea3c0f24df69b29362", - "component.tag.orange.border": "2f3023f2311c12acb44cdd28beb888f64d6d2183", - "component.tag.pink.text": "83b73e0e328485233004d42baa8a0948ff2198b0", - "component.tag.pink.background": "b23a211249a71f32bf15757316d0596fdb395962", - "component.tag.pink.background-subtle": "c144f19e07b839d68f20eb5c51ebd94e0f333a82", - "component.tag.pink.border": "b4874a81a08261362f3d8237833b80e68a851b76", - "component.tag.purple.text": "9869d8aad416ac3f9e530b0d62b05dda66906de4", - "component.tag.purple.background": "bc59008310427ba5883f71079b19b8cb4c6dd862", - "component.tag.purple.background-subtle": "a3598602d6e6b1d03f638f1a941801f147f4657a", - "component.tag.purple.border": "de1d577bd170613ab46460e9c50ca8de420152f6", - "component.tag.red.text": "aca8c1832317ac859b4263769855f423840a8569", - "component.tag.red.background": "9008e05416a00096c234511275b92be7204363b6", - "component.tag.red.background-subtle": "986bdd3f8d16488337ca9f46b71b04195d7578b0", - "component.tag.red.border": "f7f9067262546ee6eb77955e38aa0a451fc7f98a", - "component.tag.violet.text": "2ab996ff3465a0b97dee4d7c5606df3d46ab2a07", - "component.tag.violet.background": "4c9b9c2658479fc0e56894975a9b9b8d76df5b00", - "component.tag.violet.background-subtle": "fded9a84a20755592f57f081ebb594bfbaf8cfb3", - "component.tag.violet.border": "77de89ef1ab5168b7ff5e329bde8608047149a04", - "component.tag.yellow.text": "cadfcb4d0fe72fd5828cd764d54198026520e10c", - "component.tag.yellow.background": "a29464cd2a618a77586cb8760478a4d82b12b3ca", - "component.tag.yellow.background-subtle": "1b262be32c5779f024da5ad5696c805a83eb96c7", - "component.tag.yellow.border": "b595821fd5ef662361820415bb878e8ef4ab8939", - "component.tag.gray.text": "e7608c51a2421de226afebbcb909180c8a0cdb5a", - "component.tag.gray.background": "9bcc758ef67bbaac88637e99a702da5d7f7a3144", - "component.tag.gray.background-subtle": "76dfa99dd57cbaf2e7cbec9511cd1e1ddd92ee0e", - "component.tag.gray.border": "02e03f32969f9e6120bb6c7a3b781a5446f1bef1", - "component.toast.default.title": "f791d24eeab59c12cf4aad84f4677099bb4a01c1", - "component.toast.default.description": "6000da4ada3b9445750fb4b7b990726df120c271", - "component.toast.default.background": "5b9e9ea5b7de018a92d3deb902257e4e2bbb49f9", - "component.toast.default.border": "f74755bc7843dc9d7c788c54178b7ce3b83dea3f", - "component.toast.danger.title": "b5ad1c43fcee32eb251b980e884e77ea137c3369", - "component.toast.danger.description": "d281b5c13f2a4a293042f52b168e39f8bec398da", - "component.toast.danger.background": "8ba5c70e994ab44aeb72b3ed7f26ca9646d59cc0", - "component.toast.danger.border": "7f5252c13b96825084248b367f36377bb003ca96", - "component.tooltip.text": "b79a7ec441cdc7c6eee9313602f081d063327c1d", - "component.tooltip.background": "a35d0240a1c4de13350e6a4770dd1703a90a9227", - "component.tooltip.border": "d57b38546841813d61da59d66e98a8921f2f3ee7", - "shadow-color.0": "c0c282f63e107374a732d74c1742cf60d52e6e5c", - "shadow-color.1": "1ec33a9c84353664d23cd23d6c033d1c330c149a", - "shadow-color.2": "6200a000044d8dbee421ed4afb0c3ff42febb6ef", - "shadow-color.3": "77d99afb159d8e193a82f615dd84de3214e00703", - "shadow-color.4": "2b2e0307d252bdc6db53a23ce2cc2e9bb4f6b914", - "shadow-color.5": "5a6c707240bab54cb4403f47262abfe0756efc9a", - "shadow-color.6": "928283d00759150575a8f155da90180a582be438", - "shadow-color.inner": "6cb5a98fba0b13e952859b9f023259b5c06cfd1a", - "gradient.ai.gradient-stop-1": "8db516caa68afc5b8fdd6fc6e5a9bad7715c5f26", - "gradient.ai.gradient-stop-2": "33930f41665251a281973a37847f357480aedca3", - "gradient.ai.gradient-stop-3": "c9e14c3db8e622b10b1cd3e860115cd6f876ae49", - "gradient.ai.gradient-stop-4": "6e7d0850d7eb1e699f87b41f6ffd4cb8d73d72e8", - "gradient.skeleton.gradient-stop-1": "5427016b990b75f0d1ce60eef8cb9b96d75fbde2", - "gradient.skeleton.gradient-stop-2": "01442c311e6da751c30c3518fc32970306767274", - "gradient.skeleton.gradient-stop-3": "7fda4c834a3daf0c56bb59777c525670ae2dee3e", - "gradient.pipeline.running.gradient-stop-1": "0c187d1ebb015ec66bac356009795316f84807ae", - "gradient.pipeline.running.gradient-stop-2": "d1251f86c91bd0f29d8ac8cfa01056bc307156b4", - "gradient.pipeline.running.gradient-stop-3": "b09bdab234cdf7c204cb153ec94ea0a9b2bb4976", - "gradient.pipeline.arrows.gradient-stop-1": "0465e74baaf10a12f23b9eaa40fc1ae08485a0d5", - "gradient.pipeline.arrows.gradient-stop-2": "4cadc4f9a5e66f28eaa27fb54b6ce538ea430c7d", - "gradient.pipeline.arrows.gradient-stop-3": "5af16d4ae6b63ff8dcf3254009e712db4ac1a3f9", - "gradient.pipeline.card.background.gradient-from": "8404a4e146121987426681accb996902179fad72", - "gradient.pipeline.card.background.gradient-to": "037bbd7fb410d05993a48594626a7babb32605a6", - "gradient.pipeline.card.border.gradient-from": "342926ec7179e7cbe133981050c1e1e41d94ed7a", - "gradient.pipeline.card.border.gradient-to": "8e39428cc5ce20f3593127f2ef71f180b38ee9a4", - "gradient.pipeline.widget.number.gradient-from": "dc372cb50eedf6023cd80cb6a4520e5fdf91358b", - "gradient.pipeline.widget.number.gradient-to": "e505c8d9dd140f5a671c1291ffd519fcff5c3e2c", - "gradient.pipeline.widget.blob.big.gradient-from": "b518524b25a5b95804988c640c4d52ba7ebd4599", - "gradient.pipeline.widget.blob.big.gradient-to": "80a493af10245e0ebbc6a51f5452d61d836a3754", - "gradient.pipeline.widget.blob.small.gradient-from": "8d7be31e69f0e54dd2e493d9051c2268078ea5ed", - "gradient.pipeline.widget.blob.small.gradient-to": "198813cf6242881ce0e0d030ca22ef31f9190d13", - "iconStrokeWidth.xxs": "751ceaa292e27736009bef894b62f83c1b2d66d8", - "iconStrokeWidth.xs": "77ca59c88a0b47972554b1db3f6469a230a6ad8c", - "iconStrokeWidth.sm": "e445b22e1f18af07002a1dc76f900dada5477383", - "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", - "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", - "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "component.dropdown.item.text": "2f1f1ea9d368ec8be380803506fbf657cabe6ac0" - }, - "group": "mode" - }, - { - "id": "0ba820914a4b7a835ae16ab570e05388a4c122bf", - "name": "dark-deuteranopia", - "$figmaStyleReferences": { - "shadow.0": "S:a2ed3778198048e91067a04633c27ba20e9fcbec,", - "shadow.1": "S:947694488889f7271c428950bec937ee79f8a536,", - "shadow.2": "S:70378f090cb66b03ee4b18e25742743934f37757,", - "shadow.3": "S:aa7e83fd47e75f5a1ae3e17f64417d5e9fcb96ae,", - "shadow.4": "S:5dfba690094db266c4ab7686fccbbedd8c16385f,", - "shadow.5": "S:d6752151a8dd3bd4b4bf12ad15a80c522f760731,", - "shadow.6": "S:da8e7b5b0f1352215fbaab66eff62a3e19d22b67,", - "shadow.inner": "S:2805cdc40176a4707d5cfc549b4c12e7ec4e74ff,", - "ring.focus": "S:062018f6483f54f1255b952aa1759b028d502ac3," - }, - "selectedTokenSets": { - "mode/dark/default-deuteranopia": "enabled" - }, - "$figmaCollectionId": "VariableCollectionId:1340:156918", - "$figmaModeId": "1389:5", - "$figmaVariableReferences": { - "background.1": "633e5f77aa1bd1bd133852d8372b9c9f1231a9e4", - "background.2": "14e8d4b56cc273b508af8a2c58cb00e99e08d1d3", - "background.3": "33554ff11e1eab35e50aa3570f51d53f16f46d6a", - "text.1": "38382b9984a98f9d26692a7f2882dfb5c5d51825", - "text.2": "115f62efd02491e85a63dfd601b03725d3711f23", - "text.3": "1c7327f01cf759b17fd0523cb540afa8700c1dc7", - "text.accent": "0b3cd5357659e6542cca163ccfd96c0cac059203", - "text.success": "ee56057b81e6d0872a84ca6b29affc8911fe333e", - "text.danger": "c7e38d7c7afc899f4d40392dbd6bc5ed6580264d", - "text.warning": "b03334e4c9db4b76269e4be886df6c1abf74d0ca", - "border.1": "5ad2231a611605964ba70f80e7aabb48f04bc704", - "border.2": "9084bef359e38136e0dddac25a464896456a9b1a", - "border.3": "5ff5d5233f7cb0233ce7634bc480026668c818f6", - "border.focus": "8db219e896acc4d828aaaf4add646d96540a84ea", - "border.success": "b13758973865eab0b4d79028a48e457eae8bec47", - "border.danger": "33d53c1486021bb3c9edce4123b484a2aabc8de0", - "border.warning": "027e57e08a1edcaaa7fbe033902bb3f65497abb4", - "state.hover": "78426caca2a07ee56132762a720ae07e2810f03b", - "state.selected": "ef914056c9c9dbaef00fa8795702a3cb933ee761", - "state.disabled.text": "967ab1b863941c100f58cc55e611ee2709051f01", - "state.disabled.background": "7a192b5ddcc570f0c8e3a5dbfd54d780e2832bbd", - "state.disabled.border": "067fd26e80ad39a28f738a3b76d21d354092d551", - "component.accordion.title": "5e49d6ddf7f2b21724b474d4a5545256143dce54", - "component.accordion.description": "bc47401a69d07fa71f0371765ed940745fc7a5b9", - "component.accordion.chevron": "5dd530f96134323125031668d4ea98a36ea0de86", - "component.accordion.border": "0b3fcc0e02a2a86625b2b4a9cfeebfad9486bc3a", - "component.alert.default.title": "d8e59ed205399e9727b0dcecdccad3d8daaaa622", - "component.alert.default.description": "f9ec7fec91747435740f000fb642f9009e8fc2db", - "component.alert.default.background": "7fbbdfcc33a3051394f89675798db2159741a5fc", - "component.alert.default.border": "549692bf2f70f6b40c7d55259f8890189aa6cc98", - "component.alert.danger.title": "c8da1cdbba8e0f86edda5fd3869f6186d53881ca", - "component.alert.danger.description": "366849405bd53c78f0b73d72585034a52f05d9a7", - "component.alert.danger.background": "5756a9bdba027993a9879b32ed129e3034028cdf", - "component.alert.danger.border": "a1a3be9eefab6edf2e996a46537872680dc45a09", - "component.avatar.text": "23018f4c7f22c4afb3b7e49f585a1fbb591209de", - "component.avatar.background": "57703fddbd26d363509fdba3aea037bd2f515ee0", - "component.avatar.border": "d651f4cb9082aa4d6e6af2c5abab700d683a5c85", - "component.badge.default.text": "ab90828e3b8c6adce5dc10bf85107b001b958e95", - "component.badge.default.background": "706b070b298e2d2a97665baf7af05187eefeb4fe", - "component.badge.default.border": "a935a2968ca4ecfb8cc58a18f31ae8fe65eb516b", - "component.badge.neutral.text": "82d39f1786c4371303ae21e4c02db79989c54e36", - "component.badge.neutral.background": "f5480b1a2b648fdb0561acda7515c38271cfb04b", - "component.badge.neutral.border": "00f05792ddf6e53bff79346df6a34144426d50e0", - "component.badge.success.text": "71014a6138e8747257a21144f8114b906cfe0f0a", - "component.badge.success.border": "190589c6021debb7bb676f05ac7f063c237fd4aa", - "component.badge.success.background": "177eb9f406784ddb958232cd643ebbb3490a53d4", - "component.badge.danger.text": "6c0c04f17c2bc0ee085d09bf0f205dcbc66c1e17", - "component.badge.danger.border": "6bb014acbbd68a796ed0c4d8c4f73e8e9e619923", - "component.badge.danger.background": "4162b10332d17800585d97ed45e45d69c2006808", - "component.badge.warning.text": "8581620d95e5b92a8c85341ebf63f21fcf7133d0", - "component.badge.warning.border": "71cb519182108ac72ffef823935546e4bff62bbc", - "component.badge.warning.background": "74c13457a85684a054426bd833859fe93eaec978", - "component.badge.running.text": "0b0c1be217e557a5b14c1cb25e988e4ac6d40583", - "component.badge.running.border": "27d3c48d3c316bc4f980282759b5e82f8aaaf49d", - "component.badge.running.background": "a85fddc26baf586ac7ba79e381e5f8fefca87c65", - "component.badge.merged.text": "a83d66ef53e8a094a62f2b32a4d17e58d552b1ef", - "component.badge.merged.border": "755392bca643af0a3fe5492069881a870aa11dc3", - "component.badge.merged.background": "4f4c81b1fe43bfe0d721a22d0aeb93079776cf6d", - "component.badge.ai.text": "bb4daee92817073da0366090742d0a17babb5728", - "component.badge.ai.background": "c5764a2304bf0e8a153c9ce0da20827696a76b41", - "component.breadcrumb.item-inactive": "2f009ca6cafb50c994205c9df02ee2d2503f7d23", - "component.breadcrumb.item-current": "7b502cc2e72f66bb501fdc5f480d0133d1b3841a", - "component.breadcrumb.separator": "1cd28c3ff97ab2f529a19c632d89dd44af0aad80", - "component.btn.primary.text": "9d32f032da93c9aab8b3bc6087c26aa12f507ad7", - "component.btn.primary.background": "410d584a3469233e067d0592a366fdebbe1049bc", - "component.btn.primary.border": "1491ac71f9681307c2d6528e443504e079061988", - "component.btn.secondary.text": "12c93d1b08ae50645a3b8f59256fcec00a4f84ca", - "component.btn.secondary.background": "86434310c95f5c055783011cc0e7c7918f67a35c", - "component.btn.secondary.border": "66bda91f87154efd3cefdc7a634ecb8afa8cd285", - "component.btn.outline.unselected.text": "9cf2c495178d6fdfd8f1360376242acbd4dc5e75", - "component.btn.outline.unselected.icon": "af1510c6050f671219d2089e0e59d5febb4422d6", - "component.btn.outline.unselected.border": "2b3013d632e566301e9f5f1a5cbb6aab4e7ec53f", - "component.btn.outline.selected.text": "13b50089245dec1899db2012412efcf649e2c0b4", - "component.btn.outline.selected.icon": "2bdf2c92b22e814109f4e05ec4d41d92f934a15d", - "component.btn.outline.selected.border": "ef10f4599233f62203def151b386013ddaa63afb", - "component.btn.ghost.unselected.text": "43fa10dd413cddb9a2e2142ead9ca3b4a91b49a6", - "component.btn.ghost.unselected.icon": "5ce332f51238b374104ec53067d685c26882f38e", - "component.btn.ghost.selected.text": "74cbf3b86016e05517f8c7bc64652281c940363e", - "component.btn.ghost.selected.icon": "1d8c6206a136d9c176ffba600a1e94618c4b96f8", - "component.btn.success.text": "52a336440e013bbc849ad67a43d0e136cf4f0b51", - "component.btn.success.background": "608ca6930129b4e5ff36d7f38508ae2537b66629", - "component.btn.success.border": "1f74d9985a10fe20e0acc4647cf4949005e9d4f1", - "component.btn.success.state.hover": "d05bde38a6539a11e3ccd87345af113ccd6bd113", - "component.btn.success.state.active": "f6e48e68dba6c32de27fadcaca3d1959f081d2e5", - "component.btn.danger.text": "49c02562362b8f775cfc2c4c614ecd646dcc2716", - "component.btn.danger.background": "0b015d0a4f456781969d7ffaf135c7c2a8858440", - "component.btn.danger.border": "9f99ee56f1ae2b7eb2f98300b83d4f53b15fd763", - "component.btn.danger.state.hover": "e7756e1d022d893bfa5fdd619f181d26fb7b117b", - "component.btn.danger.state.active": "23c7c85ff6104e098a208b6f4b86c1d0eef0f543", - "component.btn.ai.text": "380368600319fa12b73538ff52acd9d0e977e367", - "component.btn.ai.background": "8c9a1d07e05837f50588b642a4b51462f883887d", - "component.card.background": "256878745d17a46b7159919d8e30a3e960f59575", - "component.card.border": "3688ffcc56c4fb44dc0e221b8e09a958fd9e509d", - "component.dialog.title": "e6e0ff2bf1f3802eb21492e8b833c5f5e679cd82", - "component.dialog.description": "301509fcf2faac8497b2136f7879b9b0b3c64433", - "component.dialog.background": "ff2918d712798a4b487b6f6e5befe7b3eef59883", - "component.dialog.border": "4a6cb3732ad8b36bb9de0d15cbed575c87996088", - "component.dialog.backdrop": "893e60ed671f891241a3084707057185398446ed", - "component.dropdown.background": "09b2dca27ba9efabfe838d713a14ca6e6ac46685", - "component.dropdown.border": "c8cdfff63f4e142d651070ff1056b69a638aaab7", - "component.dropdown.item.delete.text": "864396a8c9b5df0fd948ded7d520ded936d74a8b", - "component.dropdown.item.delete.state.hover": "308dc9064be8e754f8385b0e8ff5489563d7c984", - "component.diff.grey": "43bf4f466a6e231c9951a639313740579c29d824", - "component.diff.add-content": "eb4eccf789a2bda6f3d3875c3310ef0579fd3555", - "component.diff.add-lineNumber": "61583aa6e36aaddd0be173a4a082a450e2522d3a", - "component.diff.add-content-highlight": "ad544fc527ca8b4c297993fe0722b8a7a96ef903", - "component.diff.add-widget": "c1def698ab707194d8f1558e16b05c55d50920d9", - "component.diff.add-widget-color": "a27c504a1f1151974669cf06054c1d0f704ecc38", - "component.diff.del-content": "465e6eb3613967f489cfee4b04f0b283b9e88f91", - "component.diff.del-lineNumber": "4cbe83072b6781d6e3edff645ccb2fb7426c5628", - "component.diff.del-content-highlight": "3e635e401a1a37a259211d093bef70e3a0c507ea", - "component.diff.plain-content": "984456faee2f6a5c202cfd76078ef5b6cd3a05f1", - "component.diff.plain-lineNumber": "6a5550287e7c58afa9d2375c5bfdca4d6c214cf1", - "component.diff.plain-lineNumber-color": "7c1186d20725b53cbefe87f56c5bc6db4e77d898", - "component.diff.empty-content": "712d93a0c1bc9503abda77ae50d624bd328c0057", - "component.diff.hunk-content": "79ad0dfc599f9bc246a6618c85bc1dc59744537f", - "component.diff.hunk-lineNumber": "bccfad80b84e35edf4b47af2ca30057eba2b2ebf", - "component.diff.hunk-content-color": "68c5d6a95d475f7275062e3eb58dba464df3d059", - "component.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", - "component.input.text": "df946237ac2ea0d177f3f2818a673fdf876944c7", - "component.input.placeholder": "85d7632aba08fd476083e508cc2660b17c30981a", - "component.input.icon": "75ca1f38c16fbd5e2697a36c74b0b1dd01f3f5c0", - "component.input.background": "585327333fbbf97bb8db21fbc613025719ca8a87", - "component.input.border": "911dac823dac21c9ccf4e35e10b2eb82a9c6f0ef", - "component.label.text": "80403cd630bba01a064550d9783313227b1d010f", - "component.link.default": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", - "component.link.visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", - "component.nav-tabs.unselected.text": "c085805657bb81574da85d3cb29f89ca08980daa", - "component.nav-tabs.selected.text": "16aa825c8038347237cbe91f7eeece4d2a8d1a2b", - "component.nav-tabs.selected.border": "3427b967112facd59f09fa310c863d7193ea4ffe", - "component.nav-tabs.border": "791d71ca187934e4b98ddff04bc9447a10358699", - "component.nav-tabs.background": "b92549e37390005f2bd1cfce06f9dfb8f67e39e0", - "component.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", - "component.pipeline.card.background": "f207dcff97f000326c4f28293fdbd2830860ce54", - "component.pipeline.card.border": "aa9d9528b1e8e25f9e6dae387b76d9beb2de35a8", - "component.pipeline.card.running.border": "179c0e4d47becc896eb1fbb7f9e8461779b3f680", - "component.pipeline.card.error.border": "1c0b41b41e25250cfb65bdb539bd573be66b0d00", - "component.pipeline.card.completed.border": "14251a54f431aae617af6b9577454a0e212ad76f", - "component.pipeline.card-canvas.1.background": "01bd392d5ddafe85e5575296d08254e52054ba8d", - "component.pipeline.card-canvas.1.border": "b9510abf89f82fb7b779bb730caa1bf393c83bd4", - "component.pipeline.card-canvas.2.background": "87b6b3e65b995fc4180dfb7bf613efb0098d1fff", - "component.pipeline.card-canvas.2.border": "1f9fa1e95134d87995a21738a3877f1c15158e5e", - "component.pipeline.background.dotes": "2784742abff27552789cdd4f2b51cab1331abb4a", - "component.sidebar.background": "8b6619fafae38e8ad94fffd488f2cf53d3c31d76", - "component.sidebar.border": "2263230eae16609a3d95ba5863aa3cc343010131", - "component.sidebar.separator": "a0c913dd38e81e3b2c20ee17642433da6da5f147", - "component.sidebar.hover": "4925b4511178bd2853a6b7b329683d036508aec1", - "component.sidebar.selected": "31f335ecde0aedb12407221718069f5b13574d41", - "component.sidebar.item.unselected.text": "9609e0ad8d79127a3784876f0204d02964f09e43", - "component.sidebar.item.unselected.icon": "5afba128858cf7494fb8a326a435860faf00b0ee", - "component.sidebar.item.selected.text": "5f1daf88cebaea07bd4c2a57c862638340827496", - "component.sidebar.item.selected.icon": "18325fda8139122c4a7cdf6debe2cd1f25d120b7", - "component.sidebar.logo.text": "a3ffa09fdf368badab24aecdbd26709ed7b3c2b2", - "component.sidebar.logo.icon": "c572d382a2018718d719f6a427d31fc9a42f57bd", - "component.sidebar.search.background": "33822e390046e5ec8f71a07fc041514a28778e74", - "component.sidebar.search.border": "f2044f7e8cf503f8809a48a14a88c5ef6466176f", - "component.sidebar.search.placeholder": "665cc00a32edd27b62371ee820d3c3250e629e78", - "component.sidebar.search.btn.background": "70c80e61b9ec397214c809c51de4fdf8177185da", - "component.sidebar.search.btn.border": "1c434c7d16cd4ba880e2d57520c90bc37f6b3879", - "component.sidebar.search.btn.text": "589c7d0162d67165a8752ea54a2c63bb63ee3ad7", - "component.sidebar.footer.username": "68298a8f471bb04f2f0305d9433a2b59613abd8d", - "component.sidebar.footer.data": "6a681d2abb90c2b62a39e20a1d29419c5086f01a", - "component.scrollbar.thumb": "9818c03d003381a966d08d3c6da75af8468bb8ef", - "component.selection.unselected.item": "7a7cad2aa2d6b2803a52eb26c78ea177b84ce241", - "component.selection.unselected.background": "a63ba949d12afc99020e77f95d0538bddba457b3", - "component.selection.unselected.border": "6ef997ebe03bb209ca568a648eb0cc8be69746a6", - "component.selection.selected.item": "f1f43c8acf2d4da10ee2e0d164d4dbe955816018", - "component.selection.selected.background": "1d1bbb9958f047744b66861fd8bd75dc2726dc25", - "component.selection.selected.border": "44b31378ed175b87b50ebad88cfd4a73a66ab9d5", - "component.separator.background": "9f4c82c269bc5aff0fa55d52a0ed59f914057be0", - "component.slider.track.base": "34dc3b5be6733e38f6c28d24d4f3699b2d7ea6f3", - "component.slider.track.progress": "38d8cac26c1cfb91293198eee25299e4aef9c1d8", - "component.slider.track-segments.base": "cb752791a51ff48c6d481426a1affb15048a152a", - "component.slider.track-segments.progress": "a7943fda0e4646e7018046354a9be54cf7d03075", - "component.slider.handle.background": "5c423cc3b672079f1e7dc0d1c8170dade368711a", - "component.slider.handle.border": "94347a2ed2900445946d18c653fb179b8602c533", - "component.status-indicator.completed": "c4c3bce2d28c84c25db4f444f9144b94523737b7", - "component.status-indicator.cancelled": "5aa15732d9ebc41f14b111e252819e2e36617124", - "component.status-indicator.warning": "4dc6e5ea4c736869aee4ebd0ee006f2d73861423", - "component.status-indicator.running": "07ce029f27cf34bf8d6fe3b9a6a600be01c8947e", - "component.status-indicator.merged": "d9eb24404452e6cc2617094fe8f29c69a760ea55", - "component.status-indicator.action-required": "2f1b8543c44b5d93cebddd80b5a9ee2d60fdb146", - "component.status-indicator.waiting": "62f68d300850ce20cf0be8c07d82a41bf1a56ecd", - "component.switch.unselected.thumb": "94d5f0b3a97924583ff697d56db74727b133ba95", - "component.switch.unselected.background": "a8ae87c7bb7ba7f4bfa71f2fdd5f404d19c3a1be", - "component.switch.selected.thumb": "cf6964ec11d69899d5dd39e82d322ea544367e90", - "component.switch.selected.background": "bba05ff96eae08a4adc31a6406e417022d9e5dad", - "component.table.header.text": "65cfc045aa01e3d3eeae4a227cac9be150839db8", - "component.table.header.background": "137c4f2e14bb8cadaf6f900a443700fe928a1fcd", - "component.table.row.alternate-background": "2863f92db433f88f24f62dda4cc9fd50c48130be", - "component.table.row.border": "445d945c4fe4426c3b73cf6f8fe0a572e4525798", - "component.table.cell.text": "73a28f25ba54aff507877ecbfd9942a6ea9f3cea", - "component.tabs.background": "8689ee01219675fb951a2517c2397fba52487971", - "component.tabs.border": "e5bc8cfac224234021c11b381f505da5fcac84ed", - "component.tabs.item.unselected.text": "4af8a5b79c55621f1ed11a7b6fc605657934dc1e", - "component.tabs.item.unselected.background": "fa041cdeb34ba5da6f1bd4cd6d8bb4b8273e0e70", - "component.tabs.item.unselected.border": "79b1a6fe839c012efec923edf40b3bfa2bcdab19", - "component.tabs.item.selected.text": "d048f7001829ff9949b2712b8ca746c8f3f49767", - "component.tabs.item.selected.background": "33269e9854800d565f728ba2a85c5cd3e549b5e8", - "component.tabs.item.selected.border": "11b7e5aeb83fd2f5d968021c750af2ceb5ba5841", - "component.tag.blue.text": "b35e0aebd9d1ebf0fd5d24bbd5ad184db9e11b86", - "component.tag.blue.background": "072fc2901d8ad0199c07bc339d46db086c7b0379", - "component.tag.blue.background-subtle": "67307c003cb91d76e00ef0f3777318e25efac628", - "component.tag.blue.border": "680fb2a6a11251e2619789595cd28c7861aaa530", - "component.tag.brown.text": "b48491f46d15503df99e2d8d9394aa552d09461b", - "component.tag.brown.background": "90b0ee0df4ebe7f06bfd07a7acbe812a45d621a4", - "component.tag.brown.background-subtle": "134ffd2a91ef027e197db6a5331d2726bc080ad6", - "component.tag.brown.border": "675776ff7a30540c297579d72b7f00779d778c14", - "component.tag.cyan.text": "6bf9361c5931ba40663d2c412f28f15382498517", - "component.tag.cyan.background": "83107c8cff314c553ed2cea5c9af1ff3356485e5", - "component.tag.cyan.background-subtle": "7f2724127eebb6e01713828af3736cd2e3734436", - "component.tag.cyan.border": "3286065f931626298e8f3dab2328297e83a79771", - "component.tag.green.text": "699a30f1d5f76ed4e631faa3da63be65e88af039", - "component.tag.green.background": "8b06c35974700260dff1a712c0a3976d4ddb0df5", - "component.tag.green.background-subtle": "c4f47c34772d8367bc3b00645420511f37aaecad", - "component.tag.green.border": "db85545b7d00ef9e199bf863dcdcc2be520f520c", - "component.tag.indigo.text": "d641d4626278e4d17ff4d98202112da9580a6b89", - "component.tag.indigo.background": "bb4af9a068f716c2f0b4f77c228b88009ac049c9", - "component.tag.indigo.background-subtle": "877e3b4ee6040ed581a8349c8fdb5e49ed36dfe0", - "component.tag.indigo.border": "885fdb80c956855c30666c660d5839dc357d1f5f", - "component.tag.lime.text": "763399447b243f761b7cce55f7dcf2fbb1797ee3", - "component.tag.lime.background": "d51cede4c823e16ac204bcaddb65d49c325c3cbe", - "component.tag.lime.background-subtle": "556934df078200ab014c762eeaa04deecd05422e", - "component.tag.lime.border": "fbb53e37ef7cb87cfae5298e69a5ffe4f99a23a7", - "component.tag.mint.text": "d3d406bffbadb1b894e4bb6aef7b1f5a1945094c", - "component.tag.mint.background": "04568a7d0bff5fbc11600bf840916f5451a0fe62", - "component.tag.mint.background-subtle": "1d39716bceda8510beb02e19847c391523e3690a", - "component.tag.mint.border": "c703cecfc8bd82c593dc9d81ce18748edd6ecf4d", - "component.tag.orange.text": "ba407492439b283fedf30a8ab8b16774c0931a9f", - "component.tag.orange.background": "ef766412f340a4aa62c8888a6fdfb2890f3ea207", - "component.tag.orange.background-subtle": "05e823662de8b1f99a062cea3c0f24df69b29362", - "component.tag.orange.border": "2f3023f2311c12acb44cdd28beb888f64d6d2183", - "component.tag.pink.text": "83b73e0e328485233004d42baa8a0948ff2198b0", - "component.tag.pink.background": "b23a211249a71f32bf15757316d0596fdb395962", - "component.tag.pink.background-subtle": "c144f19e07b839d68f20eb5c51ebd94e0f333a82", - "component.tag.pink.border": "b4874a81a08261362f3d8237833b80e68a851b76", - "component.tag.purple.text": "9869d8aad416ac3f9e530b0d62b05dda66906de4", - "component.tag.purple.background": "bc59008310427ba5883f71079b19b8cb4c6dd862", - "component.tag.purple.background-subtle": "a3598602d6e6b1d03f638f1a941801f147f4657a", - "component.tag.purple.border": "de1d577bd170613ab46460e9c50ca8de420152f6", - "component.tag.red.text": "aca8c1832317ac859b4263769855f423840a8569", - "component.tag.red.background": "9008e05416a00096c234511275b92be7204363b6", - "component.tag.red.background-subtle": "986bdd3f8d16488337ca9f46b71b04195d7578b0", - "component.tag.red.border": "f7f9067262546ee6eb77955e38aa0a451fc7f98a", - "component.tag.violet.text": "2ab996ff3465a0b97dee4d7c5606df3d46ab2a07", - "component.tag.violet.background": "4c9b9c2658479fc0e56894975a9b9b8d76df5b00", - "component.tag.violet.background-subtle": "fded9a84a20755592f57f081ebb594bfbaf8cfb3", - "component.tag.violet.border": "77de89ef1ab5168b7ff5e329bde8608047149a04", - "component.tag.yellow.text": "cadfcb4d0fe72fd5828cd764d54198026520e10c", - "component.tag.yellow.background": "a29464cd2a618a77586cb8760478a4d82b12b3ca", - "component.tag.yellow.background-subtle": "1b262be32c5779f024da5ad5696c805a83eb96c7", - "component.tag.yellow.border": "b595821fd5ef662361820415bb878e8ef4ab8939", - "component.tag.gray.text": "e7608c51a2421de226afebbcb909180c8a0cdb5a", - "component.tag.gray.background": "9bcc758ef67bbaac88637e99a702da5d7f7a3144", - "component.tag.gray.background-subtle": "76dfa99dd57cbaf2e7cbec9511cd1e1ddd92ee0e", - "component.tag.gray.border": "02e03f32969f9e6120bb6c7a3b781a5446f1bef1", - "component.toast.default.title": "f791d24eeab59c12cf4aad84f4677099bb4a01c1", - "component.toast.default.description": "6000da4ada3b9445750fb4b7b990726df120c271", - "component.toast.default.background": "5b9e9ea5b7de018a92d3deb902257e4e2bbb49f9", - "component.toast.default.border": "f74755bc7843dc9d7c788c54178b7ce3b83dea3f", - "component.toast.danger.title": "b5ad1c43fcee32eb251b980e884e77ea137c3369", - "component.toast.danger.description": "d281b5c13f2a4a293042f52b168e39f8bec398da", - "component.toast.danger.background": "8ba5c70e994ab44aeb72b3ed7f26ca9646d59cc0", - "component.toast.danger.border": "7f5252c13b96825084248b367f36377bb003ca96", - "component.tooltip.text": "b79a7ec441cdc7c6eee9313602f081d063327c1d", - "component.tooltip.background": "a35d0240a1c4de13350e6a4770dd1703a90a9227", - "component.tooltip.border": "d57b38546841813d61da59d66e98a8921f2f3ee7", - "shadow-color.0": "c0c282f63e107374a732d74c1742cf60d52e6e5c", - "shadow-color.1": "1ec33a9c84353664d23cd23d6c033d1c330c149a", - "shadow-color.2": "6200a000044d8dbee421ed4afb0c3ff42febb6ef", - "shadow-color.3": "77d99afb159d8e193a82f615dd84de3214e00703", - "shadow-color.4": "2b2e0307d252bdc6db53a23ce2cc2e9bb4f6b914", - "shadow-color.5": "5a6c707240bab54cb4403f47262abfe0756efc9a", - "shadow-color.6": "928283d00759150575a8f155da90180a582be438", - "shadow-color.inner": "6cb5a98fba0b13e952859b9f023259b5c06cfd1a", - "gradient.ai.gradient-stop-1": "8db516caa68afc5b8fdd6fc6e5a9bad7715c5f26", - "gradient.ai.gradient-stop-2": "33930f41665251a281973a37847f357480aedca3", - "gradient.ai.gradient-stop-3": "c9e14c3db8e622b10b1cd3e860115cd6f876ae49", - "gradient.ai.gradient-stop-4": "6e7d0850d7eb1e699f87b41f6ffd4cb8d73d72e8", - "gradient.skeleton.gradient-stop-1": "5427016b990b75f0d1ce60eef8cb9b96d75fbde2", - "gradient.skeleton.gradient-stop-2": "01442c311e6da751c30c3518fc32970306767274", - "gradient.skeleton.gradient-stop-3": "7fda4c834a3daf0c56bb59777c525670ae2dee3e", - "gradient.pipeline.running.gradient-stop-1": "0c187d1ebb015ec66bac356009795316f84807ae", - "gradient.pipeline.running.gradient-stop-2": "d1251f86c91bd0f29d8ac8cfa01056bc307156b4", - "gradient.pipeline.running.gradient-stop-3": "b09bdab234cdf7c204cb153ec94ea0a9b2bb4976", - "gradient.pipeline.arrows.gradient-stop-1": "0465e74baaf10a12f23b9eaa40fc1ae08485a0d5", - "gradient.pipeline.arrows.gradient-stop-2": "4cadc4f9a5e66f28eaa27fb54b6ce538ea430c7d", - "gradient.pipeline.arrows.gradient-stop-3": "5af16d4ae6b63ff8dcf3254009e712db4ac1a3f9", - "gradient.pipeline.card.background.gradient-from": "8404a4e146121987426681accb996902179fad72", - "gradient.pipeline.card.background.gradient-to": "037bbd7fb410d05993a48594626a7babb32605a6", - "gradient.pipeline.card.border.gradient-from": "342926ec7179e7cbe133981050c1e1e41d94ed7a", - "gradient.pipeline.card.border.gradient-to": "8e39428cc5ce20f3593127f2ef71f180b38ee9a4", - "gradient.pipeline.widget.number.gradient-from": "dc372cb50eedf6023cd80cb6a4520e5fdf91358b", - "gradient.pipeline.widget.number.gradient-to": "e505c8d9dd140f5a671c1291ffd519fcff5c3e2c", - "gradient.pipeline.widget.blob.big.gradient-from": "b518524b25a5b95804988c640c4d52ba7ebd4599", - "gradient.pipeline.widget.blob.big.gradient-to": "80a493af10245e0ebbc6a51f5452d61d836a3754", - "gradient.pipeline.widget.blob.small.gradient-from": "8d7be31e69f0e54dd2e493d9051c2268078ea5ed", - "gradient.pipeline.widget.blob.small.gradient-to": "198813cf6242881ce0e0d030ca22ef31f9190d13", - "iconStrokeWidth.xxs": "751ceaa292e27736009bef894b62f83c1b2d66d8", - "iconStrokeWidth.xs": "77ca59c88a0b47972554b1db3f6469a230a6ad8c", - "iconStrokeWidth.sm": "e445b22e1f18af07002a1dc76f900dada5477383", - "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", - "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", - "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "component.dropdown.item.text": "2f1f1ea9d368ec8be380803506fbf657cabe6ac0" - }, - "group": "mode" - }, - { - "id": "363ff162c776a42300fdcb513bbcf441ac503ec0", - "name": "dark-dimmer-deuteranopia", - "$figmaStyleReferences": { - "shadow.0": "S:a2ed3778198048e91067a04633c27ba20e9fcbec,", - "shadow.1": "S:947694488889f7271c428950bec937ee79f8a536,", - "shadow.2": "S:70378f090cb66b03ee4b18e25742743934f37757,", - "shadow.3": "S:aa7e83fd47e75f5a1ae3e17f64417d5e9fcb96ae,", - "shadow.4": "S:5dfba690094db266c4ab7686fccbbedd8c16385f,", - "shadow.5": "S:d6752151a8dd3bd4b4bf12ad15a80c522f760731,", - "shadow.6": "S:da8e7b5b0f1352215fbaab66eff62a3e19d22b67,", - "shadow.inner": "S:2805cdc40176a4707d5cfc549b4c12e7ec4e74ff,", - "ring.focus": "S:062018f6483f54f1255b952aa1759b028d502ac3," - }, - "selectedTokenSets": { - "mode/dark/dimmer-deuteranopia": "enabled" - }, - "$figmaCollectionId": "VariableCollectionId:1340:156918", - "$figmaModeId": "1389:6", - "$figmaVariableReferences": { - "background.1": "633e5f77aa1bd1bd133852d8372b9c9f1231a9e4", - "background.2": "14e8d4b56cc273b508af8a2c58cb00e99e08d1d3", - "background.3": "33554ff11e1eab35e50aa3570f51d53f16f46d6a", - "text.1": "38382b9984a98f9d26692a7f2882dfb5c5d51825", - "text.2": "115f62efd02491e85a63dfd601b03725d3711f23", - "text.3": "1c7327f01cf759b17fd0523cb540afa8700c1dc7", - "text.accent": "0b3cd5357659e6542cca163ccfd96c0cac059203", - "text.success": "ee56057b81e6d0872a84ca6b29affc8911fe333e", - "text.danger": "c7e38d7c7afc899f4d40392dbd6bc5ed6580264d", - "text.warning": "b03334e4c9db4b76269e4be886df6c1abf74d0ca", - "border.1": "5ad2231a611605964ba70f80e7aabb48f04bc704", - "border.2": "9084bef359e38136e0dddac25a464896456a9b1a", - "border.3": "5ff5d5233f7cb0233ce7634bc480026668c818f6", - "border.focus": "8db219e896acc4d828aaaf4add646d96540a84ea", - "border.success": "b13758973865eab0b4d79028a48e457eae8bec47", - "border.danger": "33d53c1486021bb3c9edce4123b484a2aabc8de0", - "border.warning": "027e57e08a1edcaaa7fbe033902bb3f65497abb4", - "state.hover": "78426caca2a07ee56132762a720ae07e2810f03b", - "state.selected": "ef914056c9c9dbaef00fa8795702a3cb933ee761", - "state.disabled.text": "967ab1b863941c100f58cc55e611ee2709051f01", - "state.disabled.background": "7a192b5ddcc570f0c8e3a5dbfd54d780e2832bbd", - "state.disabled.border": "067fd26e80ad39a28f738a3b76d21d354092d551", - "component.accordion.title": "5e49d6ddf7f2b21724b474d4a5545256143dce54", - "component.accordion.description": "bc47401a69d07fa71f0371765ed940745fc7a5b9", - "component.accordion.chevron": "5dd530f96134323125031668d4ea98a36ea0de86", - "component.accordion.border": "0b3fcc0e02a2a86625b2b4a9cfeebfad9486bc3a", - "component.alert.default.title": "d8e59ed205399e9727b0dcecdccad3d8daaaa622", - "component.alert.default.description": "f9ec7fec91747435740f000fb642f9009e8fc2db", - "component.alert.default.background": "7fbbdfcc33a3051394f89675798db2159741a5fc", - "component.alert.default.border": "549692bf2f70f6b40c7d55259f8890189aa6cc98", - "component.alert.danger.title": "c8da1cdbba8e0f86edda5fd3869f6186d53881ca", - "component.alert.danger.description": "366849405bd53c78f0b73d72585034a52f05d9a7", - "component.alert.danger.background": "5756a9bdba027993a9879b32ed129e3034028cdf", - "component.alert.danger.border": "a1a3be9eefab6edf2e996a46537872680dc45a09", - "component.avatar.text": "23018f4c7f22c4afb3b7e49f585a1fbb591209de", - "component.avatar.background": "57703fddbd26d363509fdba3aea037bd2f515ee0", - "component.avatar.border": "d651f4cb9082aa4d6e6af2c5abab700d683a5c85", - "component.badge.default.text": "ab90828e3b8c6adce5dc10bf85107b001b958e95", - "component.badge.default.background": "706b070b298e2d2a97665baf7af05187eefeb4fe", - "component.badge.default.border": "a935a2968ca4ecfb8cc58a18f31ae8fe65eb516b", - "component.badge.neutral.text": "82d39f1786c4371303ae21e4c02db79989c54e36", - "component.badge.neutral.background": "f5480b1a2b648fdb0561acda7515c38271cfb04b", - "component.badge.neutral.border": "00f05792ddf6e53bff79346df6a34144426d50e0", - "component.badge.success.text": "71014a6138e8747257a21144f8114b906cfe0f0a", - "component.badge.success.border": "190589c6021debb7bb676f05ac7f063c237fd4aa", - "component.badge.success.background": "177eb9f406784ddb958232cd643ebbb3490a53d4", - "component.badge.danger.text": "6c0c04f17c2bc0ee085d09bf0f205dcbc66c1e17", - "component.badge.danger.border": "6bb014acbbd68a796ed0c4d8c4f73e8e9e619923", - "component.badge.danger.background": "4162b10332d17800585d97ed45e45d69c2006808", - "component.badge.warning.text": "8581620d95e5b92a8c85341ebf63f21fcf7133d0", - "component.badge.warning.border": "71cb519182108ac72ffef823935546e4bff62bbc", - "component.badge.warning.background": "74c13457a85684a054426bd833859fe93eaec978", - "component.badge.running.text": "0b0c1be217e557a5b14c1cb25e988e4ac6d40583", - "component.badge.running.border": "27d3c48d3c316bc4f980282759b5e82f8aaaf49d", - "component.badge.running.background": "a85fddc26baf586ac7ba79e381e5f8fefca87c65", - "component.badge.merged.text": "a83d66ef53e8a094a62f2b32a4d17e58d552b1ef", - "component.badge.merged.border": "755392bca643af0a3fe5492069881a870aa11dc3", - "component.badge.merged.background": "4f4c81b1fe43bfe0d721a22d0aeb93079776cf6d", - "component.badge.ai.text": "bb4daee92817073da0366090742d0a17babb5728", - "component.badge.ai.background": "c5764a2304bf0e8a153c9ce0da20827696a76b41", - "component.breadcrumb.item-inactive": "2f009ca6cafb50c994205c9df02ee2d2503f7d23", - "component.breadcrumb.item-current": "7b502cc2e72f66bb501fdc5f480d0133d1b3841a", - "component.breadcrumb.separator": "1cd28c3ff97ab2f529a19c632d89dd44af0aad80", - "component.btn.primary.text": "9d32f032da93c9aab8b3bc6087c26aa12f507ad7", - "component.btn.primary.background": "410d584a3469233e067d0592a366fdebbe1049bc", - "component.btn.primary.border": "1491ac71f9681307c2d6528e443504e079061988", - "component.btn.secondary.text": "12c93d1b08ae50645a3b8f59256fcec00a4f84ca", - "component.btn.secondary.background": "86434310c95f5c055783011cc0e7c7918f67a35c", - "component.btn.secondary.border": "66bda91f87154efd3cefdc7a634ecb8afa8cd285", - "component.btn.outline.unselected.text": "9cf2c495178d6fdfd8f1360376242acbd4dc5e75", - "component.btn.outline.unselected.icon": "af1510c6050f671219d2089e0e59d5febb4422d6", - "component.btn.outline.unselected.border": "2b3013d632e566301e9f5f1a5cbb6aab4e7ec53f", - "component.btn.outline.selected.text": "13b50089245dec1899db2012412efcf649e2c0b4", - "component.btn.outline.selected.icon": "2bdf2c92b22e814109f4e05ec4d41d92f934a15d", - "component.btn.outline.selected.border": "ef10f4599233f62203def151b386013ddaa63afb", - "component.btn.ghost.unselected.text": "43fa10dd413cddb9a2e2142ead9ca3b4a91b49a6", - "component.btn.ghost.unselected.icon": "5ce332f51238b374104ec53067d685c26882f38e", - "component.btn.ghost.selected.text": "74cbf3b86016e05517f8c7bc64652281c940363e", - "component.btn.ghost.selected.icon": "1d8c6206a136d9c176ffba600a1e94618c4b96f8", - "component.btn.success.text": "52a336440e013bbc849ad67a43d0e136cf4f0b51", - "component.btn.success.background": "608ca6930129b4e5ff36d7f38508ae2537b66629", - "component.btn.success.border": "1f74d9985a10fe20e0acc4647cf4949005e9d4f1", - "component.btn.success.state.hover": "d05bde38a6539a11e3ccd87345af113ccd6bd113", - "component.btn.success.state.active": "f6e48e68dba6c32de27fadcaca3d1959f081d2e5", - "component.btn.danger.text": "49c02562362b8f775cfc2c4c614ecd646dcc2716", - "component.btn.danger.background": "0b015d0a4f456781969d7ffaf135c7c2a8858440", - "component.btn.danger.border": "9f99ee56f1ae2b7eb2f98300b83d4f53b15fd763", - "component.btn.danger.state.hover": "e7756e1d022d893bfa5fdd619f181d26fb7b117b", - "component.btn.danger.state.active": "23c7c85ff6104e098a208b6f4b86c1d0eef0f543", - "component.btn.ai.text": "380368600319fa12b73538ff52acd9d0e977e367", - "component.btn.ai.background": "8c9a1d07e05837f50588b642a4b51462f883887d", - "component.card.background": "256878745d17a46b7159919d8e30a3e960f59575", - "component.card.border": "3688ffcc56c4fb44dc0e221b8e09a958fd9e509d", - "component.dialog.title": "e6e0ff2bf1f3802eb21492e8b833c5f5e679cd82", - "component.dialog.description": "301509fcf2faac8497b2136f7879b9b0b3c64433", - "component.dialog.background": "ff2918d712798a4b487b6f6e5befe7b3eef59883", - "component.dialog.border": "4a6cb3732ad8b36bb9de0d15cbed575c87996088", - "component.dialog.backdrop": "893e60ed671f891241a3084707057185398446ed", - "component.dropdown.background": "09b2dca27ba9efabfe838d713a14ca6e6ac46685", - "component.dropdown.border": "c8cdfff63f4e142d651070ff1056b69a638aaab7", - "component.dropdown.item.delete.text": "864396a8c9b5df0fd948ded7d520ded936d74a8b", - "component.dropdown.item.delete.state.hover": "308dc9064be8e754f8385b0e8ff5489563d7c984", - "component.diff.grey": "43bf4f466a6e231c9951a639313740579c29d824", - "component.diff.add-content": "eb4eccf789a2bda6f3d3875c3310ef0579fd3555", - "component.diff.add-lineNumber": "61583aa6e36aaddd0be173a4a082a450e2522d3a", - "component.diff.add-content-highlight": "ad544fc527ca8b4c297993fe0722b8a7a96ef903", - "component.diff.add-widget": "c1def698ab707194d8f1558e16b05c55d50920d9", - "component.diff.add-widget-color": "a27c504a1f1151974669cf06054c1d0f704ecc38", - "component.diff.del-content": "465e6eb3613967f489cfee4b04f0b283b9e88f91", - "component.diff.del-lineNumber": "4cbe83072b6781d6e3edff645ccb2fb7426c5628", - "component.diff.del-content-highlight": "3e635e401a1a37a259211d093bef70e3a0c507ea", - "component.diff.plain-content": "984456faee2f6a5c202cfd76078ef5b6cd3a05f1", - "component.diff.plain-lineNumber": "6a5550287e7c58afa9d2375c5bfdca4d6c214cf1", - "component.diff.plain-lineNumber-color": "7c1186d20725b53cbefe87f56c5bc6db4e77d898", - "component.diff.empty-content": "712d93a0c1bc9503abda77ae50d624bd328c0057", - "component.diff.hunk-content": "79ad0dfc599f9bc246a6618c85bc1dc59744537f", - "component.diff.hunk-lineNumber": "bccfad80b84e35edf4b47af2ca30057eba2b2ebf", - "component.diff.hunk-content-color": "68c5d6a95d475f7275062e3eb58dba464df3d059", - "component.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", - "component.input.text": "df946237ac2ea0d177f3f2818a673fdf876944c7", - "component.input.placeholder": "85d7632aba08fd476083e508cc2660b17c30981a", - "component.input.icon": "75ca1f38c16fbd5e2697a36c74b0b1dd01f3f5c0", - "component.input.background": "585327333fbbf97bb8db21fbc613025719ca8a87", - "component.input.border": "911dac823dac21c9ccf4e35e10b2eb82a9c6f0ef", - "component.label.text": "80403cd630bba01a064550d9783313227b1d010f", - "component.link.default": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", - "component.link.visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", - "component.nav-tabs.unselected.text": "c085805657bb81574da85d3cb29f89ca08980daa", - "component.nav-tabs.selected.text": "16aa825c8038347237cbe91f7eeece4d2a8d1a2b", - "component.nav-tabs.selected.border": "3427b967112facd59f09fa310c863d7193ea4ffe", - "component.nav-tabs.border": "791d71ca187934e4b98ddff04bc9447a10358699", - "component.nav-tabs.background": "b92549e37390005f2bd1cfce06f9dfb8f67e39e0", - "component.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", - "component.pipeline.card.background": "f207dcff97f000326c4f28293fdbd2830860ce54", - "component.pipeline.card.border": "aa9d9528b1e8e25f9e6dae387b76d9beb2de35a8", - "component.pipeline.card.running.border": "179c0e4d47becc896eb1fbb7f9e8461779b3f680", - "component.pipeline.card.error.border": "1c0b41b41e25250cfb65bdb539bd573be66b0d00", - "component.pipeline.card.completed.border": "14251a54f431aae617af6b9577454a0e212ad76f", - "component.pipeline.card-canvas.1.background": "01bd392d5ddafe85e5575296d08254e52054ba8d", - "component.pipeline.card-canvas.1.border": "b9510abf89f82fb7b779bb730caa1bf393c83bd4", - "component.pipeline.card-canvas.2.background": "87b6b3e65b995fc4180dfb7bf613efb0098d1fff", - "component.pipeline.card-canvas.2.border": "1f9fa1e95134d87995a21738a3877f1c15158e5e", - "component.pipeline.background.dotes": "2784742abff27552789cdd4f2b51cab1331abb4a", - "component.sidebar.background": "8b6619fafae38e8ad94fffd488f2cf53d3c31d76", - "component.sidebar.border": "2263230eae16609a3d95ba5863aa3cc343010131", - "component.sidebar.separator": "a0c913dd38e81e3b2c20ee17642433da6da5f147", - "component.sidebar.hover": "4925b4511178bd2853a6b7b329683d036508aec1", - "component.sidebar.selected": "31f335ecde0aedb12407221718069f5b13574d41", - "component.sidebar.item.unselected.text": "9609e0ad8d79127a3784876f0204d02964f09e43", - "component.sidebar.item.unselected.icon": "5afba128858cf7494fb8a326a435860faf00b0ee", - "component.sidebar.item.selected.text": "5f1daf88cebaea07bd4c2a57c862638340827496", - "component.sidebar.item.selected.icon": "18325fda8139122c4a7cdf6debe2cd1f25d120b7", - "component.sidebar.logo.text": "a3ffa09fdf368badab24aecdbd26709ed7b3c2b2", - "component.sidebar.logo.icon": "c572d382a2018718d719f6a427d31fc9a42f57bd", - "component.sidebar.search.background": "33822e390046e5ec8f71a07fc041514a28778e74", - "component.sidebar.search.border": "f2044f7e8cf503f8809a48a14a88c5ef6466176f", - "component.sidebar.search.placeholder": "665cc00a32edd27b62371ee820d3c3250e629e78", - "component.sidebar.search.btn.background": "70c80e61b9ec397214c809c51de4fdf8177185da", - "component.sidebar.search.btn.border": "1c434c7d16cd4ba880e2d57520c90bc37f6b3879", - "component.sidebar.search.btn.text": "589c7d0162d67165a8752ea54a2c63bb63ee3ad7", - "component.sidebar.footer.username": "68298a8f471bb04f2f0305d9433a2b59613abd8d", - "component.sidebar.footer.data": "6a681d2abb90c2b62a39e20a1d29419c5086f01a", - "component.scrollbar.thumb": "9818c03d003381a966d08d3c6da75af8468bb8ef", - "component.selection.unselected.item": "7a7cad2aa2d6b2803a52eb26c78ea177b84ce241", - "component.selection.unselected.background": "a63ba949d12afc99020e77f95d0538bddba457b3", - "component.selection.unselected.border": "6ef997ebe03bb209ca568a648eb0cc8be69746a6", - "component.selection.selected.item": "f1f43c8acf2d4da10ee2e0d164d4dbe955816018", - "component.selection.selected.background": "1d1bbb9958f047744b66861fd8bd75dc2726dc25", - "component.selection.selected.border": "44b31378ed175b87b50ebad88cfd4a73a66ab9d5", - "component.separator.background": "9f4c82c269bc5aff0fa55d52a0ed59f914057be0", - "component.slider.track.base": "34dc3b5be6733e38f6c28d24d4f3699b2d7ea6f3", - "component.slider.track.progress": "38d8cac26c1cfb91293198eee25299e4aef9c1d8", - "component.slider.track-segments.base": "cb752791a51ff48c6d481426a1affb15048a152a", - "component.slider.track-segments.progress": "a7943fda0e4646e7018046354a9be54cf7d03075", - "component.slider.handle.background": "5c423cc3b672079f1e7dc0d1c8170dade368711a", - "component.slider.handle.border": "94347a2ed2900445946d18c653fb179b8602c533", - "component.status-indicator.completed": "c4c3bce2d28c84c25db4f444f9144b94523737b7", - "component.status-indicator.cancelled": "5aa15732d9ebc41f14b111e252819e2e36617124", - "component.status-indicator.warning": "4dc6e5ea4c736869aee4ebd0ee006f2d73861423", - "component.status-indicator.running": "07ce029f27cf34bf8d6fe3b9a6a600be01c8947e", - "component.status-indicator.merged": "d9eb24404452e6cc2617094fe8f29c69a760ea55", - "component.status-indicator.action-required": "2f1b8543c44b5d93cebddd80b5a9ee2d60fdb146", - "component.status-indicator.waiting": "62f68d300850ce20cf0be8c07d82a41bf1a56ecd", - "component.switch.unselected.thumb": "94d5f0b3a97924583ff697d56db74727b133ba95", - "component.switch.unselected.background": "a8ae87c7bb7ba7f4bfa71f2fdd5f404d19c3a1be", - "component.switch.selected.thumb": "cf6964ec11d69899d5dd39e82d322ea544367e90", - "component.switch.selected.background": "bba05ff96eae08a4adc31a6406e417022d9e5dad", - "component.table.header.text": "65cfc045aa01e3d3eeae4a227cac9be150839db8", - "component.table.header.background": "137c4f2e14bb8cadaf6f900a443700fe928a1fcd", - "component.table.row.alternate-background": "2863f92db433f88f24f62dda4cc9fd50c48130be", - "component.table.row.border": "445d945c4fe4426c3b73cf6f8fe0a572e4525798", - "component.table.cell.text": "73a28f25ba54aff507877ecbfd9942a6ea9f3cea", - "component.tabs.background": "8689ee01219675fb951a2517c2397fba52487971", - "component.tabs.border": "e5bc8cfac224234021c11b381f505da5fcac84ed", - "component.tabs.item.unselected.text": "4af8a5b79c55621f1ed11a7b6fc605657934dc1e", - "component.tabs.item.unselected.background": "fa041cdeb34ba5da6f1bd4cd6d8bb4b8273e0e70", - "component.tabs.item.unselected.border": "79b1a6fe839c012efec923edf40b3bfa2bcdab19", - "component.tabs.item.selected.text": "d048f7001829ff9949b2712b8ca746c8f3f49767", - "component.tabs.item.selected.background": "33269e9854800d565f728ba2a85c5cd3e549b5e8", - "component.tabs.item.selected.border": "11b7e5aeb83fd2f5d968021c750af2ceb5ba5841", - "component.tag.blue.text": "b35e0aebd9d1ebf0fd5d24bbd5ad184db9e11b86", - "component.tag.blue.background": "072fc2901d8ad0199c07bc339d46db086c7b0379", - "component.tag.blue.background-subtle": "67307c003cb91d76e00ef0f3777318e25efac628", - "component.tag.blue.border": "680fb2a6a11251e2619789595cd28c7861aaa530", - "component.tag.brown.text": "b48491f46d15503df99e2d8d9394aa552d09461b", - "component.tag.brown.background": "90b0ee0df4ebe7f06bfd07a7acbe812a45d621a4", - "component.tag.brown.background-subtle": "134ffd2a91ef027e197db6a5331d2726bc080ad6", - "component.tag.brown.border": "675776ff7a30540c297579d72b7f00779d778c14", - "component.tag.cyan.text": "6bf9361c5931ba40663d2c412f28f15382498517", - "component.tag.cyan.background": "83107c8cff314c553ed2cea5c9af1ff3356485e5", - "component.tag.cyan.background-subtle": "7f2724127eebb6e01713828af3736cd2e3734436", - "component.tag.cyan.border": "3286065f931626298e8f3dab2328297e83a79771", - "component.tag.green.text": "699a30f1d5f76ed4e631faa3da63be65e88af039", - "component.tag.green.background": "8b06c35974700260dff1a712c0a3976d4ddb0df5", - "component.tag.green.background-subtle": "c4f47c34772d8367bc3b00645420511f37aaecad", - "component.tag.green.border": "db85545b7d00ef9e199bf863dcdcc2be520f520c", - "component.tag.indigo.text": "d641d4626278e4d17ff4d98202112da9580a6b89", - "component.tag.indigo.background": "bb4af9a068f716c2f0b4f77c228b88009ac049c9", - "component.tag.indigo.background-subtle": "877e3b4ee6040ed581a8349c8fdb5e49ed36dfe0", - "component.tag.indigo.border": "885fdb80c956855c30666c660d5839dc357d1f5f", - "component.tag.lime.text": "763399447b243f761b7cce55f7dcf2fbb1797ee3", - "component.tag.lime.background": "d51cede4c823e16ac204bcaddb65d49c325c3cbe", - "component.tag.lime.background-subtle": "556934df078200ab014c762eeaa04deecd05422e", - "component.tag.lime.border": "fbb53e37ef7cb87cfae5298e69a5ffe4f99a23a7", - "component.tag.mint.text": "d3d406bffbadb1b894e4bb6aef7b1f5a1945094c", - "component.tag.mint.background": "04568a7d0bff5fbc11600bf840916f5451a0fe62", - "component.tag.mint.background-subtle": "1d39716bceda8510beb02e19847c391523e3690a", - "component.tag.mint.border": "c703cecfc8bd82c593dc9d81ce18748edd6ecf4d", - "component.tag.orange.text": "ba407492439b283fedf30a8ab8b16774c0931a9f", - "component.tag.orange.background": "ef766412f340a4aa62c8888a6fdfb2890f3ea207", - "component.tag.orange.background-subtle": "05e823662de8b1f99a062cea3c0f24df69b29362", - "component.tag.orange.border": "2f3023f2311c12acb44cdd28beb888f64d6d2183", - "component.tag.pink.text": "83b73e0e328485233004d42baa8a0948ff2198b0", - "component.tag.pink.background": "b23a211249a71f32bf15757316d0596fdb395962", - "component.tag.pink.background-subtle": "c144f19e07b839d68f20eb5c51ebd94e0f333a82", - "component.tag.pink.border": "b4874a81a08261362f3d8237833b80e68a851b76", - "component.tag.purple.text": "9869d8aad416ac3f9e530b0d62b05dda66906de4", - "component.tag.purple.background": "bc59008310427ba5883f71079b19b8cb4c6dd862", - "component.tag.purple.background-subtle": "a3598602d6e6b1d03f638f1a941801f147f4657a", - "component.tag.purple.border": "de1d577bd170613ab46460e9c50ca8de420152f6", - "component.tag.red.text": "aca8c1832317ac859b4263769855f423840a8569", - "component.tag.red.background": "9008e05416a00096c234511275b92be7204363b6", - "component.tag.red.background-subtle": "986bdd3f8d16488337ca9f46b71b04195d7578b0", - "component.tag.red.border": "f7f9067262546ee6eb77955e38aa0a451fc7f98a", - "component.tag.violet.text": "2ab996ff3465a0b97dee4d7c5606df3d46ab2a07", - "component.tag.violet.background": "4c9b9c2658479fc0e56894975a9b9b8d76df5b00", - "component.tag.violet.background-subtle": "fded9a84a20755592f57f081ebb594bfbaf8cfb3", - "component.tag.violet.border": "77de89ef1ab5168b7ff5e329bde8608047149a04", - "component.tag.yellow.text": "cadfcb4d0fe72fd5828cd764d54198026520e10c", - "component.tag.yellow.background": "a29464cd2a618a77586cb8760478a4d82b12b3ca", - "component.tag.yellow.background-subtle": "1b262be32c5779f024da5ad5696c805a83eb96c7", - "component.tag.yellow.border": "b595821fd5ef662361820415bb878e8ef4ab8939", - "component.tag.gray.text": "e7608c51a2421de226afebbcb909180c8a0cdb5a", - "component.tag.gray.background": "9bcc758ef67bbaac88637e99a702da5d7f7a3144", - "component.tag.gray.background-subtle": "76dfa99dd57cbaf2e7cbec9511cd1e1ddd92ee0e", - "component.tag.gray.border": "02e03f32969f9e6120bb6c7a3b781a5446f1bef1", - "component.toast.default.title": "f791d24eeab59c12cf4aad84f4677099bb4a01c1", - "component.toast.default.description": "6000da4ada3b9445750fb4b7b990726df120c271", - "component.toast.default.background": "5b9e9ea5b7de018a92d3deb902257e4e2bbb49f9", - "component.toast.default.border": "f74755bc7843dc9d7c788c54178b7ce3b83dea3f", - "component.toast.danger.title": "b5ad1c43fcee32eb251b980e884e77ea137c3369", - "component.toast.danger.description": "d281b5c13f2a4a293042f52b168e39f8bec398da", - "component.toast.danger.background": "8ba5c70e994ab44aeb72b3ed7f26ca9646d59cc0", - "component.toast.danger.border": "7f5252c13b96825084248b367f36377bb003ca96", - "component.tooltip.text": "b79a7ec441cdc7c6eee9313602f081d063327c1d", - "component.tooltip.background": "a35d0240a1c4de13350e6a4770dd1703a90a9227", - "component.tooltip.border": "d57b38546841813d61da59d66e98a8921f2f3ee7", - "shadow-color.0": "c0c282f63e107374a732d74c1742cf60d52e6e5c", - "shadow-color.1": "1ec33a9c84353664d23cd23d6c033d1c330c149a", - "shadow-color.2": "6200a000044d8dbee421ed4afb0c3ff42febb6ef", - "shadow-color.3": "77d99afb159d8e193a82f615dd84de3214e00703", - "shadow-color.4": "2b2e0307d252bdc6db53a23ce2cc2e9bb4f6b914", - "shadow-color.5": "5a6c707240bab54cb4403f47262abfe0756efc9a", - "shadow-color.6": "928283d00759150575a8f155da90180a582be438", - "shadow-color.inner": "6cb5a98fba0b13e952859b9f023259b5c06cfd1a", - "gradient.ai.gradient-stop-1": "8db516caa68afc5b8fdd6fc6e5a9bad7715c5f26", - "gradient.ai.gradient-stop-2": "33930f41665251a281973a37847f357480aedca3", - "gradient.ai.gradient-stop-3": "c9e14c3db8e622b10b1cd3e860115cd6f876ae49", - "gradient.ai.gradient-stop-4": "6e7d0850d7eb1e699f87b41f6ffd4cb8d73d72e8", - "gradient.skeleton.gradient-stop-1": "5427016b990b75f0d1ce60eef8cb9b96d75fbde2", - "gradient.skeleton.gradient-stop-2": "01442c311e6da751c30c3518fc32970306767274", - "gradient.skeleton.gradient-stop-3": "7fda4c834a3daf0c56bb59777c525670ae2dee3e", - "gradient.pipeline.running.gradient-stop-1": "0c187d1ebb015ec66bac356009795316f84807ae", - "gradient.pipeline.running.gradient-stop-2": "d1251f86c91bd0f29d8ac8cfa01056bc307156b4", - "gradient.pipeline.running.gradient-stop-3": "b09bdab234cdf7c204cb153ec94ea0a9b2bb4976", - "gradient.pipeline.arrows.gradient-stop-1": "0465e74baaf10a12f23b9eaa40fc1ae08485a0d5", - "gradient.pipeline.arrows.gradient-stop-2": "4cadc4f9a5e66f28eaa27fb54b6ce538ea430c7d", - "gradient.pipeline.arrows.gradient-stop-3": "5af16d4ae6b63ff8dcf3254009e712db4ac1a3f9", - "gradient.pipeline.card.background.gradient-from": "8404a4e146121987426681accb996902179fad72", - "gradient.pipeline.card.background.gradient-to": "037bbd7fb410d05993a48594626a7babb32605a6", - "gradient.pipeline.card.border.gradient-from": "342926ec7179e7cbe133981050c1e1e41d94ed7a", - "gradient.pipeline.card.border.gradient-to": "8e39428cc5ce20f3593127f2ef71f180b38ee9a4", - "gradient.pipeline.widget.number.gradient-from": "dc372cb50eedf6023cd80cb6a4520e5fdf91358b", - "gradient.pipeline.widget.number.gradient-to": "e505c8d9dd140f5a671c1291ffd519fcff5c3e2c", - "gradient.pipeline.widget.blob.big.gradient-from": "b518524b25a5b95804988c640c4d52ba7ebd4599", - "gradient.pipeline.widget.blob.big.gradient-to": "80a493af10245e0ebbc6a51f5452d61d836a3754", - "gradient.pipeline.widget.blob.small.gradient-from": "8d7be31e69f0e54dd2e493d9051c2268078ea5ed", - "gradient.pipeline.widget.blob.small.gradient-to": "198813cf6242881ce0e0d030ca22ef31f9190d13", - "iconStrokeWidth.xxs": "751ceaa292e27736009bef894b62f83c1b2d66d8", - "iconStrokeWidth.xs": "77ca59c88a0b47972554b1db3f6469a230a6ad8c", - "iconStrokeWidth.sm": "e445b22e1f18af07002a1dc76f900dada5477383", - "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", - "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", - "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "component.dropdown.item.text": "2f1f1ea9d368ec8be380803506fbf657cabe6ac0" - }, - "group": "mode" - }, - { - "id": "7f80f5e6690fe1739af7a58c69a0a0f737658f42", - "name": "dark-high-contrast-deuteranopia", - "$figmaStyleReferences": { - "shadow.0": "S:a2ed3778198048e91067a04633c27ba20e9fcbec,", - "shadow.1": "S:947694488889f7271c428950bec937ee79f8a536,", - "shadow.2": "S:70378f090cb66b03ee4b18e25742743934f37757,", - "shadow.3": "S:aa7e83fd47e75f5a1ae3e17f64417d5e9fcb96ae,", - "shadow.4": "S:5dfba690094db266c4ab7686fccbbedd8c16385f,", - "shadow.5": "S:d6752151a8dd3bd4b4bf12ad15a80c522f760731,", - "shadow.6": "S:da8e7b5b0f1352215fbaab66eff62a3e19d22b67,", - "shadow.inner": "S:2805cdc40176a4707d5cfc549b4c12e7ec4e74ff,", - "ring.focus": "S:062018f6483f54f1255b952aa1759b028d502ac3," - }, - "selectedTokenSets": { - "mode/dark/high-contrast-deuteranopia": "enabled" - }, - "$figmaCollectionId": "VariableCollectionId:1340:156918", - "$figmaModeId": "1389:7", - "$figmaVariableReferences": { - "background.1": "633e5f77aa1bd1bd133852d8372b9c9f1231a9e4", - "background.2": "14e8d4b56cc273b508af8a2c58cb00e99e08d1d3", - "background.3": "33554ff11e1eab35e50aa3570f51d53f16f46d6a", - "text.1": "38382b9984a98f9d26692a7f2882dfb5c5d51825", - "text.2": "115f62efd02491e85a63dfd601b03725d3711f23", - "text.3": "1c7327f01cf759b17fd0523cb540afa8700c1dc7", - "text.accent": "0b3cd5357659e6542cca163ccfd96c0cac059203", - "text.success": "ee56057b81e6d0872a84ca6b29affc8911fe333e", - "text.danger": "c7e38d7c7afc899f4d40392dbd6bc5ed6580264d", - "text.warning": "b03334e4c9db4b76269e4be886df6c1abf74d0ca", - "border.1": "5ad2231a611605964ba70f80e7aabb48f04bc704", - "border.2": "9084bef359e38136e0dddac25a464896456a9b1a", - "border.3": "5ff5d5233f7cb0233ce7634bc480026668c818f6", - "border.focus": "8db219e896acc4d828aaaf4add646d96540a84ea", - "border.success": "b13758973865eab0b4d79028a48e457eae8bec47", - "border.danger": "33d53c1486021bb3c9edce4123b484a2aabc8de0", - "border.warning": "027e57e08a1edcaaa7fbe033902bb3f65497abb4", - "state.hover": "78426caca2a07ee56132762a720ae07e2810f03b", - "state.selected": "ef914056c9c9dbaef00fa8795702a3cb933ee761", - "state.disabled.text": "967ab1b863941c100f58cc55e611ee2709051f01", - "state.disabled.background": "7a192b5ddcc570f0c8e3a5dbfd54d780e2832bbd", - "state.disabled.border": "067fd26e80ad39a28f738a3b76d21d354092d551", - "component.accordion.title": "5e49d6ddf7f2b21724b474d4a5545256143dce54", - "component.accordion.description": "bc47401a69d07fa71f0371765ed940745fc7a5b9", - "component.accordion.chevron": "5dd530f96134323125031668d4ea98a36ea0de86", - "component.accordion.border": "0b3fcc0e02a2a86625b2b4a9cfeebfad9486bc3a", - "component.alert.default.title": "d8e59ed205399e9727b0dcecdccad3d8daaaa622", - "component.alert.default.description": "f9ec7fec91747435740f000fb642f9009e8fc2db", - "component.alert.default.background": "7fbbdfcc33a3051394f89675798db2159741a5fc", - "component.alert.default.border": "549692bf2f70f6b40c7d55259f8890189aa6cc98", - "component.alert.danger.title": "c8da1cdbba8e0f86edda5fd3869f6186d53881ca", - "component.alert.danger.description": "366849405bd53c78f0b73d72585034a52f05d9a7", - "component.alert.danger.background": "5756a9bdba027993a9879b32ed129e3034028cdf", - "component.alert.danger.border": "a1a3be9eefab6edf2e996a46537872680dc45a09", - "component.avatar.text": "23018f4c7f22c4afb3b7e49f585a1fbb591209de", - "component.avatar.background": "57703fddbd26d363509fdba3aea037bd2f515ee0", - "component.avatar.border": "d651f4cb9082aa4d6e6af2c5abab700d683a5c85", - "component.badge.default.text": "ab90828e3b8c6adce5dc10bf85107b001b958e95", - "component.badge.default.background": "706b070b298e2d2a97665baf7af05187eefeb4fe", - "component.badge.default.border": "a935a2968ca4ecfb8cc58a18f31ae8fe65eb516b", - "component.badge.neutral.text": "82d39f1786c4371303ae21e4c02db79989c54e36", - "component.badge.neutral.background": "f5480b1a2b648fdb0561acda7515c38271cfb04b", - "component.badge.neutral.border": "00f05792ddf6e53bff79346df6a34144426d50e0", - "component.badge.success.text": "71014a6138e8747257a21144f8114b906cfe0f0a", - "component.badge.success.border": "190589c6021debb7bb676f05ac7f063c237fd4aa", - "component.badge.success.background": "177eb9f406784ddb958232cd643ebbb3490a53d4", - "component.badge.danger.text": "6c0c04f17c2bc0ee085d09bf0f205dcbc66c1e17", - "component.badge.danger.border": "6bb014acbbd68a796ed0c4d8c4f73e8e9e619923", - "component.badge.danger.background": "4162b10332d17800585d97ed45e45d69c2006808", - "component.badge.warning.text": "8581620d95e5b92a8c85341ebf63f21fcf7133d0", - "component.badge.warning.border": "71cb519182108ac72ffef823935546e4bff62bbc", - "component.badge.warning.background": "74c13457a85684a054426bd833859fe93eaec978", - "component.badge.running.text": "0b0c1be217e557a5b14c1cb25e988e4ac6d40583", - "component.badge.running.border": "27d3c48d3c316bc4f980282759b5e82f8aaaf49d", - "component.badge.running.background": "a85fddc26baf586ac7ba79e381e5f8fefca87c65", - "component.badge.merged.text": "a83d66ef53e8a094a62f2b32a4d17e58d552b1ef", - "component.badge.merged.border": "755392bca643af0a3fe5492069881a870aa11dc3", - "component.badge.merged.background": "4f4c81b1fe43bfe0d721a22d0aeb93079776cf6d", - "component.badge.ai.text": "bb4daee92817073da0366090742d0a17babb5728", - "component.badge.ai.background": "c5764a2304bf0e8a153c9ce0da20827696a76b41", - "component.breadcrumb.item-inactive": "2f009ca6cafb50c994205c9df02ee2d2503f7d23", - "component.breadcrumb.item-current": "7b502cc2e72f66bb501fdc5f480d0133d1b3841a", - "component.breadcrumb.separator": "1cd28c3ff97ab2f529a19c632d89dd44af0aad80", - "component.btn.primary.text": "9d32f032da93c9aab8b3bc6087c26aa12f507ad7", - "component.btn.primary.background": "410d584a3469233e067d0592a366fdebbe1049bc", - "component.btn.primary.border": "1491ac71f9681307c2d6528e443504e079061988", - "component.btn.secondary.text": "12c93d1b08ae50645a3b8f59256fcec00a4f84ca", - "component.btn.secondary.background": "86434310c95f5c055783011cc0e7c7918f67a35c", - "component.btn.secondary.border": "66bda91f87154efd3cefdc7a634ecb8afa8cd285", - "component.btn.outline.unselected.text": "9cf2c495178d6fdfd8f1360376242acbd4dc5e75", - "component.btn.outline.unselected.icon": "af1510c6050f671219d2089e0e59d5febb4422d6", - "component.btn.outline.unselected.border": "2b3013d632e566301e9f5f1a5cbb6aab4e7ec53f", - "component.btn.outline.selected.text": "13b50089245dec1899db2012412efcf649e2c0b4", - "component.btn.outline.selected.icon": "2bdf2c92b22e814109f4e05ec4d41d92f934a15d", - "component.btn.outline.selected.border": "ef10f4599233f62203def151b386013ddaa63afb", - "component.btn.ghost.unselected.text": "43fa10dd413cddb9a2e2142ead9ca3b4a91b49a6", - "component.btn.ghost.unselected.icon": "5ce332f51238b374104ec53067d685c26882f38e", - "component.btn.ghost.selected.text": "74cbf3b86016e05517f8c7bc64652281c940363e", - "component.btn.ghost.selected.icon": "1d8c6206a136d9c176ffba600a1e94618c4b96f8", - "component.btn.success.text": "52a336440e013bbc849ad67a43d0e136cf4f0b51", - "component.btn.success.background": "608ca6930129b4e5ff36d7f38508ae2537b66629", - "component.btn.success.border": "1f74d9985a10fe20e0acc4647cf4949005e9d4f1", - "component.btn.success.state.hover": "d05bde38a6539a11e3ccd87345af113ccd6bd113", - "component.btn.success.state.active": "f6e48e68dba6c32de27fadcaca3d1959f081d2e5", - "component.btn.danger.text": "49c02562362b8f775cfc2c4c614ecd646dcc2716", - "component.btn.danger.background": "0b015d0a4f456781969d7ffaf135c7c2a8858440", - "component.btn.danger.border": "9f99ee56f1ae2b7eb2f98300b83d4f53b15fd763", - "component.btn.danger.state.hover": "e7756e1d022d893bfa5fdd619f181d26fb7b117b", - "component.btn.danger.state.active": "23c7c85ff6104e098a208b6f4b86c1d0eef0f543", - "component.btn.ai.text": "380368600319fa12b73538ff52acd9d0e977e367", - "component.btn.ai.background": "8c9a1d07e05837f50588b642a4b51462f883887d", - "component.card.background": "256878745d17a46b7159919d8e30a3e960f59575", - "component.card.border": "3688ffcc56c4fb44dc0e221b8e09a958fd9e509d", - "component.dialog.title": "e6e0ff2bf1f3802eb21492e8b833c5f5e679cd82", - "component.dialog.description": "301509fcf2faac8497b2136f7879b9b0b3c64433", - "component.dialog.background": "ff2918d712798a4b487b6f6e5befe7b3eef59883", - "component.dialog.border": "4a6cb3732ad8b36bb9de0d15cbed575c87996088", - "component.dialog.backdrop": "893e60ed671f891241a3084707057185398446ed", - "component.dropdown.background": "09b2dca27ba9efabfe838d713a14ca6e6ac46685", - "component.dropdown.border": "c8cdfff63f4e142d651070ff1056b69a638aaab7", - "component.dropdown.item.delete.text": "864396a8c9b5df0fd948ded7d520ded936d74a8b", - "component.dropdown.item.delete.state.hover": "308dc9064be8e754f8385b0e8ff5489563d7c984", - "component.diff.grey": "43bf4f466a6e231c9951a639313740579c29d824", - "component.diff.add-content": "eb4eccf789a2bda6f3d3875c3310ef0579fd3555", - "component.diff.add-lineNumber": "61583aa6e36aaddd0be173a4a082a450e2522d3a", - "component.diff.add-content-highlight": "ad544fc527ca8b4c297993fe0722b8a7a96ef903", - "component.diff.add-widget": "c1def698ab707194d8f1558e16b05c55d50920d9", - "component.diff.add-widget-color": "a27c504a1f1151974669cf06054c1d0f704ecc38", - "component.diff.del-content": "465e6eb3613967f489cfee4b04f0b283b9e88f91", - "component.diff.del-lineNumber": "4cbe83072b6781d6e3edff645ccb2fb7426c5628", - "component.diff.del-content-highlight": "3e635e401a1a37a259211d093bef70e3a0c507ea", - "component.diff.plain-content": "984456faee2f6a5c202cfd76078ef5b6cd3a05f1", - "component.diff.plain-lineNumber": "6a5550287e7c58afa9d2375c5bfdca4d6c214cf1", - "component.diff.plain-lineNumber-color": "7c1186d20725b53cbefe87f56c5bc6db4e77d898", - "component.diff.empty-content": "712d93a0c1bc9503abda77ae50d624bd328c0057", - "component.diff.hunk-content": "79ad0dfc599f9bc246a6618c85bc1dc59744537f", - "component.diff.hunk-lineNumber": "bccfad80b84e35edf4b47af2ca30057eba2b2ebf", - "component.diff.hunk-content-color": "68c5d6a95d475f7275062e3eb58dba464df3d059", - "component.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", - "component.input.text": "df946237ac2ea0d177f3f2818a673fdf876944c7", - "component.input.placeholder": "85d7632aba08fd476083e508cc2660b17c30981a", - "component.input.icon": "75ca1f38c16fbd5e2697a36c74b0b1dd01f3f5c0", - "component.input.background": "585327333fbbf97bb8db21fbc613025719ca8a87", - "component.input.border": "911dac823dac21c9ccf4e35e10b2eb82a9c6f0ef", - "component.label.text": "80403cd630bba01a064550d9783313227b1d010f", - "component.link.default": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", - "component.link.visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", - "component.nav-tabs.unselected.text": "c085805657bb81574da85d3cb29f89ca08980daa", - "component.nav-tabs.selected.text": "16aa825c8038347237cbe91f7eeece4d2a8d1a2b", - "component.nav-tabs.selected.border": "3427b967112facd59f09fa310c863d7193ea4ffe", - "component.nav-tabs.border": "791d71ca187934e4b98ddff04bc9447a10358699", - "component.nav-tabs.background": "b92549e37390005f2bd1cfce06f9dfb8f67e39e0", - "component.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", - "component.pipeline.card.background": "f207dcff97f000326c4f28293fdbd2830860ce54", - "component.pipeline.card.border": "aa9d9528b1e8e25f9e6dae387b76d9beb2de35a8", - "component.pipeline.card.running.border": "179c0e4d47becc896eb1fbb7f9e8461779b3f680", - "component.pipeline.card.error.border": "1c0b41b41e25250cfb65bdb539bd573be66b0d00", - "component.pipeline.card.completed.border": "14251a54f431aae617af6b9577454a0e212ad76f", - "component.pipeline.card-canvas.1.background": "01bd392d5ddafe85e5575296d08254e52054ba8d", - "component.pipeline.card-canvas.1.border": "b9510abf89f82fb7b779bb730caa1bf393c83bd4", - "component.pipeline.card-canvas.2.background": "87b6b3e65b995fc4180dfb7bf613efb0098d1fff", - "component.pipeline.card-canvas.2.border": "1f9fa1e95134d87995a21738a3877f1c15158e5e", - "component.pipeline.background.dotes": "2784742abff27552789cdd4f2b51cab1331abb4a", - "component.sidebar.background": "8b6619fafae38e8ad94fffd488f2cf53d3c31d76", - "component.sidebar.border": "2263230eae16609a3d95ba5863aa3cc343010131", - "component.sidebar.separator": "a0c913dd38e81e3b2c20ee17642433da6da5f147", - "component.sidebar.hover": "4925b4511178bd2853a6b7b329683d036508aec1", - "component.sidebar.selected": "31f335ecde0aedb12407221718069f5b13574d41", - "component.sidebar.item.unselected.text": "9609e0ad8d79127a3784876f0204d02964f09e43", - "component.sidebar.item.unselected.icon": "5afba128858cf7494fb8a326a435860faf00b0ee", - "component.sidebar.item.selected.text": "5f1daf88cebaea07bd4c2a57c862638340827496", - "component.sidebar.item.selected.icon": "18325fda8139122c4a7cdf6debe2cd1f25d120b7", - "component.sidebar.logo.text": "a3ffa09fdf368badab24aecdbd26709ed7b3c2b2", - "component.sidebar.logo.icon": "c572d382a2018718d719f6a427d31fc9a42f57bd", - "component.sidebar.search.background": "33822e390046e5ec8f71a07fc041514a28778e74", - "component.sidebar.search.border": "f2044f7e8cf503f8809a48a14a88c5ef6466176f", - "component.sidebar.search.placeholder": "665cc00a32edd27b62371ee820d3c3250e629e78", - "component.sidebar.search.btn.background": "70c80e61b9ec397214c809c51de4fdf8177185da", - "component.sidebar.search.btn.border": "1c434c7d16cd4ba880e2d57520c90bc37f6b3879", - "component.sidebar.search.btn.text": "589c7d0162d67165a8752ea54a2c63bb63ee3ad7", - "component.sidebar.footer.username": "68298a8f471bb04f2f0305d9433a2b59613abd8d", - "component.sidebar.footer.data": "6a681d2abb90c2b62a39e20a1d29419c5086f01a", - "component.scrollbar.thumb": "9818c03d003381a966d08d3c6da75af8468bb8ef", - "component.selection.unselected.item": "7a7cad2aa2d6b2803a52eb26c78ea177b84ce241", - "component.selection.unselected.background": "a63ba949d12afc99020e77f95d0538bddba457b3", - "component.selection.unselected.border": "6ef997ebe03bb209ca568a648eb0cc8be69746a6", - "component.selection.selected.item": "f1f43c8acf2d4da10ee2e0d164d4dbe955816018", - "component.selection.selected.background": "1d1bbb9958f047744b66861fd8bd75dc2726dc25", - "component.selection.selected.border": "44b31378ed175b87b50ebad88cfd4a73a66ab9d5", - "component.separator.background": "9f4c82c269bc5aff0fa55d52a0ed59f914057be0", - "component.slider.track.base": "34dc3b5be6733e38f6c28d24d4f3699b2d7ea6f3", - "component.slider.track.progress": "38d8cac26c1cfb91293198eee25299e4aef9c1d8", - "component.slider.track-segments.base": "cb752791a51ff48c6d481426a1affb15048a152a", - "component.slider.track-segments.progress": "a7943fda0e4646e7018046354a9be54cf7d03075", - "component.slider.handle.background": "5c423cc3b672079f1e7dc0d1c8170dade368711a", - "component.slider.handle.border": "94347a2ed2900445946d18c653fb179b8602c533", - "component.status-indicator.completed": "c4c3bce2d28c84c25db4f444f9144b94523737b7", - "component.status-indicator.cancelled": "5aa15732d9ebc41f14b111e252819e2e36617124", - "component.status-indicator.warning": "4dc6e5ea4c736869aee4ebd0ee006f2d73861423", - "component.status-indicator.running": "07ce029f27cf34bf8d6fe3b9a6a600be01c8947e", - "component.status-indicator.merged": "d9eb24404452e6cc2617094fe8f29c69a760ea55", - "component.status-indicator.action-required": "2f1b8543c44b5d93cebddd80b5a9ee2d60fdb146", - "component.status-indicator.waiting": "62f68d300850ce20cf0be8c07d82a41bf1a56ecd", - "component.switch.unselected.thumb": "94d5f0b3a97924583ff697d56db74727b133ba95", - "component.switch.unselected.background": "a8ae87c7bb7ba7f4bfa71f2fdd5f404d19c3a1be", - "component.switch.selected.thumb": "cf6964ec11d69899d5dd39e82d322ea544367e90", - "component.switch.selected.background": "bba05ff96eae08a4adc31a6406e417022d9e5dad", - "component.table.header.text": "65cfc045aa01e3d3eeae4a227cac9be150839db8", - "component.table.header.background": "137c4f2e14bb8cadaf6f900a443700fe928a1fcd", - "component.table.row.alternate-background": "2863f92db433f88f24f62dda4cc9fd50c48130be", - "component.table.row.border": "445d945c4fe4426c3b73cf6f8fe0a572e4525798", - "component.table.cell.text": "73a28f25ba54aff507877ecbfd9942a6ea9f3cea", - "component.tabs.background": "8689ee01219675fb951a2517c2397fba52487971", - "component.tabs.border": "e5bc8cfac224234021c11b381f505da5fcac84ed", - "component.tabs.item.unselected.text": "4af8a5b79c55621f1ed11a7b6fc605657934dc1e", - "component.tabs.item.unselected.background": "fa041cdeb34ba5da6f1bd4cd6d8bb4b8273e0e70", - "component.tabs.item.unselected.border": "79b1a6fe839c012efec923edf40b3bfa2bcdab19", - "component.tabs.item.selected.text": "d048f7001829ff9949b2712b8ca746c8f3f49767", - "component.tabs.item.selected.background": "33269e9854800d565f728ba2a85c5cd3e549b5e8", - "component.tabs.item.selected.border": "11b7e5aeb83fd2f5d968021c750af2ceb5ba5841", - "component.tag.blue.text": "b35e0aebd9d1ebf0fd5d24bbd5ad184db9e11b86", - "component.tag.blue.background": "072fc2901d8ad0199c07bc339d46db086c7b0379", - "component.tag.blue.background-subtle": "67307c003cb91d76e00ef0f3777318e25efac628", - "component.tag.blue.border": "680fb2a6a11251e2619789595cd28c7861aaa530", - "component.tag.brown.text": "b48491f46d15503df99e2d8d9394aa552d09461b", - "component.tag.brown.background": "90b0ee0df4ebe7f06bfd07a7acbe812a45d621a4", - "component.tag.brown.background-subtle": "134ffd2a91ef027e197db6a5331d2726bc080ad6", - "component.tag.brown.border": "675776ff7a30540c297579d72b7f00779d778c14", - "component.tag.cyan.text": "6bf9361c5931ba40663d2c412f28f15382498517", - "component.tag.cyan.background": "83107c8cff314c553ed2cea5c9af1ff3356485e5", - "component.tag.cyan.background-subtle": "7f2724127eebb6e01713828af3736cd2e3734436", - "component.tag.cyan.border": "3286065f931626298e8f3dab2328297e83a79771", - "component.tag.green.text": "699a30f1d5f76ed4e631faa3da63be65e88af039", - "component.tag.green.background": "8b06c35974700260dff1a712c0a3976d4ddb0df5", - "component.tag.green.background-subtle": "c4f47c34772d8367bc3b00645420511f37aaecad", - "component.tag.green.border": "db85545b7d00ef9e199bf863dcdcc2be520f520c", - "component.tag.indigo.text": "d641d4626278e4d17ff4d98202112da9580a6b89", - "component.tag.indigo.background": "bb4af9a068f716c2f0b4f77c228b88009ac049c9", - "component.tag.indigo.background-subtle": "877e3b4ee6040ed581a8349c8fdb5e49ed36dfe0", - "component.tag.indigo.border": "885fdb80c956855c30666c660d5839dc357d1f5f", - "component.tag.lime.text": "763399447b243f761b7cce55f7dcf2fbb1797ee3", - "component.tag.lime.background": "d51cede4c823e16ac204bcaddb65d49c325c3cbe", - "component.tag.lime.background-subtle": "556934df078200ab014c762eeaa04deecd05422e", - "component.tag.lime.border": "fbb53e37ef7cb87cfae5298e69a5ffe4f99a23a7", - "component.tag.mint.text": "d3d406bffbadb1b894e4bb6aef7b1f5a1945094c", - "component.tag.mint.background": "04568a7d0bff5fbc11600bf840916f5451a0fe62", - "component.tag.mint.background-subtle": "1d39716bceda8510beb02e19847c391523e3690a", - "component.tag.mint.border": "c703cecfc8bd82c593dc9d81ce18748edd6ecf4d", - "component.tag.orange.text": "ba407492439b283fedf30a8ab8b16774c0931a9f", - "component.tag.orange.background": "ef766412f340a4aa62c8888a6fdfb2890f3ea207", - "component.tag.orange.background-subtle": "05e823662de8b1f99a062cea3c0f24df69b29362", - "component.tag.orange.border": "2f3023f2311c12acb44cdd28beb888f64d6d2183", - "component.tag.pink.text": "83b73e0e328485233004d42baa8a0948ff2198b0", - "component.tag.pink.background": "b23a211249a71f32bf15757316d0596fdb395962", - "component.tag.pink.background-subtle": "c144f19e07b839d68f20eb5c51ebd94e0f333a82", - "component.tag.pink.border": "b4874a81a08261362f3d8237833b80e68a851b76", - "component.tag.purple.text": "9869d8aad416ac3f9e530b0d62b05dda66906de4", - "component.tag.purple.background": "bc59008310427ba5883f71079b19b8cb4c6dd862", - "component.tag.purple.background-subtle": "a3598602d6e6b1d03f638f1a941801f147f4657a", - "component.tag.purple.border": "de1d577bd170613ab46460e9c50ca8de420152f6", - "component.tag.red.text": "aca8c1832317ac859b4263769855f423840a8569", - "component.tag.red.background": "9008e05416a00096c234511275b92be7204363b6", - "component.tag.red.background-subtle": "986bdd3f8d16488337ca9f46b71b04195d7578b0", - "component.tag.red.border": "f7f9067262546ee6eb77955e38aa0a451fc7f98a", - "component.tag.violet.text": "2ab996ff3465a0b97dee4d7c5606df3d46ab2a07", - "component.tag.violet.background": "4c9b9c2658479fc0e56894975a9b9b8d76df5b00", - "component.tag.violet.background-subtle": "fded9a84a20755592f57f081ebb594bfbaf8cfb3", - "component.tag.violet.border": "77de89ef1ab5168b7ff5e329bde8608047149a04", - "component.tag.yellow.text": "cadfcb4d0fe72fd5828cd764d54198026520e10c", - "component.tag.yellow.background": "a29464cd2a618a77586cb8760478a4d82b12b3ca", - "component.tag.yellow.background-subtle": "1b262be32c5779f024da5ad5696c805a83eb96c7", - "component.tag.yellow.border": "b595821fd5ef662361820415bb878e8ef4ab8939", - "component.tag.gray.text": "e7608c51a2421de226afebbcb909180c8a0cdb5a", - "component.tag.gray.background": "9bcc758ef67bbaac88637e99a702da5d7f7a3144", - "component.tag.gray.background-subtle": "76dfa99dd57cbaf2e7cbec9511cd1e1ddd92ee0e", - "component.tag.gray.border": "02e03f32969f9e6120bb6c7a3b781a5446f1bef1", - "component.toast.default.title": "f791d24eeab59c12cf4aad84f4677099bb4a01c1", - "component.toast.default.description": "6000da4ada3b9445750fb4b7b990726df120c271", - "component.toast.default.background": "5b9e9ea5b7de018a92d3deb902257e4e2bbb49f9", - "component.toast.default.border": "f74755bc7843dc9d7c788c54178b7ce3b83dea3f", - "component.toast.danger.title": "b5ad1c43fcee32eb251b980e884e77ea137c3369", - "component.toast.danger.description": "d281b5c13f2a4a293042f52b168e39f8bec398da", - "component.toast.danger.background": "8ba5c70e994ab44aeb72b3ed7f26ca9646d59cc0", - "component.toast.danger.border": "7f5252c13b96825084248b367f36377bb003ca96", - "component.tooltip.text": "b79a7ec441cdc7c6eee9313602f081d063327c1d", - "component.tooltip.background": "a35d0240a1c4de13350e6a4770dd1703a90a9227", - "component.tooltip.border": "d57b38546841813d61da59d66e98a8921f2f3ee7", - "shadow-color.0": "c0c282f63e107374a732d74c1742cf60d52e6e5c", - "shadow-color.1": "1ec33a9c84353664d23cd23d6c033d1c330c149a", - "shadow-color.2": "6200a000044d8dbee421ed4afb0c3ff42febb6ef", - "shadow-color.3": "77d99afb159d8e193a82f615dd84de3214e00703", - "shadow-color.4": "2b2e0307d252bdc6db53a23ce2cc2e9bb4f6b914", - "shadow-color.5": "5a6c707240bab54cb4403f47262abfe0756efc9a", - "shadow-color.6": "928283d00759150575a8f155da90180a582be438", - "shadow-color.inner": "6cb5a98fba0b13e952859b9f023259b5c06cfd1a", - "gradient.ai.gradient-stop-1": "8db516caa68afc5b8fdd6fc6e5a9bad7715c5f26", - "gradient.ai.gradient-stop-2": "33930f41665251a281973a37847f357480aedca3", - "gradient.ai.gradient-stop-3": "c9e14c3db8e622b10b1cd3e860115cd6f876ae49", - "gradient.ai.gradient-stop-4": "6e7d0850d7eb1e699f87b41f6ffd4cb8d73d72e8", - "gradient.skeleton.gradient-stop-1": "5427016b990b75f0d1ce60eef8cb9b96d75fbde2", - "gradient.skeleton.gradient-stop-2": "01442c311e6da751c30c3518fc32970306767274", - "gradient.skeleton.gradient-stop-3": "7fda4c834a3daf0c56bb59777c525670ae2dee3e", - "gradient.pipeline.running.gradient-stop-1": "0c187d1ebb015ec66bac356009795316f84807ae", - "gradient.pipeline.running.gradient-stop-2": "d1251f86c91bd0f29d8ac8cfa01056bc307156b4", - "gradient.pipeline.running.gradient-stop-3": "b09bdab234cdf7c204cb153ec94ea0a9b2bb4976", - "gradient.pipeline.arrows.gradient-stop-1": "0465e74baaf10a12f23b9eaa40fc1ae08485a0d5", - "gradient.pipeline.arrows.gradient-stop-2": "4cadc4f9a5e66f28eaa27fb54b6ce538ea430c7d", - "gradient.pipeline.arrows.gradient-stop-3": "5af16d4ae6b63ff8dcf3254009e712db4ac1a3f9", - "gradient.pipeline.card.background.gradient-from": "8404a4e146121987426681accb996902179fad72", - "gradient.pipeline.card.background.gradient-to": "037bbd7fb410d05993a48594626a7babb32605a6", - "gradient.pipeline.card.border.gradient-from": "342926ec7179e7cbe133981050c1e1e41d94ed7a", - "gradient.pipeline.card.border.gradient-to": "8e39428cc5ce20f3593127f2ef71f180b38ee9a4", - "gradient.pipeline.widget.number.gradient-from": "dc372cb50eedf6023cd80cb6a4520e5fdf91358b", - "gradient.pipeline.widget.number.gradient-to": "e505c8d9dd140f5a671c1291ffd519fcff5c3e2c", - "gradient.pipeline.widget.blob.big.gradient-from": "b518524b25a5b95804988c640c4d52ba7ebd4599", - "gradient.pipeline.widget.blob.big.gradient-to": "80a493af10245e0ebbc6a51f5452d61d836a3754", - "gradient.pipeline.widget.blob.small.gradient-from": "8d7be31e69f0e54dd2e493d9051c2268078ea5ed", - "gradient.pipeline.widget.blob.small.gradient-to": "198813cf6242881ce0e0d030ca22ef31f9190d13", - "iconStrokeWidth.xxs": "751ceaa292e27736009bef894b62f83c1b2d66d8", - "iconStrokeWidth.xs": "77ca59c88a0b47972554b1db3f6469a230a6ad8c", - "iconStrokeWidth.sm": "e445b22e1f18af07002a1dc76f900dada5477383", - "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", - "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", - "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "component.dropdown.item.text": "2f1f1ea9d368ec8be380803506fbf657cabe6ac0" - }, - "group": "mode" - }, - { - "id": "bd69e42e558983d4c56a3140051437e81c6729c8", - "name": "dark-tritanopia", - "$figmaStyleReferences": { - "shadow.0": "S:a2ed3778198048e91067a04633c27ba20e9fcbec,", - "shadow.1": "S:947694488889f7271c428950bec937ee79f8a536,", - "shadow.2": "S:70378f090cb66b03ee4b18e25742743934f37757,", - "shadow.3": "S:aa7e83fd47e75f5a1ae3e17f64417d5e9fcb96ae,", - "shadow.4": "S:5dfba690094db266c4ab7686fccbbedd8c16385f,", - "shadow.5": "S:d6752151a8dd3bd4b4bf12ad15a80c522f760731,", - "shadow.6": "S:da8e7b5b0f1352215fbaab66eff62a3e19d22b67,", - "shadow.inner": "S:2805cdc40176a4707d5cfc549b4c12e7ec4e74ff,", - "ring.focus": "S:062018f6483f54f1255b952aa1759b028d502ac3," - }, - "selectedTokenSets": { - "mode/dark/default-tritanopia": "enabled" - }, - "$figmaCollectionId": "VariableCollectionId:1340:156918", - "$figmaModeId": "1389:8", - "$figmaVariableReferences": { - "background.1": "633e5f77aa1bd1bd133852d8372b9c9f1231a9e4", - "background.2": "14e8d4b56cc273b508af8a2c58cb00e99e08d1d3", - "background.3": "33554ff11e1eab35e50aa3570f51d53f16f46d6a", - "text.1": "38382b9984a98f9d26692a7f2882dfb5c5d51825", - "text.2": "115f62efd02491e85a63dfd601b03725d3711f23", - "text.3": "1c7327f01cf759b17fd0523cb540afa8700c1dc7", - "text.accent": "0b3cd5357659e6542cca163ccfd96c0cac059203", - "text.success": "ee56057b81e6d0872a84ca6b29affc8911fe333e", - "text.danger": "c7e38d7c7afc899f4d40392dbd6bc5ed6580264d", - "text.warning": "b03334e4c9db4b76269e4be886df6c1abf74d0ca", - "border.1": "5ad2231a611605964ba70f80e7aabb48f04bc704", - "border.2": "9084bef359e38136e0dddac25a464896456a9b1a", - "border.3": "5ff5d5233f7cb0233ce7634bc480026668c818f6", - "border.focus": "8db219e896acc4d828aaaf4add646d96540a84ea", - "border.success": "b13758973865eab0b4d79028a48e457eae8bec47", - "border.danger": "33d53c1486021bb3c9edce4123b484a2aabc8de0", - "border.warning": "027e57e08a1edcaaa7fbe033902bb3f65497abb4", - "state.hover": "78426caca2a07ee56132762a720ae07e2810f03b", - "state.selected": "ef914056c9c9dbaef00fa8795702a3cb933ee761", - "state.disabled.text": "967ab1b863941c100f58cc55e611ee2709051f01", - "state.disabled.background": "7a192b5ddcc570f0c8e3a5dbfd54d780e2832bbd", - "state.disabled.border": "067fd26e80ad39a28f738a3b76d21d354092d551", - "component.accordion.title": "5e49d6ddf7f2b21724b474d4a5545256143dce54", - "component.accordion.description": "bc47401a69d07fa71f0371765ed940745fc7a5b9", - "component.accordion.chevron": "5dd530f96134323125031668d4ea98a36ea0de86", - "component.accordion.border": "0b3fcc0e02a2a86625b2b4a9cfeebfad9486bc3a", - "component.alert.default.title": "d8e59ed205399e9727b0dcecdccad3d8daaaa622", - "component.alert.default.description": "f9ec7fec91747435740f000fb642f9009e8fc2db", - "component.alert.default.background": "7fbbdfcc33a3051394f89675798db2159741a5fc", - "component.alert.default.border": "549692bf2f70f6b40c7d55259f8890189aa6cc98", - "component.alert.danger.title": "c8da1cdbba8e0f86edda5fd3869f6186d53881ca", - "component.alert.danger.description": "366849405bd53c78f0b73d72585034a52f05d9a7", - "component.alert.danger.background": "5756a9bdba027993a9879b32ed129e3034028cdf", - "component.alert.danger.border": "a1a3be9eefab6edf2e996a46537872680dc45a09", - "component.avatar.text": "23018f4c7f22c4afb3b7e49f585a1fbb591209de", - "component.avatar.background": "57703fddbd26d363509fdba3aea037bd2f515ee0", - "component.avatar.border": "d651f4cb9082aa4d6e6af2c5abab700d683a5c85", - "component.badge.default.text": "ab90828e3b8c6adce5dc10bf85107b001b958e95", - "component.badge.default.background": "706b070b298e2d2a97665baf7af05187eefeb4fe", - "component.badge.default.border": "a935a2968ca4ecfb8cc58a18f31ae8fe65eb516b", - "component.badge.neutral.text": "82d39f1786c4371303ae21e4c02db79989c54e36", - "component.badge.neutral.background": "f5480b1a2b648fdb0561acda7515c38271cfb04b", - "component.badge.neutral.border": "00f05792ddf6e53bff79346df6a34144426d50e0", - "component.badge.success.text": "71014a6138e8747257a21144f8114b906cfe0f0a", - "component.badge.success.border": "190589c6021debb7bb676f05ac7f063c237fd4aa", - "component.badge.success.background": "177eb9f406784ddb958232cd643ebbb3490a53d4", - "component.badge.danger.text": "6c0c04f17c2bc0ee085d09bf0f205dcbc66c1e17", - "component.badge.danger.border": "6bb014acbbd68a796ed0c4d8c4f73e8e9e619923", - "component.badge.danger.background": "4162b10332d17800585d97ed45e45d69c2006808", - "component.badge.warning.text": "8581620d95e5b92a8c85341ebf63f21fcf7133d0", - "component.badge.warning.border": "71cb519182108ac72ffef823935546e4bff62bbc", - "component.badge.warning.background": "74c13457a85684a054426bd833859fe93eaec978", - "component.badge.running.text": "0b0c1be217e557a5b14c1cb25e988e4ac6d40583", - "component.badge.running.border": "27d3c48d3c316bc4f980282759b5e82f8aaaf49d", - "component.badge.running.background": "a85fddc26baf586ac7ba79e381e5f8fefca87c65", - "component.badge.merged.text": "a83d66ef53e8a094a62f2b32a4d17e58d552b1ef", - "component.badge.merged.border": "755392bca643af0a3fe5492069881a870aa11dc3", - "component.badge.merged.background": "4f4c81b1fe43bfe0d721a22d0aeb93079776cf6d", - "component.badge.ai.text": "bb4daee92817073da0366090742d0a17babb5728", - "component.badge.ai.background": "c5764a2304bf0e8a153c9ce0da20827696a76b41", - "component.breadcrumb.item-inactive": "2f009ca6cafb50c994205c9df02ee2d2503f7d23", - "component.breadcrumb.item-current": "7b502cc2e72f66bb501fdc5f480d0133d1b3841a", - "component.breadcrumb.separator": "1cd28c3ff97ab2f529a19c632d89dd44af0aad80", - "component.btn.primary.text": "9d32f032da93c9aab8b3bc6087c26aa12f507ad7", - "component.btn.primary.background": "410d584a3469233e067d0592a366fdebbe1049bc", - "component.btn.primary.border": "1491ac71f9681307c2d6528e443504e079061988", - "component.btn.secondary.text": "12c93d1b08ae50645a3b8f59256fcec00a4f84ca", - "component.btn.secondary.background": "86434310c95f5c055783011cc0e7c7918f67a35c", - "component.btn.secondary.border": "66bda91f87154efd3cefdc7a634ecb8afa8cd285", - "component.btn.outline.unselected.text": "9cf2c495178d6fdfd8f1360376242acbd4dc5e75", - "component.btn.outline.unselected.icon": "af1510c6050f671219d2089e0e59d5febb4422d6", - "component.btn.outline.unselected.border": "2b3013d632e566301e9f5f1a5cbb6aab4e7ec53f", - "component.btn.outline.selected.text": "13b50089245dec1899db2012412efcf649e2c0b4", - "component.btn.outline.selected.icon": "2bdf2c92b22e814109f4e05ec4d41d92f934a15d", - "component.btn.outline.selected.border": "ef10f4599233f62203def151b386013ddaa63afb", - "component.btn.ghost.unselected.text": "43fa10dd413cddb9a2e2142ead9ca3b4a91b49a6", - "component.btn.ghost.unselected.icon": "5ce332f51238b374104ec53067d685c26882f38e", - "component.btn.ghost.selected.text": "74cbf3b86016e05517f8c7bc64652281c940363e", - "component.btn.ghost.selected.icon": "1d8c6206a136d9c176ffba600a1e94618c4b96f8", - "component.btn.success.text": "52a336440e013bbc849ad67a43d0e136cf4f0b51", - "component.btn.success.background": "608ca6930129b4e5ff36d7f38508ae2537b66629", - "component.btn.success.border": "1f74d9985a10fe20e0acc4647cf4949005e9d4f1", - "component.btn.success.state.hover": "d05bde38a6539a11e3ccd87345af113ccd6bd113", - "component.btn.success.state.active": "f6e48e68dba6c32de27fadcaca3d1959f081d2e5", - "component.btn.danger.text": "49c02562362b8f775cfc2c4c614ecd646dcc2716", - "component.btn.danger.background": "0b015d0a4f456781969d7ffaf135c7c2a8858440", - "component.btn.danger.border": "9f99ee56f1ae2b7eb2f98300b83d4f53b15fd763", - "component.btn.danger.state.hover": "e7756e1d022d893bfa5fdd619f181d26fb7b117b", - "component.btn.danger.state.active": "23c7c85ff6104e098a208b6f4b86c1d0eef0f543", - "component.btn.ai.text": "380368600319fa12b73538ff52acd9d0e977e367", - "component.btn.ai.background": "8c9a1d07e05837f50588b642a4b51462f883887d", - "component.card.background": "256878745d17a46b7159919d8e30a3e960f59575", - "component.card.border": "3688ffcc56c4fb44dc0e221b8e09a958fd9e509d", - "component.dialog.title": "e6e0ff2bf1f3802eb21492e8b833c5f5e679cd82", - "component.dialog.description": "301509fcf2faac8497b2136f7879b9b0b3c64433", - "component.dialog.background": "ff2918d712798a4b487b6f6e5befe7b3eef59883", - "component.dialog.border": "4a6cb3732ad8b36bb9de0d15cbed575c87996088", - "component.dialog.backdrop": "893e60ed671f891241a3084707057185398446ed", - "component.dropdown.background": "09b2dca27ba9efabfe838d713a14ca6e6ac46685", - "component.dropdown.border": "c8cdfff63f4e142d651070ff1056b69a638aaab7", - "component.dropdown.item.delete.text": "864396a8c9b5df0fd948ded7d520ded936d74a8b", - "component.dropdown.item.delete.state.hover": "308dc9064be8e754f8385b0e8ff5489563d7c984", - "component.diff.grey": "43bf4f466a6e231c9951a639313740579c29d824", - "component.diff.add-content": "eb4eccf789a2bda6f3d3875c3310ef0579fd3555", - "component.diff.add-lineNumber": "61583aa6e36aaddd0be173a4a082a450e2522d3a", - "component.diff.add-content-highlight": "ad544fc527ca8b4c297993fe0722b8a7a96ef903", - "component.diff.add-widget": "c1def698ab707194d8f1558e16b05c55d50920d9", - "component.diff.add-widget-color": "a27c504a1f1151974669cf06054c1d0f704ecc38", - "component.diff.del-content": "465e6eb3613967f489cfee4b04f0b283b9e88f91", - "component.diff.del-lineNumber": "4cbe83072b6781d6e3edff645ccb2fb7426c5628", - "component.diff.del-content-highlight": "3e635e401a1a37a259211d093bef70e3a0c507ea", - "component.diff.plain-content": "984456faee2f6a5c202cfd76078ef5b6cd3a05f1", - "component.diff.plain-lineNumber": "6a5550287e7c58afa9d2375c5bfdca4d6c214cf1", - "component.diff.plain-lineNumber-color": "7c1186d20725b53cbefe87f56c5bc6db4e77d898", - "component.diff.empty-content": "712d93a0c1bc9503abda77ae50d624bd328c0057", - "component.diff.hunk-content": "79ad0dfc599f9bc246a6618c85bc1dc59744537f", - "component.diff.hunk-lineNumber": "bccfad80b84e35edf4b47af2ca30057eba2b2ebf", - "component.diff.hunk-content-color": "68c5d6a95d475f7275062e3eb58dba464df3d059", - "component.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", - "component.input.text": "df946237ac2ea0d177f3f2818a673fdf876944c7", - "component.input.placeholder": "85d7632aba08fd476083e508cc2660b17c30981a", - "component.input.icon": "75ca1f38c16fbd5e2697a36c74b0b1dd01f3f5c0", - "component.input.background": "585327333fbbf97bb8db21fbc613025719ca8a87", - "component.input.border": "911dac823dac21c9ccf4e35e10b2eb82a9c6f0ef", - "component.label.text": "80403cd630bba01a064550d9783313227b1d010f", - "component.link.default": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", - "component.link.visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", - "component.nav-tabs.unselected.text": "c085805657bb81574da85d3cb29f89ca08980daa", - "component.nav-tabs.selected.text": "16aa825c8038347237cbe91f7eeece4d2a8d1a2b", - "component.nav-tabs.selected.border": "3427b967112facd59f09fa310c863d7193ea4ffe", - "component.nav-tabs.border": "791d71ca187934e4b98ddff04bc9447a10358699", - "component.nav-tabs.background": "b92549e37390005f2bd1cfce06f9dfb8f67e39e0", - "component.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", - "component.pipeline.card.background": "f207dcff97f000326c4f28293fdbd2830860ce54", - "component.pipeline.card.border": "aa9d9528b1e8e25f9e6dae387b76d9beb2de35a8", - "component.pipeline.card.running.border": "179c0e4d47becc896eb1fbb7f9e8461779b3f680", - "component.pipeline.card.error.border": "1c0b41b41e25250cfb65bdb539bd573be66b0d00", - "component.pipeline.card.completed.border": "14251a54f431aae617af6b9577454a0e212ad76f", - "component.pipeline.card-canvas.1.background": "01bd392d5ddafe85e5575296d08254e52054ba8d", - "component.pipeline.card-canvas.1.border": "b9510abf89f82fb7b779bb730caa1bf393c83bd4", - "component.pipeline.card-canvas.2.background": "87b6b3e65b995fc4180dfb7bf613efb0098d1fff", - "component.pipeline.card-canvas.2.border": "1f9fa1e95134d87995a21738a3877f1c15158e5e", - "component.pipeline.background.dotes": "2784742abff27552789cdd4f2b51cab1331abb4a", - "component.sidebar.background": "8b6619fafae38e8ad94fffd488f2cf53d3c31d76", - "component.sidebar.border": "2263230eae16609a3d95ba5863aa3cc343010131", - "component.sidebar.separator": "a0c913dd38e81e3b2c20ee17642433da6da5f147", - "component.sidebar.hover": "4925b4511178bd2853a6b7b329683d036508aec1", - "component.sidebar.selected": "31f335ecde0aedb12407221718069f5b13574d41", - "component.sidebar.item.unselected.text": "9609e0ad8d79127a3784876f0204d02964f09e43", - "component.sidebar.item.unselected.icon": "5afba128858cf7494fb8a326a435860faf00b0ee", - "component.sidebar.item.selected.text": "5f1daf88cebaea07bd4c2a57c862638340827496", - "component.sidebar.item.selected.icon": "18325fda8139122c4a7cdf6debe2cd1f25d120b7", - "component.sidebar.logo.text": "a3ffa09fdf368badab24aecdbd26709ed7b3c2b2", - "component.sidebar.logo.icon": "c572d382a2018718d719f6a427d31fc9a42f57bd", - "component.sidebar.search.background": "33822e390046e5ec8f71a07fc041514a28778e74", - "component.sidebar.search.border": "f2044f7e8cf503f8809a48a14a88c5ef6466176f", - "component.sidebar.search.placeholder": "665cc00a32edd27b62371ee820d3c3250e629e78", - "component.sidebar.search.btn.background": "70c80e61b9ec397214c809c51de4fdf8177185da", - "component.sidebar.search.btn.border": "1c434c7d16cd4ba880e2d57520c90bc37f6b3879", - "component.sidebar.search.btn.text": "589c7d0162d67165a8752ea54a2c63bb63ee3ad7", - "component.sidebar.footer.username": "68298a8f471bb04f2f0305d9433a2b59613abd8d", - "component.sidebar.footer.data": "6a681d2abb90c2b62a39e20a1d29419c5086f01a", - "component.scrollbar.thumb": "9818c03d003381a966d08d3c6da75af8468bb8ef", - "component.selection.unselected.item": "7a7cad2aa2d6b2803a52eb26c78ea177b84ce241", - "component.selection.unselected.background": "a63ba949d12afc99020e77f95d0538bddba457b3", - "component.selection.unselected.border": "6ef997ebe03bb209ca568a648eb0cc8be69746a6", - "component.selection.selected.item": "f1f43c8acf2d4da10ee2e0d164d4dbe955816018", - "component.selection.selected.background": "1d1bbb9958f047744b66861fd8bd75dc2726dc25", - "component.selection.selected.border": "44b31378ed175b87b50ebad88cfd4a73a66ab9d5", - "component.separator.background": "9f4c82c269bc5aff0fa55d52a0ed59f914057be0", - "component.slider.track.base": "34dc3b5be6733e38f6c28d24d4f3699b2d7ea6f3", - "component.slider.track.progress": "38d8cac26c1cfb91293198eee25299e4aef9c1d8", - "component.slider.track-segments.base": "cb752791a51ff48c6d481426a1affb15048a152a", - "component.slider.track-segments.progress": "a7943fda0e4646e7018046354a9be54cf7d03075", - "component.slider.handle.background": "5c423cc3b672079f1e7dc0d1c8170dade368711a", - "component.slider.handle.border": "94347a2ed2900445946d18c653fb179b8602c533", - "component.status-indicator.completed": "c4c3bce2d28c84c25db4f444f9144b94523737b7", - "component.status-indicator.cancelled": "5aa15732d9ebc41f14b111e252819e2e36617124", - "component.status-indicator.warning": "4dc6e5ea4c736869aee4ebd0ee006f2d73861423", - "component.status-indicator.running": "07ce029f27cf34bf8d6fe3b9a6a600be01c8947e", - "component.status-indicator.merged": "d9eb24404452e6cc2617094fe8f29c69a760ea55", - "component.status-indicator.action-required": "2f1b8543c44b5d93cebddd80b5a9ee2d60fdb146", - "component.status-indicator.waiting": "62f68d300850ce20cf0be8c07d82a41bf1a56ecd", - "component.switch.unselected.thumb": "94d5f0b3a97924583ff697d56db74727b133ba95", - "component.switch.unselected.background": "a8ae87c7bb7ba7f4bfa71f2fdd5f404d19c3a1be", - "component.switch.selected.thumb": "cf6964ec11d69899d5dd39e82d322ea544367e90", - "component.switch.selected.background": "bba05ff96eae08a4adc31a6406e417022d9e5dad", - "component.table.header.text": "65cfc045aa01e3d3eeae4a227cac9be150839db8", - "component.table.header.background": "137c4f2e14bb8cadaf6f900a443700fe928a1fcd", - "component.table.row.alternate-background": "2863f92db433f88f24f62dda4cc9fd50c48130be", - "component.table.row.border": "445d945c4fe4426c3b73cf6f8fe0a572e4525798", - "component.table.cell.text": "73a28f25ba54aff507877ecbfd9942a6ea9f3cea", - "component.tabs.background": "8689ee01219675fb951a2517c2397fba52487971", - "component.tabs.border": "e5bc8cfac224234021c11b381f505da5fcac84ed", - "component.tabs.item.unselected.text": "4af8a5b79c55621f1ed11a7b6fc605657934dc1e", - "component.tabs.item.unselected.background": "fa041cdeb34ba5da6f1bd4cd6d8bb4b8273e0e70", - "component.tabs.item.unselected.border": "79b1a6fe839c012efec923edf40b3bfa2bcdab19", - "component.tabs.item.selected.text": "d048f7001829ff9949b2712b8ca746c8f3f49767", - "component.tabs.item.selected.background": "33269e9854800d565f728ba2a85c5cd3e549b5e8", - "component.tabs.item.selected.border": "11b7e5aeb83fd2f5d968021c750af2ceb5ba5841", - "component.tag.blue.text": "b35e0aebd9d1ebf0fd5d24bbd5ad184db9e11b86", - "component.tag.blue.background": "072fc2901d8ad0199c07bc339d46db086c7b0379", - "component.tag.blue.background-subtle": "67307c003cb91d76e00ef0f3777318e25efac628", - "component.tag.blue.border": "680fb2a6a11251e2619789595cd28c7861aaa530", - "component.tag.brown.text": "b48491f46d15503df99e2d8d9394aa552d09461b", - "component.tag.brown.background": "90b0ee0df4ebe7f06bfd07a7acbe812a45d621a4", - "component.tag.brown.background-subtle": "134ffd2a91ef027e197db6a5331d2726bc080ad6", - "component.tag.brown.border": "675776ff7a30540c297579d72b7f00779d778c14", - "component.tag.cyan.text": "6bf9361c5931ba40663d2c412f28f15382498517", - "component.tag.cyan.background": "83107c8cff314c553ed2cea5c9af1ff3356485e5", - "component.tag.cyan.background-subtle": "7f2724127eebb6e01713828af3736cd2e3734436", - "component.tag.cyan.border": "3286065f931626298e8f3dab2328297e83a79771", - "component.tag.green.text": "699a30f1d5f76ed4e631faa3da63be65e88af039", - "component.tag.green.background": "8b06c35974700260dff1a712c0a3976d4ddb0df5", - "component.tag.green.background-subtle": "c4f47c34772d8367bc3b00645420511f37aaecad", - "component.tag.green.border": "db85545b7d00ef9e199bf863dcdcc2be520f520c", - "component.tag.indigo.text": "d641d4626278e4d17ff4d98202112da9580a6b89", - "component.tag.indigo.background": "bb4af9a068f716c2f0b4f77c228b88009ac049c9", - "component.tag.indigo.background-subtle": "877e3b4ee6040ed581a8349c8fdb5e49ed36dfe0", - "component.tag.indigo.border": "885fdb80c956855c30666c660d5839dc357d1f5f", - "component.tag.lime.text": "763399447b243f761b7cce55f7dcf2fbb1797ee3", - "component.tag.lime.background": "d51cede4c823e16ac204bcaddb65d49c325c3cbe", - "component.tag.lime.background-subtle": "556934df078200ab014c762eeaa04deecd05422e", - "component.tag.lime.border": "fbb53e37ef7cb87cfae5298e69a5ffe4f99a23a7", - "component.tag.mint.text": "d3d406bffbadb1b894e4bb6aef7b1f5a1945094c", - "component.tag.mint.background": "04568a7d0bff5fbc11600bf840916f5451a0fe62", - "component.tag.mint.background-subtle": "1d39716bceda8510beb02e19847c391523e3690a", - "component.tag.mint.border": "c703cecfc8bd82c593dc9d81ce18748edd6ecf4d", - "component.tag.orange.text": "ba407492439b283fedf30a8ab8b16774c0931a9f", - "component.tag.orange.background": "ef766412f340a4aa62c8888a6fdfb2890f3ea207", - "component.tag.orange.background-subtle": "05e823662de8b1f99a062cea3c0f24df69b29362", - "component.tag.orange.border": "2f3023f2311c12acb44cdd28beb888f64d6d2183", - "component.tag.pink.text": "83b73e0e328485233004d42baa8a0948ff2198b0", - "component.tag.pink.background": "b23a211249a71f32bf15757316d0596fdb395962", - "component.tag.pink.background-subtle": "c144f19e07b839d68f20eb5c51ebd94e0f333a82", - "component.tag.pink.border": "b4874a81a08261362f3d8237833b80e68a851b76", - "component.tag.purple.text": "9869d8aad416ac3f9e530b0d62b05dda66906de4", - "component.tag.purple.background": "bc59008310427ba5883f71079b19b8cb4c6dd862", - "component.tag.purple.background-subtle": "a3598602d6e6b1d03f638f1a941801f147f4657a", - "component.tag.purple.border": "de1d577bd170613ab46460e9c50ca8de420152f6", - "component.tag.red.text": "aca8c1832317ac859b4263769855f423840a8569", - "component.tag.red.background": "9008e05416a00096c234511275b92be7204363b6", - "component.tag.red.background-subtle": "986bdd3f8d16488337ca9f46b71b04195d7578b0", - "component.tag.red.border": "f7f9067262546ee6eb77955e38aa0a451fc7f98a", - "component.tag.violet.text": "2ab996ff3465a0b97dee4d7c5606df3d46ab2a07", - "component.tag.violet.background": "4c9b9c2658479fc0e56894975a9b9b8d76df5b00", - "component.tag.violet.background-subtle": "fded9a84a20755592f57f081ebb594bfbaf8cfb3", - "component.tag.violet.border": "77de89ef1ab5168b7ff5e329bde8608047149a04", - "component.tag.yellow.text": "cadfcb4d0fe72fd5828cd764d54198026520e10c", - "component.tag.yellow.background": "a29464cd2a618a77586cb8760478a4d82b12b3ca", - "component.tag.yellow.background-subtle": "1b262be32c5779f024da5ad5696c805a83eb96c7", - "component.tag.yellow.border": "b595821fd5ef662361820415bb878e8ef4ab8939", - "component.tag.gray.text": "e7608c51a2421de226afebbcb909180c8a0cdb5a", - "component.tag.gray.background": "9bcc758ef67bbaac88637e99a702da5d7f7a3144", - "component.tag.gray.background-subtle": "76dfa99dd57cbaf2e7cbec9511cd1e1ddd92ee0e", - "component.tag.gray.border": "02e03f32969f9e6120bb6c7a3b781a5446f1bef1", - "component.toast.default.title": "f791d24eeab59c12cf4aad84f4677099bb4a01c1", - "component.toast.default.description": "6000da4ada3b9445750fb4b7b990726df120c271", - "component.toast.default.background": "5b9e9ea5b7de018a92d3deb902257e4e2bbb49f9", - "component.toast.default.border": "f74755bc7843dc9d7c788c54178b7ce3b83dea3f", - "component.toast.danger.title": "b5ad1c43fcee32eb251b980e884e77ea137c3369", - "component.toast.danger.description": "d281b5c13f2a4a293042f52b168e39f8bec398da", - "component.toast.danger.background": "8ba5c70e994ab44aeb72b3ed7f26ca9646d59cc0", - "component.toast.danger.border": "7f5252c13b96825084248b367f36377bb003ca96", - "component.tooltip.text": "b79a7ec441cdc7c6eee9313602f081d063327c1d", - "component.tooltip.background": "a35d0240a1c4de13350e6a4770dd1703a90a9227", - "component.tooltip.border": "d57b38546841813d61da59d66e98a8921f2f3ee7", - "shadow-color.0": "c0c282f63e107374a732d74c1742cf60d52e6e5c", - "shadow-color.1": "1ec33a9c84353664d23cd23d6c033d1c330c149a", - "shadow-color.2": "6200a000044d8dbee421ed4afb0c3ff42febb6ef", - "shadow-color.3": "77d99afb159d8e193a82f615dd84de3214e00703", - "shadow-color.4": "2b2e0307d252bdc6db53a23ce2cc2e9bb4f6b914", - "shadow-color.5": "5a6c707240bab54cb4403f47262abfe0756efc9a", - "shadow-color.6": "928283d00759150575a8f155da90180a582be438", - "shadow-color.inner": "6cb5a98fba0b13e952859b9f023259b5c06cfd1a", - "gradient.ai.gradient-stop-1": "8db516caa68afc5b8fdd6fc6e5a9bad7715c5f26", - "gradient.ai.gradient-stop-2": "33930f41665251a281973a37847f357480aedca3", - "gradient.ai.gradient-stop-3": "c9e14c3db8e622b10b1cd3e860115cd6f876ae49", - "gradient.ai.gradient-stop-4": "6e7d0850d7eb1e699f87b41f6ffd4cb8d73d72e8", - "gradient.skeleton.gradient-stop-1": "5427016b990b75f0d1ce60eef8cb9b96d75fbde2", - "gradient.skeleton.gradient-stop-2": "01442c311e6da751c30c3518fc32970306767274", - "gradient.skeleton.gradient-stop-3": "7fda4c834a3daf0c56bb59777c525670ae2dee3e", - "gradient.pipeline.running.gradient-stop-1": "0c187d1ebb015ec66bac356009795316f84807ae", - "gradient.pipeline.running.gradient-stop-2": "d1251f86c91bd0f29d8ac8cfa01056bc307156b4", - "gradient.pipeline.running.gradient-stop-3": "b09bdab234cdf7c204cb153ec94ea0a9b2bb4976", - "gradient.pipeline.arrows.gradient-stop-1": "0465e74baaf10a12f23b9eaa40fc1ae08485a0d5", - "gradient.pipeline.arrows.gradient-stop-2": "4cadc4f9a5e66f28eaa27fb54b6ce538ea430c7d", - "gradient.pipeline.arrows.gradient-stop-3": "5af16d4ae6b63ff8dcf3254009e712db4ac1a3f9", - "gradient.pipeline.card.background.gradient-from": "8404a4e146121987426681accb996902179fad72", - "gradient.pipeline.card.background.gradient-to": "037bbd7fb410d05993a48594626a7babb32605a6", - "gradient.pipeline.card.border.gradient-from": "342926ec7179e7cbe133981050c1e1e41d94ed7a", - "gradient.pipeline.card.border.gradient-to": "8e39428cc5ce20f3593127f2ef71f180b38ee9a4", - "gradient.pipeline.widget.number.gradient-from": "dc372cb50eedf6023cd80cb6a4520e5fdf91358b", - "gradient.pipeline.widget.number.gradient-to": "e505c8d9dd140f5a671c1291ffd519fcff5c3e2c", - "gradient.pipeline.widget.blob.big.gradient-from": "b518524b25a5b95804988c640c4d52ba7ebd4599", - "gradient.pipeline.widget.blob.big.gradient-to": "80a493af10245e0ebbc6a51f5452d61d836a3754", - "gradient.pipeline.widget.blob.small.gradient-from": "8d7be31e69f0e54dd2e493d9051c2268078ea5ed", - "gradient.pipeline.widget.blob.small.gradient-to": "198813cf6242881ce0e0d030ca22ef31f9190d13", - "iconStrokeWidth.xxs": "751ceaa292e27736009bef894b62f83c1b2d66d8", - "iconStrokeWidth.xs": "77ca59c88a0b47972554b1db3f6469a230a6ad8c", - "iconStrokeWidth.sm": "e445b22e1f18af07002a1dc76f900dada5477383", - "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", - "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", - "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "component.dropdown.item.text": "2f1f1ea9d368ec8be380803506fbf657cabe6ac0" - }, - "group": "mode" - }, - { - "id": "9650760429e819885a0a2acec035d2df980a09dd", - "name": "dark-dimmer-tritanopia", - "$figmaStyleReferences": { - "shadow.0": "S:a2ed3778198048e91067a04633c27ba20e9fcbec,", - "shadow.1": "S:947694488889f7271c428950bec937ee79f8a536,", - "shadow.2": "S:70378f090cb66b03ee4b18e25742743934f37757,", - "shadow.3": "S:aa7e83fd47e75f5a1ae3e17f64417d5e9fcb96ae,", - "shadow.4": "S:5dfba690094db266c4ab7686fccbbedd8c16385f,", - "shadow.5": "S:d6752151a8dd3bd4b4bf12ad15a80c522f760731,", - "shadow.6": "S:da8e7b5b0f1352215fbaab66eff62a3e19d22b67,", - "shadow.inner": "S:2805cdc40176a4707d5cfc549b4c12e7ec4e74ff,", - "ring.focus": "S:062018f6483f54f1255b952aa1759b028d502ac3," - }, - "selectedTokenSets": { - "mode/dark/dimmer-tritanopia": "enabled" - }, - "$figmaCollectionId": "VariableCollectionId:1340:156918", - "$figmaModeId": "1389:9", - "$figmaVariableReferences": { - "background.1": "633e5f77aa1bd1bd133852d8372b9c9f1231a9e4", - "background.2": "14e8d4b56cc273b508af8a2c58cb00e99e08d1d3", - "background.3": "33554ff11e1eab35e50aa3570f51d53f16f46d6a", - "text.1": "38382b9984a98f9d26692a7f2882dfb5c5d51825", - "text.2": "115f62efd02491e85a63dfd601b03725d3711f23", - "text.3": "1c7327f01cf759b17fd0523cb540afa8700c1dc7", - "text.accent": "0b3cd5357659e6542cca163ccfd96c0cac059203", - "text.success": "ee56057b81e6d0872a84ca6b29affc8911fe333e", - "text.danger": "c7e38d7c7afc899f4d40392dbd6bc5ed6580264d", - "text.warning": "b03334e4c9db4b76269e4be886df6c1abf74d0ca", - "border.1": "5ad2231a611605964ba70f80e7aabb48f04bc704", - "border.2": "9084bef359e38136e0dddac25a464896456a9b1a", - "border.3": "5ff5d5233f7cb0233ce7634bc480026668c818f6", - "border.focus": "8db219e896acc4d828aaaf4add646d96540a84ea", - "border.success": "b13758973865eab0b4d79028a48e457eae8bec47", - "border.danger": "33d53c1486021bb3c9edce4123b484a2aabc8de0", - "border.warning": "027e57e08a1edcaaa7fbe033902bb3f65497abb4", - "state.hover": "78426caca2a07ee56132762a720ae07e2810f03b", - "state.selected": "ef914056c9c9dbaef00fa8795702a3cb933ee761", - "state.disabled.text": "967ab1b863941c100f58cc55e611ee2709051f01", - "state.disabled.background": "7a192b5ddcc570f0c8e3a5dbfd54d780e2832bbd", - "state.disabled.border": "067fd26e80ad39a28f738a3b76d21d354092d551", - "component.accordion.title": "5e49d6ddf7f2b21724b474d4a5545256143dce54", - "component.accordion.description": "bc47401a69d07fa71f0371765ed940745fc7a5b9", - "component.accordion.chevron": "5dd530f96134323125031668d4ea98a36ea0de86", - "component.accordion.border": "0b3fcc0e02a2a86625b2b4a9cfeebfad9486bc3a", - "component.alert.default.title": "d8e59ed205399e9727b0dcecdccad3d8daaaa622", - "component.alert.default.description": "f9ec7fec91747435740f000fb642f9009e8fc2db", - "component.alert.default.background": "7fbbdfcc33a3051394f89675798db2159741a5fc", - "component.alert.default.border": "549692bf2f70f6b40c7d55259f8890189aa6cc98", - "component.alert.danger.title": "c8da1cdbba8e0f86edda5fd3869f6186d53881ca", - "component.alert.danger.description": "366849405bd53c78f0b73d72585034a52f05d9a7", - "component.alert.danger.background": "5756a9bdba027993a9879b32ed129e3034028cdf", - "component.alert.danger.border": "a1a3be9eefab6edf2e996a46537872680dc45a09", - "component.avatar.text": "23018f4c7f22c4afb3b7e49f585a1fbb591209de", - "component.avatar.background": "57703fddbd26d363509fdba3aea037bd2f515ee0", - "component.avatar.border": "d651f4cb9082aa4d6e6af2c5abab700d683a5c85", - "component.badge.default.text": "ab90828e3b8c6adce5dc10bf85107b001b958e95", - "component.badge.default.background": "706b070b298e2d2a97665baf7af05187eefeb4fe", - "component.badge.default.border": "a935a2968ca4ecfb8cc58a18f31ae8fe65eb516b", - "component.badge.neutral.text": "82d39f1786c4371303ae21e4c02db79989c54e36", - "component.badge.neutral.background": "f5480b1a2b648fdb0561acda7515c38271cfb04b", - "component.badge.neutral.border": "00f05792ddf6e53bff79346df6a34144426d50e0", - "component.badge.success.text": "71014a6138e8747257a21144f8114b906cfe0f0a", - "component.badge.success.border": "190589c6021debb7bb676f05ac7f063c237fd4aa", - "component.badge.success.background": "177eb9f406784ddb958232cd643ebbb3490a53d4", - "component.badge.danger.text": "6c0c04f17c2bc0ee085d09bf0f205dcbc66c1e17", - "component.badge.danger.border": "6bb014acbbd68a796ed0c4d8c4f73e8e9e619923", - "component.badge.danger.background": "4162b10332d17800585d97ed45e45d69c2006808", - "component.badge.warning.text": "8581620d95e5b92a8c85341ebf63f21fcf7133d0", - "component.badge.warning.border": "71cb519182108ac72ffef823935546e4bff62bbc", - "component.badge.warning.background": "74c13457a85684a054426bd833859fe93eaec978", - "component.badge.running.text": "0b0c1be217e557a5b14c1cb25e988e4ac6d40583", - "component.badge.running.border": "27d3c48d3c316bc4f980282759b5e82f8aaaf49d", - "component.badge.running.background": "a85fddc26baf586ac7ba79e381e5f8fefca87c65", - "component.badge.merged.text": "a83d66ef53e8a094a62f2b32a4d17e58d552b1ef", - "component.badge.merged.border": "755392bca643af0a3fe5492069881a870aa11dc3", - "component.badge.merged.background": "4f4c81b1fe43bfe0d721a22d0aeb93079776cf6d", - "component.badge.ai.text": "bb4daee92817073da0366090742d0a17babb5728", - "component.badge.ai.background": "c5764a2304bf0e8a153c9ce0da20827696a76b41", - "component.breadcrumb.item-inactive": "2f009ca6cafb50c994205c9df02ee2d2503f7d23", - "component.breadcrumb.item-current": "7b502cc2e72f66bb501fdc5f480d0133d1b3841a", - "component.breadcrumb.separator": "1cd28c3ff97ab2f529a19c632d89dd44af0aad80", - "component.btn.primary.text": "9d32f032da93c9aab8b3bc6087c26aa12f507ad7", - "component.btn.primary.background": "410d584a3469233e067d0592a366fdebbe1049bc", - "component.btn.primary.border": "1491ac71f9681307c2d6528e443504e079061988", - "component.btn.secondary.text": "12c93d1b08ae50645a3b8f59256fcec00a4f84ca", - "component.btn.secondary.background": "86434310c95f5c055783011cc0e7c7918f67a35c", - "component.btn.secondary.border": "66bda91f87154efd3cefdc7a634ecb8afa8cd285", - "component.btn.outline.unselected.text": "9cf2c495178d6fdfd8f1360376242acbd4dc5e75", - "component.btn.outline.unselected.icon": "af1510c6050f671219d2089e0e59d5febb4422d6", - "component.btn.outline.unselected.border": "2b3013d632e566301e9f5f1a5cbb6aab4e7ec53f", - "component.btn.outline.selected.text": "13b50089245dec1899db2012412efcf649e2c0b4", - "component.btn.outline.selected.icon": "2bdf2c92b22e814109f4e05ec4d41d92f934a15d", - "component.btn.outline.selected.border": "ef10f4599233f62203def151b386013ddaa63afb", - "component.btn.ghost.unselected.text": "43fa10dd413cddb9a2e2142ead9ca3b4a91b49a6", - "component.btn.ghost.unselected.icon": "5ce332f51238b374104ec53067d685c26882f38e", - "component.btn.ghost.selected.text": "74cbf3b86016e05517f8c7bc64652281c940363e", - "component.btn.ghost.selected.icon": "1d8c6206a136d9c176ffba600a1e94618c4b96f8", - "component.btn.success.text": "52a336440e013bbc849ad67a43d0e136cf4f0b51", - "component.btn.success.background": "608ca6930129b4e5ff36d7f38508ae2537b66629", - "component.btn.success.border": "1f74d9985a10fe20e0acc4647cf4949005e9d4f1", - "component.btn.success.state.hover": "d05bde38a6539a11e3ccd87345af113ccd6bd113", - "component.btn.success.state.active": "f6e48e68dba6c32de27fadcaca3d1959f081d2e5", - "component.btn.danger.text": "49c02562362b8f775cfc2c4c614ecd646dcc2716", - "component.btn.danger.background": "0b015d0a4f456781969d7ffaf135c7c2a8858440", - "component.btn.danger.border": "9f99ee56f1ae2b7eb2f98300b83d4f53b15fd763", - "component.btn.danger.state.hover": "e7756e1d022d893bfa5fdd619f181d26fb7b117b", - "component.btn.danger.state.active": "23c7c85ff6104e098a208b6f4b86c1d0eef0f543", - "component.btn.ai.text": "380368600319fa12b73538ff52acd9d0e977e367", - "component.btn.ai.background": "8c9a1d07e05837f50588b642a4b51462f883887d", - "component.card.background": "256878745d17a46b7159919d8e30a3e960f59575", - "component.card.border": "3688ffcc56c4fb44dc0e221b8e09a958fd9e509d", - "component.dialog.title": "e6e0ff2bf1f3802eb21492e8b833c5f5e679cd82", - "component.dialog.description": "301509fcf2faac8497b2136f7879b9b0b3c64433", - "component.dialog.background": "ff2918d712798a4b487b6f6e5befe7b3eef59883", - "component.dialog.border": "4a6cb3732ad8b36bb9de0d15cbed575c87996088", - "component.dialog.backdrop": "893e60ed671f891241a3084707057185398446ed", - "component.dropdown.background": "09b2dca27ba9efabfe838d713a14ca6e6ac46685", - "component.dropdown.border": "c8cdfff63f4e142d651070ff1056b69a638aaab7", - "component.dropdown.item.delete.text": "864396a8c9b5df0fd948ded7d520ded936d74a8b", - "component.dropdown.item.delete.state.hover": "308dc9064be8e754f8385b0e8ff5489563d7c984", - "component.diff.grey": "43bf4f466a6e231c9951a639313740579c29d824", - "component.diff.add-content": "eb4eccf789a2bda6f3d3875c3310ef0579fd3555", - "component.diff.add-lineNumber": "61583aa6e36aaddd0be173a4a082a450e2522d3a", - "component.diff.add-content-highlight": "ad544fc527ca8b4c297993fe0722b8a7a96ef903", - "component.diff.add-widget": "c1def698ab707194d8f1558e16b05c55d50920d9", - "component.diff.add-widget-color": "a27c504a1f1151974669cf06054c1d0f704ecc38", - "component.diff.del-content": "465e6eb3613967f489cfee4b04f0b283b9e88f91", - "component.diff.del-lineNumber": "4cbe83072b6781d6e3edff645ccb2fb7426c5628", - "component.diff.del-content-highlight": "3e635e401a1a37a259211d093bef70e3a0c507ea", - "component.diff.plain-content": "984456faee2f6a5c202cfd76078ef5b6cd3a05f1", - "component.diff.plain-lineNumber": "6a5550287e7c58afa9d2375c5bfdca4d6c214cf1", - "component.diff.plain-lineNumber-color": "7c1186d20725b53cbefe87f56c5bc6db4e77d898", - "component.diff.empty-content": "712d93a0c1bc9503abda77ae50d624bd328c0057", - "component.diff.hunk-content": "79ad0dfc599f9bc246a6618c85bc1dc59744537f", - "component.diff.hunk-lineNumber": "bccfad80b84e35edf4b47af2ca30057eba2b2ebf", - "component.diff.hunk-content-color": "68c5d6a95d475f7275062e3eb58dba464df3d059", - "component.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", - "component.input.text": "df946237ac2ea0d177f3f2818a673fdf876944c7", - "component.input.placeholder": "85d7632aba08fd476083e508cc2660b17c30981a", - "component.input.icon": "75ca1f38c16fbd5e2697a36c74b0b1dd01f3f5c0", - "component.input.background": "585327333fbbf97bb8db21fbc613025719ca8a87", - "component.input.border": "911dac823dac21c9ccf4e35e10b2eb82a9c6f0ef", - "component.label.text": "80403cd630bba01a064550d9783313227b1d010f", - "component.link.default": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", - "component.link.visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", - "component.nav-tabs.unselected.text": "c085805657bb81574da85d3cb29f89ca08980daa", - "component.nav-tabs.selected.text": "16aa825c8038347237cbe91f7eeece4d2a8d1a2b", - "component.nav-tabs.selected.border": "3427b967112facd59f09fa310c863d7193ea4ffe", - "component.nav-tabs.border": "791d71ca187934e4b98ddff04bc9447a10358699", - "component.nav-tabs.background": "b92549e37390005f2bd1cfce06f9dfb8f67e39e0", - "component.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", - "component.pipeline.card.background": "f207dcff97f000326c4f28293fdbd2830860ce54", - "component.pipeline.card.border": "aa9d9528b1e8e25f9e6dae387b76d9beb2de35a8", - "component.pipeline.card.running.border": "179c0e4d47becc896eb1fbb7f9e8461779b3f680", - "component.pipeline.card.error.border": "1c0b41b41e25250cfb65bdb539bd573be66b0d00", - "component.pipeline.card-canvas.1.background": "01bd392d5ddafe85e5575296d08254e52054ba8d", - "component.pipeline.card-canvas.1.border": "b9510abf89f82fb7b779bb730caa1bf393c83bd4", - "component.pipeline.card-canvas.2.background": "87b6b3e65b995fc4180dfb7bf613efb0098d1fff", - "component.pipeline.card-canvas.2.border": "1f9fa1e95134d87995a21738a3877f1c15158e5e", - "component.pipeline.background.dotes": "2784742abff27552789cdd4f2b51cab1331abb4a", - "component.sidebar.background": "8b6619fafae38e8ad94fffd488f2cf53d3c31d76", - "component.sidebar.border": "2263230eae16609a3d95ba5863aa3cc343010131", - "component.sidebar.separator": "a0c913dd38e81e3b2c20ee17642433da6da5f147", - "component.sidebar.hover": "4925b4511178bd2853a6b7b329683d036508aec1", - "component.sidebar.selected": "31f335ecde0aedb12407221718069f5b13574d41", - "component.sidebar.item.unselected.text": "9609e0ad8d79127a3784876f0204d02964f09e43", - "component.sidebar.item.unselected.icon": "5afba128858cf7494fb8a326a435860faf00b0ee", - "component.sidebar.item.selected.text": "5f1daf88cebaea07bd4c2a57c862638340827496", - "component.sidebar.item.selected.icon": "18325fda8139122c4a7cdf6debe2cd1f25d120b7", - "component.sidebar.logo.text": "a3ffa09fdf368badab24aecdbd26709ed7b3c2b2", - "component.sidebar.logo.icon": "c572d382a2018718d719f6a427d31fc9a42f57bd", - "component.sidebar.search.background": "33822e390046e5ec8f71a07fc041514a28778e74", - "component.sidebar.search.border": "f2044f7e8cf503f8809a48a14a88c5ef6466176f", - "component.sidebar.search.placeholder": "665cc00a32edd27b62371ee820d3c3250e629e78", - "component.sidebar.search.btn.background": "70c80e61b9ec397214c809c51de4fdf8177185da", - "component.sidebar.search.btn.border": "1c434c7d16cd4ba880e2d57520c90bc37f6b3879", - "component.sidebar.search.btn.text": "589c7d0162d67165a8752ea54a2c63bb63ee3ad7", - "component.sidebar.footer.username": "68298a8f471bb04f2f0305d9433a2b59613abd8d", - "component.sidebar.footer.data": "6a681d2abb90c2b62a39e20a1d29419c5086f01a", - "component.scrollbar.thumb": "9818c03d003381a966d08d3c6da75af8468bb8ef", - "component.selection.unselected.item": "7a7cad2aa2d6b2803a52eb26c78ea177b84ce241", - "component.selection.unselected.background": "a63ba949d12afc99020e77f95d0538bddba457b3", - "component.selection.unselected.border": "6ef997ebe03bb209ca568a648eb0cc8be69746a6", - "component.selection.selected.item": "f1f43c8acf2d4da10ee2e0d164d4dbe955816018", - "component.selection.selected.background": "1d1bbb9958f047744b66861fd8bd75dc2726dc25", - "component.selection.selected.border": "44b31378ed175b87b50ebad88cfd4a73a66ab9d5", - "component.separator.background": "9f4c82c269bc5aff0fa55d52a0ed59f914057be0", - "component.slider.track.base": "34dc3b5be6733e38f6c28d24d4f3699b2d7ea6f3", - "component.slider.track.progress": "38d8cac26c1cfb91293198eee25299e4aef9c1d8", - "component.slider.track-segments.base": "cb752791a51ff48c6d481426a1affb15048a152a", - "component.slider.track-segments.progress": "a7943fda0e4646e7018046354a9be54cf7d03075", - "component.slider.handle.background": "5c423cc3b672079f1e7dc0d1c8170dade368711a", - "component.slider.handle.border": "94347a2ed2900445946d18c653fb179b8602c533", - "component.status-indicator.completed": "c4c3bce2d28c84c25db4f444f9144b94523737b7", - "component.status-indicator.cancelled": "5aa15732d9ebc41f14b111e252819e2e36617124", - "component.status-indicator.warning": "4dc6e5ea4c736869aee4ebd0ee006f2d73861423", - "component.status-indicator.running": "07ce029f27cf34bf8d6fe3b9a6a600be01c8947e", - "component.status-indicator.merged": "d9eb24404452e6cc2617094fe8f29c69a760ea55", - "component.status-indicator.action-required": "2f1b8543c44b5d93cebddd80b5a9ee2d60fdb146", - "component.status-indicator.waiting": "62f68d300850ce20cf0be8c07d82a41bf1a56ecd", - "component.switch.unselected.thumb": "94d5f0b3a97924583ff697d56db74727b133ba95", - "component.switch.unselected.background": "a8ae87c7bb7ba7f4bfa71f2fdd5f404d19c3a1be", - "component.switch.selected.thumb": "cf6964ec11d69899d5dd39e82d322ea544367e90", - "component.switch.selected.background": "bba05ff96eae08a4adc31a6406e417022d9e5dad", - "component.table.header.text": "65cfc045aa01e3d3eeae4a227cac9be150839db8", - "component.table.header.background": "137c4f2e14bb8cadaf6f900a443700fe928a1fcd", - "component.table.row.alternate-background": "2863f92db433f88f24f62dda4cc9fd50c48130be", - "component.table.row.border": "445d945c4fe4426c3b73cf6f8fe0a572e4525798", - "component.table.cell.text": "73a28f25ba54aff507877ecbfd9942a6ea9f3cea", - "component.tabs.background": "8689ee01219675fb951a2517c2397fba52487971", - "component.tabs.border": "e5bc8cfac224234021c11b381f505da5fcac84ed", - "component.tabs.item.unselected.text": "4af8a5b79c55621f1ed11a7b6fc605657934dc1e", - "component.tabs.item.unselected.background": "fa041cdeb34ba5da6f1bd4cd6d8bb4b8273e0e70", - "component.tabs.item.unselected.border": "79b1a6fe839c012efec923edf40b3bfa2bcdab19", - "component.tabs.item.selected.text": "d048f7001829ff9949b2712b8ca746c8f3f49767", - "component.tabs.item.selected.background": "33269e9854800d565f728ba2a85c5cd3e549b5e8", - "component.tabs.item.selected.border": "11b7e5aeb83fd2f5d968021c750af2ceb5ba5841", - "component.tag.blue.text": "b35e0aebd9d1ebf0fd5d24bbd5ad184db9e11b86", - "component.tag.blue.background": "072fc2901d8ad0199c07bc339d46db086c7b0379", - "component.tag.blue.background-subtle": "67307c003cb91d76e00ef0f3777318e25efac628", - "component.tag.blue.border": "680fb2a6a11251e2619789595cd28c7861aaa530", - "component.tag.brown.text": "b48491f46d15503df99e2d8d9394aa552d09461b", - "component.tag.brown.background": "90b0ee0df4ebe7f06bfd07a7acbe812a45d621a4", - "component.tag.brown.background-subtle": "134ffd2a91ef027e197db6a5331d2726bc080ad6", - "component.tag.brown.border": "675776ff7a30540c297579d72b7f00779d778c14", - "component.tag.cyan.text": "6bf9361c5931ba40663d2c412f28f15382498517", - "component.tag.cyan.background": "83107c8cff314c553ed2cea5c9af1ff3356485e5", - "component.tag.cyan.background-subtle": "7f2724127eebb6e01713828af3736cd2e3734436", - "component.tag.cyan.border": "3286065f931626298e8f3dab2328297e83a79771", - "component.tag.green.text": "699a30f1d5f76ed4e631faa3da63be65e88af039", - "component.tag.green.background": "8b06c35974700260dff1a712c0a3976d4ddb0df5", - "component.tag.green.background-subtle": "c4f47c34772d8367bc3b00645420511f37aaecad", - "component.tag.green.border": "db85545b7d00ef9e199bf863dcdcc2be520f520c", - "component.tag.indigo.text": "d641d4626278e4d17ff4d98202112da9580a6b89", - "component.tag.indigo.background": "bb4af9a068f716c2f0b4f77c228b88009ac049c9", - "component.tag.indigo.background-subtle": "877e3b4ee6040ed581a8349c8fdb5e49ed36dfe0", - "component.tag.indigo.border": "885fdb80c956855c30666c660d5839dc357d1f5f", - "component.tag.lime.text": "763399447b243f761b7cce55f7dcf2fbb1797ee3", - "component.tag.lime.background": "d51cede4c823e16ac204bcaddb65d49c325c3cbe", - "component.tag.lime.background-subtle": "556934df078200ab014c762eeaa04deecd05422e", - "component.tag.lime.border": "fbb53e37ef7cb87cfae5298e69a5ffe4f99a23a7", - "component.tag.mint.text": "d3d406bffbadb1b894e4bb6aef7b1f5a1945094c", - "component.tag.mint.background": "04568a7d0bff5fbc11600bf840916f5451a0fe62", - "component.tag.mint.background-subtle": "1d39716bceda8510beb02e19847c391523e3690a", - "component.tag.mint.border": "c703cecfc8bd82c593dc9d81ce18748edd6ecf4d", - "component.tag.orange.text": "ba407492439b283fedf30a8ab8b16774c0931a9f", - "component.tag.orange.background": "ef766412f340a4aa62c8888a6fdfb2890f3ea207", - "component.tag.orange.background-subtle": "05e823662de8b1f99a062cea3c0f24df69b29362", - "component.tag.orange.border": "2f3023f2311c12acb44cdd28beb888f64d6d2183", - "component.tag.pink.text": "83b73e0e328485233004d42baa8a0948ff2198b0", - "component.tag.pink.background": "b23a211249a71f32bf15757316d0596fdb395962", - "component.tag.pink.background-subtle": "c144f19e07b839d68f20eb5c51ebd94e0f333a82", - "component.tag.pink.border": "b4874a81a08261362f3d8237833b80e68a851b76", - "component.tag.purple.text": "9869d8aad416ac3f9e530b0d62b05dda66906de4", - "component.tag.purple.background": "bc59008310427ba5883f71079b19b8cb4c6dd862", - "component.tag.purple.background-subtle": "a3598602d6e6b1d03f638f1a941801f147f4657a", - "component.tag.purple.border": "de1d577bd170613ab46460e9c50ca8de420152f6", - "component.tag.red.text": "aca8c1832317ac859b4263769855f423840a8569", - "component.tag.red.background": "9008e05416a00096c234511275b92be7204363b6", - "component.tag.red.background-subtle": "986bdd3f8d16488337ca9f46b71b04195d7578b0", - "component.tag.red.border": "f7f9067262546ee6eb77955e38aa0a451fc7f98a", - "component.tag.violet.text": "2ab996ff3465a0b97dee4d7c5606df3d46ab2a07", - "component.tag.violet.background": "4c9b9c2658479fc0e56894975a9b9b8d76df5b00", - "component.tag.violet.background-subtle": "fded9a84a20755592f57f081ebb594bfbaf8cfb3", - "component.tag.violet.border": "77de89ef1ab5168b7ff5e329bde8608047149a04", - "component.tag.yellow.text": "cadfcb4d0fe72fd5828cd764d54198026520e10c", - "component.tag.yellow.background": "a29464cd2a618a77586cb8760478a4d82b12b3ca", - "component.tag.yellow.background-subtle": "1b262be32c5779f024da5ad5696c805a83eb96c7", - "component.tag.yellow.border": "b595821fd5ef662361820415bb878e8ef4ab8939", - "component.tag.gray.text": "e7608c51a2421de226afebbcb909180c8a0cdb5a", - "component.tag.gray.background": "9bcc758ef67bbaac88637e99a702da5d7f7a3144", - "component.tag.gray.background-subtle": "76dfa99dd57cbaf2e7cbec9511cd1e1ddd92ee0e", - "component.tag.gray.border": "02e03f32969f9e6120bb6c7a3b781a5446f1bef1", - "component.toast.default.title": "f791d24eeab59c12cf4aad84f4677099bb4a01c1", - "component.toast.default.description": "6000da4ada3b9445750fb4b7b990726df120c271", - "component.toast.default.background": "5b9e9ea5b7de018a92d3deb902257e4e2bbb49f9", - "component.toast.default.border": "f74755bc7843dc9d7c788c54178b7ce3b83dea3f", - "component.toast.danger.title": "b5ad1c43fcee32eb251b980e884e77ea137c3369", - "component.toast.danger.description": "d281b5c13f2a4a293042f52b168e39f8bec398da", - "component.toast.danger.background": "8ba5c70e994ab44aeb72b3ed7f26ca9646d59cc0", - "component.toast.danger.border": "7f5252c13b96825084248b367f36377bb003ca96", - "component.tooltip.text": "b79a7ec441cdc7c6eee9313602f081d063327c1d", - "component.tooltip.background": "a35d0240a1c4de13350e6a4770dd1703a90a9227", - "component.tooltip.border": "d57b38546841813d61da59d66e98a8921f2f3ee7", - "shadow-color.0": "c0c282f63e107374a732d74c1742cf60d52e6e5c", - "shadow-color.1": "1ec33a9c84353664d23cd23d6c033d1c330c149a", - "shadow-color.2": "6200a000044d8dbee421ed4afb0c3ff42febb6ef", - "shadow-color.3": "77d99afb159d8e193a82f615dd84de3214e00703", - "shadow-color.4": "2b2e0307d252bdc6db53a23ce2cc2e9bb4f6b914", - "shadow-color.5": "5a6c707240bab54cb4403f47262abfe0756efc9a", - "shadow-color.6": "928283d00759150575a8f155da90180a582be438", - "shadow-color.inner": "6cb5a98fba0b13e952859b9f023259b5c06cfd1a", - "gradient.ai.gradient-stop-1": "8db516caa68afc5b8fdd6fc6e5a9bad7715c5f26", - "gradient.ai.gradient-stop-2": "33930f41665251a281973a37847f357480aedca3", - "gradient.ai.gradient-stop-3": "c9e14c3db8e622b10b1cd3e860115cd6f876ae49", - "gradient.ai.gradient-stop-4": "6e7d0850d7eb1e699f87b41f6ffd4cb8d73d72e8", - "gradient.skeleton.gradient-stop-1": "5427016b990b75f0d1ce60eef8cb9b96d75fbde2", - "gradient.skeleton.gradient-stop-2": "01442c311e6da751c30c3518fc32970306767274", - "gradient.skeleton.gradient-stop-3": "7fda4c834a3daf0c56bb59777c525670ae2dee3e", - "gradient.pipeline.running.gradient-stop-1": "0c187d1ebb015ec66bac356009795316f84807ae", - "gradient.pipeline.running.gradient-stop-2": "d1251f86c91bd0f29d8ac8cfa01056bc307156b4", - "gradient.pipeline.running.gradient-stop-3": "b09bdab234cdf7c204cb153ec94ea0a9b2bb4976", - "gradient.pipeline.arrows.gradient-stop-1": "0465e74baaf10a12f23b9eaa40fc1ae08485a0d5", - "gradient.pipeline.arrows.gradient-stop-2": "4cadc4f9a5e66f28eaa27fb54b6ce538ea430c7d", - "gradient.pipeline.arrows.gradient-stop-3": "5af16d4ae6b63ff8dcf3254009e712db4ac1a3f9", - "gradient.pipeline.card.background.gradient-from": "8404a4e146121987426681accb996902179fad72", - "gradient.pipeline.card.background.gradient-to": "037bbd7fb410d05993a48594626a7babb32605a6", - "gradient.pipeline.card.border.gradient-from": "342926ec7179e7cbe133981050c1e1e41d94ed7a", - "gradient.pipeline.card.border.gradient-to": "8e39428cc5ce20f3593127f2ef71f180b38ee9a4", - "gradient.pipeline.widget.number.gradient-from": "dc372cb50eedf6023cd80cb6a4520e5fdf91358b", - "gradient.pipeline.widget.number.gradient-to": "e505c8d9dd140f5a671c1291ffd519fcff5c3e2c", - "gradient.pipeline.widget.blob.big.gradient-from": "b518524b25a5b95804988c640c4d52ba7ebd4599", - "gradient.pipeline.widget.blob.big.gradient-to": "80a493af10245e0ebbc6a51f5452d61d836a3754", - "gradient.pipeline.widget.blob.small.gradient-from": "8d7be31e69f0e54dd2e493d9051c2268078ea5ed", - "gradient.pipeline.widget.blob.small.gradient-to": "198813cf6242881ce0e0d030ca22ef31f9190d13", - "iconStrokeWidth.xxs": "751ceaa292e27736009bef894b62f83c1b2d66d8", - "iconStrokeWidth.xs": "77ca59c88a0b47972554b1db3f6469a230a6ad8c", - "iconStrokeWidth.sm": "e445b22e1f18af07002a1dc76f900dada5477383", - "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", - "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", - "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "component.dropdown.item.text": "2f1f1ea9d368ec8be380803506fbf657cabe6ac0", - "component.pipeline.card.completed": "3fa7c4475eec00149944ad1ea1439e11a8a53f1e" - }, - "group": "mode" - }, - { - "id": "04442df78cb6f5028055bc8d002a42347b97e060", - "name": "dark-high-contrast-tritanopia", - "$figmaStyleReferences": { - "shadow.0": "S:a2ed3778198048e91067a04633c27ba20e9fcbec,", - "shadow.1": "S:947694488889f7271c428950bec937ee79f8a536,", - "shadow.2": "S:70378f090cb66b03ee4b18e25742743934f37757,", - "shadow.3": "S:aa7e83fd47e75f5a1ae3e17f64417d5e9fcb96ae,", - "shadow.4": "S:5dfba690094db266c4ab7686fccbbedd8c16385f,", - "shadow.5": "S:d6752151a8dd3bd4b4bf12ad15a80c522f760731,", - "shadow.6": "S:da8e7b5b0f1352215fbaab66eff62a3e19d22b67,", - "shadow.inner": "S:2805cdc40176a4707d5cfc549b4c12e7ec4e74ff,", - "ring.focus": "S:062018f6483f54f1255b952aa1759b028d502ac3," - }, - "selectedTokenSets": { - "mode/dark/high-contrast-tritanopia": "enabled" - }, - "$figmaCollectionId": "VariableCollectionId:1340:156918", - "$figmaModeId": "1389:10", - "$figmaVariableReferences": { - "background.1": "633e5f77aa1bd1bd133852d8372b9c9f1231a9e4", - "background.2": "14e8d4b56cc273b508af8a2c58cb00e99e08d1d3", - "background.3": "33554ff11e1eab35e50aa3570f51d53f16f46d6a", - "text.1": "38382b9984a98f9d26692a7f2882dfb5c5d51825", - "text.2": "115f62efd02491e85a63dfd601b03725d3711f23", - "text.3": "1c7327f01cf759b17fd0523cb540afa8700c1dc7", - "text.accent": "0b3cd5357659e6542cca163ccfd96c0cac059203", - "text.success": "ee56057b81e6d0872a84ca6b29affc8911fe333e", - "text.danger": "c7e38d7c7afc899f4d40392dbd6bc5ed6580264d", - "text.warning": "b03334e4c9db4b76269e4be886df6c1abf74d0ca", - "border.1": "5ad2231a611605964ba70f80e7aabb48f04bc704", - "border.2": "9084bef359e38136e0dddac25a464896456a9b1a", - "border.3": "5ff5d5233f7cb0233ce7634bc480026668c818f6", - "border.focus": "8db219e896acc4d828aaaf4add646d96540a84ea", - "border.success": "b13758973865eab0b4d79028a48e457eae8bec47", - "border.danger": "33d53c1486021bb3c9edce4123b484a2aabc8de0", - "border.warning": "027e57e08a1edcaaa7fbe033902bb3f65497abb4", - "state.hover": "78426caca2a07ee56132762a720ae07e2810f03b", - "state.selected": "ef914056c9c9dbaef00fa8795702a3cb933ee761", - "state.disabled.text": "967ab1b863941c100f58cc55e611ee2709051f01", - "state.disabled.background": "7a192b5ddcc570f0c8e3a5dbfd54d780e2832bbd", - "state.disabled.border": "067fd26e80ad39a28f738a3b76d21d354092d551", - "component.accordion.title": "5e49d6ddf7f2b21724b474d4a5545256143dce54", - "component.accordion.description": "bc47401a69d07fa71f0371765ed940745fc7a5b9", - "component.accordion.chevron": "5dd530f96134323125031668d4ea98a36ea0de86", - "component.accordion.border": "0b3fcc0e02a2a86625b2b4a9cfeebfad9486bc3a", - "component.alert.default.title": "d8e59ed205399e9727b0dcecdccad3d8daaaa622", - "component.alert.default.description": "f9ec7fec91747435740f000fb642f9009e8fc2db", - "component.alert.default.background": "7fbbdfcc33a3051394f89675798db2159741a5fc", - "component.alert.default.border": "549692bf2f70f6b40c7d55259f8890189aa6cc98", - "component.alert.danger.title": "c8da1cdbba8e0f86edda5fd3869f6186d53881ca", - "component.alert.danger.description": "366849405bd53c78f0b73d72585034a52f05d9a7", - "component.alert.danger.background": "5756a9bdba027993a9879b32ed129e3034028cdf", - "component.alert.danger.border": "a1a3be9eefab6edf2e996a46537872680dc45a09", - "component.avatar.text": "23018f4c7f22c4afb3b7e49f585a1fbb591209de", - "component.avatar.background": "57703fddbd26d363509fdba3aea037bd2f515ee0", - "component.avatar.border": "d651f4cb9082aa4d6e6af2c5abab700d683a5c85", - "component.badge.default.text": "ab90828e3b8c6adce5dc10bf85107b001b958e95", - "component.badge.default.background": "706b070b298e2d2a97665baf7af05187eefeb4fe", - "component.badge.default.border": "a935a2968ca4ecfb8cc58a18f31ae8fe65eb516b", - "component.badge.neutral.text": "82d39f1786c4371303ae21e4c02db79989c54e36", - "component.badge.neutral.background": "f5480b1a2b648fdb0561acda7515c38271cfb04b", - "component.badge.neutral.border": "00f05792ddf6e53bff79346df6a34144426d50e0", - "component.badge.success.text": "71014a6138e8747257a21144f8114b906cfe0f0a", - "component.badge.success.border": "190589c6021debb7bb676f05ac7f063c237fd4aa", - "component.badge.success.background": "177eb9f406784ddb958232cd643ebbb3490a53d4", - "component.badge.danger.text": "6c0c04f17c2bc0ee085d09bf0f205dcbc66c1e17", - "component.badge.danger.border": "6bb014acbbd68a796ed0c4d8c4f73e8e9e619923", - "component.badge.danger.background": "4162b10332d17800585d97ed45e45d69c2006808", - "component.badge.warning.text": "8581620d95e5b92a8c85341ebf63f21fcf7133d0", - "component.badge.warning.border": "71cb519182108ac72ffef823935546e4bff62bbc", - "component.badge.warning.background": "74c13457a85684a054426bd833859fe93eaec978", - "component.badge.running.text": "0b0c1be217e557a5b14c1cb25e988e4ac6d40583", - "component.badge.running.border": "27d3c48d3c316bc4f980282759b5e82f8aaaf49d", - "component.badge.running.background": "a85fddc26baf586ac7ba79e381e5f8fefca87c65", - "component.badge.merged.text": "a83d66ef53e8a094a62f2b32a4d17e58d552b1ef", - "component.badge.merged.border": "755392bca643af0a3fe5492069881a870aa11dc3", - "component.badge.merged.background": "4f4c81b1fe43bfe0d721a22d0aeb93079776cf6d", - "component.badge.ai.text": "bb4daee92817073da0366090742d0a17babb5728", - "component.badge.ai.background": "c5764a2304bf0e8a153c9ce0da20827696a76b41", - "component.breadcrumb.item-inactive": "2f009ca6cafb50c994205c9df02ee2d2503f7d23", - "component.breadcrumb.item-current": "7b502cc2e72f66bb501fdc5f480d0133d1b3841a", - "component.breadcrumb.separator": "1cd28c3ff97ab2f529a19c632d89dd44af0aad80", - "component.btn.primary.text": "9d32f032da93c9aab8b3bc6087c26aa12f507ad7", - "component.btn.primary.background": "410d584a3469233e067d0592a366fdebbe1049bc", - "component.btn.primary.border": "1491ac71f9681307c2d6528e443504e079061988", - "component.btn.secondary.text": "12c93d1b08ae50645a3b8f59256fcec00a4f84ca", - "component.btn.secondary.background": "86434310c95f5c055783011cc0e7c7918f67a35c", - "component.btn.secondary.border": "66bda91f87154efd3cefdc7a634ecb8afa8cd285", - "component.btn.outline.unselected.text": "9cf2c495178d6fdfd8f1360376242acbd4dc5e75", - "component.btn.outline.unselected.icon": "af1510c6050f671219d2089e0e59d5febb4422d6", - "component.btn.outline.unselected.border": "2b3013d632e566301e9f5f1a5cbb6aab4e7ec53f", - "component.btn.outline.selected.text": "13b50089245dec1899db2012412efcf649e2c0b4", - "component.btn.outline.selected.icon": "2bdf2c92b22e814109f4e05ec4d41d92f934a15d", - "component.btn.outline.selected.border": "ef10f4599233f62203def151b386013ddaa63afb", - "component.btn.ghost.unselected.text": "43fa10dd413cddb9a2e2142ead9ca3b4a91b49a6", - "component.btn.ghost.unselected.icon": "5ce332f51238b374104ec53067d685c26882f38e", - "component.btn.ghost.selected.text": "74cbf3b86016e05517f8c7bc64652281c940363e", - "component.btn.ghost.selected.icon": "1d8c6206a136d9c176ffba600a1e94618c4b96f8", - "component.btn.success.text": "52a336440e013bbc849ad67a43d0e136cf4f0b51", - "component.btn.success.background": "608ca6930129b4e5ff36d7f38508ae2537b66629", - "component.btn.success.border": "1f74d9985a10fe20e0acc4647cf4949005e9d4f1", - "component.btn.success.state.hover": "d05bde38a6539a11e3ccd87345af113ccd6bd113", - "component.btn.success.state.active": "f6e48e68dba6c32de27fadcaca3d1959f081d2e5", - "component.btn.danger.text": "49c02562362b8f775cfc2c4c614ecd646dcc2716", - "component.btn.danger.background": "0b015d0a4f456781969d7ffaf135c7c2a8858440", - "component.btn.danger.border": "9f99ee56f1ae2b7eb2f98300b83d4f53b15fd763", - "component.btn.danger.state.hover": "e7756e1d022d893bfa5fdd619f181d26fb7b117b", - "component.btn.danger.state.active": "23c7c85ff6104e098a208b6f4b86c1d0eef0f543", - "component.btn.ai.text": "380368600319fa12b73538ff52acd9d0e977e367", - "component.btn.ai.background": "8c9a1d07e05837f50588b642a4b51462f883887d", - "component.card.background": "256878745d17a46b7159919d8e30a3e960f59575", - "component.card.border": "3688ffcc56c4fb44dc0e221b8e09a958fd9e509d", - "component.dialog.title": "e6e0ff2bf1f3802eb21492e8b833c5f5e679cd82", - "component.dialog.description": "301509fcf2faac8497b2136f7879b9b0b3c64433", - "component.dialog.background": "ff2918d712798a4b487b6f6e5befe7b3eef59883", - "component.dialog.border": "4a6cb3732ad8b36bb9de0d15cbed575c87996088", - "component.dialog.backdrop": "893e60ed671f891241a3084707057185398446ed", - "component.dropdown.background": "09b2dca27ba9efabfe838d713a14ca6e6ac46685", - "component.dropdown.border": "c8cdfff63f4e142d651070ff1056b69a638aaab7", - "component.dropdown.item.delete.text": "864396a8c9b5df0fd948ded7d520ded936d74a8b", - "component.dropdown.item.delete.state.hover": "308dc9064be8e754f8385b0e8ff5489563d7c984", - "component.diff.grey": "43bf4f466a6e231c9951a639313740579c29d824", - "component.diff.add-content": "eb4eccf789a2bda6f3d3875c3310ef0579fd3555", - "component.diff.add-lineNumber": "61583aa6e36aaddd0be173a4a082a450e2522d3a", - "component.diff.add-content-highlight": "ad544fc527ca8b4c297993fe0722b8a7a96ef903", - "component.diff.add-widget": "c1def698ab707194d8f1558e16b05c55d50920d9", - "component.diff.add-widget-color": "a27c504a1f1151974669cf06054c1d0f704ecc38", - "component.diff.del-content": "465e6eb3613967f489cfee4b04f0b283b9e88f91", - "component.diff.del-lineNumber": "4cbe83072b6781d6e3edff645ccb2fb7426c5628", - "component.diff.del-content-highlight": "3e635e401a1a37a259211d093bef70e3a0c507ea", - "component.diff.plain-content": "984456faee2f6a5c202cfd76078ef5b6cd3a05f1", - "component.diff.plain-lineNumber": "6a5550287e7c58afa9d2375c5bfdca4d6c214cf1", - "component.diff.plain-lineNumber-color": "7c1186d20725b53cbefe87f56c5bc6db4e77d898", - "component.diff.empty-content": "712d93a0c1bc9503abda77ae50d624bd328c0057", - "component.diff.hunk-content": "79ad0dfc599f9bc246a6618c85bc1dc59744537f", - "component.diff.hunk-lineNumber": "bccfad80b84e35edf4b47af2ca30057eba2b2ebf", - "component.diff.hunk-content-color": "68c5d6a95d475f7275062e3eb58dba464df3d059", - "component.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", - "component.input.text": "df946237ac2ea0d177f3f2818a673fdf876944c7", - "component.input.placeholder": "85d7632aba08fd476083e508cc2660b17c30981a", - "component.input.icon": "75ca1f38c16fbd5e2697a36c74b0b1dd01f3f5c0", - "component.input.background": "585327333fbbf97bb8db21fbc613025719ca8a87", - "component.input.border": "911dac823dac21c9ccf4e35e10b2eb82a9c6f0ef", - "component.label.text": "80403cd630bba01a064550d9783313227b1d010f", - "component.link.default": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", - "component.link.visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", - "component.nav-tabs.unselected.text": "c085805657bb81574da85d3cb29f89ca08980daa", - "component.nav-tabs.selected.text": "16aa825c8038347237cbe91f7eeece4d2a8d1a2b", - "component.nav-tabs.selected.border": "3427b967112facd59f09fa310c863d7193ea4ffe", - "component.nav-tabs.border": "791d71ca187934e4b98ddff04bc9447a10358699", - "component.nav-tabs.background": "b92549e37390005f2bd1cfce06f9dfb8f67e39e0", - "component.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", - "component.pipeline.card.background": "f207dcff97f000326c4f28293fdbd2830860ce54", - "component.pipeline.card.border": "aa9d9528b1e8e25f9e6dae387b76d9beb2de35a8", - "component.pipeline.card.running.border": "179c0e4d47becc896eb1fbb7f9e8461779b3f680", - "component.pipeline.card.error.border": "1c0b41b41e25250cfb65bdb539bd573be66b0d00", - "component.pipeline.card.completed.border": "14251a54f431aae617af6b9577454a0e212ad76f", - "component.pipeline.card-canvas.1.background": "01bd392d5ddafe85e5575296d08254e52054ba8d", - "component.pipeline.card-canvas.1.border": "b9510abf89f82fb7b779bb730caa1bf393c83bd4", - "component.pipeline.card-canvas.2.background": "87b6b3e65b995fc4180dfb7bf613efb0098d1fff", - "component.pipeline.card-canvas.2.border": "1f9fa1e95134d87995a21738a3877f1c15158e5e", - "component.pipeline.background.dotes": "2784742abff27552789cdd4f2b51cab1331abb4a", - "component.sidebar.background": "8b6619fafae38e8ad94fffd488f2cf53d3c31d76", - "component.sidebar.border": "2263230eae16609a3d95ba5863aa3cc343010131", - "component.sidebar.separator": "a0c913dd38e81e3b2c20ee17642433da6da5f147", - "component.sidebar.hover": "4925b4511178bd2853a6b7b329683d036508aec1", - "component.sidebar.selected": "31f335ecde0aedb12407221718069f5b13574d41", - "component.sidebar.item.unselected.text": "9609e0ad8d79127a3784876f0204d02964f09e43", - "component.sidebar.item.unselected.icon": "5afba128858cf7494fb8a326a435860faf00b0ee", - "component.sidebar.item.selected.text": "5f1daf88cebaea07bd4c2a57c862638340827496", - "component.sidebar.item.selected.icon": "18325fda8139122c4a7cdf6debe2cd1f25d120b7", - "component.sidebar.logo.text": "a3ffa09fdf368badab24aecdbd26709ed7b3c2b2", - "component.sidebar.logo.icon": "c572d382a2018718d719f6a427d31fc9a42f57bd", - "component.sidebar.search.background": "33822e390046e5ec8f71a07fc041514a28778e74", - "component.sidebar.search.border": "f2044f7e8cf503f8809a48a14a88c5ef6466176f", - "component.sidebar.search.placeholder": "665cc00a32edd27b62371ee820d3c3250e629e78", - "component.sidebar.search.btn.background": "70c80e61b9ec397214c809c51de4fdf8177185da", - "component.sidebar.search.btn.border": "1c434c7d16cd4ba880e2d57520c90bc37f6b3879", - "component.sidebar.search.btn.text": "589c7d0162d67165a8752ea54a2c63bb63ee3ad7", - "component.sidebar.footer.username": "68298a8f471bb04f2f0305d9433a2b59613abd8d", - "component.sidebar.footer.data": "6a681d2abb90c2b62a39e20a1d29419c5086f01a", - "component.scrollbar.thumb": "9818c03d003381a966d08d3c6da75af8468bb8ef", - "component.selection.unselected.item": "7a7cad2aa2d6b2803a52eb26c78ea177b84ce241", - "component.selection.unselected.background": "a63ba949d12afc99020e77f95d0538bddba457b3", - "component.selection.unselected.border": "6ef997ebe03bb209ca568a648eb0cc8be69746a6", - "component.selection.selected.item": "f1f43c8acf2d4da10ee2e0d164d4dbe955816018", - "component.selection.selected.background": "1d1bbb9958f047744b66861fd8bd75dc2726dc25", - "component.selection.selected.border": "44b31378ed175b87b50ebad88cfd4a73a66ab9d5", - "component.separator.background": "9f4c82c269bc5aff0fa55d52a0ed59f914057be0", - "component.slider.track.base": "34dc3b5be6733e38f6c28d24d4f3699b2d7ea6f3", - "component.slider.track.progress": "38d8cac26c1cfb91293198eee25299e4aef9c1d8", - "component.slider.track-segments.base": "cb752791a51ff48c6d481426a1affb15048a152a", - "component.slider.track-segments.progress": "a7943fda0e4646e7018046354a9be54cf7d03075", - "component.slider.handle.background": "5c423cc3b672079f1e7dc0d1c8170dade368711a", - "component.slider.handle.border": "94347a2ed2900445946d18c653fb179b8602c533", - "component.status-indicator.completed": "c4c3bce2d28c84c25db4f444f9144b94523737b7", - "component.status-indicator.cancelled": "5aa15732d9ebc41f14b111e252819e2e36617124", - "component.status-indicator.warning": "4dc6e5ea4c736869aee4ebd0ee006f2d73861423", - "component.status-indicator.running": "07ce029f27cf34bf8d6fe3b9a6a600be01c8947e", - "component.status-indicator.merged": "d9eb24404452e6cc2617094fe8f29c69a760ea55", - "component.status-indicator.action-required": "2f1b8543c44b5d93cebddd80b5a9ee2d60fdb146", - "component.status-indicator.waiting": "62f68d300850ce20cf0be8c07d82a41bf1a56ecd", - "component.switch.unselected.thumb": "94d5f0b3a97924583ff697d56db74727b133ba95", - "component.switch.unselected.background": "a8ae87c7bb7ba7f4bfa71f2fdd5f404d19c3a1be", - "component.switch.selected.thumb": "cf6964ec11d69899d5dd39e82d322ea544367e90", - "component.switch.selected.background": "bba05ff96eae08a4adc31a6406e417022d9e5dad", - "component.table.header.text": "65cfc045aa01e3d3eeae4a227cac9be150839db8", - "component.table.header.background": "137c4f2e14bb8cadaf6f900a443700fe928a1fcd", - "component.table.row.alternate-background": "2863f92db433f88f24f62dda4cc9fd50c48130be", - "component.table.row.border": "445d945c4fe4426c3b73cf6f8fe0a572e4525798", - "component.table.cell.text": "73a28f25ba54aff507877ecbfd9942a6ea9f3cea", - "component.tabs.background": "8689ee01219675fb951a2517c2397fba52487971", - "component.tabs.border": "e5bc8cfac224234021c11b381f505da5fcac84ed", - "component.tabs.item.unselected.text": "4af8a5b79c55621f1ed11a7b6fc605657934dc1e", - "component.tabs.item.unselected.background": "fa041cdeb34ba5da6f1bd4cd6d8bb4b8273e0e70", - "component.tabs.item.unselected.border": "79b1a6fe839c012efec923edf40b3bfa2bcdab19", - "component.tabs.item.selected.text": "d048f7001829ff9949b2712b8ca746c8f3f49767", - "component.tabs.item.selected.background": "33269e9854800d565f728ba2a85c5cd3e549b5e8", - "component.tabs.item.selected.border": "11b7e5aeb83fd2f5d968021c750af2ceb5ba5841", - "component.tag.blue.text": "b35e0aebd9d1ebf0fd5d24bbd5ad184db9e11b86", - "component.tag.blue.background": "072fc2901d8ad0199c07bc339d46db086c7b0379", - "component.tag.blue.background-subtle": "67307c003cb91d76e00ef0f3777318e25efac628", - "component.tag.blue.border": "680fb2a6a11251e2619789595cd28c7861aaa530", - "component.tag.brown.text": "b48491f46d15503df99e2d8d9394aa552d09461b", - "component.tag.brown.background": "90b0ee0df4ebe7f06bfd07a7acbe812a45d621a4", - "component.tag.brown.background-subtle": "134ffd2a91ef027e197db6a5331d2726bc080ad6", - "component.tag.brown.border": "675776ff7a30540c297579d72b7f00779d778c14", - "component.tag.cyan.text": "6bf9361c5931ba40663d2c412f28f15382498517", - "component.tag.cyan.background": "83107c8cff314c553ed2cea5c9af1ff3356485e5", - "component.tag.cyan.background-subtle": "7f2724127eebb6e01713828af3736cd2e3734436", - "component.tag.cyan.border": "3286065f931626298e8f3dab2328297e83a79771", - "component.tag.green.text": "699a30f1d5f76ed4e631faa3da63be65e88af039", - "component.tag.green.background": "8b06c35974700260dff1a712c0a3976d4ddb0df5", - "component.tag.green.background-subtle": "c4f47c34772d8367bc3b00645420511f37aaecad", - "component.tag.green.border": "db85545b7d00ef9e199bf863dcdcc2be520f520c", - "component.tag.indigo.text": "d641d4626278e4d17ff4d98202112da9580a6b89", - "component.tag.indigo.background": "bb4af9a068f716c2f0b4f77c228b88009ac049c9", - "component.tag.indigo.background-subtle": "877e3b4ee6040ed581a8349c8fdb5e49ed36dfe0", - "component.tag.indigo.border": "885fdb80c956855c30666c660d5839dc357d1f5f", - "component.tag.lime.text": "763399447b243f761b7cce55f7dcf2fbb1797ee3", - "component.tag.lime.background": "d51cede4c823e16ac204bcaddb65d49c325c3cbe", - "component.tag.lime.background-subtle": "556934df078200ab014c762eeaa04deecd05422e", - "component.tag.lime.border": "fbb53e37ef7cb87cfae5298e69a5ffe4f99a23a7", - "component.tag.mint.text": "d3d406bffbadb1b894e4bb6aef7b1f5a1945094c", - "component.tag.mint.background": "04568a7d0bff5fbc11600bf840916f5451a0fe62", - "component.tag.mint.background-subtle": "1d39716bceda8510beb02e19847c391523e3690a", - "component.tag.mint.border": "c703cecfc8bd82c593dc9d81ce18748edd6ecf4d", - "component.tag.orange.text": "ba407492439b283fedf30a8ab8b16774c0931a9f", - "component.tag.orange.background": "ef766412f340a4aa62c8888a6fdfb2890f3ea207", - "component.tag.orange.background-subtle": "05e823662de8b1f99a062cea3c0f24df69b29362", - "component.tag.orange.border": "2f3023f2311c12acb44cdd28beb888f64d6d2183", - "component.tag.pink.text": "83b73e0e328485233004d42baa8a0948ff2198b0", - "component.tag.pink.background": "b23a211249a71f32bf15757316d0596fdb395962", - "component.tag.pink.background-subtle": "c144f19e07b839d68f20eb5c51ebd94e0f333a82", - "component.tag.pink.border": "b4874a81a08261362f3d8237833b80e68a851b76", - "component.tag.purple.text": "9869d8aad416ac3f9e530b0d62b05dda66906de4", - "component.tag.purple.background": "bc59008310427ba5883f71079b19b8cb4c6dd862", - "component.tag.purple.background-subtle": "a3598602d6e6b1d03f638f1a941801f147f4657a", - "component.tag.purple.border": "de1d577bd170613ab46460e9c50ca8de420152f6", - "component.tag.red.text": "aca8c1832317ac859b4263769855f423840a8569", - "component.tag.red.background": "9008e05416a00096c234511275b92be7204363b6", - "component.tag.red.background-subtle": "986bdd3f8d16488337ca9f46b71b04195d7578b0", - "component.tag.red.border": "f7f9067262546ee6eb77955e38aa0a451fc7f98a", - "component.tag.violet.text": "2ab996ff3465a0b97dee4d7c5606df3d46ab2a07", - "component.tag.violet.background": "4c9b9c2658479fc0e56894975a9b9b8d76df5b00", - "component.tag.violet.background-subtle": "fded9a84a20755592f57f081ebb594bfbaf8cfb3", - "component.tag.violet.border": "77de89ef1ab5168b7ff5e329bde8608047149a04", - "component.tag.yellow.text": "cadfcb4d0fe72fd5828cd764d54198026520e10c", - "component.tag.yellow.background": "a29464cd2a618a77586cb8760478a4d82b12b3ca", - "component.tag.yellow.background-subtle": "1b262be32c5779f024da5ad5696c805a83eb96c7", - "component.tag.yellow.border": "b595821fd5ef662361820415bb878e8ef4ab8939", - "component.tag.gray.text": "e7608c51a2421de226afebbcb909180c8a0cdb5a", - "component.tag.gray.background": "9bcc758ef67bbaac88637e99a702da5d7f7a3144", - "component.tag.gray.background-subtle": "76dfa99dd57cbaf2e7cbec9511cd1e1ddd92ee0e", - "component.tag.gray.border": "02e03f32969f9e6120bb6c7a3b781a5446f1bef1", - "component.toast.default.title": "f791d24eeab59c12cf4aad84f4677099bb4a01c1", - "component.toast.default.description": "6000da4ada3b9445750fb4b7b990726df120c271", - "component.toast.default.background": "5b9e9ea5b7de018a92d3deb902257e4e2bbb49f9", - "component.toast.default.border": "f74755bc7843dc9d7c788c54178b7ce3b83dea3f", - "component.toast.danger.title": "b5ad1c43fcee32eb251b980e884e77ea137c3369", - "component.toast.danger.description": "d281b5c13f2a4a293042f52b168e39f8bec398da", - "component.toast.danger.background": "8ba5c70e994ab44aeb72b3ed7f26ca9646d59cc0", - "component.toast.danger.border": "7f5252c13b96825084248b367f36377bb003ca96", - "component.tooltip.text": "b79a7ec441cdc7c6eee9313602f081d063327c1d", - "component.tooltip.background": "a35d0240a1c4de13350e6a4770dd1703a90a9227", - "component.tooltip.border": "d57b38546841813d61da59d66e98a8921f2f3ee7", - "shadow-color.0": "c0c282f63e107374a732d74c1742cf60d52e6e5c", - "shadow-color.1": "1ec33a9c84353664d23cd23d6c033d1c330c149a", - "shadow-color.2": "6200a000044d8dbee421ed4afb0c3ff42febb6ef", - "shadow-color.3": "77d99afb159d8e193a82f615dd84de3214e00703", - "shadow-color.4": "2b2e0307d252bdc6db53a23ce2cc2e9bb4f6b914", - "shadow-color.5": "5a6c707240bab54cb4403f47262abfe0756efc9a", - "shadow-color.6": "928283d00759150575a8f155da90180a582be438", - "shadow-color.inner": "6cb5a98fba0b13e952859b9f023259b5c06cfd1a", - "gradient.ai.gradient-stop-1": "8db516caa68afc5b8fdd6fc6e5a9bad7715c5f26", - "gradient.ai.gradient-stop-2": "33930f41665251a281973a37847f357480aedca3", - "gradient.ai.gradient-stop-3": "c9e14c3db8e622b10b1cd3e860115cd6f876ae49", - "gradient.ai.gradient-stop-4": "6e7d0850d7eb1e699f87b41f6ffd4cb8d73d72e8", - "gradient.skeleton.gradient-stop-1": "5427016b990b75f0d1ce60eef8cb9b96d75fbde2", - "gradient.skeleton.gradient-stop-2": "01442c311e6da751c30c3518fc32970306767274", - "gradient.skeleton.gradient-stop-3": "7fda4c834a3daf0c56bb59777c525670ae2dee3e", - "gradient.pipeline.running.gradient-stop-1": "0c187d1ebb015ec66bac356009795316f84807ae", - "gradient.pipeline.running.gradient-stop-2": "d1251f86c91bd0f29d8ac8cfa01056bc307156b4", - "gradient.pipeline.running.gradient-stop-3": "b09bdab234cdf7c204cb153ec94ea0a9b2bb4976", - "gradient.pipeline.arrows.gradient-stop-1": "0465e74baaf10a12f23b9eaa40fc1ae08485a0d5", - "gradient.pipeline.arrows.gradient-stop-2": "4cadc4f9a5e66f28eaa27fb54b6ce538ea430c7d", - "gradient.pipeline.arrows.gradient-stop-3": "5af16d4ae6b63ff8dcf3254009e712db4ac1a3f9", - "gradient.pipeline.card.background.gradient-from": "8404a4e146121987426681accb996902179fad72", - "gradient.pipeline.card.background.gradient-to": "037bbd7fb410d05993a48594626a7babb32605a6", - "gradient.pipeline.card.border.gradient-from": "342926ec7179e7cbe133981050c1e1e41d94ed7a", - "gradient.pipeline.card.border.gradient-to": "8e39428cc5ce20f3593127f2ef71f180b38ee9a4", - "gradient.pipeline.widget.number.gradient-from": "dc372cb50eedf6023cd80cb6a4520e5fdf91358b", - "gradient.pipeline.widget.number.gradient-to": "e505c8d9dd140f5a671c1291ffd519fcff5c3e2c", - "gradient.pipeline.widget.blob.big.gradient-from": "b518524b25a5b95804988c640c4d52ba7ebd4599", - "gradient.pipeline.widget.blob.big.gradient-to": "80a493af10245e0ebbc6a51f5452d61d836a3754", - "gradient.pipeline.widget.blob.small.gradient-from": "8d7be31e69f0e54dd2e493d9051c2268078ea5ed", - "gradient.pipeline.widget.blob.small.gradient-to": "198813cf6242881ce0e0d030ca22ef31f9190d13", - "iconStrokeWidth.xxs": "751ceaa292e27736009bef894b62f83c1b2d66d8", - "iconStrokeWidth.xs": "77ca59c88a0b47972554b1db3f6469a230a6ad8c", - "iconStrokeWidth.sm": "e445b22e1f18af07002a1dc76f900dada5477383", - "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", - "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", - "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "component.dropdown.item.text": "2f1f1ea9d368ec8be380803506fbf657cabe6ac0" - }, - "group": "mode" - }, - { - "id": "1e7b21d8c870a7b76afe2e78f27747667407aeed", - "name": "light-dimmer", - "$figmaStyleReferences": { - "shadow.0": "S:a2ed3778198048e91067a04633c27ba20e9fcbec,", - "shadow.1": "S:947694488889f7271c428950bec937ee79f8a536,", - "shadow.2": "S:70378f090cb66b03ee4b18e25742743934f37757,", - "shadow.3": "S:aa7e83fd47e75f5a1ae3e17f64417d5e9fcb96ae,", - "shadow.4": "S:5dfba690094db266c4ab7686fccbbedd8c16385f,", - "shadow.5": "S:d6752151a8dd3bd4b4bf12ad15a80c522f760731,", - "shadow.6": "S:da8e7b5b0f1352215fbaab66eff62a3e19d22b67,", - "shadow.inner": "S:2805cdc40176a4707d5cfc549b4c12e7ec4e74ff,", - "ring.focus": "S:062018f6483f54f1255b952aa1759b028d502ac3," - }, - "selectedTokenSets": { - "mode/light/dimmer": "enabled" - }, - "$figmaCollectionId": "VariableCollectionId:1340:156918", - "$figmaModeId": "1389:11", - "$figmaVariableReferences": { - "background.1": "633e5f77aa1bd1bd133852d8372b9c9f1231a9e4", - "background.2": "14e8d4b56cc273b508af8a2c58cb00e99e08d1d3", - "background.3": "33554ff11e1eab35e50aa3570f51d53f16f46d6a", - "text.1": "38382b9984a98f9d26692a7f2882dfb5c5d51825", - "text.2": "115f62efd02491e85a63dfd601b03725d3711f23", - "text.3": "1c7327f01cf759b17fd0523cb540afa8700c1dc7", - "text.accent": "0b3cd5357659e6542cca163ccfd96c0cac059203", - "text.success": "ee56057b81e6d0872a84ca6b29affc8911fe333e", - "text.danger": "c7e38d7c7afc899f4d40392dbd6bc5ed6580264d", - "text.warning": "b03334e4c9db4b76269e4be886df6c1abf74d0ca", - "border.1": "5ad2231a611605964ba70f80e7aabb48f04bc704", - "border.2": "9084bef359e38136e0dddac25a464896456a9b1a", - "border.3": "5ff5d5233f7cb0233ce7634bc480026668c818f6", - "border.focus": "8db219e896acc4d828aaaf4add646d96540a84ea", - "border.success": "b13758973865eab0b4d79028a48e457eae8bec47", - "border.danger": "33d53c1486021bb3c9edce4123b484a2aabc8de0", - "border.warning": "027e57e08a1edcaaa7fbe033902bb3f65497abb4", - "state.hover": "78426caca2a07ee56132762a720ae07e2810f03b", - "state.selected": "ef914056c9c9dbaef00fa8795702a3cb933ee761", - "state.disabled.text": "967ab1b863941c100f58cc55e611ee2709051f01", - "state.disabled.background": "7a192b5ddcc570f0c8e3a5dbfd54d780e2832bbd", - "state.disabled.border": "067fd26e80ad39a28f738a3b76d21d354092d551", - "component.accordion.title": "5e49d6ddf7f2b21724b474d4a5545256143dce54", - "component.accordion.description": "bc47401a69d07fa71f0371765ed940745fc7a5b9", - "component.accordion.chevron": "5dd530f96134323125031668d4ea98a36ea0de86", - "component.accordion.border": "0b3fcc0e02a2a86625b2b4a9cfeebfad9486bc3a", - "component.alert.default.title": "d8e59ed205399e9727b0dcecdccad3d8daaaa622", - "component.alert.default.description": "f9ec7fec91747435740f000fb642f9009e8fc2db", - "component.alert.default.background": "7fbbdfcc33a3051394f89675798db2159741a5fc", - "component.alert.default.border": "549692bf2f70f6b40c7d55259f8890189aa6cc98", - "component.alert.danger.title": "c8da1cdbba8e0f86edda5fd3869f6186d53881ca", - "component.alert.danger.description": "366849405bd53c78f0b73d72585034a52f05d9a7", - "component.alert.danger.background": "5756a9bdba027993a9879b32ed129e3034028cdf", - "component.alert.danger.border": "a1a3be9eefab6edf2e996a46537872680dc45a09", - "component.avatar.text": "23018f4c7f22c4afb3b7e49f585a1fbb591209de", - "component.avatar.background": "57703fddbd26d363509fdba3aea037bd2f515ee0", - "component.avatar.border": "d651f4cb9082aa4d6e6af2c5abab700d683a5c85", - "component.badge.default.text": "ab90828e3b8c6adce5dc10bf85107b001b958e95", - "component.badge.default.background": "706b070b298e2d2a97665baf7af05187eefeb4fe", - "component.badge.default.border": "a935a2968ca4ecfb8cc58a18f31ae8fe65eb516b", - "component.badge.neutral.text": "82d39f1786c4371303ae21e4c02db79989c54e36", - "component.badge.neutral.background": "f5480b1a2b648fdb0561acda7515c38271cfb04b", - "component.badge.neutral.border": "00f05792ddf6e53bff79346df6a34144426d50e0", - "component.badge.success.text": "71014a6138e8747257a21144f8114b906cfe0f0a", - "component.badge.success.border": "190589c6021debb7bb676f05ac7f063c237fd4aa", - "component.badge.success.background": "177eb9f406784ddb958232cd643ebbb3490a53d4", - "component.badge.danger.text": "6c0c04f17c2bc0ee085d09bf0f205dcbc66c1e17", - "component.badge.danger.border": "6bb014acbbd68a796ed0c4d8c4f73e8e9e619923", - "component.badge.danger.background": "4162b10332d17800585d97ed45e45d69c2006808", - "component.badge.warning.text": "8581620d95e5b92a8c85341ebf63f21fcf7133d0", - "component.badge.warning.border": "71cb519182108ac72ffef823935546e4bff62bbc", - "component.badge.warning.background": "74c13457a85684a054426bd833859fe93eaec978", - "component.badge.running.text": "0b0c1be217e557a5b14c1cb25e988e4ac6d40583", - "component.badge.running.border": "27d3c48d3c316bc4f980282759b5e82f8aaaf49d", - "component.badge.running.background": "a85fddc26baf586ac7ba79e381e5f8fefca87c65", - "component.badge.merged.text": "a83d66ef53e8a094a62f2b32a4d17e58d552b1ef", - "component.badge.merged.border": "755392bca643af0a3fe5492069881a870aa11dc3", - "component.badge.merged.background": "4f4c81b1fe43bfe0d721a22d0aeb93079776cf6d", - "component.badge.ai.text": "bb4daee92817073da0366090742d0a17babb5728", - "component.badge.ai.background": "c5764a2304bf0e8a153c9ce0da20827696a76b41", - "component.breadcrumb.item-inactive": "2f009ca6cafb50c994205c9df02ee2d2503f7d23", - "component.breadcrumb.item-current": "7b502cc2e72f66bb501fdc5f480d0133d1b3841a", - "component.breadcrumb.separator": "1cd28c3ff97ab2f529a19c632d89dd44af0aad80", - "component.btn.primary.text": "9d32f032da93c9aab8b3bc6087c26aa12f507ad7", - "component.btn.primary.background": "410d584a3469233e067d0592a366fdebbe1049bc", - "component.btn.primary.border": "1491ac71f9681307c2d6528e443504e079061988", - "component.btn.secondary.text": "12c93d1b08ae50645a3b8f59256fcec00a4f84ca", - "component.btn.secondary.background": "86434310c95f5c055783011cc0e7c7918f67a35c", - "component.btn.secondary.border": "66bda91f87154efd3cefdc7a634ecb8afa8cd285", - "component.btn.outline.unselected.text": "9cf2c495178d6fdfd8f1360376242acbd4dc5e75", - "component.btn.outline.unselected.icon": "af1510c6050f671219d2089e0e59d5febb4422d6", - "component.btn.outline.unselected.border": "2b3013d632e566301e9f5f1a5cbb6aab4e7ec53f", - "component.btn.outline.selected.text": "13b50089245dec1899db2012412efcf649e2c0b4", - "component.btn.outline.selected.icon": "2bdf2c92b22e814109f4e05ec4d41d92f934a15d", - "component.btn.outline.selected.border": "ef10f4599233f62203def151b386013ddaa63afb", - "component.btn.ghost.unselected.text": "43fa10dd413cddb9a2e2142ead9ca3b4a91b49a6", - "component.btn.ghost.unselected.icon": "5ce332f51238b374104ec53067d685c26882f38e", - "component.btn.ghost.selected.text": "74cbf3b86016e05517f8c7bc64652281c940363e", - "component.btn.ghost.selected.icon": "1d8c6206a136d9c176ffba600a1e94618c4b96f8", - "component.btn.success.text": "52a336440e013bbc849ad67a43d0e136cf4f0b51", - "component.btn.success.background": "608ca6930129b4e5ff36d7f38508ae2537b66629", - "component.btn.success.border": "1f74d9985a10fe20e0acc4647cf4949005e9d4f1", - "component.btn.success.state.hover": "d05bde38a6539a11e3ccd87345af113ccd6bd113", - "component.btn.success.state.active": "f6e48e68dba6c32de27fadcaca3d1959f081d2e5", - "component.btn.danger.text": "49c02562362b8f775cfc2c4c614ecd646dcc2716", - "component.btn.danger.background": "0b015d0a4f456781969d7ffaf135c7c2a8858440", - "component.btn.danger.border": "9f99ee56f1ae2b7eb2f98300b83d4f53b15fd763", - "component.btn.danger.state.hover": "e7756e1d022d893bfa5fdd619f181d26fb7b117b", - "component.btn.danger.state.active": "23c7c85ff6104e098a208b6f4b86c1d0eef0f543", - "component.btn.ai.text": "380368600319fa12b73538ff52acd9d0e977e367", - "component.btn.ai.background": "8c9a1d07e05837f50588b642a4b51462f883887d", - "component.card.background": "256878745d17a46b7159919d8e30a3e960f59575", - "component.card.border": "3688ffcc56c4fb44dc0e221b8e09a958fd9e509d", - "component.dialog.title": "e6e0ff2bf1f3802eb21492e8b833c5f5e679cd82", - "component.dialog.description": "301509fcf2faac8497b2136f7879b9b0b3c64433", - "component.dialog.background": "ff2918d712798a4b487b6f6e5befe7b3eef59883", - "component.dialog.border": "4a6cb3732ad8b36bb9de0d15cbed575c87996088", - "component.dialog.backdrop": "893e60ed671f891241a3084707057185398446ed", - "component.dropdown.background": "09b2dca27ba9efabfe838d713a14ca6e6ac46685", - "component.dropdown.border": "c8cdfff63f4e142d651070ff1056b69a638aaab7", - "component.dropdown.item.delete.text": "864396a8c9b5df0fd948ded7d520ded936d74a8b", - "component.dropdown.item.delete.state.hover": "308dc9064be8e754f8385b0e8ff5489563d7c984", - "component.diff.grey": "43bf4f466a6e231c9951a639313740579c29d824", - "component.diff.add-content": "eb4eccf789a2bda6f3d3875c3310ef0579fd3555", - "component.diff.add-lineNumber": "61583aa6e36aaddd0be173a4a082a450e2522d3a", - "component.diff.add-content-highlight": "ad544fc527ca8b4c297993fe0722b8a7a96ef903", - "component.diff.add-widget": "c1def698ab707194d8f1558e16b05c55d50920d9", - "component.diff.add-widget-color": "a27c504a1f1151974669cf06054c1d0f704ecc38", - "component.diff.del-content": "465e6eb3613967f489cfee4b04f0b283b9e88f91", - "component.diff.del-lineNumber": "4cbe83072b6781d6e3edff645ccb2fb7426c5628", - "component.diff.del-content-highlight": "3e635e401a1a37a259211d093bef70e3a0c507ea", - "component.diff.plain-content": "984456faee2f6a5c202cfd76078ef5b6cd3a05f1", - "component.diff.plain-lineNumber": "6a5550287e7c58afa9d2375c5bfdca4d6c214cf1", - "component.diff.plain-lineNumber-color": "7c1186d20725b53cbefe87f56c5bc6db4e77d898", - "component.diff.empty-content": "712d93a0c1bc9503abda77ae50d624bd328c0057", - "component.diff.hunk-content": "79ad0dfc599f9bc246a6618c85bc1dc59744537f", - "component.diff.hunk-lineNumber": "bccfad80b84e35edf4b47af2ca30057eba2b2ebf", - "component.diff.hunk-content-color": "68c5d6a95d475f7275062e3eb58dba464df3d059", - "component.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", - "component.input.text": "df946237ac2ea0d177f3f2818a673fdf876944c7", - "component.input.placeholder": "85d7632aba08fd476083e508cc2660b17c30981a", - "component.input.icon": "75ca1f38c16fbd5e2697a36c74b0b1dd01f3f5c0", - "component.input.background": "585327333fbbf97bb8db21fbc613025719ca8a87", - "component.input.border": "911dac823dac21c9ccf4e35e10b2eb82a9c6f0ef", - "component.label.text": "80403cd630bba01a064550d9783313227b1d010f", - "component.link.default": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", - "component.link.visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", - "component.nav-tabs.unselected.text": "c085805657bb81574da85d3cb29f89ca08980daa", - "component.nav-tabs.selected.text": "16aa825c8038347237cbe91f7eeece4d2a8d1a2b", - "component.nav-tabs.selected.border": "3427b967112facd59f09fa310c863d7193ea4ffe", - "component.nav-tabs.border": "791d71ca187934e4b98ddff04bc9447a10358699", - "component.nav-tabs.background": "b92549e37390005f2bd1cfce06f9dfb8f67e39e0", - "component.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", - "component.pipeline.card.background": "f207dcff97f000326c4f28293fdbd2830860ce54", - "component.pipeline.card.border": "aa9d9528b1e8e25f9e6dae387b76d9beb2de35a8", - "component.pipeline.card.running.border": "179c0e4d47becc896eb1fbb7f9e8461779b3f680", - "component.pipeline.card.error.border": "1c0b41b41e25250cfb65bdb539bd573be66b0d00", - "component.pipeline.card.completed.border": "14251a54f431aae617af6b9577454a0e212ad76f", - "component.pipeline.card-canvas.1.background": "01bd392d5ddafe85e5575296d08254e52054ba8d", - "component.pipeline.card-canvas.1.border": "b9510abf89f82fb7b779bb730caa1bf393c83bd4", - "component.pipeline.card-canvas.2.background": "87b6b3e65b995fc4180dfb7bf613efb0098d1fff", - "component.pipeline.card-canvas.2.border": "1f9fa1e95134d87995a21738a3877f1c15158e5e", - "component.pipeline.background.dotes": "2784742abff27552789cdd4f2b51cab1331abb4a", - "component.sidebar.background": "8b6619fafae38e8ad94fffd488f2cf53d3c31d76", - "component.sidebar.border": "2263230eae16609a3d95ba5863aa3cc343010131", - "component.sidebar.separator": "a0c913dd38e81e3b2c20ee17642433da6da5f147", - "component.sidebar.hover": "4925b4511178bd2853a6b7b329683d036508aec1", - "component.sidebar.selected": "31f335ecde0aedb12407221718069f5b13574d41", - "component.sidebar.item.unselected.text": "9609e0ad8d79127a3784876f0204d02964f09e43", - "component.sidebar.item.unselected.icon": "5afba128858cf7494fb8a326a435860faf00b0ee", - "component.sidebar.item.selected.text": "5f1daf88cebaea07bd4c2a57c862638340827496", - "component.sidebar.item.selected.icon": "18325fda8139122c4a7cdf6debe2cd1f25d120b7", - "component.sidebar.logo.text": "a3ffa09fdf368badab24aecdbd26709ed7b3c2b2", - "component.sidebar.logo.icon": "c572d382a2018718d719f6a427d31fc9a42f57bd", - "component.sidebar.search.background": "33822e390046e5ec8f71a07fc041514a28778e74", - "component.sidebar.search.border": "f2044f7e8cf503f8809a48a14a88c5ef6466176f", - "component.sidebar.search.placeholder": "665cc00a32edd27b62371ee820d3c3250e629e78", - "component.sidebar.search.btn.background": "70c80e61b9ec397214c809c51de4fdf8177185da", - "component.sidebar.search.btn.border": "1c434c7d16cd4ba880e2d57520c90bc37f6b3879", - "component.sidebar.search.btn.text": "589c7d0162d67165a8752ea54a2c63bb63ee3ad7", - "component.sidebar.footer.username": "68298a8f471bb04f2f0305d9433a2b59613abd8d", - "component.sidebar.footer.data": "6a681d2abb90c2b62a39e20a1d29419c5086f01a", - "component.scrollbar.thumb": "9818c03d003381a966d08d3c6da75af8468bb8ef", - "component.selection.unselected.item": "7a7cad2aa2d6b2803a52eb26c78ea177b84ce241", - "component.selection.unselected.background": "a63ba949d12afc99020e77f95d0538bddba457b3", - "component.selection.unselected.border": "6ef997ebe03bb209ca568a648eb0cc8be69746a6", - "component.selection.selected.item": "f1f43c8acf2d4da10ee2e0d164d4dbe955816018", - "component.selection.selected.background": "1d1bbb9958f047744b66861fd8bd75dc2726dc25", - "component.selection.selected.border": "44b31378ed175b87b50ebad88cfd4a73a66ab9d5", - "component.separator.background": "9f4c82c269bc5aff0fa55d52a0ed59f914057be0", - "component.slider.track.base": "34dc3b5be6733e38f6c28d24d4f3699b2d7ea6f3", - "component.slider.track.progress": "38d8cac26c1cfb91293198eee25299e4aef9c1d8", - "component.slider.track-segments.base": "cb752791a51ff48c6d481426a1affb15048a152a", - "component.slider.track-segments.progress": "a7943fda0e4646e7018046354a9be54cf7d03075", - "component.slider.handle.background": "5c423cc3b672079f1e7dc0d1c8170dade368711a", - "component.slider.handle.border": "94347a2ed2900445946d18c653fb179b8602c533", - "component.status-indicator.completed": "c4c3bce2d28c84c25db4f444f9144b94523737b7", - "component.status-indicator.cancelled": "5aa15732d9ebc41f14b111e252819e2e36617124", - "component.status-indicator.warning": "4dc6e5ea4c736869aee4ebd0ee006f2d73861423", - "component.status-indicator.running": "07ce029f27cf34bf8d6fe3b9a6a600be01c8947e", - "component.status-indicator.merged": "d9eb24404452e6cc2617094fe8f29c69a760ea55", - "component.status-indicator.action-required": "2f1b8543c44b5d93cebddd80b5a9ee2d60fdb146", - "component.status-indicator.waiting": "62f68d300850ce20cf0be8c07d82a41bf1a56ecd", - "component.switch.unselected.thumb": "94d5f0b3a97924583ff697d56db74727b133ba95", - "component.switch.unselected.background": "a8ae87c7bb7ba7f4bfa71f2fdd5f404d19c3a1be", - "component.switch.selected.thumb": "cf6964ec11d69899d5dd39e82d322ea544367e90", - "component.switch.selected.background": "bba05ff96eae08a4adc31a6406e417022d9e5dad", - "component.table.header.text": "65cfc045aa01e3d3eeae4a227cac9be150839db8", - "component.table.header.background": "137c4f2e14bb8cadaf6f900a443700fe928a1fcd", - "component.table.row.alternate-background": "2863f92db433f88f24f62dda4cc9fd50c48130be", - "component.table.row.border": "445d945c4fe4426c3b73cf6f8fe0a572e4525798", - "component.table.cell.text": "73a28f25ba54aff507877ecbfd9942a6ea9f3cea", - "component.tabs.background": "8689ee01219675fb951a2517c2397fba52487971", - "component.tabs.border": "e5bc8cfac224234021c11b381f505da5fcac84ed", - "component.tabs.item.unselected.text": "4af8a5b79c55621f1ed11a7b6fc605657934dc1e", - "component.tabs.item.unselected.background": "fa041cdeb34ba5da6f1bd4cd6d8bb4b8273e0e70", - "component.tabs.item.unselected.border": "79b1a6fe839c012efec923edf40b3bfa2bcdab19", - "component.tabs.item.selected.text": "d048f7001829ff9949b2712b8ca746c8f3f49767", - "component.tabs.item.selected.background": "33269e9854800d565f728ba2a85c5cd3e549b5e8", - "component.tabs.item.selected.border": "11b7e5aeb83fd2f5d968021c750af2ceb5ba5841", - "component.tag.blue.text": "b35e0aebd9d1ebf0fd5d24bbd5ad184db9e11b86", - "component.tag.blue.background": "072fc2901d8ad0199c07bc339d46db086c7b0379", - "component.tag.blue.background-subtle": "67307c003cb91d76e00ef0f3777318e25efac628", - "component.tag.blue.border": "680fb2a6a11251e2619789595cd28c7861aaa530", - "component.tag.brown.text": "b48491f46d15503df99e2d8d9394aa552d09461b", - "component.tag.brown.background": "90b0ee0df4ebe7f06bfd07a7acbe812a45d621a4", - "component.tag.brown.background-subtle": "134ffd2a91ef027e197db6a5331d2726bc080ad6", - "component.tag.brown.border": "675776ff7a30540c297579d72b7f00779d778c14", - "component.tag.cyan.text": "6bf9361c5931ba40663d2c412f28f15382498517", - "component.tag.cyan.background": "83107c8cff314c553ed2cea5c9af1ff3356485e5", - "component.tag.cyan.background-subtle": "7f2724127eebb6e01713828af3736cd2e3734436", - "component.tag.cyan.border": "3286065f931626298e8f3dab2328297e83a79771", - "component.tag.green.text": "699a30f1d5f76ed4e631faa3da63be65e88af039", - "component.tag.green.background": "8b06c35974700260dff1a712c0a3976d4ddb0df5", - "component.tag.green.background-subtle": "c4f47c34772d8367bc3b00645420511f37aaecad", - "component.tag.green.border": "db85545b7d00ef9e199bf863dcdcc2be520f520c", - "component.tag.indigo.text": "d641d4626278e4d17ff4d98202112da9580a6b89", - "component.tag.indigo.background": "bb4af9a068f716c2f0b4f77c228b88009ac049c9", - "component.tag.indigo.background-subtle": "877e3b4ee6040ed581a8349c8fdb5e49ed36dfe0", - "component.tag.indigo.border": "885fdb80c956855c30666c660d5839dc357d1f5f", - "component.tag.lime.text": "763399447b243f761b7cce55f7dcf2fbb1797ee3", - "component.tag.lime.background": "d51cede4c823e16ac204bcaddb65d49c325c3cbe", - "component.tag.lime.background-subtle": "556934df078200ab014c762eeaa04deecd05422e", - "component.tag.lime.border": "fbb53e37ef7cb87cfae5298e69a5ffe4f99a23a7", - "component.tag.mint.text": "d3d406bffbadb1b894e4bb6aef7b1f5a1945094c", - "component.tag.mint.background": "04568a7d0bff5fbc11600bf840916f5451a0fe62", - "component.tag.mint.background-subtle": "1d39716bceda8510beb02e19847c391523e3690a", - "component.tag.mint.border": "c703cecfc8bd82c593dc9d81ce18748edd6ecf4d", - "component.tag.orange.text": "ba407492439b283fedf30a8ab8b16774c0931a9f", - "component.tag.orange.background": "ef766412f340a4aa62c8888a6fdfb2890f3ea207", - "component.tag.orange.background-subtle": "05e823662de8b1f99a062cea3c0f24df69b29362", - "component.tag.orange.border": "2f3023f2311c12acb44cdd28beb888f64d6d2183", - "component.tag.pink.text": "83b73e0e328485233004d42baa8a0948ff2198b0", - "component.tag.pink.background": "b23a211249a71f32bf15757316d0596fdb395962", - "component.tag.pink.background-subtle": "c144f19e07b839d68f20eb5c51ebd94e0f333a82", - "component.tag.pink.border": "b4874a81a08261362f3d8237833b80e68a851b76", - "component.tag.purple.text": "9869d8aad416ac3f9e530b0d62b05dda66906de4", - "component.tag.purple.background": "bc59008310427ba5883f71079b19b8cb4c6dd862", - "component.tag.purple.background-subtle": "a3598602d6e6b1d03f638f1a941801f147f4657a", - "component.tag.purple.border": "de1d577bd170613ab46460e9c50ca8de420152f6", - "component.tag.red.text": "aca8c1832317ac859b4263769855f423840a8569", - "component.tag.red.background": "9008e05416a00096c234511275b92be7204363b6", - "component.tag.red.background-subtle": "986bdd3f8d16488337ca9f46b71b04195d7578b0", - "component.tag.red.border": "f7f9067262546ee6eb77955e38aa0a451fc7f98a", - "component.tag.violet.text": "2ab996ff3465a0b97dee4d7c5606df3d46ab2a07", - "component.tag.violet.background": "4c9b9c2658479fc0e56894975a9b9b8d76df5b00", - "component.tag.violet.background-subtle": "fded9a84a20755592f57f081ebb594bfbaf8cfb3", - "component.tag.violet.border": "77de89ef1ab5168b7ff5e329bde8608047149a04", - "component.tag.yellow.text": "cadfcb4d0fe72fd5828cd764d54198026520e10c", - "component.tag.yellow.background": "a29464cd2a618a77586cb8760478a4d82b12b3ca", - "component.tag.yellow.background-subtle": "1b262be32c5779f024da5ad5696c805a83eb96c7", - "component.tag.yellow.border": "b595821fd5ef662361820415bb878e8ef4ab8939", - "component.tag.gray.text": "e7608c51a2421de226afebbcb909180c8a0cdb5a", - "component.tag.gray.background": "9bcc758ef67bbaac88637e99a702da5d7f7a3144", - "component.tag.gray.background-subtle": "76dfa99dd57cbaf2e7cbec9511cd1e1ddd92ee0e", - "component.tag.gray.border": "02e03f32969f9e6120bb6c7a3b781a5446f1bef1", - "component.toast.default.title": "f791d24eeab59c12cf4aad84f4677099bb4a01c1", - "component.toast.default.description": "6000da4ada3b9445750fb4b7b990726df120c271", - "component.toast.default.background": "5b9e9ea5b7de018a92d3deb902257e4e2bbb49f9", - "component.toast.default.border": "f74755bc7843dc9d7c788c54178b7ce3b83dea3f", - "component.toast.danger.title": "b5ad1c43fcee32eb251b980e884e77ea137c3369", - "component.toast.danger.description": "d281b5c13f2a4a293042f52b168e39f8bec398da", - "component.toast.danger.background": "8ba5c70e994ab44aeb72b3ed7f26ca9646d59cc0", - "component.toast.danger.border": "7f5252c13b96825084248b367f36377bb003ca96", - "component.tooltip.text": "b79a7ec441cdc7c6eee9313602f081d063327c1d", - "component.tooltip.background": "a35d0240a1c4de13350e6a4770dd1703a90a9227", - "shadow-color.0": "c0c282f63e107374a732d74c1742cf60d52e6e5c", - "shadow-color.1": "1ec33a9c84353664d23cd23d6c033d1c330c149a", - "shadow-color.2": "6200a000044d8dbee421ed4afb0c3ff42febb6ef", - "shadow-color.3": "77d99afb159d8e193a82f615dd84de3214e00703", - "shadow-color.4": "2b2e0307d252bdc6db53a23ce2cc2e9bb4f6b914", - "shadow-color.5": "5a6c707240bab54cb4403f47262abfe0756efc9a", - "shadow-color.6": "928283d00759150575a8f155da90180a582be438", - "shadow-color.inner": "6cb5a98fba0b13e952859b9f023259b5c06cfd1a", - "gradient.ai.gradient-stop-1": "8db516caa68afc5b8fdd6fc6e5a9bad7715c5f26", - "gradient.ai.gradient-stop-2": "33930f41665251a281973a37847f357480aedca3", - "gradient.ai.gradient-stop-3": "c9e14c3db8e622b10b1cd3e860115cd6f876ae49", - "gradient.ai.gradient-stop-4": "6e7d0850d7eb1e699f87b41f6ffd4cb8d73d72e8", - "gradient.skeleton.gradient-stop-1": "5427016b990b75f0d1ce60eef8cb9b96d75fbde2", - "gradient.skeleton.gradient-stop-2": "01442c311e6da751c30c3518fc32970306767274", - "gradient.skeleton.gradient-stop-3": "7fda4c834a3daf0c56bb59777c525670ae2dee3e", - "gradient.pipeline.running.gradient-stop-1": "0c187d1ebb015ec66bac356009795316f84807ae", - "gradient.pipeline.running.gradient-stop-2": "d1251f86c91bd0f29d8ac8cfa01056bc307156b4", - "gradient.pipeline.running.gradient-stop-3": "b09bdab234cdf7c204cb153ec94ea0a9b2bb4976", - "gradient.pipeline.arrows.gradient-stop-1": "0465e74baaf10a12f23b9eaa40fc1ae08485a0d5", - "gradient.pipeline.arrows.gradient-stop-2": "4cadc4f9a5e66f28eaa27fb54b6ce538ea430c7d", - "gradient.pipeline.arrows.gradient-stop-3": "5af16d4ae6b63ff8dcf3254009e712db4ac1a3f9", - "gradient.pipeline.card.background.gradient-from": "8404a4e146121987426681accb996902179fad72", - "gradient.pipeline.card.background.gradient-to": "037bbd7fb410d05993a48594626a7babb32605a6", - "gradient.pipeline.card.border.gradient-from": "342926ec7179e7cbe133981050c1e1e41d94ed7a", - "gradient.pipeline.card.border.gradient-to": "8e39428cc5ce20f3593127f2ef71f180b38ee9a4", - "gradient.pipeline.widget.number.gradient-from": "dc372cb50eedf6023cd80cb6a4520e5fdf91358b", - "gradient.pipeline.widget.number.gradient-to": "e505c8d9dd140f5a671c1291ffd519fcff5c3e2c", - "gradient.pipeline.widget.blob.big.gradient-from": "b518524b25a5b95804988c640c4d52ba7ebd4599", - "gradient.pipeline.widget.blob.big.gradient-to": "80a493af10245e0ebbc6a51f5452d61d836a3754", - "gradient.pipeline.widget.blob.small.gradient-from": "8d7be31e69f0e54dd2e493d9051c2268078ea5ed", - "gradient.pipeline.widget.blob.small.gradient-to": "198813cf6242881ce0e0d030ca22ef31f9190d13", - "iconStrokeWidth.xxs": "751ceaa292e27736009bef894b62f83c1b2d66d8", - "iconStrokeWidth.xs": "77ca59c88a0b47972554b1db3f6469a230a6ad8c", - "iconStrokeWidth.sm": "e445b22e1f18af07002a1dc76f900dada5477383", - "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", - "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", - "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "component.dropdown.item.text": "2f1f1ea9d368ec8be380803506fbf657cabe6ac0" - }, - "group": "mode" - }, - { - "id": "f43153843afd2dbad43db2dda6b0fa4f05209145", - "name": "light-high-contrast", - "$figmaStyleReferences": { - "shadow.0": "S:a2ed3778198048e91067a04633c27ba20e9fcbec,", - "shadow.1": "S:947694488889f7271c428950bec937ee79f8a536,", - "shadow.2": "S:70378f090cb66b03ee4b18e25742743934f37757,", - "shadow.3": "S:aa7e83fd47e75f5a1ae3e17f64417d5e9fcb96ae,", - "shadow.4": "S:5dfba690094db266c4ab7686fccbbedd8c16385f,", - "shadow.5": "S:d6752151a8dd3bd4b4bf12ad15a80c522f760731,", - "shadow.6": "S:da8e7b5b0f1352215fbaab66eff62a3e19d22b67,", - "shadow.inner": "S:2805cdc40176a4707d5cfc549b4c12e7ec4e74ff,", - "ring.focus": "S:062018f6483f54f1255b952aa1759b028d502ac3," - }, - "selectedTokenSets": { - "mode/light/high-contrast": "enabled" - }, - "$figmaCollectionId": "VariableCollectionId:1340:156918", - "$figmaModeId": "1389:12", - "$figmaVariableReferences": { - "background.1": "633e5f77aa1bd1bd133852d8372b9c9f1231a9e4", - "background.2": "14e8d4b56cc273b508af8a2c58cb00e99e08d1d3", - "background.3": "33554ff11e1eab35e50aa3570f51d53f16f46d6a", - "text.1": "38382b9984a98f9d26692a7f2882dfb5c5d51825", - "text.2": "115f62efd02491e85a63dfd601b03725d3711f23", - "text.3": "1c7327f01cf759b17fd0523cb540afa8700c1dc7", - "text.accent": "0b3cd5357659e6542cca163ccfd96c0cac059203", - "text.success": "ee56057b81e6d0872a84ca6b29affc8911fe333e", - "text.danger": "c7e38d7c7afc899f4d40392dbd6bc5ed6580264d", - "text.warning": "b03334e4c9db4b76269e4be886df6c1abf74d0ca", - "border.1": "5ad2231a611605964ba70f80e7aabb48f04bc704", - "border.2": "9084bef359e38136e0dddac25a464896456a9b1a", - "border.3": "5ff5d5233f7cb0233ce7634bc480026668c818f6", - "border.focus": "8db219e896acc4d828aaaf4add646d96540a84ea", - "border.success": "b13758973865eab0b4d79028a48e457eae8bec47", - "border.danger": "33d53c1486021bb3c9edce4123b484a2aabc8de0", - "border.warning": "027e57e08a1edcaaa7fbe033902bb3f65497abb4", - "state.hover": "78426caca2a07ee56132762a720ae07e2810f03b", - "state.selected": "ef914056c9c9dbaef00fa8795702a3cb933ee761", - "state.disabled.text": "967ab1b863941c100f58cc55e611ee2709051f01", - "state.disabled.background": "7a192b5ddcc570f0c8e3a5dbfd54d780e2832bbd", - "state.disabled.border": "067fd26e80ad39a28f738a3b76d21d354092d551", - "component.accordion.title": "5e49d6ddf7f2b21724b474d4a5545256143dce54", - "component.accordion.description": "bc47401a69d07fa71f0371765ed940745fc7a5b9", - "component.accordion.chevron": "5dd530f96134323125031668d4ea98a36ea0de86", - "component.accordion.border": "0b3fcc0e02a2a86625b2b4a9cfeebfad9486bc3a", - "component.alert.default.title": "d8e59ed205399e9727b0dcecdccad3d8daaaa622", - "component.alert.default.description": "f9ec7fec91747435740f000fb642f9009e8fc2db", - "component.alert.default.background": "7fbbdfcc33a3051394f89675798db2159741a5fc", - "component.alert.default.border": "549692bf2f70f6b40c7d55259f8890189aa6cc98", - "component.alert.danger.title": "c8da1cdbba8e0f86edda5fd3869f6186d53881ca", - "component.alert.danger.description": "366849405bd53c78f0b73d72585034a52f05d9a7", - "component.alert.danger.background": "5756a9bdba027993a9879b32ed129e3034028cdf", - "component.alert.danger.border": "a1a3be9eefab6edf2e996a46537872680dc45a09", - "component.avatar.text": "23018f4c7f22c4afb3b7e49f585a1fbb591209de", - "component.avatar.background": "57703fddbd26d363509fdba3aea037bd2f515ee0", - "component.avatar.border": "d651f4cb9082aa4d6e6af2c5abab700d683a5c85", - "component.badge.default.text": "ab90828e3b8c6adce5dc10bf85107b001b958e95", - "component.badge.default.background": "706b070b298e2d2a97665baf7af05187eefeb4fe", - "component.badge.default.border": "a935a2968ca4ecfb8cc58a18f31ae8fe65eb516b", - "component.badge.neutral.text": "82d39f1786c4371303ae21e4c02db79989c54e36", - "component.badge.neutral.background": "f5480b1a2b648fdb0561acda7515c38271cfb04b", - "component.badge.neutral.border": "00f05792ddf6e53bff79346df6a34144426d50e0", - "component.badge.success.text": "71014a6138e8747257a21144f8114b906cfe0f0a", - "component.badge.success.border": "190589c6021debb7bb676f05ac7f063c237fd4aa", - "component.badge.success.background": "177eb9f406784ddb958232cd643ebbb3490a53d4", - "component.badge.danger.text": "6c0c04f17c2bc0ee085d09bf0f205dcbc66c1e17", - "component.badge.danger.border": "6bb014acbbd68a796ed0c4d8c4f73e8e9e619923", - "component.badge.danger.background": "4162b10332d17800585d97ed45e45d69c2006808", - "component.badge.warning.text": "8581620d95e5b92a8c85341ebf63f21fcf7133d0", - "component.badge.warning.border": "71cb519182108ac72ffef823935546e4bff62bbc", - "component.badge.warning.background": "74c13457a85684a054426bd833859fe93eaec978", - "component.badge.running.text": "0b0c1be217e557a5b14c1cb25e988e4ac6d40583", - "component.badge.running.border": "27d3c48d3c316bc4f980282759b5e82f8aaaf49d", - "component.badge.running.background": "a85fddc26baf586ac7ba79e381e5f8fefca87c65", - "component.badge.merged.text": "a83d66ef53e8a094a62f2b32a4d17e58d552b1ef", - "component.badge.merged.border": "755392bca643af0a3fe5492069881a870aa11dc3", - "component.badge.merged.background": "4f4c81b1fe43bfe0d721a22d0aeb93079776cf6d", - "component.badge.ai.text": "bb4daee92817073da0366090742d0a17babb5728", - "component.badge.ai.background": "c5764a2304bf0e8a153c9ce0da20827696a76b41", - "component.breadcrumb.item-inactive": "2f009ca6cafb50c994205c9df02ee2d2503f7d23", - "component.breadcrumb.item-current": "7b502cc2e72f66bb501fdc5f480d0133d1b3841a", - "component.breadcrumb.separator": "1cd28c3ff97ab2f529a19c632d89dd44af0aad80", - "component.btn.primary.text": "9d32f032da93c9aab8b3bc6087c26aa12f507ad7", - "component.btn.primary.background": "410d584a3469233e067d0592a366fdebbe1049bc", - "component.btn.primary.border": "1491ac71f9681307c2d6528e443504e079061988", - "component.btn.secondary.text": "12c93d1b08ae50645a3b8f59256fcec00a4f84ca", - "component.btn.secondary.background": "86434310c95f5c055783011cc0e7c7918f67a35c", - "component.btn.secondary.border": "66bda91f87154efd3cefdc7a634ecb8afa8cd285", - "component.btn.outline.unselected.text": "9cf2c495178d6fdfd8f1360376242acbd4dc5e75", - "component.btn.outline.unselected.icon": "af1510c6050f671219d2089e0e59d5febb4422d6", - "component.btn.outline.unselected.border": "2b3013d632e566301e9f5f1a5cbb6aab4e7ec53f", - "component.btn.outline.selected.text": "13b50089245dec1899db2012412efcf649e2c0b4", - "component.btn.outline.selected.icon": "2bdf2c92b22e814109f4e05ec4d41d92f934a15d", - "component.btn.outline.selected.border": "ef10f4599233f62203def151b386013ddaa63afb", - "component.btn.ghost.unselected.text": "43fa10dd413cddb9a2e2142ead9ca3b4a91b49a6", - "component.btn.ghost.unselected.icon": "5ce332f51238b374104ec53067d685c26882f38e", - "component.btn.ghost.selected.text": "74cbf3b86016e05517f8c7bc64652281c940363e", - "component.btn.ghost.selected.icon": "1d8c6206a136d9c176ffba600a1e94618c4b96f8", - "component.btn.success.text": "52a336440e013bbc849ad67a43d0e136cf4f0b51", - "component.btn.success.background": "608ca6930129b4e5ff36d7f38508ae2537b66629", - "component.btn.success.border": "1f74d9985a10fe20e0acc4647cf4949005e9d4f1", - "component.btn.success.state.hover": "d05bde38a6539a11e3ccd87345af113ccd6bd113", - "component.btn.success.state.active": "f6e48e68dba6c32de27fadcaca3d1959f081d2e5", - "component.btn.danger.text": "49c02562362b8f775cfc2c4c614ecd646dcc2716", - "component.btn.danger.background": "0b015d0a4f456781969d7ffaf135c7c2a8858440", - "component.btn.danger.border": "9f99ee56f1ae2b7eb2f98300b83d4f53b15fd763", - "component.btn.danger.state.hover": "e7756e1d022d893bfa5fdd619f181d26fb7b117b", - "component.btn.danger.state.active": "23c7c85ff6104e098a208b6f4b86c1d0eef0f543", - "component.btn.ai.text": "380368600319fa12b73538ff52acd9d0e977e367", - "component.btn.ai.background": "8c9a1d07e05837f50588b642a4b51462f883887d", - "component.card.background": "256878745d17a46b7159919d8e30a3e960f59575", - "component.card.border": "3688ffcc56c4fb44dc0e221b8e09a958fd9e509d", - "component.dialog.title": "e6e0ff2bf1f3802eb21492e8b833c5f5e679cd82", - "component.dialog.description": "301509fcf2faac8497b2136f7879b9b0b3c64433", - "component.dialog.background": "ff2918d712798a4b487b6f6e5befe7b3eef59883", - "component.dialog.border": "4a6cb3732ad8b36bb9de0d15cbed575c87996088", - "component.dialog.backdrop": "893e60ed671f891241a3084707057185398446ed", - "component.dropdown.background": "09b2dca27ba9efabfe838d713a14ca6e6ac46685", - "component.dropdown.border": "c8cdfff63f4e142d651070ff1056b69a638aaab7", - "component.dropdown.item.delete.text": "864396a8c9b5df0fd948ded7d520ded936d74a8b", - "component.dropdown.item.delete.state.hover": "308dc9064be8e754f8385b0e8ff5489563d7c984", - "component.diff.grey": "43bf4f466a6e231c9951a639313740579c29d824", - "component.diff.add-content": "eb4eccf789a2bda6f3d3875c3310ef0579fd3555", - "component.diff.add-lineNumber": "61583aa6e36aaddd0be173a4a082a450e2522d3a", - "component.diff.add-content-highlight": "ad544fc527ca8b4c297993fe0722b8a7a96ef903", - "component.diff.add-widget": "c1def698ab707194d8f1558e16b05c55d50920d9", - "component.diff.add-widget-color": "a27c504a1f1151974669cf06054c1d0f704ecc38", - "component.diff.del-content": "465e6eb3613967f489cfee4b04f0b283b9e88f91", - "component.diff.del-lineNumber": "4cbe83072b6781d6e3edff645ccb2fb7426c5628", - "component.diff.del-content-highlight": "3e635e401a1a37a259211d093bef70e3a0c507ea", - "component.diff.plain-content": "984456faee2f6a5c202cfd76078ef5b6cd3a05f1", - "component.diff.plain-lineNumber": "6a5550287e7c58afa9d2375c5bfdca4d6c214cf1", - "component.diff.plain-lineNumber-color": "7c1186d20725b53cbefe87f56c5bc6db4e77d898", - "component.diff.empty-content": "712d93a0c1bc9503abda77ae50d624bd328c0057", - "component.diff.hunk-content": "79ad0dfc599f9bc246a6618c85bc1dc59744537f", - "component.diff.hunk-lineNumber": "bccfad80b84e35edf4b47af2ca30057eba2b2ebf", - "component.diff.hunk-content-color": "68c5d6a95d475f7275062e3eb58dba464df3d059", - "component.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", - "component.input.text": "df946237ac2ea0d177f3f2818a673fdf876944c7", - "component.input.placeholder": "85d7632aba08fd476083e508cc2660b17c30981a", - "component.input.icon": "75ca1f38c16fbd5e2697a36c74b0b1dd01f3f5c0", - "component.input.background": "585327333fbbf97bb8db21fbc613025719ca8a87", - "component.input.border": "911dac823dac21c9ccf4e35e10b2eb82a9c6f0ef", - "component.label.text": "80403cd630bba01a064550d9783313227b1d010f", - "component.link.default": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", - "component.link.visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", - "component.nav-tabs.unselected.text": "c085805657bb81574da85d3cb29f89ca08980daa", - "component.nav-tabs.selected.text": "16aa825c8038347237cbe91f7eeece4d2a8d1a2b", - "component.nav-tabs.selected.border": "3427b967112facd59f09fa310c863d7193ea4ffe", - "component.nav-tabs.border": "791d71ca187934e4b98ddff04bc9447a10358699", - "component.nav-tabs.background": "b92549e37390005f2bd1cfce06f9dfb8f67e39e0", - "component.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", - "component.pipeline.card.background": "f207dcff97f000326c4f28293fdbd2830860ce54", - "component.pipeline.card.border": "aa9d9528b1e8e25f9e6dae387b76d9beb2de35a8", - "component.pipeline.card.running.border": "179c0e4d47becc896eb1fbb7f9e8461779b3f680", - "component.pipeline.card.error.border": "1c0b41b41e25250cfb65bdb539bd573be66b0d00", - "component.pipeline.card.completed.border": "14251a54f431aae617af6b9577454a0e212ad76f", - "component.pipeline.card-canvas.1.background": "01bd392d5ddafe85e5575296d08254e52054ba8d", - "component.pipeline.card-canvas.1.border": "b9510abf89f82fb7b779bb730caa1bf393c83bd4", - "component.pipeline.card-canvas.2.background": "87b6b3e65b995fc4180dfb7bf613efb0098d1fff", - "component.pipeline.card-canvas.2.border": "1f9fa1e95134d87995a21738a3877f1c15158e5e", - "component.pipeline.background.dotes": "2784742abff27552789cdd4f2b51cab1331abb4a", - "component.sidebar.background": "8b6619fafae38e8ad94fffd488f2cf53d3c31d76", - "component.sidebar.border": "2263230eae16609a3d95ba5863aa3cc343010131", - "component.sidebar.separator": "a0c913dd38e81e3b2c20ee17642433da6da5f147", - "component.sidebar.hover": "4925b4511178bd2853a6b7b329683d036508aec1", - "component.sidebar.selected": "31f335ecde0aedb12407221718069f5b13574d41", - "component.sidebar.item.unselected.text": "9609e0ad8d79127a3784876f0204d02964f09e43", - "component.sidebar.item.unselected.icon": "5afba128858cf7494fb8a326a435860faf00b0ee", - "component.sidebar.item.selected.text": "5f1daf88cebaea07bd4c2a57c862638340827496", - "component.sidebar.item.selected.icon": "18325fda8139122c4a7cdf6debe2cd1f25d120b7", - "component.sidebar.logo.text": "a3ffa09fdf368badab24aecdbd26709ed7b3c2b2", - "component.sidebar.logo.icon": "c572d382a2018718d719f6a427d31fc9a42f57bd", - "component.sidebar.search.background": "33822e390046e5ec8f71a07fc041514a28778e74", - "component.sidebar.search.border": "f2044f7e8cf503f8809a48a14a88c5ef6466176f", - "component.sidebar.search.placeholder": "665cc00a32edd27b62371ee820d3c3250e629e78", - "component.sidebar.search.btn.background": "70c80e61b9ec397214c809c51de4fdf8177185da", - "component.sidebar.search.btn.border": "1c434c7d16cd4ba880e2d57520c90bc37f6b3879", - "component.sidebar.search.btn.text": "589c7d0162d67165a8752ea54a2c63bb63ee3ad7", - "component.sidebar.footer.username": "68298a8f471bb04f2f0305d9433a2b59613abd8d", - "component.sidebar.footer.data": "6a681d2abb90c2b62a39e20a1d29419c5086f01a", - "component.scrollbar.thumb": "9818c03d003381a966d08d3c6da75af8468bb8ef", - "component.selection.unselected.item": "7a7cad2aa2d6b2803a52eb26c78ea177b84ce241", - "component.selection.unselected.background": "a63ba949d12afc99020e77f95d0538bddba457b3", - "component.selection.unselected.border": "6ef997ebe03bb209ca568a648eb0cc8be69746a6", - "component.selection.selected.item": "f1f43c8acf2d4da10ee2e0d164d4dbe955816018", - "component.selection.selected.background": "1d1bbb9958f047744b66861fd8bd75dc2726dc25", - "component.selection.selected.border": "44b31378ed175b87b50ebad88cfd4a73a66ab9d5", - "component.separator.background": "9f4c82c269bc5aff0fa55d52a0ed59f914057be0", - "component.slider.track.base": "34dc3b5be6733e38f6c28d24d4f3699b2d7ea6f3", - "component.slider.track.progress": "38d8cac26c1cfb91293198eee25299e4aef9c1d8", - "component.slider.track-segments.base": "cb752791a51ff48c6d481426a1affb15048a152a", - "component.slider.track-segments.progress": "a7943fda0e4646e7018046354a9be54cf7d03075", - "component.slider.handle.background": "5c423cc3b672079f1e7dc0d1c8170dade368711a", - "component.slider.handle.border": "94347a2ed2900445946d18c653fb179b8602c533", - "component.status-indicator.completed": "c4c3bce2d28c84c25db4f444f9144b94523737b7", - "component.status-indicator.cancelled": "5aa15732d9ebc41f14b111e252819e2e36617124", - "component.status-indicator.warning": "4dc6e5ea4c736869aee4ebd0ee006f2d73861423", - "component.status-indicator.running": "07ce029f27cf34bf8d6fe3b9a6a600be01c8947e", - "component.status-indicator.merged": "d9eb24404452e6cc2617094fe8f29c69a760ea55", - "component.status-indicator.action-required": "2f1b8543c44b5d93cebddd80b5a9ee2d60fdb146", - "component.status-indicator.waiting": "62f68d300850ce20cf0be8c07d82a41bf1a56ecd", - "component.switch.unselected.thumb": "94d5f0b3a97924583ff697d56db74727b133ba95", - "component.switch.unselected.background": "a8ae87c7bb7ba7f4bfa71f2fdd5f404d19c3a1be", - "component.switch.selected.thumb": "cf6964ec11d69899d5dd39e82d322ea544367e90", - "component.switch.selected.background": "bba05ff96eae08a4adc31a6406e417022d9e5dad", - "component.table.header.text": "65cfc045aa01e3d3eeae4a227cac9be150839db8", - "component.table.header.background": "137c4f2e14bb8cadaf6f900a443700fe928a1fcd", - "component.table.row.alternate-background": "2863f92db433f88f24f62dda4cc9fd50c48130be", - "component.table.row.border": "445d945c4fe4426c3b73cf6f8fe0a572e4525798", - "component.table.cell.text": "73a28f25ba54aff507877ecbfd9942a6ea9f3cea", - "component.tabs.background": "8689ee01219675fb951a2517c2397fba52487971", - "component.tabs.border": "e5bc8cfac224234021c11b381f505da5fcac84ed", - "component.tabs.item.unselected.text": "4af8a5b79c55621f1ed11a7b6fc605657934dc1e", - "component.tabs.item.unselected.background": "fa041cdeb34ba5da6f1bd4cd6d8bb4b8273e0e70", - "component.tabs.item.unselected.border": "79b1a6fe839c012efec923edf40b3bfa2bcdab19", - "component.tabs.item.selected.text": "d048f7001829ff9949b2712b8ca746c8f3f49767", - "component.tabs.item.selected.background": "33269e9854800d565f728ba2a85c5cd3e549b5e8", - "component.tabs.item.selected.border": "11b7e5aeb83fd2f5d968021c750af2ceb5ba5841", - "component.tag.blue.text": "b35e0aebd9d1ebf0fd5d24bbd5ad184db9e11b86", - "component.tag.blue.background": "072fc2901d8ad0199c07bc339d46db086c7b0379", - "component.tag.blue.background-subtle": "67307c003cb91d76e00ef0f3777318e25efac628", - "component.tag.blue.border": "680fb2a6a11251e2619789595cd28c7861aaa530", - "component.tag.brown.text": "b48491f46d15503df99e2d8d9394aa552d09461b", - "component.tag.brown.background": "90b0ee0df4ebe7f06bfd07a7acbe812a45d621a4", - "component.tag.brown.background-subtle": "134ffd2a91ef027e197db6a5331d2726bc080ad6", - "component.tag.brown.border": "675776ff7a30540c297579d72b7f00779d778c14", - "component.tag.cyan.text": "6bf9361c5931ba40663d2c412f28f15382498517", - "component.tag.cyan.background": "83107c8cff314c553ed2cea5c9af1ff3356485e5", - "component.tag.cyan.background-subtle": "7f2724127eebb6e01713828af3736cd2e3734436", - "component.tag.cyan.border": "3286065f931626298e8f3dab2328297e83a79771", - "component.tag.green.text": "699a30f1d5f76ed4e631faa3da63be65e88af039", - "component.tag.green.background": "8b06c35974700260dff1a712c0a3976d4ddb0df5", - "component.tag.green.background-subtle": "c4f47c34772d8367bc3b00645420511f37aaecad", - "component.tag.green.border": "db85545b7d00ef9e199bf863dcdcc2be520f520c", - "component.tag.indigo.text": "d641d4626278e4d17ff4d98202112da9580a6b89", - "component.tag.indigo.background": "bb4af9a068f716c2f0b4f77c228b88009ac049c9", - "component.tag.indigo.background-subtle": "877e3b4ee6040ed581a8349c8fdb5e49ed36dfe0", - "component.tag.indigo.border": "885fdb80c956855c30666c660d5839dc357d1f5f", - "component.tag.lime.text": "763399447b243f761b7cce55f7dcf2fbb1797ee3", - "component.tag.lime.background": "d51cede4c823e16ac204bcaddb65d49c325c3cbe", - "component.tag.lime.background-subtle": "556934df078200ab014c762eeaa04deecd05422e", - "component.tag.lime.border": "fbb53e37ef7cb87cfae5298e69a5ffe4f99a23a7", - "component.tag.mint.text": "d3d406bffbadb1b894e4bb6aef7b1f5a1945094c", - "component.tag.mint.background": "04568a7d0bff5fbc11600bf840916f5451a0fe62", - "component.tag.mint.background-subtle": "1d39716bceda8510beb02e19847c391523e3690a", - "component.tag.mint.border": "c703cecfc8bd82c593dc9d81ce18748edd6ecf4d", - "component.tag.orange.text": "ba407492439b283fedf30a8ab8b16774c0931a9f", - "component.tag.orange.background": "ef766412f340a4aa62c8888a6fdfb2890f3ea207", - "component.tag.orange.background-subtle": "05e823662de8b1f99a062cea3c0f24df69b29362", - "component.tag.orange.border": "2f3023f2311c12acb44cdd28beb888f64d6d2183", - "component.tag.pink.text": "83b73e0e328485233004d42baa8a0948ff2198b0", - "component.tag.pink.background": "b23a211249a71f32bf15757316d0596fdb395962", - "component.tag.pink.background-subtle": "c144f19e07b839d68f20eb5c51ebd94e0f333a82", - "component.tag.pink.border": "b4874a81a08261362f3d8237833b80e68a851b76", - "component.tag.purple.text": "9869d8aad416ac3f9e530b0d62b05dda66906de4", - "component.tag.purple.background": "bc59008310427ba5883f71079b19b8cb4c6dd862", - "component.tag.purple.background-subtle": "a3598602d6e6b1d03f638f1a941801f147f4657a", - "component.tag.purple.border": "de1d577bd170613ab46460e9c50ca8de420152f6", - "component.tag.red.text": "aca8c1832317ac859b4263769855f423840a8569", - "component.tag.red.background": "9008e05416a00096c234511275b92be7204363b6", - "component.tag.red.background-subtle": "986bdd3f8d16488337ca9f46b71b04195d7578b0", - "component.tag.red.border": "f7f9067262546ee6eb77955e38aa0a451fc7f98a", - "component.tag.violet.text": "2ab996ff3465a0b97dee4d7c5606df3d46ab2a07", - "component.tag.violet.background": "4c9b9c2658479fc0e56894975a9b9b8d76df5b00", - "component.tag.violet.background-subtle": "fded9a84a20755592f57f081ebb594bfbaf8cfb3", - "component.tag.violet.border": "77de89ef1ab5168b7ff5e329bde8608047149a04", - "component.tag.yellow.text": "cadfcb4d0fe72fd5828cd764d54198026520e10c", - "component.tag.yellow.background": "a29464cd2a618a77586cb8760478a4d82b12b3ca", - "component.tag.yellow.background-subtle": "1b262be32c5779f024da5ad5696c805a83eb96c7", - "component.tag.yellow.border": "b595821fd5ef662361820415bb878e8ef4ab8939", - "component.tag.gray.text": "e7608c51a2421de226afebbcb909180c8a0cdb5a", - "component.tag.gray.background": "9bcc758ef67bbaac88637e99a702da5d7f7a3144", - "component.tag.gray.background-subtle": "76dfa99dd57cbaf2e7cbec9511cd1e1ddd92ee0e", - "component.tag.gray.border": "02e03f32969f9e6120bb6c7a3b781a5446f1bef1", - "component.toast.default.title": "f791d24eeab59c12cf4aad84f4677099bb4a01c1", - "component.toast.default.description": "6000da4ada3b9445750fb4b7b990726df120c271", - "component.toast.default.background": "5b9e9ea5b7de018a92d3deb902257e4e2bbb49f9", - "component.toast.default.border": "f74755bc7843dc9d7c788c54178b7ce3b83dea3f", - "component.toast.danger.title": "b5ad1c43fcee32eb251b980e884e77ea137c3369", - "component.toast.danger.description": "d281b5c13f2a4a293042f52b168e39f8bec398da", - "component.toast.danger.background": "8ba5c70e994ab44aeb72b3ed7f26ca9646d59cc0", - "component.toast.danger.border": "7f5252c13b96825084248b367f36377bb003ca96", - "component.tooltip.text": "b79a7ec441cdc7c6eee9313602f081d063327c1d", - "component.tooltip.background": "a35d0240a1c4de13350e6a4770dd1703a90a9227", - "shadow-color.0": "c0c282f63e107374a732d74c1742cf60d52e6e5c", - "shadow-color.1": "1ec33a9c84353664d23cd23d6c033d1c330c149a", - "shadow-color.2": "6200a000044d8dbee421ed4afb0c3ff42febb6ef", - "shadow-color.3": "77d99afb159d8e193a82f615dd84de3214e00703", - "shadow-color.4": "2b2e0307d252bdc6db53a23ce2cc2e9bb4f6b914", - "shadow-color.5": "5a6c707240bab54cb4403f47262abfe0756efc9a", - "shadow-color.6": "928283d00759150575a8f155da90180a582be438", - "shadow-color.inner": "6cb5a98fba0b13e952859b9f023259b5c06cfd1a", - "gradient.ai.gradient-stop-1": "8db516caa68afc5b8fdd6fc6e5a9bad7715c5f26", - "gradient.ai.gradient-stop-2": "33930f41665251a281973a37847f357480aedca3", - "gradient.ai.gradient-stop-3": "c9e14c3db8e622b10b1cd3e860115cd6f876ae49", - "gradient.ai.gradient-stop-4": "6e7d0850d7eb1e699f87b41f6ffd4cb8d73d72e8", - "gradient.skeleton.gradient-stop-1": "5427016b990b75f0d1ce60eef8cb9b96d75fbde2", - "gradient.skeleton.gradient-stop-2": "01442c311e6da751c30c3518fc32970306767274", - "gradient.skeleton.gradient-stop-3": "7fda4c834a3daf0c56bb59777c525670ae2dee3e", - "gradient.pipeline.running.gradient-stop-1": "0c187d1ebb015ec66bac356009795316f84807ae", - "gradient.pipeline.running.gradient-stop-2": "d1251f86c91bd0f29d8ac8cfa01056bc307156b4", - "gradient.pipeline.running.gradient-stop-3": "b09bdab234cdf7c204cb153ec94ea0a9b2bb4976", - "gradient.pipeline.arrows.gradient-stop-1": "0465e74baaf10a12f23b9eaa40fc1ae08485a0d5", - "gradient.pipeline.arrows.gradient-stop-2": "4cadc4f9a5e66f28eaa27fb54b6ce538ea430c7d", - "gradient.pipeline.arrows.gradient-stop-3": "5af16d4ae6b63ff8dcf3254009e712db4ac1a3f9", - "gradient.pipeline.card.background.gradient-from": "8404a4e146121987426681accb996902179fad72", - "gradient.pipeline.card.background.gradient-to": "037bbd7fb410d05993a48594626a7babb32605a6", - "gradient.pipeline.card.border.gradient-from": "342926ec7179e7cbe133981050c1e1e41d94ed7a", - "gradient.pipeline.card.border.gradient-to": "8e39428cc5ce20f3593127f2ef71f180b38ee9a4", - "gradient.pipeline.widget.number.gradient-from": "dc372cb50eedf6023cd80cb6a4520e5fdf91358b", - "gradient.pipeline.widget.number.gradient-to": "e505c8d9dd140f5a671c1291ffd519fcff5c3e2c", - "gradient.pipeline.widget.blob.big.gradient-from": "b518524b25a5b95804988c640c4d52ba7ebd4599", - "gradient.pipeline.widget.blob.big.gradient-to": "80a493af10245e0ebbc6a51f5452d61d836a3754", - "gradient.pipeline.widget.blob.small.gradient-from": "8d7be31e69f0e54dd2e493d9051c2268078ea5ed", - "gradient.pipeline.widget.blob.small.gradient-to": "198813cf6242881ce0e0d030ca22ef31f9190d13", - "iconStrokeWidth.xxs": "751ceaa292e27736009bef894b62f83c1b2d66d8", - "iconStrokeWidth.xs": "77ca59c88a0b47972554b1db3f6469a230a6ad8c", - "iconStrokeWidth.sm": "e445b22e1f18af07002a1dc76f900dada5477383", - "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", - "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", - "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "component.dropdown.item.text": "2f1f1ea9d368ec8be380803506fbf657cabe6ac0" - }, - "group": "mode" - }, - { - "id": "26d1309824ee633b0a4e5eff39d671e6c89c0bd7", - "name": "light-protanopia", - "$figmaStyleReferences": { - "shadow.0": "S:a2ed3778198048e91067a04633c27ba20e9fcbec,", - "shadow.1": "S:947694488889f7271c428950bec937ee79f8a536,", - "shadow.2": "S:70378f090cb66b03ee4b18e25742743934f37757,", - "shadow.3": "S:aa7e83fd47e75f5a1ae3e17f64417d5e9fcb96ae,", - "shadow.4": "S:5dfba690094db266c4ab7686fccbbedd8c16385f,", - "shadow.5": "S:d6752151a8dd3bd4b4bf12ad15a80c522f760731,", - "shadow.6": "S:da8e7b5b0f1352215fbaab66eff62a3e19d22b67,", - "shadow.inner": "S:2805cdc40176a4707d5cfc549b4c12e7ec4e74ff,", - "ring.focus": "S:062018f6483f54f1255b952aa1759b028d502ac3," - }, - "selectedTokenSets": { - "mode/light/default-protanopia": "enabled" - }, - "$figmaCollectionId": "VariableCollectionId:1340:156918", - "$figmaModeId": "1389:13", - "$figmaVariableReferences": { - "background.1": "633e5f77aa1bd1bd133852d8372b9c9f1231a9e4", - "background.2": "14e8d4b56cc273b508af8a2c58cb00e99e08d1d3", - "background.3": "33554ff11e1eab35e50aa3570f51d53f16f46d6a", - "text.1": "38382b9984a98f9d26692a7f2882dfb5c5d51825", - "text.2": "115f62efd02491e85a63dfd601b03725d3711f23", - "text.3": "1c7327f01cf759b17fd0523cb540afa8700c1dc7", - "text.accent": "0b3cd5357659e6542cca163ccfd96c0cac059203", - "text.success": "ee56057b81e6d0872a84ca6b29affc8911fe333e", - "text.danger": "c7e38d7c7afc899f4d40392dbd6bc5ed6580264d", - "text.warning": "b03334e4c9db4b76269e4be886df6c1abf74d0ca", - "border.1": "5ad2231a611605964ba70f80e7aabb48f04bc704", - "border.2": "9084bef359e38136e0dddac25a464896456a9b1a", - "border.3": "5ff5d5233f7cb0233ce7634bc480026668c818f6", - "border.focus": "8db219e896acc4d828aaaf4add646d96540a84ea", - "border.success": "b13758973865eab0b4d79028a48e457eae8bec47", - "border.danger": "33d53c1486021bb3c9edce4123b484a2aabc8de0", - "border.warning": "027e57e08a1edcaaa7fbe033902bb3f65497abb4", - "state.hover": "78426caca2a07ee56132762a720ae07e2810f03b", - "state.selected": "ef914056c9c9dbaef00fa8795702a3cb933ee761", - "state.disabled.text": "967ab1b863941c100f58cc55e611ee2709051f01", - "state.disabled.background": "7a192b5ddcc570f0c8e3a5dbfd54d780e2832bbd", - "state.disabled.border": "067fd26e80ad39a28f738a3b76d21d354092d551", - "component.accordion.title": "5e49d6ddf7f2b21724b474d4a5545256143dce54", - "component.accordion.description": "bc47401a69d07fa71f0371765ed940745fc7a5b9", - "component.accordion.chevron": "5dd530f96134323125031668d4ea98a36ea0de86", - "component.accordion.border": "0b3fcc0e02a2a86625b2b4a9cfeebfad9486bc3a", - "component.alert.default.title": "d8e59ed205399e9727b0dcecdccad3d8daaaa622", - "component.alert.default.description": "f9ec7fec91747435740f000fb642f9009e8fc2db", - "component.alert.default.background": "7fbbdfcc33a3051394f89675798db2159741a5fc", - "component.alert.default.border": "549692bf2f70f6b40c7d55259f8890189aa6cc98", - "component.alert.danger.title": "c8da1cdbba8e0f86edda5fd3869f6186d53881ca", - "component.alert.danger.description": "366849405bd53c78f0b73d72585034a52f05d9a7", - "component.alert.danger.background": "5756a9bdba027993a9879b32ed129e3034028cdf", - "component.alert.danger.border": "a1a3be9eefab6edf2e996a46537872680dc45a09", - "component.avatar.text": "23018f4c7f22c4afb3b7e49f585a1fbb591209de", - "component.avatar.background": "57703fddbd26d363509fdba3aea037bd2f515ee0", - "component.avatar.border": "d651f4cb9082aa4d6e6af2c5abab700d683a5c85", - "component.badge.default.text": "ab90828e3b8c6adce5dc10bf85107b001b958e95", - "component.badge.default.background": "706b070b298e2d2a97665baf7af05187eefeb4fe", - "component.badge.default.border": "a935a2968ca4ecfb8cc58a18f31ae8fe65eb516b", - "component.badge.neutral.text": "82d39f1786c4371303ae21e4c02db79989c54e36", - "component.badge.neutral.background": "f5480b1a2b648fdb0561acda7515c38271cfb04b", - "component.badge.neutral.border": "00f05792ddf6e53bff79346df6a34144426d50e0", - "component.badge.success.text": "71014a6138e8747257a21144f8114b906cfe0f0a", - "component.badge.success.border": "190589c6021debb7bb676f05ac7f063c237fd4aa", - "component.badge.success.background": "177eb9f406784ddb958232cd643ebbb3490a53d4", - "component.badge.danger.text": "6c0c04f17c2bc0ee085d09bf0f205dcbc66c1e17", - "component.badge.danger.border": "6bb014acbbd68a796ed0c4d8c4f73e8e9e619923", - "component.badge.danger.background": "4162b10332d17800585d97ed45e45d69c2006808", - "component.badge.warning.text": "8581620d95e5b92a8c85341ebf63f21fcf7133d0", - "component.badge.warning.border": "71cb519182108ac72ffef823935546e4bff62bbc", - "component.badge.warning.background": "74c13457a85684a054426bd833859fe93eaec978", - "component.badge.running.text": "0b0c1be217e557a5b14c1cb25e988e4ac6d40583", - "component.badge.running.border": "27d3c48d3c316bc4f980282759b5e82f8aaaf49d", - "component.badge.running.background": "a85fddc26baf586ac7ba79e381e5f8fefca87c65", - "component.badge.merged.text": "a83d66ef53e8a094a62f2b32a4d17e58d552b1ef", - "component.badge.merged.border": "755392bca643af0a3fe5492069881a870aa11dc3", - "component.badge.merged.background": "4f4c81b1fe43bfe0d721a22d0aeb93079776cf6d", - "component.badge.ai.text": "bb4daee92817073da0366090742d0a17babb5728", - "component.badge.ai.background": "c5764a2304bf0e8a153c9ce0da20827696a76b41", - "component.breadcrumb.item-inactive": "2f009ca6cafb50c994205c9df02ee2d2503f7d23", - "component.breadcrumb.item-current": "7b502cc2e72f66bb501fdc5f480d0133d1b3841a", - "component.breadcrumb.separator": "1cd28c3ff97ab2f529a19c632d89dd44af0aad80", - "component.btn.primary.text": "9d32f032da93c9aab8b3bc6087c26aa12f507ad7", - "component.btn.primary.background": "410d584a3469233e067d0592a366fdebbe1049bc", - "component.btn.primary.border": "1491ac71f9681307c2d6528e443504e079061988", - "component.btn.secondary.text": "12c93d1b08ae50645a3b8f59256fcec00a4f84ca", - "component.btn.secondary.background": "86434310c95f5c055783011cc0e7c7918f67a35c", - "component.btn.secondary.border": "66bda91f87154efd3cefdc7a634ecb8afa8cd285", - "component.btn.outline.unselected.text": "9cf2c495178d6fdfd8f1360376242acbd4dc5e75", - "component.btn.outline.unselected.icon": "af1510c6050f671219d2089e0e59d5febb4422d6", - "component.btn.outline.unselected.border": "2b3013d632e566301e9f5f1a5cbb6aab4e7ec53f", - "component.btn.outline.selected.text": "13b50089245dec1899db2012412efcf649e2c0b4", - "component.btn.outline.selected.icon": "2bdf2c92b22e814109f4e05ec4d41d92f934a15d", - "component.btn.outline.selected.border": "ef10f4599233f62203def151b386013ddaa63afb", - "component.btn.ghost.unselected.text": "43fa10dd413cddb9a2e2142ead9ca3b4a91b49a6", - "component.btn.ghost.unselected.icon": "5ce332f51238b374104ec53067d685c26882f38e", - "component.btn.ghost.selected.text": "74cbf3b86016e05517f8c7bc64652281c940363e", - "component.btn.ghost.selected.icon": "1d8c6206a136d9c176ffba600a1e94618c4b96f8", - "component.btn.success.text": "52a336440e013bbc849ad67a43d0e136cf4f0b51", - "component.btn.success.background": "608ca6930129b4e5ff36d7f38508ae2537b66629", - "component.btn.success.border": "1f74d9985a10fe20e0acc4647cf4949005e9d4f1", - "component.btn.success.state.hover": "d05bde38a6539a11e3ccd87345af113ccd6bd113", - "component.btn.success.state.active": "f6e48e68dba6c32de27fadcaca3d1959f081d2e5", - "component.btn.danger.text": "49c02562362b8f775cfc2c4c614ecd646dcc2716", - "component.btn.danger.background": "0b015d0a4f456781969d7ffaf135c7c2a8858440", - "component.btn.danger.border": "9f99ee56f1ae2b7eb2f98300b83d4f53b15fd763", - "component.btn.danger.state.hover": "e7756e1d022d893bfa5fdd619f181d26fb7b117b", - "component.btn.danger.state.active": "23c7c85ff6104e098a208b6f4b86c1d0eef0f543", - "component.btn.ai.text": "380368600319fa12b73538ff52acd9d0e977e367", - "component.btn.ai.background": "8c9a1d07e05837f50588b642a4b51462f883887d", - "component.card.background": "256878745d17a46b7159919d8e30a3e960f59575", - "component.card.border": "3688ffcc56c4fb44dc0e221b8e09a958fd9e509d", - "component.dialog.title": "e6e0ff2bf1f3802eb21492e8b833c5f5e679cd82", - "component.dialog.description": "301509fcf2faac8497b2136f7879b9b0b3c64433", - "component.dialog.background": "ff2918d712798a4b487b6f6e5befe7b3eef59883", - "component.dialog.border": "4a6cb3732ad8b36bb9de0d15cbed575c87996088", - "component.dialog.backdrop": "893e60ed671f891241a3084707057185398446ed", - "component.dropdown.background": "09b2dca27ba9efabfe838d713a14ca6e6ac46685", - "component.dropdown.border": "c8cdfff63f4e142d651070ff1056b69a638aaab7", - "component.dropdown.item.delete.text": "864396a8c9b5df0fd948ded7d520ded936d74a8b", - "component.dropdown.item.delete.state.hover": "308dc9064be8e754f8385b0e8ff5489563d7c984", - "component.diff.grey": "43bf4f466a6e231c9951a639313740579c29d824", - "component.diff.add-content": "eb4eccf789a2bda6f3d3875c3310ef0579fd3555", - "component.diff.add-lineNumber": "61583aa6e36aaddd0be173a4a082a450e2522d3a", - "component.diff.add-content-highlight": "ad544fc527ca8b4c297993fe0722b8a7a96ef903", - "component.diff.add-widget": "c1def698ab707194d8f1558e16b05c55d50920d9", - "component.diff.add-widget-color": "a27c504a1f1151974669cf06054c1d0f704ecc38", - "component.diff.del-content": "465e6eb3613967f489cfee4b04f0b283b9e88f91", - "component.diff.del-lineNumber": "4cbe83072b6781d6e3edff645ccb2fb7426c5628", - "component.diff.del-content-highlight": "3e635e401a1a37a259211d093bef70e3a0c507ea", - "component.diff.plain-content": "984456faee2f6a5c202cfd76078ef5b6cd3a05f1", - "component.diff.plain-lineNumber": "6a5550287e7c58afa9d2375c5bfdca4d6c214cf1", - "component.diff.plain-lineNumber-color": "7c1186d20725b53cbefe87f56c5bc6db4e77d898", - "component.diff.empty-content": "712d93a0c1bc9503abda77ae50d624bd328c0057", - "component.diff.hunk-content": "79ad0dfc599f9bc246a6618c85bc1dc59744537f", - "component.diff.hunk-lineNumber": "bccfad80b84e35edf4b47af2ca30057eba2b2ebf", - "component.diff.hunk-content-color": "68c5d6a95d475f7275062e3eb58dba464df3d059", - "component.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", - "component.input.text": "df946237ac2ea0d177f3f2818a673fdf876944c7", - "component.input.placeholder": "85d7632aba08fd476083e508cc2660b17c30981a", - "component.input.icon": "75ca1f38c16fbd5e2697a36c74b0b1dd01f3f5c0", - "component.input.background": "585327333fbbf97bb8db21fbc613025719ca8a87", - "component.input.border": "911dac823dac21c9ccf4e35e10b2eb82a9c6f0ef", - "component.label.text": "80403cd630bba01a064550d9783313227b1d010f", - "component.link.default": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", - "component.link.visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", - "component.nav-tabs.unselected.text": "c085805657bb81574da85d3cb29f89ca08980daa", - "component.nav-tabs.selected.text": "16aa825c8038347237cbe91f7eeece4d2a8d1a2b", - "component.nav-tabs.selected.border": "3427b967112facd59f09fa310c863d7193ea4ffe", - "component.nav-tabs.border": "791d71ca187934e4b98ddff04bc9447a10358699", - "component.nav-tabs.background": "b92549e37390005f2bd1cfce06f9dfb8f67e39e0", - "component.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", - "component.pipeline.card.background": "f207dcff97f000326c4f28293fdbd2830860ce54", - "component.pipeline.card.border": "aa9d9528b1e8e25f9e6dae387b76d9beb2de35a8", - "component.pipeline.card.running.border": "179c0e4d47becc896eb1fbb7f9e8461779b3f680", - "component.pipeline.card.error.border": "1c0b41b41e25250cfb65bdb539bd573be66b0d00", - "component.pipeline.card.completed.border": "14251a54f431aae617af6b9577454a0e212ad76f", - "component.pipeline.card-canvas.1.background": "01bd392d5ddafe85e5575296d08254e52054ba8d", - "component.pipeline.card-canvas.1.border": "b9510abf89f82fb7b779bb730caa1bf393c83bd4", - "component.pipeline.card-canvas.2.background": "87b6b3e65b995fc4180dfb7bf613efb0098d1fff", - "component.pipeline.card-canvas.2.border": "1f9fa1e95134d87995a21738a3877f1c15158e5e", - "component.pipeline.background.dotes": "2784742abff27552789cdd4f2b51cab1331abb4a", - "component.sidebar.background": "8b6619fafae38e8ad94fffd488f2cf53d3c31d76", - "component.sidebar.border": "2263230eae16609a3d95ba5863aa3cc343010131", - "component.sidebar.separator": "a0c913dd38e81e3b2c20ee17642433da6da5f147", - "component.sidebar.hover": "4925b4511178bd2853a6b7b329683d036508aec1", - "component.sidebar.selected": "31f335ecde0aedb12407221718069f5b13574d41", - "component.sidebar.item.unselected.text": "9609e0ad8d79127a3784876f0204d02964f09e43", - "component.sidebar.item.unselected.icon": "5afba128858cf7494fb8a326a435860faf00b0ee", - "component.sidebar.item.selected.text": "5f1daf88cebaea07bd4c2a57c862638340827496", - "component.sidebar.item.selected.icon": "18325fda8139122c4a7cdf6debe2cd1f25d120b7", - "component.sidebar.logo.text": "a3ffa09fdf368badab24aecdbd26709ed7b3c2b2", - "component.sidebar.logo.icon": "c572d382a2018718d719f6a427d31fc9a42f57bd", - "component.sidebar.search.background": "33822e390046e5ec8f71a07fc041514a28778e74", - "component.sidebar.search.border": "f2044f7e8cf503f8809a48a14a88c5ef6466176f", - "component.sidebar.search.placeholder": "665cc00a32edd27b62371ee820d3c3250e629e78", - "component.sidebar.search.btn.background": "70c80e61b9ec397214c809c51de4fdf8177185da", - "component.sidebar.search.btn.border": "1c434c7d16cd4ba880e2d57520c90bc37f6b3879", - "component.sidebar.search.btn.text": "589c7d0162d67165a8752ea54a2c63bb63ee3ad7", - "component.sidebar.footer.username": "68298a8f471bb04f2f0305d9433a2b59613abd8d", - "component.sidebar.footer.data": "6a681d2abb90c2b62a39e20a1d29419c5086f01a", - "component.scrollbar.thumb": "9818c03d003381a966d08d3c6da75af8468bb8ef", - "component.selection.unselected.item": "7a7cad2aa2d6b2803a52eb26c78ea177b84ce241", - "component.selection.unselected.background": "a63ba949d12afc99020e77f95d0538bddba457b3", - "component.selection.unselected.border": "6ef997ebe03bb209ca568a648eb0cc8be69746a6", - "component.selection.selected.item": "f1f43c8acf2d4da10ee2e0d164d4dbe955816018", - "component.selection.selected.background": "1d1bbb9958f047744b66861fd8bd75dc2726dc25", - "component.selection.selected.border": "44b31378ed175b87b50ebad88cfd4a73a66ab9d5", - "component.separator.background": "9f4c82c269bc5aff0fa55d52a0ed59f914057be0", - "component.slider.track.base": "34dc3b5be6733e38f6c28d24d4f3699b2d7ea6f3", - "component.slider.track.progress": "38d8cac26c1cfb91293198eee25299e4aef9c1d8", - "component.slider.track-segments.base": "cb752791a51ff48c6d481426a1affb15048a152a", - "component.slider.track-segments.progress": "a7943fda0e4646e7018046354a9be54cf7d03075", - "component.slider.handle.background": "5c423cc3b672079f1e7dc0d1c8170dade368711a", - "component.slider.handle.border": "94347a2ed2900445946d18c653fb179b8602c533", - "component.status-indicator.completed": "c4c3bce2d28c84c25db4f444f9144b94523737b7", - "component.status-indicator.cancelled": "5aa15732d9ebc41f14b111e252819e2e36617124", - "component.status-indicator.warning": "4dc6e5ea4c736869aee4ebd0ee006f2d73861423", - "component.status-indicator.running": "07ce029f27cf34bf8d6fe3b9a6a600be01c8947e", - "component.status-indicator.merged": "d9eb24404452e6cc2617094fe8f29c69a760ea55", - "component.status-indicator.action-required": "2f1b8543c44b5d93cebddd80b5a9ee2d60fdb146", - "component.status-indicator.waiting": "62f68d300850ce20cf0be8c07d82a41bf1a56ecd", - "component.switch.unselected.thumb": "94d5f0b3a97924583ff697d56db74727b133ba95", - "component.switch.unselected.background": "a8ae87c7bb7ba7f4bfa71f2fdd5f404d19c3a1be", - "component.switch.selected.thumb": "cf6964ec11d69899d5dd39e82d322ea544367e90", - "component.switch.selected.background": "bba05ff96eae08a4adc31a6406e417022d9e5dad", - "component.table.header.text": "65cfc045aa01e3d3eeae4a227cac9be150839db8", - "component.table.header.background": "137c4f2e14bb8cadaf6f900a443700fe928a1fcd", - "component.table.row.alternate-background": "2863f92db433f88f24f62dda4cc9fd50c48130be", - "component.table.row.border": "445d945c4fe4426c3b73cf6f8fe0a572e4525798", - "component.table.cell.text": "73a28f25ba54aff507877ecbfd9942a6ea9f3cea", - "component.tabs.background": "8689ee01219675fb951a2517c2397fba52487971", - "component.tabs.border": "e5bc8cfac224234021c11b381f505da5fcac84ed", - "component.tabs.item.unselected.text": "4af8a5b79c55621f1ed11a7b6fc605657934dc1e", - "component.tabs.item.unselected.background": "fa041cdeb34ba5da6f1bd4cd6d8bb4b8273e0e70", - "component.tabs.item.unselected.border": "79b1a6fe839c012efec923edf40b3bfa2bcdab19", - "component.tabs.item.selected.text": "d048f7001829ff9949b2712b8ca746c8f3f49767", - "component.tabs.item.selected.background": "33269e9854800d565f728ba2a85c5cd3e549b5e8", - "component.tabs.item.selected.border": "11b7e5aeb83fd2f5d968021c750af2ceb5ba5841", - "component.tag.blue.text": "b35e0aebd9d1ebf0fd5d24bbd5ad184db9e11b86", - "component.tag.blue.background": "072fc2901d8ad0199c07bc339d46db086c7b0379", - "component.tag.blue.background-subtle": "67307c003cb91d76e00ef0f3777318e25efac628", - "component.tag.blue.border": "680fb2a6a11251e2619789595cd28c7861aaa530", - "component.tag.brown.text": "b48491f46d15503df99e2d8d9394aa552d09461b", - "component.tag.brown.background": "90b0ee0df4ebe7f06bfd07a7acbe812a45d621a4", - "component.tag.brown.background-subtle": "134ffd2a91ef027e197db6a5331d2726bc080ad6", - "component.tag.brown.border": "675776ff7a30540c297579d72b7f00779d778c14", - "component.tag.cyan.text": "6bf9361c5931ba40663d2c412f28f15382498517", - "component.tag.cyan.background": "83107c8cff314c553ed2cea5c9af1ff3356485e5", - "component.tag.cyan.background-subtle": "7f2724127eebb6e01713828af3736cd2e3734436", - "component.tag.cyan.border": "3286065f931626298e8f3dab2328297e83a79771", - "component.tag.green.text": "699a30f1d5f76ed4e631faa3da63be65e88af039", - "component.tag.green.background": "8b06c35974700260dff1a712c0a3976d4ddb0df5", - "component.tag.green.background-subtle": "c4f47c34772d8367bc3b00645420511f37aaecad", - "component.tag.green.border": "db85545b7d00ef9e199bf863dcdcc2be520f520c", - "component.tag.indigo.text": "d641d4626278e4d17ff4d98202112da9580a6b89", - "component.tag.indigo.background": "bb4af9a068f716c2f0b4f77c228b88009ac049c9", - "component.tag.indigo.background-subtle": "877e3b4ee6040ed581a8349c8fdb5e49ed36dfe0", - "component.tag.indigo.border": "885fdb80c956855c30666c660d5839dc357d1f5f", - "component.tag.lime.text": "763399447b243f761b7cce55f7dcf2fbb1797ee3", - "component.tag.lime.background": "d51cede4c823e16ac204bcaddb65d49c325c3cbe", - "component.tag.lime.background-subtle": "556934df078200ab014c762eeaa04deecd05422e", - "component.tag.lime.border": "fbb53e37ef7cb87cfae5298e69a5ffe4f99a23a7", - "component.tag.mint.text": "d3d406bffbadb1b894e4bb6aef7b1f5a1945094c", - "component.tag.mint.background": "04568a7d0bff5fbc11600bf840916f5451a0fe62", - "component.tag.mint.background-subtle": "1d39716bceda8510beb02e19847c391523e3690a", - "component.tag.mint.border": "c703cecfc8bd82c593dc9d81ce18748edd6ecf4d", - "component.tag.orange.text": "ba407492439b283fedf30a8ab8b16774c0931a9f", - "component.tag.orange.background": "ef766412f340a4aa62c8888a6fdfb2890f3ea207", - "component.tag.orange.background-subtle": "05e823662de8b1f99a062cea3c0f24df69b29362", - "component.tag.orange.border": "2f3023f2311c12acb44cdd28beb888f64d6d2183", - "component.tag.pink.text": "83b73e0e328485233004d42baa8a0948ff2198b0", - "component.tag.pink.background": "b23a211249a71f32bf15757316d0596fdb395962", - "component.tag.pink.background-subtle": "c144f19e07b839d68f20eb5c51ebd94e0f333a82", - "component.tag.pink.border": "b4874a81a08261362f3d8237833b80e68a851b76", - "component.tag.purple.text": "9869d8aad416ac3f9e530b0d62b05dda66906de4", - "component.tag.purple.background": "bc59008310427ba5883f71079b19b8cb4c6dd862", - "component.tag.purple.background-subtle": "a3598602d6e6b1d03f638f1a941801f147f4657a", - "component.tag.purple.border": "de1d577bd170613ab46460e9c50ca8de420152f6", - "component.tag.red.text": "aca8c1832317ac859b4263769855f423840a8569", - "component.tag.red.background": "9008e05416a00096c234511275b92be7204363b6", - "component.tag.red.background-subtle": "986bdd3f8d16488337ca9f46b71b04195d7578b0", - "component.tag.red.border": "f7f9067262546ee6eb77955e38aa0a451fc7f98a", - "component.tag.violet.text": "2ab996ff3465a0b97dee4d7c5606df3d46ab2a07", - "component.tag.violet.background": "4c9b9c2658479fc0e56894975a9b9b8d76df5b00", - "component.tag.violet.background-subtle": "fded9a84a20755592f57f081ebb594bfbaf8cfb3", - "component.tag.violet.border": "77de89ef1ab5168b7ff5e329bde8608047149a04", - "component.tag.yellow.text": "cadfcb4d0fe72fd5828cd764d54198026520e10c", - "component.tag.yellow.background": "a29464cd2a618a77586cb8760478a4d82b12b3ca", - "component.tag.yellow.background-subtle": "1b262be32c5779f024da5ad5696c805a83eb96c7", - "component.tag.yellow.border": "b595821fd5ef662361820415bb878e8ef4ab8939", - "component.tag.gray.text": "e7608c51a2421de226afebbcb909180c8a0cdb5a", - "component.tag.gray.background": "9bcc758ef67bbaac88637e99a702da5d7f7a3144", - "component.tag.gray.background-subtle": "76dfa99dd57cbaf2e7cbec9511cd1e1ddd92ee0e", - "component.tag.gray.border": "02e03f32969f9e6120bb6c7a3b781a5446f1bef1", - "component.toast.default.title": "f791d24eeab59c12cf4aad84f4677099bb4a01c1", - "component.toast.default.description": "6000da4ada3b9445750fb4b7b990726df120c271", - "component.toast.default.background": "5b9e9ea5b7de018a92d3deb902257e4e2bbb49f9", - "component.toast.default.border": "f74755bc7843dc9d7c788c54178b7ce3b83dea3f", - "component.toast.danger.title": "b5ad1c43fcee32eb251b980e884e77ea137c3369", - "component.toast.danger.description": "d281b5c13f2a4a293042f52b168e39f8bec398da", - "component.toast.danger.background": "8ba5c70e994ab44aeb72b3ed7f26ca9646d59cc0", - "component.toast.danger.border": "7f5252c13b96825084248b367f36377bb003ca96", - "component.tooltip.text": "b79a7ec441cdc7c6eee9313602f081d063327c1d", - "component.tooltip.background": "a35d0240a1c4de13350e6a4770dd1703a90a9227", - "shadow-color.0": "c0c282f63e107374a732d74c1742cf60d52e6e5c", - "shadow-color.1": "1ec33a9c84353664d23cd23d6c033d1c330c149a", - "shadow-color.2": "6200a000044d8dbee421ed4afb0c3ff42febb6ef", - "shadow-color.3": "77d99afb159d8e193a82f615dd84de3214e00703", - "shadow-color.4": "2b2e0307d252bdc6db53a23ce2cc2e9bb4f6b914", - "shadow-color.5": "5a6c707240bab54cb4403f47262abfe0756efc9a", - "shadow-color.6": "928283d00759150575a8f155da90180a582be438", - "shadow-color.inner": "6cb5a98fba0b13e952859b9f023259b5c06cfd1a", - "gradient.ai.gradient-stop-1": "8db516caa68afc5b8fdd6fc6e5a9bad7715c5f26", - "gradient.ai.gradient-stop-2": "33930f41665251a281973a37847f357480aedca3", - "gradient.ai.gradient-stop-3": "c9e14c3db8e622b10b1cd3e860115cd6f876ae49", - "gradient.ai.gradient-stop-4": "6e7d0850d7eb1e699f87b41f6ffd4cb8d73d72e8", - "gradient.skeleton.gradient-stop-1": "5427016b990b75f0d1ce60eef8cb9b96d75fbde2", - "gradient.skeleton.gradient-stop-2": "01442c311e6da751c30c3518fc32970306767274", - "gradient.skeleton.gradient-stop-3": "7fda4c834a3daf0c56bb59777c525670ae2dee3e", - "gradient.pipeline.running.gradient-stop-1": "0c187d1ebb015ec66bac356009795316f84807ae", - "gradient.pipeline.running.gradient-stop-2": "d1251f86c91bd0f29d8ac8cfa01056bc307156b4", - "gradient.pipeline.running.gradient-stop-3": "b09bdab234cdf7c204cb153ec94ea0a9b2bb4976", - "gradient.pipeline.arrows.gradient-stop-1": "0465e74baaf10a12f23b9eaa40fc1ae08485a0d5", - "gradient.pipeline.arrows.gradient-stop-2": "4cadc4f9a5e66f28eaa27fb54b6ce538ea430c7d", - "gradient.pipeline.arrows.gradient-stop-3": "5af16d4ae6b63ff8dcf3254009e712db4ac1a3f9", - "gradient.pipeline.card.background.gradient-from": "8404a4e146121987426681accb996902179fad72", - "gradient.pipeline.card.background.gradient-to": "037bbd7fb410d05993a48594626a7babb32605a6", - "gradient.pipeline.card.border.gradient-from": "342926ec7179e7cbe133981050c1e1e41d94ed7a", - "gradient.pipeline.card.border.gradient-to": "8e39428cc5ce20f3593127f2ef71f180b38ee9a4", - "gradient.pipeline.widget.number.gradient-from": "dc372cb50eedf6023cd80cb6a4520e5fdf91358b", - "gradient.pipeline.widget.number.gradient-to": "e505c8d9dd140f5a671c1291ffd519fcff5c3e2c", - "gradient.pipeline.widget.blob.big.gradient-from": "b518524b25a5b95804988c640c4d52ba7ebd4599", - "gradient.pipeline.widget.blob.big.gradient-to": "80a493af10245e0ebbc6a51f5452d61d836a3754", - "gradient.pipeline.widget.blob.small.gradient-from": "8d7be31e69f0e54dd2e493d9051c2268078ea5ed", - "gradient.pipeline.widget.blob.small.gradient-to": "198813cf6242881ce0e0d030ca22ef31f9190d13", - "iconStrokeWidth.xxs": "751ceaa292e27736009bef894b62f83c1b2d66d8", - "iconStrokeWidth.xs": "77ca59c88a0b47972554b1db3f6469a230a6ad8c", - "iconStrokeWidth.sm": "e445b22e1f18af07002a1dc76f900dada5477383", - "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", - "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", - "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "component.dropdown.item.text": "2f1f1ea9d368ec8be380803506fbf657cabe6ac0" - }, - "group": "mode" - }, - { - "id": "0b586f318efca1a6f4faef2382f14fc6acc5f496", - "name": "light-dimmer-protanopia", - "$figmaStyleReferences": { - "shadow.0": "S:a2ed3778198048e91067a04633c27ba20e9fcbec,", - "shadow.1": "S:947694488889f7271c428950bec937ee79f8a536,", - "shadow.2": "S:70378f090cb66b03ee4b18e25742743934f37757,", - "shadow.3": "S:aa7e83fd47e75f5a1ae3e17f64417d5e9fcb96ae,", - "shadow.4": "S:5dfba690094db266c4ab7686fccbbedd8c16385f,", - "shadow.5": "S:d6752151a8dd3bd4b4bf12ad15a80c522f760731,", - "shadow.6": "S:da8e7b5b0f1352215fbaab66eff62a3e19d22b67,", - "shadow.inner": "S:2805cdc40176a4707d5cfc549b4c12e7ec4e74ff,", - "ring.focus": "S:062018f6483f54f1255b952aa1759b028d502ac3," - }, - "selectedTokenSets": { - "mode/light/dimmer-protanopia": "enabled" - }, - "$figmaCollectionId": "VariableCollectionId:1340:156918", - "$figmaModeId": "1389:14", - "$figmaVariableReferences": { - "background.1": "633e5f77aa1bd1bd133852d8372b9c9f1231a9e4", - "background.2": "14e8d4b56cc273b508af8a2c58cb00e99e08d1d3", - "background.3": "33554ff11e1eab35e50aa3570f51d53f16f46d6a", - "text.1": "38382b9984a98f9d26692a7f2882dfb5c5d51825", - "text.2": "115f62efd02491e85a63dfd601b03725d3711f23", - "text.3": "1c7327f01cf759b17fd0523cb540afa8700c1dc7", - "text.accent": "0b3cd5357659e6542cca163ccfd96c0cac059203", - "text.success": "ee56057b81e6d0872a84ca6b29affc8911fe333e", - "text.danger": "c7e38d7c7afc899f4d40392dbd6bc5ed6580264d", - "text.warning": "b03334e4c9db4b76269e4be886df6c1abf74d0ca", - "border.1": "5ad2231a611605964ba70f80e7aabb48f04bc704", - "border.2": "9084bef359e38136e0dddac25a464896456a9b1a", - "border.3": "5ff5d5233f7cb0233ce7634bc480026668c818f6", - "border.focus": "8db219e896acc4d828aaaf4add646d96540a84ea", - "border.success": "b13758973865eab0b4d79028a48e457eae8bec47", - "border.danger": "33d53c1486021bb3c9edce4123b484a2aabc8de0", - "border.warning": "027e57e08a1edcaaa7fbe033902bb3f65497abb4", - "state.hover": "78426caca2a07ee56132762a720ae07e2810f03b", - "state.selected": "ef914056c9c9dbaef00fa8795702a3cb933ee761", - "state.disabled.text": "967ab1b863941c100f58cc55e611ee2709051f01", - "state.disabled.background": "7a192b5ddcc570f0c8e3a5dbfd54d780e2832bbd", - "state.disabled.border": "067fd26e80ad39a28f738a3b76d21d354092d551", - "component.accordion.title": "5e49d6ddf7f2b21724b474d4a5545256143dce54", - "component.accordion.description": "bc47401a69d07fa71f0371765ed940745fc7a5b9", - "component.accordion.chevron": "5dd530f96134323125031668d4ea98a36ea0de86", - "component.accordion.border": "0b3fcc0e02a2a86625b2b4a9cfeebfad9486bc3a", - "component.alert.default.title": "d8e59ed205399e9727b0dcecdccad3d8daaaa622", - "component.alert.default.description": "f9ec7fec91747435740f000fb642f9009e8fc2db", - "component.alert.default.background": "7fbbdfcc33a3051394f89675798db2159741a5fc", - "component.alert.default.border": "549692bf2f70f6b40c7d55259f8890189aa6cc98", - "component.alert.danger.title": "c8da1cdbba8e0f86edda5fd3869f6186d53881ca", - "component.alert.danger.description": "366849405bd53c78f0b73d72585034a52f05d9a7", - "component.alert.danger.background": "5756a9bdba027993a9879b32ed129e3034028cdf", - "component.alert.danger.border": "a1a3be9eefab6edf2e996a46537872680dc45a09", - "component.avatar.text": "23018f4c7f22c4afb3b7e49f585a1fbb591209de", - "component.avatar.background": "57703fddbd26d363509fdba3aea037bd2f515ee0", - "component.avatar.border": "d651f4cb9082aa4d6e6af2c5abab700d683a5c85", - "component.badge.default.text": "ab90828e3b8c6adce5dc10bf85107b001b958e95", - "component.badge.default.background": "706b070b298e2d2a97665baf7af05187eefeb4fe", - "component.badge.default.border": "a935a2968ca4ecfb8cc58a18f31ae8fe65eb516b", - "component.badge.neutral.text": "82d39f1786c4371303ae21e4c02db79989c54e36", - "component.badge.neutral.background": "f5480b1a2b648fdb0561acda7515c38271cfb04b", - "component.badge.neutral.border": "00f05792ddf6e53bff79346df6a34144426d50e0", - "component.badge.success.text": "71014a6138e8747257a21144f8114b906cfe0f0a", - "component.badge.success.border": "190589c6021debb7bb676f05ac7f063c237fd4aa", - "component.badge.success.background": "177eb9f406784ddb958232cd643ebbb3490a53d4", - "component.badge.danger.text": "6c0c04f17c2bc0ee085d09bf0f205dcbc66c1e17", - "component.badge.danger.border": "6bb014acbbd68a796ed0c4d8c4f73e8e9e619923", - "component.badge.danger.background": "4162b10332d17800585d97ed45e45d69c2006808", - "component.badge.warning.text": "8581620d95e5b92a8c85341ebf63f21fcf7133d0", - "component.badge.warning.border": "71cb519182108ac72ffef823935546e4bff62bbc", - "component.badge.warning.background": "74c13457a85684a054426bd833859fe93eaec978", - "component.badge.running.text": "0b0c1be217e557a5b14c1cb25e988e4ac6d40583", - "component.badge.running.border": "27d3c48d3c316bc4f980282759b5e82f8aaaf49d", - "component.badge.running.background": "a85fddc26baf586ac7ba79e381e5f8fefca87c65", - "component.badge.merged.text": "a83d66ef53e8a094a62f2b32a4d17e58d552b1ef", - "component.badge.merged.border": "755392bca643af0a3fe5492069881a870aa11dc3", - "component.badge.merged.background": "4f4c81b1fe43bfe0d721a22d0aeb93079776cf6d", - "component.badge.ai.text": "bb4daee92817073da0366090742d0a17babb5728", - "component.badge.ai.background": "c5764a2304bf0e8a153c9ce0da20827696a76b41", - "component.breadcrumb.item-inactive": "2f009ca6cafb50c994205c9df02ee2d2503f7d23", - "component.breadcrumb.item-current": "7b502cc2e72f66bb501fdc5f480d0133d1b3841a", - "component.breadcrumb.separator": "1cd28c3ff97ab2f529a19c632d89dd44af0aad80", - "component.btn.primary.text": "9d32f032da93c9aab8b3bc6087c26aa12f507ad7", - "component.btn.primary.background": "410d584a3469233e067d0592a366fdebbe1049bc", - "component.btn.primary.border": "1491ac71f9681307c2d6528e443504e079061988", - "component.btn.secondary.text": "12c93d1b08ae50645a3b8f59256fcec00a4f84ca", - "component.btn.secondary.background": "86434310c95f5c055783011cc0e7c7918f67a35c", - "component.btn.secondary.border": "66bda91f87154efd3cefdc7a634ecb8afa8cd285", - "component.btn.outline.unselected.text": "9cf2c495178d6fdfd8f1360376242acbd4dc5e75", - "component.btn.outline.unselected.icon": "af1510c6050f671219d2089e0e59d5febb4422d6", - "component.btn.outline.unselected.border": "2b3013d632e566301e9f5f1a5cbb6aab4e7ec53f", - "component.btn.outline.selected.text": "13b50089245dec1899db2012412efcf649e2c0b4", - "component.btn.outline.selected.icon": "2bdf2c92b22e814109f4e05ec4d41d92f934a15d", - "component.btn.outline.selected.border": "ef10f4599233f62203def151b386013ddaa63afb", - "component.btn.ghost.unselected.text": "43fa10dd413cddb9a2e2142ead9ca3b4a91b49a6", - "component.btn.ghost.unselected.icon": "5ce332f51238b374104ec53067d685c26882f38e", - "component.btn.ghost.selected.text": "74cbf3b86016e05517f8c7bc64652281c940363e", - "component.btn.ghost.selected.icon": "1d8c6206a136d9c176ffba600a1e94618c4b96f8", - "component.btn.success.text": "52a336440e013bbc849ad67a43d0e136cf4f0b51", - "component.btn.success.background": "608ca6930129b4e5ff36d7f38508ae2537b66629", - "component.btn.success.border": "1f74d9985a10fe20e0acc4647cf4949005e9d4f1", - "component.btn.success.state.hover": "d05bde38a6539a11e3ccd87345af113ccd6bd113", - "component.btn.success.state.active": "f6e48e68dba6c32de27fadcaca3d1959f081d2e5", - "component.btn.danger.text": "49c02562362b8f775cfc2c4c614ecd646dcc2716", - "component.btn.danger.background": "0b015d0a4f456781969d7ffaf135c7c2a8858440", - "component.btn.danger.border": "9f99ee56f1ae2b7eb2f98300b83d4f53b15fd763", - "component.btn.danger.state.hover": "e7756e1d022d893bfa5fdd619f181d26fb7b117b", - "component.btn.danger.state.active": "23c7c85ff6104e098a208b6f4b86c1d0eef0f543", - "component.btn.ai.text": "380368600319fa12b73538ff52acd9d0e977e367", - "component.btn.ai.background": "8c9a1d07e05837f50588b642a4b51462f883887d", - "component.card.background": "256878745d17a46b7159919d8e30a3e960f59575", - "component.card.border": "3688ffcc56c4fb44dc0e221b8e09a958fd9e509d", - "component.dialog.title": "e6e0ff2bf1f3802eb21492e8b833c5f5e679cd82", - "component.dialog.description": "301509fcf2faac8497b2136f7879b9b0b3c64433", - "component.dialog.background": "ff2918d712798a4b487b6f6e5befe7b3eef59883", - "component.dialog.border": "4a6cb3732ad8b36bb9de0d15cbed575c87996088", - "component.dialog.backdrop": "893e60ed671f891241a3084707057185398446ed", - "component.dropdown.background": "09b2dca27ba9efabfe838d713a14ca6e6ac46685", - "component.dropdown.border": "c8cdfff63f4e142d651070ff1056b69a638aaab7", - "component.dropdown.item.delete.text": "864396a8c9b5df0fd948ded7d520ded936d74a8b", - "component.dropdown.item.delete.state.hover": "308dc9064be8e754f8385b0e8ff5489563d7c984", - "component.diff.grey": "43bf4f466a6e231c9951a639313740579c29d824", - "component.diff.add-content": "eb4eccf789a2bda6f3d3875c3310ef0579fd3555", - "component.diff.add-lineNumber": "61583aa6e36aaddd0be173a4a082a450e2522d3a", - "component.diff.add-content-highlight": "ad544fc527ca8b4c297993fe0722b8a7a96ef903", - "component.diff.add-widget": "c1def698ab707194d8f1558e16b05c55d50920d9", - "component.diff.add-widget-color": "a27c504a1f1151974669cf06054c1d0f704ecc38", - "component.diff.del-content": "465e6eb3613967f489cfee4b04f0b283b9e88f91", - "component.diff.del-lineNumber": "4cbe83072b6781d6e3edff645ccb2fb7426c5628", - "component.diff.del-content-highlight": "3e635e401a1a37a259211d093bef70e3a0c507ea", - "component.diff.plain-content": "984456faee2f6a5c202cfd76078ef5b6cd3a05f1", - "component.diff.plain-lineNumber": "6a5550287e7c58afa9d2375c5bfdca4d6c214cf1", - "component.diff.plain-lineNumber-color": "7c1186d20725b53cbefe87f56c5bc6db4e77d898", - "component.diff.empty-content": "712d93a0c1bc9503abda77ae50d624bd328c0057", - "component.diff.hunk-content": "79ad0dfc599f9bc246a6618c85bc1dc59744537f", - "component.diff.hunk-lineNumber": "bccfad80b84e35edf4b47af2ca30057eba2b2ebf", - "component.diff.hunk-content-color": "68c5d6a95d475f7275062e3eb58dba464df3d059", - "component.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", - "component.input.text": "df946237ac2ea0d177f3f2818a673fdf876944c7", - "component.input.placeholder": "85d7632aba08fd476083e508cc2660b17c30981a", - "component.input.icon": "75ca1f38c16fbd5e2697a36c74b0b1dd01f3f5c0", - "component.input.background": "585327333fbbf97bb8db21fbc613025719ca8a87", - "component.input.border": "911dac823dac21c9ccf4e35e10b2eb82a9c6f0ef", - "component.label.text": "80403cd630bba01a064550d9783313227b1d010f", - "component.link.default": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", - "component.link.visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", - "component.nav-tabs.unselected.text": "c085805657bb81574da85d3cb29f89ca08980daa", - "component.nav-tabs.selected.text": "16aa825c8038347237cbe91f7eeece4d2a8d1a2b", - "component.nav-tabs.selected.border": "3427b967112facd59f09fa310c863d7193ea4ffe", - "component.nav-tabs.border": "791d71ca187934e4b98ddff04bc9447a10358699", - "component.nav-tabs.background": "b92549e37390005f2bd1cfce06f9dfb8f67e39e0", - "component.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", - "component.pipeline.card.background": "f207dcff97f000326c4f28293fdbd2830860ce54", - "component.pipeline.card.border": "aa9d9528b1e8e25f9e6dae387b76d9beb2de35a8", - "component.pipeline.card.running.border": "179c0e4d47becc896eb1fbb7f9e8461779b3f680", - "component.pipeline.card.error.border": "1c0b41b41e25250cfb65bdb539bd573be66b0d00", - "component.pipeline.card.completed.border": "14251a54f431aae617af6b9577454a0e212ad76f", - "component.pipeline.card-canvas.1.background": "01bd392d5ddafe85e5575296d08254e52054ba8d", - "component.pipeline.card-canvas.1.border": "b9510abf89f82fb7b779bb730caa1bf393c83bd4", - "component.pipeline.card-canvas.2.background": "87b6b3e65b995fc4180dfb7bf613efb0098d1fff", - "component.pipeline.card-canvas.2.border": "1f9fa1e95134d87995a21738a3877f1c15158e5e", - "component.pipeline.background.dotes": "2784742abff27552789cdd4f2b51cab1331abb4a", - "component.sidebar.background": "8b6619fafae38e8ad94fffd488f2cf53d3c31d76", - "component.sidebar.border": "2263230eae16609a3d95ba5863aa3cc343010131", - "component.sidebar.separator": "a0c913dd38e81e3b2c20ee17642433da6da5f147", - "component.sidebar.hover": "4925b4511178bd2853a6b7b329683d036508aec1", - "component.sidebar.selected": "31f335ecde0aedb12407221718069f5b13574d41", - "component.sidebar.item.unselected.text": "9609e0ad8d79127a3784876f0204d02964f09e43", - "component.sidebar.item.unselected.icon": "5afba128858cf7494fb8a326a435860faf00b0ee", - "component.sidebar.item.selected.text": "5f1daf88cebaea07bd4c2a57c862638340827496", - "component.sidebar.item.selected.icon": "18325fda8139122c4a7cdf6debe2cd1f25d120b7", - "component.sidebar.logo.text": "a3ffa09fdf368badab24aecdbd26709ed7b3c2b2", - "component.sidebar.logo.icon": "c572d382a2018718d719f6a427d31fc9a42f57bd", - "component.sidebar.search.background": "33822e390046e5ec8f71a07fc041514a28778e74", - "component.sidebar.search.border": "f2044f7e8cf503f8809a48a14a88c5ef6466176f", - "component.sidebar.search.placeholder": "665cc00a32edd27b62371ee820d3c3250e629e78", - "component.sidebar.search.btn.background": "70c80e61b9ec397214c809c51de4fdf8177185da", - "component.sidebar.search.btn.border": "1c434c7d16cd4ba880e2d57520c90bc37f6b3879", - "component.sidebar.search.btn.text": "589c7d0162d67165a8752ea54a2c63bb63ee3ad7", - "component.sidebar.footer.username": "68298a8f471bb04f2f0305d9433a2b59613abd8d", - "component.sidebar.footer.data": "6a681d2abb90c2b62a39e20a1d29419c5086f01a", - "component.scrollbar.thumb": "9818c03d003381a966d08d3c6da75af8468bb8ef", - "component.selection.unselected.item": "7a7cad2aa2d6b2803a52eb26c78ea177b84ce241", - "component.selection.unselected.background": "a63ba949d12afc99020e77f95d0538bddba457b3", - "component.selection.unselected.border": "6ef997ebe03bb209ca568a648eb0cc8be69746a6", - "component.selection.selected.item": "f1f43c8acf2d4da10ee2e0d164d4dbe955816018", - "component.selection.selected.background": "1d1bbb9958f047744b66861fd8bd75dc2726dc25", - "component.selection.selected.border": "44b31378ed175b87b50ebad88cfd4a73a66ab9d5", - "component.separator.background": "9f4c82c269bc5aff0fa55d52a0ed59f914057be0", - "component.slider.track.base": "34dc3b5be6733e38f6c28d24d4f3699b2d7ea6f3", - "component.slider.track.progress": "38d8cac26c1cfb91293198eee25299e4aef9c1d8", - "component.slider.track-segments.base": "cb752791a51ff48c6d481426a1affb15048a152a", - "component.slider.track-segments.progress": "a7943fda0e4646e7018046354a9be54cf7d03075", - "component.slider.handle.background": "5c423cc3b672079f1e7dc0d1c8170dade368711a", - "component.slider.handle.border": "94347a2ed2900445946d18c653fb179b8602c533", - "component.status-indicator.completed": "c4c3bce2d28c84c25db4f444f9144b94523737b7", - "component.status-indicator.cancelled": "5aa15732d9ebc41f14b111e252819e2e36617124", - "component.status-indicator.warning": "4dc6e5ea4c736869aee4ebd0ee006f2d73861423", - "component.status-indicator.running": "07ce029f27cf34bf8d6fe3b9a6a600be01c8947e", - "component.status-indicator.merged": "d9eb24404452e6cc2617094fe8f29c69a760ea55", - "component.status-indicator.action-required": "2f1b8543c44b5d93cebddd80b5a9ee2d60fdb146", - "component.status-indicator.waiting": "62f68d300850ce20cf0be8c07d82a41bf1a56ecd", - "component.switch.unselected.thumb": "94d5f0b3a97924583ff697d56db74727b133ba95", - "component.switch.unselected.background": "a8ae87c7bb7ba7f4bfa71f2fdd5f404d19c3a1be", - "component.switch.selected.thumb": "cf6964ec11d69899d5dd39e82d322ea544367e90", - "component.switch.selected.background": "bba05ff96eae08a4adc31a6406e417022d9e5dad", - "component.table.header.text": "65cfc045aa01e3d3eeae4a227cac9be150839db8", - "component.table.header.background": "137c4f2e14bb8cadaf6f900a443700fe928a1fcd", - "component.table.row.alternate-background": "2863f92db433f88f24f62dda4cc9fd50c48130be", - "component.table.row.border": "445d945c4fe4426c3b73cf6f8fe0a572e4525798", - "component.table.cell.text": "73a28f25ba54aff507877ecbfd9942a6ea9f3cea", - "component.tabs.background": "8689ee01219675fb951a2517c2397fba52487971", - "component.tabs.border": "e5bc8cfac224234021c11b381f505da5fcac84ed", - "component.tabs.item.unselected.text": "4af8a5b79c55621f1ed11a7b6fc605657934dc1e", - "component.tabs.item.unselected.background": "fa041cdeb34ba5da6f1bd4cd6d8bb4b8273e0e70", - "component.tabs.item.unselected.border": "79b1a6fe839c012efec923edf40b3bfa2bcdab19", - "component.tabs.item.selected.text": "d048f7001829ff9949b2712b8ca746c8f3f49767", - "component.tabs.item.selected.background": "33269e9854800d565f728ba2a85c5cd3e549b5e8", - "component.tabs.item.selected.border": "11b7e5aeb83fd2f5d968021c750af2ceb5ba5841", - "component.tag.blue.text": "b35e0aebd9d1ebf0fd5d24bbd5ad184db9e11b86", - "component.tag.blue.background": "072fc2901d8ad0199c07bc339d46db086c7b0379", - "component.tag.blue.background-subtle": "67307c003cb91d76e00ef0f3777318e25efac628", - "component.tag.blue.border": "680fb2a6a11251e2619789595cd28c7861aaa530", - "component.tag.brown.text": "b48491f46d15503df99e2d8d9394aa552d09461b", - "component.tag.brown.background": "90b0ee0df4ebe7f06bfd07a7acbe812a45d621a4", - "component.tag.brown.background-subtle": "134ffd2a91ef027e197db6a5331d2726bc080ad6", - "component.tag.brown.border": "675776ff7a30540c297579d72b7f00779d778c14", - "component.tag.cyan.text": "6bf9361c5931ba40663d2c412f28f15382498517", - "component.tag.cyan.background": "83107c8cff314c553ed2cea5c9af1ff3356485e5", - "component.tag.cyan.background-subtle": "7f2724127eebb6e01713828af3736cd2e3734436", - "component.tag.cyan.border": "3286065f931626298e8f3dab2328297e83a79771", - "component.tag.green.text": "699a30f1d5f76ed4e631faa3da63be65e88af039", - "component.tag.green.background": "8b06c35974700260dff1a712c0a3976d4ddb0df5", - "component.tag.green.background-subtle": "c4f47c34772d8367bc3b00645420511f37aaecad", - "component.tag.green.border": "db85545b7d00ef9e199bf863dcdcc2be520f520c", - "component.tag.indigo.text": "d641d4626278e4d17ff4d98202112da9580a6b89", - "component.tag.indigo.background": "bb4af9a068f716c2f0b4f77c228b88009ac049c9", - "component.tag.indigo.background-subtle": "877e3b4ee6040ed581a8349c8fdb5e49ed36dfe0", - "component.tag.indigo.border": "885fdb80c956855c30666c660d5839dc357d1f5f", - "component.tag.lime.text": "763399447b243f761b7cce55f7dcf2fbb1797ee3", - "component.tag.lime.background": "d51cede4c823e16ac204bcaddb65d49c325c3cbe", - "component.tag.lime.background-subtle": "556934df078200ab014c762eeaa04deecd05422e", - "component.tag.lime.border": "fbb53e37ef7cb87cfae5298e69a5ffe4f99a23a7", - "component.tag.mint.text": "d3d406bffbadb1b894e4bb6aef7b1f5a1945094c", - "component.tag.mint.background": "04568a7d0bff5fbc11600bf840916f5451a0fe62", - "component.tag.mint.background-subtle": "1d39716bceda8510beb02e19847c391523e3690a", - "component.tag.mint.border": "c703cecfc8bd82c593dc9d81ce18748edd6ecf4d", - "component.tag.orange.text": "ba407492439b283fedf30a8ab8b16774c0931a9f", - "component.tag.orange.background": "ef766412f340a4aa62c8888a6fdfb2890f3ea207", - "component.tag.orange.background-subtle": "05e823662de8b1f99a062cea3c0f24df69b29362", - "component.tag.orange.border": "2f3023f2311c12acb44cdd28beb888f64d6d2183", - "component.tag.pink.text": "83b73e0e328485233004d42baa8a0948ff2198b0", - "component.tag.pink.background": "b23a211249a71f32bf15757316d0596fdb395962", - "component.tag.pink.background-subtle": "c144f19e07b839d68f20eb5c51ebd94e0f333a82", - "component.tag.pink.border": "b4874a81a08261362f3d8237833b80e68a851b76", - "component.tag.purple.text": "9869d8aad416ac3f9e530b0d62b05dda66906de4", - "component.tag.purple.background": "bc59008310427ba5883f71079b19b8cb4c6dd862", - "component.tag.purple.background-subtle": "a3598602d6e6b1d03f638f1a941801f147f4657a", - "component.tag.purple.border": "de1d577bd170613ab46460e9c50ca8de420152f6", - "component.tag.red.text": "aca8c1832317ac859b4263769855f423840a8569", - "component.tag.red.background": "9008e05416a00096c234511275b92be7204363b6", - "component.tag.red.background-subtle": "986bdd3f8d16488337ca9f46b71b04195d7578b0", - "component.tag.red.border": "f7f9067262546ee6eb77955e38aa0a451fc7f98a", - "component.tag.violet.text": "2ab996ff3465a0b97dee4d7c5606df3d46ab2a07", - "component.tag.violet.background": "4c9b9c2658479fc0e56894975a9b9b8d76df5b00", - "component.tag.violet.background-subtle": "fded9a84a20755592f57f081ebb594bfbaf8cfb3", - "component.tag.violet.border": "77de89ef1ab5168b7ff5e329bde8608047149a04", - "component.tag.yellow.text": "cadfcb4d0fe72fd5828cd764d54198026520e10c", - "component.tag.yellow.background": "a29464cd2a618a77586cb8760478a4d82b12b3ca", - "component.tag.yellow.background-subtle": "1b262be32c5779f024da5ad5696c805a83eb96c7", - "component.tag.yellow.border": "b595821fd5ef662361820415bb878e8ef4ab8939", - "component.tag.gray.text": "e7608c51a2421de226afebbcb909180c8a0cdb5a", - "component.tag.gray.background": "9bcc758ef67bbaac88637e99a702da5d7f7a3144", - "component.tag.gray.background-subtle": "76dfa99dd57cbaf2e7cbec9511cd1e1ddd92ee0e", - "component.tag.gray.border": "02e03f32969f9e6120bb6c7a3b781a5446f1bef1", - "component.toast.default.title": "f791d24eeab59c12cf4aad84f4677099bb4a01c1", - "component.toast.default.description": "6000da4ada3b9445750fb4b7b990726df120c271", - "component.toast.default.background": "5b9e9ea5b7de018a92d3deb902257e4e2bbb49f9", - "component.toast.default.border": "f74755bc7843dc9d7c788c54178b7ce3b83dea3f", - "component.toast.danger.title": "b5ad1c43fcee32eb251b980e884e77ea137c3369", - "component.toast.danger.description": "d281b5c13f2a4a293042f52b168e39f8bec398da", - "component.toast.danger.background": "8ba5c70e994ab44aeb72b3ed7f26ca9646d59cc0", - "component.toast.danger.border": "7f5252c13b96825084248b367f36377bb003ca96", - "component.tooltip.text": "b79a7ec441cdc7c6eee9313602f081d063327c1d", - "component.tooltip.background": "a35d0240a1c4de13350e6a4770dd1703a90a9227", - "shadow-color.0": "c0c282f63e107374a732d74c1742cf60d52e6e5c", - "shadow-color.1": "1ec33a9c84353664d23cd23d6c033d1c330c149a", - "shadow-color.2": "6200a000044d8dbee421ed4afb0c3ff42febb6ef", - "shadow-color.3": "77d99afb159d8e193a82f615dd84de3214e00703", - "shadow-color.4": "2b2e0307d252bdc6db53a23ce2cc2e9bb4f6b914", - "shadow-color.5": "5a6c707240bab54cb4403f47262abfe0756efc9a", - "shadow-color.6": "928283d00759150575a8f155da90180a582be438", - "shadow-color.inner": "6cb5a98fba0b13e952859b9f023259b5c06cfd1a", - "gradient.ai.gradient-stop-1": "8db516caa68afc5b8fdd6fc6e5a9bad7715c5f26", - "gradient.ai.gradient-stop-2": "33930f41665251a281973a37847f357480aedca3", - "gradient.ai.gradient-stop-3": "c9e14c3db8e622b10b1cd3e860115cd6f876ae49", - "gradient.ai.gradient-stop-4": "6e7d0850d7eb1e699f87b41f6ffd4cb8d73d72e8", - "gradient.skeleton.gradient-stop-1": "5427016b990b75f0d1ce60eef8cb9b96d75fbde2", - "gradient.skeleton.gradient-stop-2": "01442c311e6da751c30c3518fc32970306767274", - "gradient.skeleton.gradient-stop-3": "7fda4c834a3daf0c56bb59777c525670ae2dee3e", - "gradient.pipeline.running.gradient-stop-1": "0c187d1ebb015ec66bac356009795316f84807ae", - "gradient.pipeline.running.gradient-stop-2": "d1251f86c91bd0f29d8ac8cfa01056bc307156b4", - "gradient.pipeline.running.gradient-stop-3": "b09bdab234cdf7c204cb153ec94ea0a9b2bb4976", - "gradient.pipeline.arrows.gradient-stop-1": "0465e74baaf10a12f23b9eaa40fc1ae08485a0d5", - "gradient.pipeline.arrows.gradient-stop-2": "4cadc4f9a5e66f28eaa27fb54b6ce538ea430c7d", - "gradient.pipeline.arrows.gradient-stop-3": "5af16d4ae6b63ff8dcf3254009e712db4ac1a3f9", - "gradient.pipeline.card.background.gradient-from": "8404a4e146121987426681accb996902179fad72", - "gradient.pipeline.card.background.gradient-to": "037bbd7fb410d05993a48594626a7babb32605a6", - "gradient.pipeline.card.border.gradient-from": "342926ec7179e7cbe133981050c1e1e41d94ed7a", - "gradient.pipeline.card.border.gradient-to": "8e39428cc5ce20f3593127f2ef71f180b38ee9a4", - "gradient.pipeline.widget.number.gradient-from": "dc372cb50eedf6023cd80cb6a4520e5fdf91358b", - "gradient.pipeline.widget.number.gradient-to": "e505c8d9dd140f5a671c1291ffd519fcff5c3e2c", - "gradient.pipeline.widget.blob.big.gradient-from": "b518524b25a5b95804988c640c4d52ba7ebd4599", - "gradient.pipeline.widget.blob.big.gradient-to": "80a493af10245e0ebbc6a51f5452d61d836a3754", - "gradient.pipeline.widget.blob.small.gradient-from": "8d7be31e69f0e54dd2e493d9051c2268078ea5ed", - "gradient.pipeline.widget.blob.small.gradient-to": "198813cf6242881ce0e0d030ca22ef31f9190d13", - "iconStrokeWidth.xxs": "751ceaa292e27736009bef894b62f83c1b2d66d8", - "iconStrokeWidth.xs": "77ca59c88a0b47972554b1db3f6469a230a6ad8c", - "iconStrokeWidth.sm": "e445b22e1f18af07002a1dc76f900dada5477383", - "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", - "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", - "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "component.dropdown.item.text": "2f1f1ea9d368ec8be380803506fbf657cabe6ac0" - }, - "group": "mode" - }, - { - "id": "d9839783f39c0b13df14b544704c66876c758183", - "name": "light-high-contrast-protanopia", - "$figmaStyleReferences": { - "shadow.0": "S:a2ed3778198048e91067a04633c27ba20e9fcbec,", - "shadow.1": "S:947694488889f7271c428950bec937ee79f8a536,", - "shadow.2": "S:70378f090cb66b03ee4b18e25742743934f37757,", - "shadow.3": "S:aa7e83fd47e75f5a1ae3e17f64417d5e9fcb96ae,", - "shadow.4": "S:5dfba690094db266c4ab7686fccbbedd8c16385f,", - "shadow.5": "S:d6752151a8dd3bd4b4bf12ad15a80c522f760731,", - "shadow.6": "S:da8e7b5b0f1352215fbaab66eff62a3e19d22b67,", - "shadow.inner": "S:2805cdc40176a4707d5cfc549b4c12e7ec4e74ff,", - "ring.focus": "S:062018f6483f54f1255b952aa1759b028d502ac3," - }, - "selectedTokenSets": { - "mode/light/high-contrast-protanopia": "enabled" - }, - "$figmaCollectionId": "VariableCollectionId:1340:156918", - "$figmaModeId": "1389:15", - "$figmaVariableReferences": { - "background.1": "633e5f77aa1bd1bd133852d8372b9c9f1231a9e4", - "background.2": "14e8d4b56cc273b508af8a2c58cb00e99e08d1d3", - "background.3": "33554ff11e1eab35e50aa3570f51d53f16f46d6a", - "text.1": "38382b9984a98f9d26692a7f2882dfb5c5d51825", - "text.2": "115f62efd02491e85a63dfd601b03725d3711f23", - "text.3": "1c7327f01cf759b17fd0523cb540afa8700c1dc7", - "text.accent": "0b3cd5357659e6542cca163ccfd96c0cac059203", - "text.success": "ee56057b81e6d0872a84ca6b29affc8911fe333e", - "text.danger": "c7e38d7c7afc899f4d40392dbd6bc5ed6580264d", - "text.warning": "b03334e4c9db4b76269e4be886df6c1abf74d0ca", - "border.1": "5ad2231a611605964ba70f80e7aabb48f04bc704", - "border.2": "9084bef359e38136e0dddac25a464896456a9b1a", - "border.3": "5ff5d5233f7cb0233ce7634bc480026668c818f6", - "border.focus": "8db219e896acc4d828aaaf4add646d96540a84ea", - "border.success": "b13758973865eab0b4d79028a48e457eae8bec47", - "border.danger": "33d53c1486021bb3c9edce4123b484a2aabc8de0", - "border.warning": "027e57e08a1edcaaa7fbe033902bb3f65497abb4", - "state.hover": "78426caca2a07ee56132762a720ae07e2810f03b", - "state.selected": "ef914056c9c9dbaef00fa8795702a3cb933ee761", - "state.disabled.text": "967ab1b863941c100f58cc55e611ee2709051f01", - "state.disabled.background": "7a192b5ddcc570f0c8e3a5dbfd54d780e2832bbd", - "state.disabled.border": "067fd26e80ad39a28f738a3b76d21d354092d551", - "component.accordion.title": "5e49d6ddf7f2b21724b474d4a5545256143dce54", - "component.accordion.description": "bc47401a69d07fa71f0371765ed940745fc7a5b9", - "component.accordion.chevron": "5dd530f96134323125031668d4ea98a36ea0de86", - "component.accordion.border": "0b3fcc0e02a2a86625b2b4a9cfeebfad9486bc3a", - "component.alert.default.title": "d8e59ed205399e9727b0dcecdccad3d8daaaa622", - "component.alert.default.description": "f9ec7fec91747435740f000fb642f9009e8fc2db", - "component.alert.default.background": "7fbbdfcc33a3051394f89675798db2159741a5fc", - "component.alert.default.border": "549692bf2f70f6b40c7d55259f8890189aa6cc98", - "component.alert.danger.title": "c8da1cdbba8e0f86edda5fd3869f6186d53881ca", - "component.alert.danger.description": "366849405bd53c78f0b73d72585034a52f05d9a7", - "component.alert.danger.background": "5756a9bdba027993a9879b32ed129e3034028cdf", - "component.alert.danger.border": "a1a3be9eefab6edf2e996a46537872680dc45a09", - "component.avatar.text": "23018f4c7f22c4afb3b7e49f585a1fbb591209de", - "component.avatar.background": "57703fddbd26d363509fdba3aea037bd2f515ee0", - "component.avatar.border": "d651f4cb9082aa4d6e6af2c5abab700d683a5c85", - "component.badge.default.text": "ab90828e3b8c6adce5dc10bf85107b001b958e95", - "component.badge.default.background": "706b070b298e2d2a97665baf7af05187eefeb4fe", - "component.badge.default.border": "a935a2968ca4ecfb8cc58a18f31ae8fe65eb516b", - "component.badge.neutral.text": "82d39f1786c4371303ae21e4c02db79989c54e36", - "component.badge.neutral.background": "f5480b1a2b648fdb0561acda7515c38271cfb04b", - "component.badge.neutral.border": "00f05792ddf6e53bff79346df6a34144426d50e0", - "component.badge.success.text": "71014a6138e8747257a21144f8114b906cfe0f0a", - "component.badge.success.border": "190589c6021debb7bb676f05ac7f063c237fd4aa", - "component.badge.success.background": "177eb9f406784ddb958232cd643ebbb3490a53d4", - "component.badge.danger.text": "6c0c04f17c2bc0ee085d09bf0f205dcbc66c1e17", - "component.badge.danger.border": "6bb014acbbd68a796ed0c4d8c4f73e8e9e619923", - "component.badge.danger.background": "4162b10332d17800585d97ed45e45d69c2006808", - "component.badge.warning.text": "8581620d95e5b92a8c85341ebf63f21fcf7133d0", - "component.badge.warning.border": "71cb519182108ac72ffef823935546e4bff62bbc", - "component.badge.warning.background": "74c13457a85684a054426bd833859fe93eaec978", - "component.badge.running.text": "0b0c1be217e557a5b14c1cb25e988e4ac6d40583", - "component.badge.running.border": "27d3c48d3c316bc4f980282759b5e82f8aaaf49d", - "component.badge.running.background": "a85fddc26baf586ac7ba79e381e5f8fefca87c65", - "component.badge.merged.text": "a83d66ef53e8a094a62f2b32a4d17e58d552b1ef", - "component.badge.merged.border": "755392bca643af0a3fe5492069881a870aa11dc3", - "component.badge.merged.background": "4f4c81b1fe43bfe0d721a22d0aeb93079776cf6d", - "component.badge.ai.text": "bb4daee92817073da0366090742d0a17babb5728", - "component.badge.ai.background": "c5764a2304bf0e8a153c9ce0da20827696a76b41", - "component.breadcrumb.item-inactive": "2f009ca6cafb50c994205c9df02ee2d2503f7d23", - "component.breadcrumb.item-current": "7b502cc2e72f66bb501fdc5f480d0133d1b3841a", - "component.breadcrumb.separator": "1cd28c3ff97ab2f529a19c632d89dd44af0aad80", - "component.btn.primary.text": "9d32f032da93c9aab8b3bc6087c26aa12f507ad7", - "component.btn.primary.background": "410d584a3469233e067d0592a366fdebbe1049bc", - "component.btn.primary.border": "1491ac71f9681307c2d6528e443504e079061988", - "component.btn.secondary.text": "12c93d1b08ae50645a3b8f59256fcec00a4f84ca", - "component.btn.secondary.background": "86434310c95f5c055783011cc0e7c7918f67a35c", - "component.btn.secondary.border": "66bda91f87154efd3cefdc7a634ecb8afa8cd285", - "component.btn.outline.unselected.text": "9cf2c495178d6fdfd8f1360376242acbd4dc5e75", - "component.btn.outline.unselected.icon": "af1510c6050f671219d2089e0e59d5febb4422d6", - "component.btn.outline.unselected.border": "2b3013d632e566301e9f5f1a5cbb6aab4e7ec53f", - "component.btn.outline.selected.text": "13b50089245dec1899db2012412efcf649e2c0b4", - "component.btn.outline.selected.icon": "2bdf2c92b22e814109f4e05ec4d41d92f934a15d", - "component.btn.outline.selected.border": "ef10f4599233f62203def151b386013ddaa63afb", - "component.btn.ghost.unselected.text": "43fa10dd413cddb9a2e2142ead9ca3b4a91b49a6", - "component.btn.ghost.unselected.icon": "5ce332f51238b374104ec53067d685c26882f38e", - "component.btn.ghost.selected.text": "74cbf3b86016e05517f8c7bc64652281c940363e", - "component.btn.ghost.selected.icon": "1d8c6206a136d9c176ffba600a1e94618c4b96f8", - "component.btn.success.text": "52a336440e013bbc849ad67a43d0e136cf4f0b51", - "component.btn.success.background": "608ca6930129b4e5ff36d7f38508ae2537b66629", - "component.btn.success.border": "1f74d9985a10fe20e0acc4647cf4949005e9d4f1", - "component.btn.success.state.hover": "d05bde38a6539a11e3ccd87345af113ccd6bd113", - "component.btn.success.state.active": "f6e48e68dba6c32de27fadcaca3d1959f081d2e5", - "component.btn.danger.text": "49c02562362b8f775cfc2c4c614ecd646dcc2716", - "component.btn.danger.background": "0b015d0a4f456781969d7ffaf135c7c2a8858440", - "component.btn.danger.border": "9f99ee56f1ae2b7eb2f98300b83d4f53b15fd763", - "component.btn.danger.state.hover": "e7756e1d022d893bfa5fdd619f181d26fb7b117b", - "component.btn.danger.state.active": "23c7c85ff6104e098a208b6f4b86c1d0eef0f543", - "component.btn.ai.text": "380368600319fa12b73538ff52acd9d0e977e367", - "component.btn.ai.background": "8c9a1d07e05837f50588b642a4b51462f883887d", - "component.card.background": "256878745d17a46b7159919d8e30a3e960f59575", - "component.card.border": "3688ffcc56c4fb44dc0e221b8e09a958fd9e509d", - "component.dialog.title": "e6e0ff2bf1f3802eb21492e8b833c5f5e679cd82", - "component.dialog.description": "301509fcf2faac8497b2136f7879b9b0b3c64433", - "component.dialog.background": "ff2918d712798a4b487b6f6e5befe7b3eef59883", - "component.dialog.border": "4a6cb3732ad8b36bb9de0d15cbed575c87996088", - "component.dialog.backdrop": "893e60ed671f891241a3084707057185398446ed", - "component.dropdown.background": "09b2dca27ba9efabfe838d713a14ca6e6ac46685", - "component.dropdown.border": "c8cdfff63f4e142d651070ff1056b69a638aaab7", - "component.dropdown.item.delete.text": "864396a8c9b5df0fd948ded7d520ded936d74a8b", - "component.dropdown.item.delete.state.hover": "308dc9064be8e754f8385b0e8ff5489563d7c984", - "component.diff.grey": "43bf4f466a6e231c9951a639313740579c29d824", - "component.diff.add-content": "eb4eccf789a2bda6f3d3875c3310ef0579fd3555", - "component.diff.add-lineNumber": "61583aa6e36aaddd0be173a4a082a450e2522d3a", - "component.diff.add-content-highlight": "ad544fc527ca8b4c297993fe0722b8a7a96ef903", - "component.diff.add-widget": "c1def698ab707194d8f1558e16b05c55d50920d9", - "component.diff.add-widget-color": "a27c504a1f1151974669cf06054c1d0f704ecc38", - "component.diff.del-content": "465e6eb3613967f489cfee4b04f0b283b9e88f91", - "component.diff.del-lineNumber": "4cbe83072b6781d6e3edff645ccb2fb7426c5628", - "component.diff.del-content-highlight": "3e635e401a1a37a259211d093bef70e3a0c507ea", - "component.diff.plain-content": "984456faee2f6a5c202cfd76078ef5b6cd3a05f1", - "component.diff.plain-lineNumber": "6a5550287e7c58afa9d2375c5bfdca4d6c214cf1", - "component.diff.plain-lineNumber-color": "7c1186d20725b53cbefe87f56c5bc6db4e77d898", - "component.diff.empty-content": "712d93a0c1bc9503abda77ae50d624bd328c0057", - "component.diff.hunk-content": "79ad0dfc599f9bc246a6618c85bc1dc59744537f", - "component.diff.hunk-lineNumber": "bccfad80b84e35edf4b47af2ca30057eba2b2ebf", - "component.diff.hunk-content-color": "68c5d6a95d475f7275062e3eb58dba464df3d059", - "component.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", - "component.input.text": "df946237ac2ea0d177f3f2818a673fdf876944c7", - "component.input.placeholder": "85d7632aba08fd476083e508cc2660b17c30981a", - "component.input.icon": "75ca1f38c16fbd5e2697a36c74b0b1dd01f3f5c0", - "component.input.background": "585327333fbbf97bb8db21fbc613025719ca8a87", - "component.input.border": "911dac823dac21c9ccf4e35e10b2eb82a9c6f0ef", - "component.label.text": "80403cd630bba01a064550d9783313227b1d010f", - "component.link.default": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", - "component.link.visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", - "component.nav-tabs.unselected.text": "c085805657bb81574da85d3cb29f89ca08980daa", - "component.nav-tabs.selected.text": "16aa825c8038347237cbe91f7eeece4d2a8d1a2b", - "component.nav-tabs.selected.border": "3427b967112facd59f09fa310c863d7193ea4ffe", - "component.nav-tabs.border": "791d71ca187934e4b98ddff04bc9447a10358699", - "component.nav-tabs.background": "b92549e37390005f2bd1cfce06f9dfb8f67e39e0", - "component.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", - "component.pipeline.card.background": "f207dcff97f000326c4f28293fdbd2830860ce54", - "component.pipeline.card.border": "aa9d9528b1e8e25f9e6dae387b76d9beb2de35a8", - "component.pipeline.card.running.border": "179c0e4d47becc896eb1fbb7f9e8461779b3f680", - "component.pipeline.card.error.border": "1c0b41b41e25250cfb65bdb539bd573be66b0d00", - "component.pipeline.card.completed.border": "14251a54f431aae617af6b9577454a0e212ad76f", - "component.pipeline.card-canvas.1.background": "01bd392d5ddafe85e5575296d08254e52054ba8d", - "component.pipeline.card-canvas.1.border": "b9510abf89f82fb7b779bb730caa1bf393c83bd4", - "component.pipeline.card-canvas.2.background": "87b6b3e65b995fc4180dfb7bf613efb0098d1fff", - "component.pipeline.card-canvas.2.border": "1f9fa1e95134d87995a21738a3877f1c15158e5e", - "component.pipeline.background.dotes": "2784742abff27552789cdd4f2b51cab1331abb4a", - "component.sidebar.background": "8b6619fafae38e8ad94fffd488f2cf53d3c31d76", - "component.sidebar.border": "2263230eae16609a3d95ba5863aa3cc343010131", - "component.sidebar.separator": "a0c913dd38e81e3b2c20ee17642433da6da5f147", - "component.sidebar.hover": "4925b4511178bd2853a6b7b329683d036508aec1", - "component.sidebar.selected": "31f335ecde0aedb12407221718069f5b13574d41", - "component.sidebar.item.unselected.text": "9609e0ad8d79127a3784876f0204d02964f09e43", - "component.sidebar.item.unselected.icon": "5afba128858cf7494fb8a326a435860faf00b0ee", - "component.sidebar.item.selected.text": "5f1daf88cebaea07bd4c2a57c862638340827496", - "component.sidebar.item.selected.icon": "18325fda8139122c4a7cdf6debe2cd1f25d120b7", - "component.sidebar.logo.text": "a3ffa09fdf368badab24aecdbd26709ed7b3c2b2", - "component.sidebar.logo.icon": "c572d382a2018718d719f6a427d31fc9a42f57bd", - "component.sidebar.search.background": "33822e390046e5ec8f71a07fc041514a28778e74", - "component.sidebar.search.border": "f2044f7e8cf503f8809a48a14a88c5ef6466176f", - "component.sidebar.search.placeholder": "665cc00a32edd27b62371ee820d3c3250e629e78", - "component.sidebar.search.btn.background": "70c80e61b9ec397214c809c51de4fdf8177185da", - "component.sidebar.search.btn.border": "1c434c7d16cd4ba880e2d57520c90bc37f6b3879", - "component.sidebar.search.btn.text": "589c7d0162d67165a8752ea54a2c63bb63ee3ad7", - "component.sidebar.footer.username": "68298a8f471bb04f2f0305d9433a2b59613abd8d", - "component.sidebar.footer.data": "6a681d2abb90c2b62a39e20a1d29419c5086f01a", - "component.scrollbar.thumb": "9818c03d003381a966d08d3c6da75af8468bb8ef", - "component.selection.unselected.item": "7a7cad2aa2d6b2803a52eb26c78ea177b84ce241", - "component.selection.unselected.background": "a63ba949d12afc99020e77f95d0538bddba457b3", - "component.selection.unselected.border": "6ef997ebe03bb209ca568a648eb0cc8be69746a6", - "component.selection.selected.item": "f1f43c8acf2d4da10ee2e0d164d4dbe955816018", - "component.selection.selected.background": "1d1bbb9958f047744b66861fd8bd75dc2726dc25", - "component.selection.selected.border": "44b31378ed175b87b50ebad88cfd4a73a66ab9d5", - "component.separator.background": "9f4c82c269bc5aff0fa55d52a0ed59f914057be0", - "component.slider.track.base": "34dc3b5be6733e38f6c28d24d4f3699b2d7ea6f3", - "component.slider.track.progress": "38d8cac26c1cfb91293198eee25299e4aef9c1d8", - "component.slider.track-segments.base": "cb752791a51ff48c6d481426a1affb15048a152a", - "component.slider.track-segments.progress": "a7943fda0e4646e7018046354a9be54cf7d03075", - "component.slider.handle.background": "5c423cc3b672079f1e7dc0d1c8170dade368711a", - "component.slider.handle.border": "94347a2ed2900445946d18c653fb179b8602c533", - "component.status-indicator.completed": "c4c3bce2d28c84c25db4f444f9144b94523737b7", - "component.status-indicator.cancelled": "5aa15732d9ebc41f14b111e252819e2e36617124", - "component.status-indicator.warning": "4dc6e5ea4c736869aee4ebd0ee006f2d73861423", - "component.status-indicator.running": "07ce029f27cf34bf8d6fe3b9a6a600be01c8947e", - "component.status-indicator.merged": "d9eb24404452e6cc2617094fe8f29c69a760ea55", - "component.status-indicator.action-required": "2f1b8543c44b5d93cebddd80b5a9ee2d60fdb146", - "component.status-indicator.waiting": "62f68d300850ce20cf0be8c07d82a41bf1a56ecd", - "component.switch.unselected.thumb": "94d5f0b3a97924583ff697d56db74727b133ba95", - "component.switch.unselected.background": "a8ae87c7bb7ba7f4bfa71f2fdd5f404d19c3a1be", - "component.switch.selected.thumb": "cf6964ec11d69899d5dd39e82d322ea544367e90", - "component.switch.selected.background": "bba05ff96eae08a4adc31a6406e417022d9e5dad", - "component.table.header.text": "65cfc045aa01e3d3eeae4a227cac9be150839db8", - "component.table.header.background": "137c4f2e14bb8cadaf6f900a443700fe928a1fcd", - "component.table.row.alternate-background": "2863f92db433f88f24f62dda4cc9fd50c48130be", - "component.table.row.border": "445d945c4fe4426c3b73cf6f8fe0a572e4525798", - "component.table.cell.text": "73a28f25ba54aff507877ecbfd9942a6ea9f3cea", - "component.tabs.background": "8689ee01219675fb951a2517c2397fba52487971", - "component.tabs.border": "e5bc8cfac224234021c11b381f505da5fcac84ed", - "component.tabs.item.unselected.text": "4af8a5b79c55621f1ed11a7b6fc605657934dc1e", - "component.tabs.item.unselected.background": "fa041cdeb34ba5da6f1bd4cd6d8bb4b8273e0e70", - "component.tabs.item.unselected.border": "79b1a6fe839c012efec923edf40b3bfa2bcdab19", - "component.tabs.item.selected.text": "d048f7001829ff9949b2712b8ca746c8f3f49767", - "component.tabs.item.selected.background": "33269e9854800d565f728ba2a85c5cd3e549b5e8", - "component.tabs.item.selected.border": "11b7e5aeb83fd2f5d968021c750af2ceb5ba5841", - "component.tag.blue.text": "b35e0aebd9d1ebf0fd5d24bbd5ad184db9e11b86", - "component.tag.blue.background": "072fc2901d8ad0199c07bc339d46db086c7b0379", - "component.tag.blue.background-subtle": "67307c003cb91d76e00ef0f3777318e25efac628", - "component.tag.blue.border": "680fb2a6a11251e2619789595cd28c7861aaa530", - "component.tag.brown.text": "b48491f46d15503df99e2d8d9394aa552d09461b", - "component.tag.brown.background": "90b0ee0df4ebe7f06bfd07a7acbe812a45d621a4", - "component.tag.brown.background-subtle": "134ffd2a91ef027e197db6a5331d2726bc080ad6", - "component.tag.brown.border": "675776ff7a30540c297579d72b7f00779d778c14", - "component.tag.cyan.text": "6bf9361c5931ba40663d2c412f28f15382498517", - "component.tag.cyan.background": "83107c8cff314c553ed2cea5c9af1ff3356485e5", - "component.tag.cyan.background-subtle": "7f2724127eebb6e01713828af3736cd2e3734436", - "component.tag.cyan.border": "3286065f931626298e8f3dab2328297e83a79771", - "component.tag.green.text": "699a30f1d5f76ed4e631faa3da63be65e88af039", - "component.tag.green.background": "8b06c35974700260dff1a712c0a3976d4ddb0df5", - "component.tag.green.background-subtle": "c4f47c34772d8367bc3b00645420511f37aaecad", - "component.tag.green.border": "db85545b7d00ef9e199bf863dcdcc2be520f520c", - "component.tag.indigo.text": "d641d4626278e4d17ff4d98202112da9580a6b89", - "component.tag.indigo.background": "bb4af9a068f716c2f0b4f77c228b88009ac049c9", - "component.tag.indigo.background-subtle": "877e3b4ee6040ed581a8349c8fdb5e49ed36dfe0", - "component.tag.indigo.border": "885fdb80c956855c30666c660d5839dc357d1f5f", - "component.tag.lime.text": "763399447b243f761b7cce55f7dcf2fbb1797ee3", - "component.tag.lime.background": "d51cede4c823e16ac204bcaddb65d49c325c3cbe", - "component.tag.lime.background-subtle": "556934df078200ab014c762eeaa04deecd05422e", - "component.tag.lime.border": "fbb53e37ef7cb87cfae5298e69a5ffe4f99a23a7", - "component.tag.mint.text": "d3d406bffbadb1b894e4bb6aef7b1f5a1945094c", - "component.tag.mint.background": "04568a7d0bff5fbc11600bf840916f5451a0fe62", - "component.tag.mint.background-subtle": "1d39716bceda8510beb02e19847c391523e3690a", - "component.tag.mint.border": "c703cecfc8bd82c593dc9d81ce18748edd6ecf4d", - "component.tag.orange.text": "ba407492439b283fedf30a8ab8b16774c0931a9f", - "component.tag.orange.background": "ef766412f340a4aa62c8888a6fdfb2890f3ea207", - "component.tag.orange.background-subtle": "05e823662de8b1f99a062cea3c0f24df69b29362", - "component.tag.orange.border": "2f3023f2311c12acb44cdd28beb888f64d6d2183", - "component.tag.pink.text": "83b73e0e328485233004d42baa8a0948ff2198b0", - "component.tag.pink.background": "b23a211249a71f32bf15757316d0596fdb395962", - "component.tag.pink.background-subtle": "c144f19e07b839d68f20eb5c51ebd94e0f333a82", - "component.tag.pink.border": "b4874a81a08261362f3d8237833b80e68a851b76", - "component.tag.purple.text": "9869d8aad416ac3f9e530b0d62b05dda66906de4", - "component.tag.purple.background": "bc59008310427ba5883f71079b19b8cb4c6dd862", - "component.tag.purple.background-subtle": "a3598602d6e6b1d03f638f1a941801f147f4657a", - "component.tag.purple.border": "de1d577bd170613ab46460e9c50ca8de420152f6", - "component.tag.red.text": "aca8c1832317ac859b4263769855f423840a8569", - "component.tag.red.background": "9008e05416a00096c234511275b92be7204363b6", - "component.tag.red.background-subtle": "986bdd3f8d16488337ca9f46b71b04195d7578b0", - "component.tag.red.border": "f7f9067262546ee6eb77955e38aa0a451fc7f98a", - "component.tag.violet.text": "2ab996ff3465a0b97dee4d7c5606df3d46ab2a07", - "component.tag.violet.background": "4c9b9c2658479fc0e56894975a9b9b8d76df5b00", - "component.tag.violet.background-subtle": "fded9a84a20755592f57f081ebb594bfbaf8cfb3", - "component.tag.violet.border": "77de89ef1ab5168b7ff5e329bde8608047149a04", - "component.tag.yellow.text": "cadfcb4d0fe72fd5828cd764d54198026520e10c", - "component.tag.yellow.background": "a29464cd2a618a77586cb8760478a4d82b12b3ca", - "component.tag.yellow.background-subtle": "1b262be32c5779f024da5ad5696c805a83eb96c7", - "component.tag.yellow.border": "b595821fd5ef662361820415bb878e8ef4ab8939", - "component.tag.gray.text": "e7608c51a2421de226afebbcb909180c8a0cdb5a", - "component.tag.gray.background": "9bcc758ef67bbaac88637e99a702da5d7f7a3144", - "component.tag.gray.background-subtle": "76dfa99dd57cbaf2e7cbec9511cd1e1ddd92ee0e", - "component.tag.gray.border": "02e03f32969f9e6120bb6c7a3b781a5446f1bef1", - "component.toast.default.title": "f791d24eeab59c12cf4aad84f4677099bb4a01c1", - "component.toast.default.description": "6000da4ada3b9445750fb4b7b990726df120c271", - "component.toast.default.background": "5b9e9ea5b7de018a92d3deb902257e4e2bbb49f9", - "component.toast.default.border": "f74755bc7843dc9d7c788c54178b7ce3b83dea3f", - "component.toast.danger.title": "b5ad1c43fcee32eb251b980e884e77ea137c3369", - "component.toast.danger.description": "d281b5c13f2a4a293042f52b168e39f8bec398da", - "component.toast.danger.background": "8ba5c70e994ab44aeb72b3ed7f26ca9646d59cc0", - "component.toast.danger.border": "7f5252c13b96825084248b367f36377bb003ca96", - "component.tooltip.text": "b79a7ec441cdc7c6eee9313602f081d063327c1d", - "component.tooltip.background": "a35d0240a1c4de13350e6a4770dd1703a90a9227", - "shadow-color.0": "c0c282f63e107374a732d74c1742cf60d52e6e5c", - "shadow-color.1": "1ec33a9c84353664d23cd23d6c033d1c330c149a", - "shadow-color.2": "6200a000044d8dbee421ed4afb0c3ff42febb6ef", - "shadow-color.3": "77d99afb159d8e193a82f615dd84de3214e00703", - "shadow-color.4": "2b2e0307d252bdc6db53a23ce2cc2e9bb4f6b914", - "shadow-color.5": "5a6c707240bab54cb4403f47262abfe0756efc9a", - "shadow-color.6": "928283d00759150575a8f155da90180a582be438", - "shadow-color.inner": "6cb5a98fba0b13e952859b9f023259b5c06cfd1a", - "gradient.ai.gradient-stop-1": "8db516caa68afc5b8fdd6fc6e5a9bad7715c5f26", - "gradient.ai.gradient-stop-2": "33930f41665251a281973a37847f357480aedca3", - "gradient.ai.gradient-stop-3": "c9e14c3db8e622b10b1cd3e860115cd6f876ae49", - "gradient.ai.gradient-stop-4": "6e7d0850d7eb1e699f87b41f6ffd4cb8d73d72e8", - "gradient.skeleton.gradient-stop-1": "5427016b990b75f0d1ce60eef8cb9b96d75fbde2", - "gradient.skeleton.gradient-stop-2": "01442c311e6da751c30c3518fc32970306767274", - "gradient.skeleton.gradient-stop-3": "7fda4c834a3daf0c56bb59777c525670ae2dee3e", - "gradient.pipeline.running.gradient-stop-1": "0c187d1ebb015ec66bac356009795316f84807ae", - "gradient.pipeline.running.gradient-stop-2": "d1251f86c91bd0f29d8ac8cfa01056bc307156b4", - "gradient.pipeline.running.gradient-stop-3": "b09bdab234cdf7c204cb153ec94ea0a9b2bb4976", - "gradient.pipeline.arrows.gradient-stop-1": "0465e74baaf10a12f23b9eaa40fc1ae08485a0d5", - "gradient.pipeline.arrows.gradient-stop-2": "4cadc4f9a5e66f28eaa27fb54b6ce538ea430c7d", - "gradient.pipeline.arrows.gradient-stop-3": "5af16d4ae6b63ff8dcf3254009e712db4ac1a3f9", - "gradient.pipeline.card.background.gradient-from": "8404a4e146121987426681accb996902179fad72", - "gradient.pipeline.card.background.gradient-to": "037bbd7fb410d05993a48594626a7babb32605a6", - "gradient.pipeline.card.border.gradient-from": "342926ec7179e7cbe133981050c1e1e41d94ed7a", - "gradient.pipeline.card.border.gradient-to": "8e39428cc5ce20f3593127f2ef71f180b38ee9a4", - "gradient.pipeline.widget.number.gradient-from": "dc372cb50eedf6023cd80cb6a4520e5fdf91358b", - "gradient.pipeline.widget.number.gradient-to": "e505c8d9dd140f5a671c1291ffd519fcff5c3e2c", - "gradient.pipeline.widget.blob.big.gradient-from": "b518524b25a5b95804988c640c4d52ba7ebd4599", - "gradient.pipeline.widget.blob.big.gradient-to": "80a493af10245e0ebbc6a51f5452d61d836a3754", - "gradient.pipeline.widget.blob.small.gradient-from": "8d7be31e69f0e54dd2e493d9051c2268078ea5ed", - "gradient.pipeline.widget.blob.small.gradient-to": "198813cf6242881ce0e0d030ca22ef31f9190d13", - "iconStrokeWidth.xxs": "751ceaa292e27736009bef894b62f83c1b2d66d8", - "iconStrokeWidth.xs": "77ca59c88a0b47972554b1db3f6469a230a6ad8c", - "iconStrokeWidth.sm": "e445b22e1f18af07002a1dc76f900dada5477383", - "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", - "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", - "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "component.dropdown.item.text": "2f1f1ea9d368ec8be380803506fbf657cabe6ac0" - }, - "group": "mode" - }, - { - "id": "836ca7de20bb06ba9365a2e63b65c8a472669b47", - "name": "light-deuteranopia", - "$figmaStyleReferences": { - "shadow.0": "S:a2ed3778198048e91067a04633c27ba20e9fcbec,", - "shadow.1": "S:947694488889f7271c428950bec937ee79f8a536,", - "shadow.2": "S:70378f090cb66b03ee4b18e25742743934f37757,", - "shadow.3": "S:aa7e83fd47e75f5a1ae3e17f64417d5e9fcb96ae,", - "shadow.4": "S:5dfba690094db266c4ab7686fccbbedd8c16385f,", - "shadow.5": "S:d6752151a8dd3bd4b4bf12ad15a80c522f760731,", - "shadow.6": "S:da8e7b5b0f1352215fbaab66eff62a3e19d22b67,", - "shadow.inner": "S:2805cdc40176a4707d5cfc549b4c12e7ec4e74ff,", - "ring.focus": "S:062018f6483f54f1255b952aa1759b028d502ac3," - }, - "selectedTokenSets": { - "mode/light/default-deuteranopia": "enabled" - }, - "$figmaCollectionId": "VariableCollectionId:1340:156918", - "$figmaModeId": "1389:16", - "$figmaVariableReferences": { - "background.1": "633e5f77aa1bd1bd133852d8372b9c9f1231a9e4", - "background.2": "14e8d4b56cc273b508af8a2c58cb00e99e08d1d3", - "background.3": "33554ff11e1eab35e50aa3570f51d53f16f46d6a", - "text.1": "38382b9984a98f9d26692a7f2882dfb5c5d51825", - "text.2": "115f62efd02491e85a63dfd601b03725d3711f23", - "text.3": "1c7327f01cf759b17fd0523cb540afa8700c1dc7", - "text.accent": "0b3cd5357659e6542cca163ccfd96c0cac059203", - "text.success": "ee56057b81e6d0872a84ca6b29affc8911fe333e", - "text.danger": "c7e38d7c7afc899f4d40392dbd6bc5ed6580264d", - "text.warning": "b03334e4c9db4b76269e4be886df6c1abf74d0ca", - "border.1": "5ad2231a611605964ba70f80e7aabb48f04bc704", - "border.2": "9084bef359e38136e0dddac25a464896456a9b1a", - "border.3": "5ff5d5233f7cb0233ce7634bc480026668c818f6", - "border.focus": "8db219e896acc4d828aaaf4add646d96540a84ea", - "border.success": "b13758973865eab0b4d79028a48e457eae8bec47", - "border.danger": "33d53c1486021bb3c9edce4123b484a2aabc8de0", - "border.warning": "027e57e08a1edcaaa7fbe033902bb3f65497abb4", - "state.hover": "78426caca2a07ee56132762a720ae07e2810f03b", - "state.selected": "ef914056c9c9dbaef00fa8795702a3cb933ee761", - "state.disabled.text": "967ab1b863941c100f58cc55e611ee2709051f01", - "state.disabled.background": "7a192b5ddcc570f0c8e3a5dbfd54d780e2832bbd", - "state.disabled.border": "067fd26e80ad39a28f738a3b76d21d354092d551", - "component.accordion.title": "5e49d6ddf7f2b21724b474d4a5545256143dce54", - "component.accordion.description": "bc47401a69d07fa71f0371765ed940745fc7a5b9", - "component.accordion.chevron": "5dd530f96134323125031668d4ea98a36ea0de86", - "component.accordion.border": "0b3fcc0e02a2a86625b2b4a9cfeebfad9486bc3a", - "component.alert.default.title": "d8e59ed205399e9727b0dcecdccad3d8daaaa622", - "component.alert.default.description": "f9ec7fec91747435740f000fb642f9009e8fc2db", - "component.alert.default.background": "7fbbdfcc33a3051394f89675798db2159741a5fc", - "component.alert.default.border": "549692bf2f70f6b40c7d55259f8890189aa6cc98", - "component.alert.danger.title": "c8da1cdbba8e0f86edda5fd3869f6186d53881ca", - "component.alert.danger.description": "366849405bd53c78f0b73d72585034a52f05d9a7", - "component.alert.danger.background": "5756a9bdba027993a9879b32ed129e3034028cdf", - "component.alert.danger.border": "a1a3be9eefab6edf2e996a46537872680dc45a09", - "component.avatar.text": "23018f4c7f22c4afb3b7e49f585a1fbb591209de", - "component.avatar.background": "57703fddbd26d363509fdba3aea037bd2f515ee0", - "component.avatar.border": "d651f4cb9082aa4d6e6af2c5abab700d683a5c85", - "component.badge.default.text": "ab90828e3b8c6adce5dc10bf85107b001b958e95", - "component.badge.default.background": "706b070b298e2d2a97665baf7af05187eefeb4fe", - "component.badge.default.border": "a935a2968ca4ecfb8cc58a18f31ae8fe65eb516b", - "component.badge.neutral.text": "82d39f1786c4371303ae21e4c02db79989c54e36", - "component.badge.neutral.background": "f5480b1a2b648fdb0561acda7515c38271cfb04b", - "component.badge.neutral.border": "00f05792ddf6e53bff79346df6a34144426d50e0", - "component.badge.success.text": "71014a6138e8747257a21144f8114b906cfe0f0a", - "component.badge.success.border": "190589c6021debb7bb676f05ac7f063c237fd4aa", - "component.badge.success.background": "177eb9f406784ddb958232cd643ebbb3490a53d4", - "component.badge.danger.text": "6c0c04f17c2bc0ee085d09bf0f205dcbc66c1e17", - "component.badge.danger.border": "6bb014acbbd68a796ed0c4d8c4f73e8e9e619923", - "component.badge.danger.background": "4162b10332d17800585d97ed45e45d69c2006808", - "component.badge.warning.text": "8581620d95e5b92a8c85341ebf63f21fcf7133d0", - "component.badge.warning.border": "71cb519182108ac72ffef823935546e4bff62bbc", - "component.badge.warning.background": "74c13457a85684a054426bd833859fe93eaec978", - "component.badge.running.text": "0b0c1be217e557a5b14c1cb25e988e4ac6d40583", - "component.badge.running.border": "27d3c48d3c316bc4f980282759b5e82f8aaaf49d", - "component.badge.running.background": "a85fddc26baf586ac7ba79e381e5f8fefca87c65", - "component.badge.merged.text": "a83d66ef53e8a094a62f2b32a4d17e58d552b1ef", - "component.badge.merged.border": "755392bca643af0a3fe5492069881a870aa11dc3", - "component.badge.merged.background": "4f4c81b1fe43bfe0d721a22d0aeb93079776cf6d", - "component.badge.ai.text": "bb4daee92817073da0366090742d0a17babb5728", - "component.badge.ai.background": "c5764a2304bf0e8a153c9ce0da20827696a76b41", - "component.breadcrumb.item-inactive": "2f009ca6cafb50c994205c9df02ee2d2503f7d23", - "component.breadcrumb.item-current": "7b502cc2e72f66bb501fdc5f480d0133d1b3841a", - "component.breadcrumb.separator": "1cd28c3ff97ab2f529a19c632d89dd44af0aad80", - "component.btn.primary.text": "9d32f032da93c9aab8b3bc6087c26aa12f507ad7", - "component.btn.primary.background": "410d584a3469233e067d0592a366fdebbe1049bc", - "component.btn.primary.border": "1491ac71f9681307c2d6528e443504e079061988", - "component.btn.secondary.text": "12c93d1b08ae50645a3b8f59256fcec00a4f84ca", - "component.btn.secondary.background": "86434310c95f5c055783011cc0e7c7918f67a35c", - "component.btn.secondary.border": "66bda91f87154efd3cefdc7a634ecb8afa8cd285", - "component.btn.outline.unselected.text": "9cf2c495178d6fdfd8f1360376242acbd4dc5e75", - "component.btn.outline.unselected.icon": "af1510c6050f671219d2089e0e59d5febb4422d6", - "component.btn.outline.unselected.border": "2b3013d632e566301e9f5f1a5cbb6aab4e7ec53f", - "component.btn.outline.selected.text": "13b50089245dec1899db2012412efcf649e2c0b4", - "component.btn.outline.selected.icon": "2bdf2c92b22e814109f4e05ec4d41d92f934a15d", - "component.btn.outline.selected.border": "ef10f4599233f62203def151b386013ddaa63afb", - "component.btn.ghost.unselected.text": "43fa10dd413cddb9a2e2142ead9ca3b4a91b49a6", - "component.btn.ghost.unselected.icon": "5ce332f51238b374104ec53067d685c26882f38e", - "component.btn.ghost.selected.text": "74cbf3b86016e05517f8c7bc64652281c940363e", - "component.btn.ghost.selected.icon": "1d8c6206a136d9c176ffba600a1e94618c4b96f8", - "component.btn.success.text": "52a336440e013bbc849ad67a43d0e136cf4f0b51", - "component.btn.success.background": "608ca6930129b4e5ff36d7f38508ae2537b66629", - "component.btn.success.border": "1f74d9985a10fe20e0acc4647cf4949005e9d4f1", - "component.btn.success.state.hover": "d05bde38a6539a11e3ccd87345af113ccd6bd113", - "component.btn.success.state.active": "f6e48e68dba6c32de27fadcaca3d1959f081d2e5", - "component.btn.danger.text": "49c02562362b8f775cfc2c4c614ecd646dcc2716", - "component.btn.danger.background": "0b015d0a4f456781969d7ffaf135c7c2a8858440", - "component.btn.danger.border": "9f99ee56f1ae2b7eb2f98300b83d4f53b15fd763", - "component.btn.danger.state.hover": "e7756e1d022d893bfa5fdd619f181d26fb7b117b", - "component.btn.danger.state.active": "23c7c85ff6104e098a208b6f4b86c1d0eef0f543", - "component.btn.ai.text": "380368600319fa12b73538ff52acd9d0e977e367", - "component.btn.ai.background": "8c9a1d07e05837f50588b642a4b51462f883887d", - "component.card.background": "256878745d17a46b7159919d8e30a3e960f59575", - "component.card.border": "3688ffcc56c4fb44dc0e221b8e09a958fd9e509d", - "component.dialog.title": "e6e0ff2bf1f3802eb21492e8b833c5f5e679cd82", - "component.dialog.description": "301509fcf2faac8497b2136f7879b9b0b3c64433", - "component.dialog.background": "ff2918d712798a4b487b6f6e5befe7b3eef59883", - "component.dialog.border": "4a6cb3732ad8b36bb9de0d15cbed575c87996088", - "component.dialog.backdrop": "893e60ed671f891241a3084707057185398446ed", - "component.dropdown.background": "09b2dca27ba9efabfe838d713a14ca6e6ac46685", - "component.dropdown.border": "c8cdfff63f4e142d651070ff1056b69a638aaab7", - "component.dropdown.item.delete.text": "864396a8c9b5df0fd948ded7d520ded936d74a8b", - "component.dropdown.item.delete.state.hover": "308dc9064be8e754f8385b0e8ff5489563d7c984", - "component.diff.grey": "43bf4f466a6e231c9951a639313740579c29d824", - "component.diff.add-content": "eb4eccf789a2bda6f3d3875c3310ef0579fd3555", - "component.diff.add-lineNumber": "61583aa6e36aaddd0be173a4a082a450e2522d3a", - "component.diff.add-content-highlight": "ad544fc527ca8b4c297993fe0722b8a7a96ef903", - "component.diff.add-widget": "c1def698ab707194d8f1558e16b05c55d50920d9", - "component.diff.add-widget-color": "a27c504a1f1151974669cf06054c1d0f704ecc38", - "component.diff.del-content": "465e6eb3613967f489cfee4b04f0b283b9e88f91", - "component.diff.del-lineNumber": "4cbe83072b6781d6e3edff645ccb2fb7426c5628", - "component.diff.del-content-highlight": "3e635e401a1a37a259211d093bef70e3a0c507ea", - "component.diff.plain-content": "984456faee2f6a5c202cfd76078ef5b6cd3a05f1", - "component.diff.plain-lineNumber": "6a5550287e7c58afa9d2375c5bfdca4d6c214cf1", - "component.diff.plain-lineNumber-color": "7c1186d20725b53cbefe87f56c5bc6db4e77d898", - "component.diff.empty-content": "712d93a0c1bc9503abda77ae50d624bd328c0057", - "component.diff.hunk-content": "79ad0dfc599f9bc246a6618c85bc1dc59744537f", - "component.diff.hunk-lineNumber": "bccfad80b84e35edf4b47af2ca30057eba2b2ebf", - "component.diff.hunk-content-color": "68c5d6a95d475f7275062e3eb58dba464df3d059", - "component.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", - "component.input.text": "df946237ac2ea0d177f3f2818a673fdf876944c7", - "component.input.placeholder": "85d7632aba08fd476083e508cc2660b17c30981a", - "component.input.icon": "75ca1f38c16fbd5e2697a36c74b0b1dd01f3f5c0", - "component.input.background": "585327333fbbf97bb8db21fbc613025719ca8a87", - "component.input.border": "911dac823dac21c9ccf4e35e10b2eb82a9c6f0ef", - "component.label.text": "80403cd630bba01a064550d9783313227b1d010f", - "component.link.default": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", - "component.link.visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", - "component.nav-tabs.unselected.text": "c085805657bb81574da85d3cb29f89ca08980daa", - "component.nav-tabs.selected.text": "16aa825c8038347237cbe91f7eeece4d2a8d1a2b", - "component.nav-tabs.selected.border": "3427b967112facd59f09fa310c863d7193ea4ffe", - "component.nav-tabs.border": "791d71ca187934e4b98ddff04bc9447a10358699", - "component.nav-tabs.background": "b92549e37390005f2bd1cfce06f9dfb8f67e39e0", - "component.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", - "component.pipeline.card.background": "f207dcff97f000326c4f28293fdbd2830860ce54", - "component.pipeline.card.border": "aa9d9528b1e8e25f9e6dae387b76d9beb2de35a8", - "component.pipeline.card.running.border": "179c0e4d47becc896eb1fbb7f9e8461779b3f680", - "component.pipeline.card.error.border": "1c0b41b41e25250cfb65bdb539bd573be66b0d00", - "component.pipeline.card.completed.border": "14251a54f431aae617af6b9577454a0e212ad76f", - "component.pipeline.card-canvas.1.background": "01bd392d5ddafe85e5575296d08254e52054ba8d", - "component.pipeline.card-canvas.1.border": "b9510abf89f82fb7b779bb730caa1bf393c83bd4", - "component.pipeline.card-canvas.2.background": "87b6b3e65b995fc4180dfb7bf613efb0098d1fff", - "component.pipeline.card-canvas.2.border": "1f9fa1e95134d87995a21738a3877f1c15158e5e", - "component.pipeline.background.dotes": "2784742abff27552789cdd4f2b51cab1331abb4a", - "component.sidebar.background": "8b6619fafae38e8ad94fffd488f2cf53d3c31d76", - "component.sidebar.border": "2263230eae16609a3d95ba5863aa3cc343010131", - "component.sidebar.separator": "a0c913dd38e81e3b2c20ee17642433da6da5f147", - "component.sidebar.hover": "4925b4511178bd2853a6b7b329683d036508aec1", - "component.sidebar.selected": "31f335ecde0aedb12407221718069f5b13574d41", - "component.sidebar.item.unselected.text": "9609e0ad8d79127a3784876f0204d02964f09e43", - "component.sidebar.item.unselected.icon": "5afba128858cf7494fb8a326a435860faf00b0ee", - "component.sidebar.item.selected.text": "5f1daf88cebaea07bd4c2a57c862638340827496", - "component.sidebar.item.selected.icon": "18325fda8139122c4a7cdf6debe2cd1f25d120b7", - "component.sidebar.logo.text": "a3ffa09fdf368badab24aecdbd26709ed7b3c2b2", - "component.sidebar.logo.icon": "c572d382a2018718d719f6a427d31fc9a42f57bd", - "component.sidebar.search.background": "33822e390046e5ec8f71a07fc041514a28778e74", - "component.sidebar.search.border": "f2044f7e8cf503f8809a48a14a88c5ef6466176f", - "component.sidebar.search.placeholder": "665cc00a32edd27b62371ee820d3c3250e629e78", - "component.sidebar.search.btn.background": "70c80e61b9ec397214c809c51de4fdf8177185da", - "component.sidebar.search.btn.border": "1c434c7d16cd4ba880e2d57520c90bc37f6b3879", - "component.sidebar.search.btn.text": "589c7d0162d67165a8752ea54a2c63bb63ee3ad7", - "component.sidebar.footer.username": "68298a8f471bb04f2f0305d9433a2b59613abd8d", - "component.sidebar.footer.data": "6a681d2abb90c2b62a39e20a1d29419c5086f01a", - "component.scrollbar.thumb": "9818c03d003381a966d08d3c6da75af8468bb8ef", - "component.selection.unselected.item": "7a7cad2aa2d6b2803a52eb26c78ea177b84ce241", - "component.selection.unselected.background": "a63ba949d12afc99020e77f95d0538bddba457b3", - "component.selection.unselected.border": "6ef997ebe03bb209ca568a648eb0cc8be69746a6", - "component.selection.selected.item": "f1f43c8acf2d4da10ee2e0d164d4dbe955816018", - "component.selection.selected.background": "1d1bbb9958f047744b66861fd8bd75dc2726dc25", - "component.selection.selected.border": "44b31378ed175b87b50ebad88cfd4a73a66ab9d5", - "component.separator.background": "9f4c82c269bc5aff0fa55d52a0ed59f914057be0", - "component.slider.track.base": "34dc3b5be6733e38f6c28d24d4f3699b2d7ea6f3", - "component.slider.track.progress": "38d8cac26c1cfb91293198eee25299e4aef9c1d8", - "component.slider.track-segments.base": "cb752791a51ff48c6d481426a1affb15048a152a", - "component.slider.track-segments.progress": "a7943fda0e4646e7018046354a9be54cf7d03075", - "component.slider.handle.background": "5c423cc3b672079f1e7dc0d1c8170dade368711a", - "component.slider.handle.border": "94347a2ed2900445946d18c653fb179b8602c533", - "component.status-indicator.completed": "c4c3bce2d28c84c25db4f444f9144b94523737b7", - "component.status-indicator.cancelled": "5aa15732d9ebc41f14b111e252819e2e36617124", - "component.status-indicator.warning": "4dc6e5ea4c736869aee4ebd0ee006f2d73861423", - "component.status-indicator.running": "07ce029f27cf34bf8d6fe3b9a6a600be01c8947e", - "component.status-indicator.merged": "d9eb24404452e6cc2617094fe8f29c69a760ea55", - "component.status-indicator.action-required": "2f1b8543c44b5d93cebddd80b5a9ee2d60fdb146", - "component.status-indicator.waiting": "62f68d300850ce20cf0be8c07d82a41bf1a56ecd", - "component.switch.unselected.thumb": "94d5f0b3a97924583ff697d56db74727b133ba95", - "component.switch.unselected.background": "a8ae87c7bb7ba7f4bfa71f2fdd5f404d19c3a1be", - "component.switch.selected.thumb": "cf6964ec11d69899d5dd39e82d322ea544367e90", - "component.switch.selected.background": "bba05ff96eae08a4adc31a6406e417022d9e5dad", - "component.table.header.text": "65cfc045aa01e3d3eeae4a227cac9be150839db8", - "component.table.header.background": "137c4f2e14bb8cadaf6f900a443700fe928a1fcd", - "component.table.row.alternate-background": "2863f92db433f88f24f62dda4cc9fd50c48130be", - "component.table.row.border": "445d945c4fe4426c3b73cf6f8fe0a572e4525798", - "component.table.cell.text": "73a28f25ba54aff507877ecbfd9942a6ea9f3cea", - "component.tabs.background": "8689ee01219675fb951a2517c2397fba52487971", - "component.tabs.border": "e5bc8cfac224234021c11b381f505da5fcac84ed", - "component.tabs.item.unselected.text": "4af8a5b79c55621f1ed11a7b6fc605657934dc1e", - "component.tabs.item.unselected.background": "fa041cdeb34ba5da6f1bd4cd6d8bb4b8273e0e70", - "component.tabs.item.unselected.border": "79b1a6fe839c012efec923edf40b3bfa2bcdab19", - "component.tabs.item.selected.text": "d048f7001829ff9949b2712b8ca746c8f3f49767", - "component.tabs.item.selected.background": "33269e9854800d565f728ba2a85c5cd3e549b5e8", - "component.tabs.item.selected.border": "11b7e5aeb83fd2f5d968021c750af2ceb5ba5841", - "component.tag.blue.text": "b35e0aebd9d1ebf0fd5d24bbd5ad184db9e11b86", - "component.tag.blue.background": "072fc2901d8ad0199c07bc339d46db086c7b0379", - "component.tag.blue.background-subtle": "67307c003cb91d76e00ef0f3777318e25efac628", - "component.tag.blue.border": "680fb2a6a11251e2619789595cd28c7861aaa530", - "component.tag.brown.text": "b48491f46d15503df99e2d8d9394aa552d09461b", - "component.tag.brown.background": "90b0ee0df4ebe7f06bfd07a7acbe812a45d621a4", - "component.tag.brown.background-subtle": "134ffd2a91ef027e197db6a5331d2726bc080ad6", - "component.tag.brown.border": "675776ff7a30540c297579d72b7f00779d778c14", - "component.tag.cyan.text": "6bf9361c5931ba40663d2c412f28f15382498517", - "component.tag.cyan.background": "83107c8cff314c553ed2cea5c9af1ff3356485e5", - "component.tag.cyan.background-subtle": "7f2724127eebb6e01713828af3736cd2e3734436", - "component.tag.cyan.border": "3286065f931626298e8f3dab2328297e83a79771", - "component.tag.green.text": "699a30f1d5f76ed4e631faa3da63be65e88af039", - "component.tag.green.background": "8b06c35974700260dff1a712c0a3976d4ddb0df5", - "component.tag.green.background-subtle": "c4f47c34772d8367bc3b00645420511f37aaecad", - "component.tag.green.border": "db85545b7d00ef9e199bf863dcdcc2be520f520c", - "component.tag.indigo.text": "d641d4626278e4d17ff4d98202112da9580a6b89", - "component.tag.indigo.background": "bb4af9a068f716c2f0b4f77c228b88009ac049c9", - "component.tag.indigo.background-subtle": "877e3b4ee6040ed581a8349c8fdb5e49ed36dfe0", - "component.tag.indigo.border": "885fdb80c956855c30666c660d5839dc357d1f5f", - "component.tag.lime.text": "763399447b243f761b7cce55f7dcf2fbb1797ee3", - "component.tag.lime.background": "d51cede4c823e16ac204bcaddb65d49c325c3cbe", - "component.tag.lime.background-subtle": "556934df078200ab014c762eeaa04deecd05422e", - "component.tag.lime.border": "fbb53e37ef7cb87cfae5298e69a5ffe4f99a23a7", - "component.tag.mint.text": "d3d406bffbadb1b894e4bb6aef7b1f5a1945094c", - "component.tag.mint.background": "04568a7d0bff5fbc11600bf840916f5451a0fe62", - "component.tag.mint.background-subtle": "1d39716bceda8510beb02e19847c391523e3690a", - "component.tag.mint.border": "c703cecfc8bd82c593dc9d81ce18748edd6ecf4d", - "component.tag.orange.text": "ba407492439b283fedf30a8ab8b16774c0931a9f", - "component.tag.orange.background": "ef766412f340a4aa62c8888a6fdfb2890f3ea207", - "component.tag.orange.background-subtle": "05e823662de8b1f99a062cea3c0f24df69b29362", - "component.tag.orange.border": "2f3023f2311c12acb44cdd28beb888f64d6d2183", - "component.tag.pink.text": "83b73e0e328485233004d42baa8a0948ff2198b0", - "component.tag.pink.background": "b23a211249a71f32bf15757316d0596fdb395962", - "component.tag.pink.background-subtle": "c144f19e07b839d68f20eb5c51ebd94e0f333a82", - "component.tag.pink.border": "b4874a81a08261362f3d8237833b80e68a851b76", - "component.tag.purple.text": "9869d8aad416ac3f9e530b0d62b05dda66906de4", - "component.tag.purple.background": "bc59008310427ba5883f71079b19b8cb4c6dd862", - "component.tag.purple.background-subtle": "a3598602d6e6b1d03f638f1a941801f147f4657a", - "component.tag.purple.border": "de1d577bd170613ab46460e9c50ca8de420152f6", - "component.tag.red.text": "aca8c1832317ac859b4263769855f423840a8569", - "component.tag.red.background": "9008e05416a00096c234511275b92be7204363b6", - "component.tag.red.background-subtle": "986bdd3f8d16488337ca9f46b71b04195d7578b0", - "component.tag.red.border": "f7f9067262546ee6eb77955e38aa0a451fc7f98a", - "component.tag.violet.text": "2ab996ff3465a0b97dee4d7c5606df3d46ab2a07", - "component.tag.violet.background": "4c9b9c2658479fc0e56894975a9b9b8d76df5b00", - "component.tag.violet.background-subtle": "fded9a84a20755592f57f081ebb594bfbaf8cfb3", - "component.tag.violet.border": "77de89ef1ab5168b7ff5e329bde8608047149a04", - "component.tag.yellow.text": "cadfcb4d0fe72fd5828cd764d54198026520e10c", - "component.tag.yellow.background": "a29464cd2a618a77586cb8760478a4d82b12b3ca", - "component.tag.yellow.background-subtle": "1b262be32c5779f024da5ad5696c805a83eb96c7", - "component.tag.yellow.border": "b595821fd5ef662361820415bb878e8ef4ab8939", - "component.tag.gray.text": "e7608c51a2421de226afebbcb909180c8a0cdb5a", - "component.tag.gray.background": "9bcc758ef67bbaac88637e99a702da5d7f7a3144", - "component.tag.gray.background-subtle": "76dfa99dd57cbaf2e7cbec9511cd1e1ddd92ee0e", - "component.tag.gray.border": "02e03f32969f9e6120bb6c7a3b781a5446f1bef1", - "component.toast.default.title": "f791d24eeab59c12cf4aad84f4677099bb4a01c1", - "component.toast.default.description": "6000da4ada3b9445750fb4b7b990726df120c271", - "component.toast.default.background": "5b9e9ea5b7de018a92d3deb902257e4e2bbb49f9", - "component.toast.default.border": "f74755bc7843dc9d7c788c54178b7ce3b83dea3f", - "component.toast.danger.title": "b5ad1c43fcee32eb251b980e884e77ea137c3369", - "component.toast.danger.description": "d281b5c13f2a4a293042f52b168e39f8bec398da", - "component.toast.danger.background": "8ba5c70e994ab44aeb72b3ed7f26ca9646d59cc0", - "component.toast.danger.border": "7f5252c13b96825084248b367f36377bb003ca96", - "component.tooltip.text": "b79a7ec441cdc7c6eee9313602f081d063327c1d", - "component.tooltip.background": "a35d0240a1c4de13350e6a4770dd1703a90a9227", - "shadow-color.0": "c0c282f63e107374a732d74c1742cf60d52e6e5c", - "shadow-color.1": "1ec33a9c84353664d23cd23d6c033d1c330c149a", - "shadow-color.2": "6200a000044d8dbee421ed4afb0c3ff42febb6ef", - "shadow-color.3": "77d99afb159d8e193a82f615dd84de3214e00703", - "shadow-color.4": "2b2e0307d252bdc6db53a23ce2cc2e9bb4f6b914", - "shadow-color.5": "5a6c707240bab54cb4403f47262abfe0756efc9a", - "shadow-color.6": "928283d00759150575a8f155da90180a582be438", - "shadow-color.inner": "6cb5a98fba0b13e952859b9f023259b5c06cfd1a", - "gradient.ai.gradient-stop-1": "8db516caa68afc5b8fdd6fc6e5a9bad7715c5f26", - "gradient.ai.gradient-stop-2": "33930f41665251a281973a37847f357480aedca3", - "gradient.ai.gradient-stop-3": "c9e14c3db8e622b10b1cd3e860115cd6f876ae49", - "gradient.ai.gradient-stop-4": "6e7d0850d7eb1e699f87b41f6ffd4cb8d73d72e8", - "gradient.skeleton.gradient-stop-1": "5427016b990b75f0d1ce60eef8cb9b96d75fbde2", - "gradient.skeleton.gradient-stop-2": "01442c311e6da751c30c3518fc32970306767274", - "gradient.skeleton.gradient-stop-3": "7fda4c834a3daf0c56bb59777c525670ae2dee3e", - "gradient.pipeline.running.gradient-stop-1": "0c187d1ebb015ec66bac356009795316f84807ae", - "gradient.pipeline.running.gradient-stop-2": "d1251f86c91bd0f29d8ac8cfa01056bc307156b4", - "gradient.pipeline.running.gradient-stop-3": "b09bdab234cdf7c204cb153ec94ea0a9b2bb4976", - "gradient.pipeline.arrows.gradient-stop-1": "0465e74baaf10a12f23b9eaa40fc1ae08485a0d5", - "gradient.pipeline.arrows.gradient-stop-2": "4cadc4f9a5e66f28eaa27fb54b6ce538ea430c7d", - "gradient.pipeline.arrows.gradient-stop-3": "5af16d4ae6b63ff8dcf3254009e712db4ac1a3f9", - "gradient.pipeline.card.background.gradient-from": "8404a4e146121987426681accb996902179fad72", - "gradient.pipeline.card.background.gradient-to": "037bbd7fb410d05993a48594626a7babb32605a6", - "gradient.pipeline.card.border.gradient-from": "342926ec7179e7cbe133981050c1e1e41d94ed7a", - "gradient.pipeline.card.border.gradient-to": "8e39428cc5ce20f3593127f2ef71f180b38ee9a4", - "gradient.pipeline.widget.number.gradient-from": "dc372cb50eedf6023cd80cb6a4520e5fdf91358b", - "gradient.pipeline.widget.number.gradient-to": "e505c8d9dd140f5a671c1291ffd519fcff5c3e2c", - "gradient.pipeline.widget.blob.big.gradient-from": "b518524b25a5b95804988c640c4d52ba7ebd4599", - "gradient.pipeline.widget.blob.big.gradient-to": "80a493af10245e0ebbc6a51f5452d61d836a3754", - "gradient.pipeline.widget.blob.small.gradient-from": "8d7be31e69f0e54dd2e493d9051c2268078ea5ed", - "gradient.pipeline.widget.blob.small.gradient-to": "198813cf6242881ce0e0d030ca22ef31f9190d13", - "iconStrokeWidth.xxs": "751ceaa292e27736009bef894b62f83c1b2d66d8", - "iconStrokeWidth.xs": "77ca59c88a0b47972554b1db3f6469a230a6ad8c", - "iconStrokeWidth.sm": "e445b22e1f18af07002a1dc76f900dada5477383", - "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", - "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", - "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "component.dropdown.item.text": "2f1f1ea9d368ec8be380803506fbf657cabe6ac0" - }, - "group": "mode" - }, - { - "id": "a0d2ea5d2b605e20e7a3bd70750268d6f85952bf", - "name": "light-dimmer-deuteranopia", - "$figmaStyleReferences": { - "shadow.0": "S:a2ed3778198048e91067a04633c27ba20e9fcbec,", - "shadow.1": "S:947694488889f7271c428950bec937ee79f8a536,", - "shadow.2": "S:70378f090cb66b03ee4b18e25742743934f37757,", - "shadow.3": "S:aa7e83fd47e75f5a1ae3e17f64417d5e9fcb96ae,", - "shadow.4": "S:5dfba690094db266c4ab7686fccbbedd8c16385f,", - "shadow.5": "S:d6752151a8dd3bd4b4bf12ad15a80c522f760731,", - "shadow.6": "S:da8e7b5b0f1352215fbaab66eff62a3e19d22b67,", - "shadow.inner": "S:2805cdc40176a4707d5cfc549b4c12e7ec4e74ff,", - "ring.focus": "S:062018f6483f54f1255b952aa1759b028d502ac3," - }, - "selectedTokenSets": { - "mode/light/dimmer-deuteranopia": "enabled" - }, - "$figmaCollectionId": "VariableCollectionId:1340:156918", - "$figmaModeId": "1389:17", - "$figmaVariableReferences": { - "background.1": "633e5f77aa1bd1bd133852d8372b9c9f1231a9e4", - "background.2": "14e8d4b56cc273b508af8a2c58cb00e99e08d1d3", - "background.3": "33554ff11e1eab35e50aa3570f51d53f16f46d6a", - "text.1": "38382b9984a98f9d26692a7f2882dfb5c5d51825", - "text.2": "115f62efd02491e85a63dfd601b03725d3711f23", - "text.3": "1c7327f01cf759b17fd0523cb540afa8700c1dc7", - "text.accent": "0b3cd5357659e6542cca163ccfd96c0cac059203", - "text.success": "ee56057b81e6d0872a84ca6b29affc8911fe333e", - "text.danger": "c7e38d7c7afc899f4d40392dbd6bc5ed6580264d", - "text.warning": "b03334e4c9db4b76269e4be886df6c1abf74d0ca", - "border.1": "5ad2231a611605964ba70f80e7aabb48f04bc704", - "border.2": "9084bef359e38136e0dddac25a464896456a9b1a", - "border.3": "5ff5d5233f7cb0233ce7634bc480026668c818f6", - "border.focus": "8db219e896acc4d828aaaf4add646d96540a84ea", - "border.success": "b13758973865eab0b4d79028a48e457eae8bec47", - "border.danger": "33d53c1486021bb3c9edce4123b484a2aabc8de0", - "border.warning": "027e57e08a1edcaaa7fbe033902bb3f65497abb4", - "state.hover": "78426caca2a07ee56132762a720ae07e2810f03b", - "state.selected": "ef914056c9c9dbaef00fa8795702a3cb933ee761", - "state.disabled.text": "967ab1b863941c100f58cc55e611ee2709051f01", - "state.disabled.background": "7a192b5ddcc570f0c8e3a5dbfd54d780e2832bbd", - "state.disabled.border": "067fd26e80ad39a28f738a3b76d21d354092d551", - "component.accordion.title": "5e49d6ddf7f2b21724b474d4a5545256143dce54", - "component.accordion.description": "bc47401a69d07fa71f0371765ed940745fc7a5b9", - "component.accordion.chevron": "5dd530f96134323125031668d4ea98a36ea0de86", - "component.accordion.border": "0b3fcc0e02a2a86625b2b4a9cfeebfad9486bc3a", - "component.alert.default.title": "d8e59ed205399e9727b0dcecdccad3d8daaaa622", - "component.alert.default.description": "f9ec7fec91747435740f000fb642f9009e8fc2db", - "component.alert.default.background": "7fbbdfcc33a3051394f89675798db2159741a5fc", - "component.alert.default.border": "549692bf2f70f6b40c7d55259f8890189aa6cc98", - "component.alert.danger.title": "c8da1cdbba8e0f86edda5fd3869f6186d53881ca", - "component.alert.danger.description": "366849405bd53c78f0b73d72585034a52f05d9a7", - "component.alert.danger.background": "5756a9bdba027993a9879b32ed129e3034028cdf", - "component.alert.danger.border": "a1a3be9eefab6edf2e996a46537872680dc45a09", - "component.avatar.text": "23018f4c7f22c4afb3b7e49f585a1fbb591209de", - "component.avatar.background": "57703fddbd26d363509fdba3aea037bd2f515ee0", - "component.avatar.border": "d651f4cb9082aa4d6e6af2c5abab700d683a5c85", - "component.badge.default.text": "ab90828e3b8c6adce5dc10bf85107b001b958e95", - "component.badge.default.background": "706b070b298e2d2a97665baf7af05187eefeb4fe", - "component.badge.default.border": "a935a2968ca4ecfb8cc58a18f31ae8fe65eb516b", - "component.badge.neutral.text": "82d39f1786c4371303ae21e4c02db79989c54e36", - "component.badge.neutral.background": "f5480b1a2b648fdb0561acda7515c38271cfb04b", - "component.badge.neutral.border": "00f05792ddf6e53bff79346df6a34144426d50e0", - "component.badge.success.text": "71014a6138e8747257a21144f8114b906cfe0f0a", - "component.badge.success.border": "190589c6021debb7bb676f05ac7f063c237fd4aa", - "component.badge.success.background": "177eb9f406784ddb958232cd643ebbb3490a53d4", - "component.badge.danger.text": "6c0c04f17c2bc0ee085d09bf0f205dcbc66c1e17", - "component.badge.danger.border": "6bb014acbbd68a796ed0c4d8c4f73e8e9e619923", - "component.badge.danger.background": "4162b10332d17800585d97ed45e45d69c2006808", - "component.badge.warning.text": "8581620d95e5b92a8c85341ebf63f21fcf7133d0", - "component.badge.warning.border": "71cb519182108ac72ffef823935546e4bff62bbc", - "component.badge.warning.background": "74c13457a85684a054426bd833859fe93eaec978", - "component.badge.running.text": "0b0c1be217e557a5b14c1cb25e988e4ac6d40583", - "component.badge.running.border": "27d3c48d3c316bc4f980282759b5e82f8aaaf49d", - "component.badge.running.background": "a85fddc26baf586ac7ba79e381e5f8fefca87c65", - "component.badge.merged.text": "a83d66ef53e8a094a62f2b32a4d17e58d552b1ef", - "component.badge.merged.border": "755392bca643af0a3fe5492069881a870aa11dc3", - "component.badge.merged.background": "4f4c81b1fe43bfe0d721a22d0aeb93079776cf6d", - "component.badge.ai.text": "bb4daee92817073da0366090742d0a17babb5728", - "component.badge.ai.background": "c5764a2304bf0e8a153c9ce0da20827696a76b41", - "component.breadcrumb.item-inactive": "2f009ca6cafb50c994205c9df02ee2d2503f7d23", - "component.breadcrumb.item-current": "7b502cc2e72f66bb501fdc5f480d0133d1b3841a", - "component.breadcrumb.separator": "1cd28c3ff97ab2f529a19c632d89dd44af0aad80", - "component.btn.primary.text": "9d32f032da93c9aab8b3bc6087c26aa12f507ad7", - "component.btn.primary.background": "410d584a3469233e067d0592a366fdebbe1049bc", - "component.btn.primary.border": "1491ac71f9681307c2d6528e443504e079061988", - "component.btn.secondary.text": "12c93d1b08ae50645a3b8f59256fcec00a4f84ca", - "component.btn.secondary.background": "86434310c95f5c055783011cc0e7c7918f67a35c", - "component.btn.secondary.border": "66bda91f87154efd3cefdc7a634ecb8afa8cd285", - "component.btn.outline.unselected.text": "9cf2c495178d6fdfd8f1360376242acbd4dc5e75", - "component.btn.outline.unselected.icon": "af1510c6050f671219d2089e0e59d5febb4422d6", - "component.btn.outline.unselected.border": "2b3013d632e566301e9f5f1a5cbb6aab4e7ec53f", - "component.btn.outline.selected.text": "13b50089245dec1899db2012412efcf649e2c0b4", - "component.btn.outline.selected.icon": "2bdf2c92b22e814109f4e05ec4d41d92f934a15d", - "component.btn.outline.selected.border": "ef10f4599233f62203def151b386013ddaa63afb", - "component.btn.ghost.unselected.text": "43fa10dd413cddb9a2e2142ead9ca3b4a91b49a6", - "component.btn.ghost.unselected.icon": "5ce332f51238b374104ec53067d685c26882f38e", - "component.btn.ghost.selected.text": "74cbf3b86016e05517f8c7bc64652281c940363e", - "component.btn.ghost.selected.icon": "1d8c6206a136d9c176ffba600a1e94618c4b96f8", - "component.btn.success.text": "52a336440e013bbc849ad67a43d0e136cf4f0b51", - "component.btn.success.background": "608ca6930129b4e5ff36d7f38508ae2537b66629", - "component.btn.success.border": "1f74d9985a10fe20e0acc4647cf4949005e9d4f1", - "component.btn.success.state.hover": "d05bde38a6539a11e3ccd87345af113ccd6bd113", - "component.btn.success.state.active": "f6e48e68dba6c32de27fadcaca3d1959f081d2e5", - "component.btn.danger.text": "49c02562362b8f775cfc2c4c614ecd646dcc2716", - "component.btn.danger.background": "0b015d0a4f456781969d7ffaf135c7c2a8858440", - "component.btn.danger.border": "9f99ee56f1ae2b7eb2f98300b83d4f53b15fd763", - "component.btn.danger.state.hover": "e7756e1d022d893bfa5fdd619f181d26fb7b117b", - "component.btn.danger.state.active": "23c7c85ff6104e098a208b6f4b86c1d0eef0f543", - "component.btn.ai.text": "380368600319fa12b73538ff52acd9d0e977e367", - "component.btn.ai.background": "8c9a1d07e05837f50588b642a4b51462f883887d", - "component.card.background": "256878745d17a46b7159919d8e30a3e960f59575", - "component.card.border": "3688ffcc56c4fb44dc0e221b8e09a958fd9e509d", - "component.dialog.title": "e6e0ff2bf1f3802eb21492e8b833c5f5e679cd82", - "component.dialog.description": "301509fcf2faac8497b2136f7879b9b0b3c64433", - "component.dialog.background": "ff2918d712798a4b487b6f6e5befe7b3eef59883", - "component.dialog.border": "4a6cb3732ad8b36bb9de0d15cbed575c87996088", - "component.dialog.backdrop": "893e60ed671f891241a3084707057185398446ed", - "component.dropdown.background": "09b2dca27ba9efabfe838d713a14ca6e6ac46685", - "component.dropdown.border": "c8cdfff63f4e142d651070ff1056b69a638aaab7", - "component.dropdown.item.delete.text": "864396a8c9b5df0fd948ded7d520ded936d74a8b", - "component.dropdown.item.delete.state.hover": "308dc9064be8e754f8385b0e8ff5489563d7c984", - "component.diff.grey": "43bf4f466a6e231c9951a639313740579c29d824", - "component.diff.add-content": "eb4eccf789a2bda6f3d3875c3310ef0579fd3555", - "component.diff.add-lineNumber": "61583aa6e36aaddd0be173a4a082a450e2522d3a", - "component.diff.add-content-highlight": "ad544fc527ca8b4c297993fe0722b8a7a96ef903", - "component.diff.add-widget": "c1def698ab707194d8f1558e16b05c55d50920d9", - "component.diff.add-widget-color": "a27c504a1f1151974669cf06054c1d0f704ecc38", - "component.diff.del-content": "465e6eb3613967f489cfee4b04f0b283b9e88f91", - "component.diff.del-lineNumber": "4cbe83072b6781d6e3edff645ccb2fb7426c5628", - "component.diff.del-content-highlight": "3e635e401a1a37a259211d093bef70e3a0c507ea", - "component.diff.plain-content": "984456faee2f6a5c202cfd76078ef5b6cd3a05f1", - "component.diff.plain-lineNumber": "6a5550287e7c58afa9d2375c5bfdca4d6c214cf1", - "component.diff.plain-lineNumber-color": "7c1186d20725b53cbefe87f56c5bc6db4e77d898", - "component.diff.empty-content": "712d93a0c1bc9503abda77ae50d624bd328c0057", - "component.diff.hunk-content": "79ad0dfc599f9bc246a6618c85bc1dc59744537f", - "component.diff.hunk-lineNumber": "bccfad80b84e35edf4b47af2ca30057eba2b2ebf", - "component.diff.hunk-content-color": "68c5d6a95d475f7275062e3eb58dba464df3d059", - "component.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", - "component.input.text": "df946237ac2ea0d177f3f2818a673fdf876944c7", - "component.input.placeholder": "85d7632aba08fd476083e508cc2660b17c30981a", - "component.input.icon": "75ca1f38c16fbd5e2697a36c74b0b1dd01f3f5c0", - "component.input.background": "585327333fbbf97bb8db21fbc613025719ca8a87", - "component.input.border": "911dac823dac21c9ccf4e35e10b2eb82a9c6f0ef", - "component.label.text": "80403cd630bba01a064550d9783313227b1d010f", - "component.link.default": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", - "component.link.visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", - "component.nav-tabs.unselected.text": "c085805657bb81574da85d3cb29f89ca08980daa", - "component.nav-tabs.selected.text": "16aa825c8038347237cbe91f7eeece4d2a8d1a2b", - "component.nav-tabs.selected.border": "3427b967112facd59f09fa310c863d7193ea4ffe", - "component.nav-tabs.border": "791d71ca187934e4b98ddff04bc9447a10358699", - "component.nav-tabs.background": "b92549e37390005f2bd1cfce06f9dfb8f67e39e0", - "component.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", - "component.pipeline.card.background": "f207dcff97f000326c4f28293fdbd2830860ce54", - "component.pipeline.card.border": "aa9d9528b1e8e25f9e6dae387b76d9beb2de35a8", - "component.pipeline.card.running.border": "179c0e4d47becc896eb1fbb7f9e8461779b3f680", - "component.pipeline.card.error.border": "1c0b41b41e25250cfb65bdb539bd573be66b0d00", - "component.pipeline.card.completed.border": "14251a54f431aae617af6b9577454a0e212ad76f", - "component.pipeline.card-canvas.1.background": "01bd392d5ddafe85e5575296d08254e52054ba8d", - "component.pipeline.card-canvas.1.border": "b9510abf89f82fb7b779bb730caa1bf393c83bd4", - "component.pipeline.card-canvas.2.background": "87b6b3e65b995fc4180dfb7bf613efb0098d1fff", - "component.pipeline.card-canvas.2.border": "1f9fa1e95134d87995a21738a3877f1c15158e5e", - "component.pipeline.background.dotes": "2784742abff27552789cdd4f2b51cab1331abb4a", - "component.sidebar.background": "8b6619fafae38e8ad94fffd488f2cf53d3c31d76", - "component.sidebar.border": "2263230eae16609a3d95ba5863aa3cc343010131", - "component.sidebar.separator": "a0c913dd38e81e3b2c20ee17642433da6da5f147", - "component.sidebar.hover": "4925b4511178bd2853a6b7b329683d036508aec1", - "component.sidebar.selected": "31f335ecde0aedb12407221718069f5b13574d41", - "component.sidebar.item.unselected.text": "9609e0ad8d79127a3784876f0204d02964f09e43", - "component.sidebar.item.unselected.icon": "5afba128858cf7494fb8a326a435860faf00b0ee", - "component.sidebar.item.selected.text": "5f1daf88cebaea07bd4c2a57c862638340827496", - "component.sidebar.item.selected.icon": "18325fda8139122c4a7cdf6debe2cd1f25d120b7", - "component.sidebar.logo.text": "a3ffa09fdf368badab24aecdbd26709ed7b3c2b2", - "component.sidebar.logo.icon": "c572d382a2018718d719f6a427d31fc9a42f57bd", - "component.sidebar.search.background": "33822e390046e5ec8f71a07fc041514a28778e74", - "component.sidebar.search.border": "f2044f7e8cf503f8809a48a14a88c5ef6466176f", - "component.sidebar.search.placeholder": "665cc00a32edd27b62371ee820d3c3250e629e78", - "component.sidebar.search.btn.background": "70c80e61b9ec397214c809c51de4fdf8177185da", - "component.sidebar.search.btn.border": "1c434c7d16cd4ba880e2d57520c90bc37f6b3879", - "component.sidebar.search.btn.text": "589c7d0162d67165a8752ea54a2c63bb63ee3ad7", - "component.sidebar.footer.username": "68298a8f471bb04f2f0305d9433a2b59613abd8d", - "component.sidebar.footer.data": "6a681d2abb90c2b62a39e20a1d29419c5086f01a", - "component.scrollbar.thumb": "9818c03d003381a966d08d3c6da75af8468bb8ef", - "component.selection.unselected.item": "7a7cad2aa2d6b2803a52eb26c78ea177b84ce241", - "component.selection.unselected.background": "a63ba949d12afc99020e77f95d0538bddba457b3", - "component.selection.unselected.border": "6ef997ebe03bb209ca568a648eb0cc8be69746a6", - "component.selection.selected.item": "f1f43c8acf2d4da10ee2e0d164d4dbe955816018", - "component.selection.selected.background": "1d1bbb9958f047744b66861fd8bd75dc2726dc25", - "component.selection.selected.border": "44b31378ed175b87b50ebad88cfd4a73a66ab9d5", - "component.separator.background": "9f4c82c269bc5aff0fa55d52a0ed59f914057be0", - "component.slider.track.base": "34dc3b5be6733e38f6c28d24d4f3699b2d7ea6f3", - "component.slider.track.progress": "38d8cac26c1cfb91293198eee25299e4aef9c1d8", - "component.slider.track-segments.base": "cb752791a51ff48c6d481426a1affb15048a152a", - "component.slider.track-segments.progress": "a7943fda0e4646e7018046354a9be54cf7d03075", - "component.slider.handle.background": "5c423cc3b672079f1e7dc0d1c8170dade368711a", - "component.slider.handle.border": "94347a2ed2900445946d18c653fb179b8602c533", - "component.status-indicator.completed": "c4c3bce2d28c84c25db4f444f9144b94523737b7", - "component.status-indicator.cancelled": "5aa15732d9ebc41f14b111e252819e2e36617124", - "component.status-indicator.warning": "4dc6e5ea4c736869aee4ebd0ee006f2d73861423", - "component.status-indicator.running": "07ce029f27cf34bf8d6fe3b9a6a600be01c8947e", - "component.status-indicator.merged": "d9eb24404452e6cc2617094fe8f29c69a760ea55", - "component.status-indicator.action-required": "2f1b8543c44b5d93cebddd80b5a9ee2d60fdb146", - "component.status-indicator.waiting": "62f68d300850ce20cf0be8c07d82a41bf1a56ecd", - "component.switch.unselected.thumb": "94d5f0b3a97924583ff697d56db74727b133ba95", - "component.switch.unselected.background": "a8ae87c7bb7ba7f4bfa71f2fdd5f404d19c3a1be", - "component.switch.selected.thumb": "cf6964ec11d69899d5dd39e82d322ea544367e90", - "component.switch.selected.background": "bba05ff96eae08a4adc31a6406e417022d9e5dad", - "component.table.header.text": "65cfc045aa01e3d3eeae4a227cac9be150839db8", - "component.table.header.background": "137c4f2e14bb8cadaf6f900a443700fe928a1fcd", - "component.table.row.alternate-background": "2863f92db433f88f24f62dda4cc9fd50c48130be", - "component.table.row.border": "445d945c4fe4426c3b73cf6f8fe0a572e4525798", - "component.table.cell.text": "73a28f25ba54aff507877ecbfd9942a6ea9f3cea", - "component.tabs.background": "8689ee01219675fb951a2517c2397fba52487971", - "component.tabs.border": "e5bc8cfac224234021c11b381f505da5fcac84ed", - "component.tabs.item.unselected.text": "4af8a5b79c55621f1ed11a7b6fc605657934dc1e", - "component.tabs.item.unselected.background": "fa041cdeb34ba5da6f1bd4cd6d8bb4b8273e0e70", - "component.tabs.item.unselected.border": "79b1a6fe839c012efec923edf40b3bfa2bcdab19", - "component.tabs.item.selected.text": "d048f7001829ff9949b2712b8ca746c8f3f49767", - "component.tabs.item.selected.background": "33269e9854800d565f728ba2a85c5cd3e549b5e8", - "component.tabs.item.selected.border": "11b7e5aeb83fd2f5d968021c750af2ceb5ba5841", - "component.tag.blue.text": "b35e0aebd9d1ebf0fd5d24bbd5ad184db9e11b86", - "component.tag.blue.background": "072fc2901d8ad0199c07bc339d46db086c7b0379", - "component.tag.blue.background-subtle": "67307c003cb91d76e00ef0f3777318e25efac628", - "component.tag.blue.border": "680fb2a6a11251e2619789595cd28c7861aaa530", - "component.tag.brown.text": "b48491f46d15503df99e2d8d9394aa552d09461b", - "component.tag.brown.background": "90b0ee0df4ebe7f06bfd07a7acbe812a45d621a4", - "component.tag.brown.background-subtle": "134ffd2a91ef027e197db6a5331d2726bc080ad6", - "component.tag.brown.border": "675776ff7a30540c297579d72b7f00779d778c14", - "component.tag.cyan.text": "6bf9361c5931ba40663d2c412f28f15382498517", - "component.tag.cyan.background": "83107c8cff314c553ed2cea5c9af1ff3356485e5", - "component.tag.cyan.background-subtle": "7f2724127eebb6e01713828af3736cd2e3734436", - "component.tag.cyan.border": "3286065f931626298e8f3dab2328297e83a79771", - "component.tag.green.text": "699a30f1d5f76ed4e631faa3da63be65e88af039", - "component.tag.green.background": "8b06c35974700260dff1a712c0a3976d4ddb0df5", - "component.tag.green.background-subtle": "c4f47c34772d8367bc3b00645420511f37aaecad", - "component.tag.green.border": "db85545b7d00ef9e199bf863dcdcc2be520f520c", - "component.tag.indigo.text": "d641d4626278e4d17ff4d98202112da9580a6b89", - "component.tag.indigo.background": "bb4af9a068f716c2f0b4f77c228b88009ac049c9", - "component.tag.indigo.background-subtle": "877e3b4ee6040ed581a8349c8fdb5e49ed36dfe0", - "component.tag.indigo.border": "885fdb80c956855c30666c660d5839dc357d1f5f", - "component.tag.lime.text": "763399447b243f761b7cce55f7dcf2fbb1797ee3", - "component.tag.lime.background": "d51cede4c823e16ac204bcaddb65d49c325c3cbe", - "component.tag.lime.background-subtle": "556934df078200ab014c762eeaa04deecd05422e", - "component.tag.lime.border": "fbb53e37ef7cb87cfae5298e69a5ffe4f99a23a7", - "component.tag.mint.text": "d3d406bffbadb1b894e4bb6aef7b1f5a1945094c", - "component.tag.mint.background": "04568a7d0bff5fbc11600bf840916f5451a0fe62", - "component.tag.mint.background-subtle": "1d39716bceda8510beb02e19847c391523e3690a", - "component.tag.mint.border": "c703cecfc8bd82c593dc9d81ce18748edd6ecf4d", - "component.tag.orange.text": "ba407492439b283fedf30a8ab8b16774c0931a9f", - "component.tag.orange.background": "ef766412f340a4aa62c8888a6fdfb2890f3ea207", - "component.tag.orange.background-subtle": "05e823662de8b1f99a062cea3c0f24df69b29362", - "component.tag.orange.border": "2f3023f2311c12acb44cdd28beb888f64d6d2183", - "component.tag.pink.text": "83b73e0e328485233004d42baa8a0948ff2198b0", - "component.tag.pink.background": "b23a211249a71f32bf15757316d0596fdb395962", - "component.tag.pink.background-subtle": "c144f19e07b839d68f20eb5c51ebd94e0f333a82", - "component.tag.pink.border": "b4874a81a08261362f3d8237833b80e68a851b76", - "component.tag.purple.text": "9869d8aad416ac3f9e530b0d62b05dda66906de4", - "component.tag.purple.background": "bc59008310427ba5883f71079b19b8cb4c6dd862", - "component.tag.purple.background-subtle": "a3598602d6e6b1d03f638f1a941801f147f4657a", - "component.tag.purple.border": "de1d577bd170613ab46460e9c50ca8de420152f6", - "component.tag.red.text": "aca8c1832317ac859b4263769855f423840a8569", - "component.tag.red.background": "9008e05416a00096c234511275b92be7204363b6", - "component.tag.red.background-subtle": "986bdd3f8d16488337ca9f46b71b04195d7578b0", - "component.tag.red.border": "f7f9067262546ee6eb77955e38aa0a451fc7f98a", - "component.tag.violet.text": "2ab996ff3465a0b97dee4d7c5606df3d46ab2a07", - "component.tag.violet.background": "4c9b9c2658479fc0e56894975a9b9b8d76df5b00", - "component.tag.violet.background-subtle": "fded9a84a20755592f57f081ebb594bfbaf8cfb3", - "component.tag.violet.border": "77de89ef1ab5168b7ff5e329bde8608047149a04", - "component.tag.yellow.text": "cadfcb4d0fe72fd5828cd764d54198026520e10c", - "component.tag.yellow.background": "a29464cd2a618a77586cb8760478a4d82b12b3ca", - "component.tag.yellow.background-subtle": "1b262be32c5779f024da5ad5696c805a83eb96c7", - "component.tag.yellow.border": "b595821fd5ef662361820415bb878e8ef4ab8939", - "component.tag.gray.text": "e7608c51a2421de226afebbcb909180c8a0cdb5a", - "component.tag.gray.background": "9bcc758ef67bbaac88637e99a702da5d7f7a3144", - "component.tag.gray.background-subtle": "76dfa99dd57cbaf2e7cbec9511cd1e1ddd92ee0e", - "component.tag.gray.border": "02e03f32969f9e6120bb6c7a3b781a5446f1bef1", - "component.toast.default.title": "f791d24eeab59c12cf4aad84f4677099bb4a01c1", - "component.toast.default.description": "6000da4ada3b9445750fb4b7b990726df120c271", - "component.toast.default.background": "5b9e9ea5b7de018a92d3deb902257e4e2bbb49f9", - "component.toast.default.border": "f74755bc7843dc9d7c788c54178b7ce3b83dea3f", - "component.toast.danger.title": "b5ad1c43fcee32eb251b980e884e77ea137c3369", - "component.toast.danger.description": "d281b5c13f2a4a293042f52b168e39f8bec398da", - "component.toast.danger.background": "8ba5c70e994ab44aeb72b3ed7f26ca9646d59cc0", - "component.toast.danger.border": "7f5252c13b96825084248b367f36377bb003ca96", - "component.tooltip.text": "b79a7ec441cdc7c6eee9313602f081d063327c1d", - "component.tooltip.background": "a35d0240a1c4de13350e6a4770dd1703a90a9227", - "shadow-color.0": "c0c282f63e107374a732d74c1742cf60d52e6e5c", - "shadow-color.1": "1ec33a9c84353664d23cd23d6c033d1c330c149a", - "shadow-color.2": "6200a000044d8dbee421ed4afb0c3ff42febb6ef", - "shadow-color.3": "77d99afb159d8e193a82f615dd84de3214e00703", - "shadow-color.4": "2b2e0307d252bdc6db53a23ce2cc2e9bb4f6b914", - "shadow-color.5": "5a6c707240bab54cb4403f47262abfe0756efc9a", - "shadow-color.6": "928283d00759150575a8f155da90180a582be438", - "shadow-color.inner": "6cb5a98fba0b13e952859b9f023259b5c06cfd1a", - "gradient.ai.gradient-stop-1": "8db516caa68afc5b8fdd6fc6e5a9bad7715c5f26", - "gradient.ai.gradient-stop-2": "33930f41665251a281973a37847f357480aedca3", - "gradient.ai.gradient-stop-3": "c9e14c3db8e622b10b1cd3e860115cd6f876ae49", - "gradient.ai.gradient-stop-4": "6e7d0850d7eb1e699f87b41f6ffd4cb8d73d72e8", - "gradient.skeleton.gradient-stop-1": "5427016b990b75f0d1ce60eef8cb9b96d75fbde2", - "gradient.skeleton.gradient-stop-2": "01442c311e6da751c30c3518fc32970306767274", - "gradient.skeleton.gradient-stop-3": "7fda4c834a3daf0c56bb59777c525670ae2dee3e", - "gradient.pipeline.running.gradient-stop-1": "0c187d1ebb015ec66bac356009795316f84807ae", - "gradient.pipeline.running.gradient-stop-2": "d1251f86c91bd0f29d8ac8cfa01056bc307156b4", - "gradient.pipeline.running.gradient-stop-3": "b09bdab234cdf7c204cb153ec94ea0a9b2bb4976", - "gradient.pipeline.arrows.gradient-stop-1": "0465e74baaf10a12f23b9eaa40fc1ae08485a0d5", - "gradient.pipeline.arrows.gradient-stop-2": "4cadc4f9a5e66f28eaa27fb54b6ce538ea430c7d", - "gradient.pipeline.arrows.gradient-stop-3": "5af16d4ae6b63ff8dcf3254009e712db4ac1a3f9", - "gradient.pipeline.card.background.gradient-from": "8404a4e146121987426681accb996902179fad72", - "gradient.pipeline.card.background.gradient-to": "037bbd7fb410d05993a48594626a7babb32605a6", - "gradient.pipeline.card.border.gradient-from": "342926ec7179e7cbe133981050c1e1e41d94ed7a", - "gradient.pipeline.card.border.gradient-to": "8e39428cc5ce20f3593127f2ef71f180b38ee9a4", - "gradient.pipeline.widget.number.gradient-from": "dc372cb50eedf6023cd80cb6a4520e5fdf91358b", - "gradient.pipeline.widget.number.gradient-to": "e505c8d9dd140f5a671c1291ffd519fcff5c3e2c", - "gradient.pipeline.widget.blob.big.gradient-from": "b518524b25a5b95804988c640c4d52ba7ebd4599", - "gradient.pipeline.widget.blob.big.gradient-to": "80a493af10245e0ebbc6a51f5452d61d836a3754", - "gradient.pipeline.widget.blob.small.gradient-from": "8d7be31e69f0e54dd2e493d9051c2268078ea5ed", - "gradient.pipeline.widget.blob.small.gradient-to": "198813cf6242881ce0e0d030ca22ef31f9190d13", - "iconStrokeWidth.xxs": "751ceaa292e27736009bef894b62f83c1b2d66d8", - "iconStrokeWidth.xs": "77ca59c88a0b47972554b1db3f6469a230a6ad8c", - "iconStrokeWidth.sm": "e445b22e1f18af07002a1dc76f900dada5477383", - "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", - "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", - "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "component.dropdown.item.text": "2f1f1ea9d368ec8be380803506fbf657cabe6ac0" - }, - "group": "mode" - }, - { - "id": "14096bcda91442f146b79b0f621c4aac26456134", - "name": "light-high-contrast-deuteranopia", - "$figmaStyleReferences": { - "shadow.0": "S:a2ed3778198048e91067a04633c27ba20e9fcbec,", - "shadow.1": "S:947694488889f7271c428950bec937ee79f8a536,", - "shadow.2": "S:70378f090cb66b03ee4b18e25742743934f37757,", - "shadow.3": "S:aa7e83fd47e75f5a1ae3e17f64417d5e9fcb96ae,", - "shadow.4": "S:5dfba690094db266c4ab7686fccbbedd8c16385f,", - "shadow.5": "S:d6752151a8dd3bd4b4bf12ad15a80c522f760731,", - "shadow.6": "S:da8e7b5b0f1352215fbaab66eff62a3e19d22b67,", - "shadow.inner": "S:2805cdc40176a4707d5cfc549b4c12e7ec4e74ff,", - "ring.focus": "S:062018f6483f54f1255b952aa1759b028d502ac3," - }, - "selectedTokenSets": { - "mode/light/high-contrast-deuteranopia": "enabled" - }, - "$figmaCollectionId": "VariableCollectionId:1340:156918", - "$figmaModeId": "1389:18", - "$figmaVariableReferences": { - "background.1": "633e5f77aa1bd1bd133852d8372b9c9f1231a9e4", - "background.2": "14e8d4b56cc273b508af8a2c58cb00e99e08d1d3", - "background.3": "33554ff11e1eab35e50aa3570f51d53f16f46d6a", - "text.1": "38382b9984a98f9d26692a7f2882dfb5c5d51825", - "text.2": "115f62efd02491e85a63dfd601b03725d3711f23", - "text.3": "1c7327f01cf759b17fd0523cb540afa8700c1dc7", - "text.accent": "0b3cd5357659e6542cca163ccfd96c0cac059203", - "text.success": "ee56057b81e6d0872a84ca6b29affc8911fe333e", - "text.danger": "c7e38d7c7afc899f4d40392dbd6bc5ed6580264d", - "text.warning": "b03334e4c9db4b76269e4be886df6c1abf74d0ca", - "border.1": "5ad2231a611605964ba70f80e7aabb48f04bc704", - "border.2": "9084bef359e38136e0dddac25a464896456a9b1a", - "border.3": "5ff5d5233f7cb0233ce7634bc480026668c818f6", - "border.focus": "8db219e896acc4d828aaaf4add646d96540a84ea", - "border.success": "b13758973865eab0b4d79028a48e457eae8bec47", - "border.danger": "33d53c1486021bb3c9edce4123b484a2aabc8de0", - "border.warning": "027e57e08a1edcaaa7fbe033902bb3f65497abb4", - "state.hover": "78426caca2a07ee56132762a720ae07e2810f03b", - "state.selected": "ef914056c9c9dbaef00fa8795702a3cb933ee761", - "state.disabled.text": "967ab1b863941c100f58cc55e611ee2709051f01", - "state.disabled.background": "7a192b5ddcc570f0c8e3a5dbfd54d780e2832bbd", - "state.disabled.border": "067fd26e80ad39a28f738a3b76d21d354092d551", - "component.accordion.title": "5e49d6ddf7f2b21724b474d4a5545256143dce54", - "component.accordion.description": "bc47401a69d07fa71f0371765ed940745fc7a5b9", - "component.accordion.chevron": "5dd530f96134323125031668d4ea98a36ea0de86", - "component.accordion.border": "0b3fcc0e02a2a86625b2b4a9cfeebfad9486bc3a", - "component.alert.default.title": "d8e59ed205399e9727b0dcecdccad3d8daaaa622", - "component.alert.default.description": "f9ec7fec91747435740f000fb642f9009e8fc2db", - "component.alert.default.background": "7fbbdfcc33a3051394f89675798db2159741a5fc", - "component.alert.default.border": "549692bf2f70f6b40c7d55259f8890189aa6cc98", - "component.alert.danger.title": "c8da1cdbba8e0f86edda5fd3869f6186d53881ca", - "component.alert.danger.description": "366849405bd53c78f0b73d72585034a52f05d9a7", - "component.alert.danger.background": "5756a9bdba027993a9879b32ed129e3034028cdf", - "component.alert.danger.border": "a1a3be9eefab6edf2e996a46537872680dc45a09", - "component.avatar.text": "23018f4c7f22c4afb3b7e49f585a1fbb591209de", - "component.avatar.background": "57703fddbd26d363509fdba3aea037bd2f515ee0", - "component.avatar.border": "d651f4cb9082aa4d6e6af2c5abab700d683a5c85", - "component.badge.default.text": "ab90828e3b8c6adce5dc10bf85107b001b958e95", - "component.badge.default.background": "706b070b298e2d2a97665baf7af05187eefeb4fe", - "component.badge.default.border": "a935a2968ca4ecfb8cc58a18f31ae8fe65eb516b", - "component.badge.neutral.text": "82d39f1786c4371303ae21e4c02db79989c54e36", - "component.badge.neutral.background": "f5480b1a2b648fdb0561acda7515c38271cfb04b", - "component.badge.neutral.border": "00f05792ddf6e53bff79346df6a34144426d50e0", - "component.badge.success.text": "71014a6138e8747257a21144f8114b906cfe0f0a", - "component.badge.success.border": "190589c6021debb7bb676f05ac7f063c237fd4aa", - "component.badge.success.background": "177eb9f406784ddb958232cd643ebbb3490a53d4", - "component.badge.danger.text": "6c0c04f17c2bc0ee085d09bf0f205dcbc66c1e17", - "component.badge.danger.border": "6bb014acbbd68a796ed0c4d8c4f73e8e9e619923", - "component.badge.danger.background": "4162b10332d17800585d97ed45e45d69c2006808", - "component.badge.warning.text": "8581620d95e5b92a8c85341ebf63f21fcf7133d0", - "component.badge.warning.border": "71cb519182108ac72ffef823935546e4bff62bbc", - "component.badge.warning.background": "74c13457a85684a054426bd833859fe93eaec978", - "component.badge.running.text": "0b0c1be217e557a5b14c1cb25e988e4ac6d40583", - "component.badge.running.border": "27d3c48d3c316bc4f980282759b5e82f8aaaf49d", - "component.badge.running.background": "a85fddc26baf586ac7ba79e381e5f8fefca87c65", - "component.badge.merged.text": "a83d66ef53e8a094a62f2b32a4d17e58d552b1ef", - "component.badge.merged.border": "755392bca643af0a3fe5492069881a870aa11dc3", - "component.badge.merged.background": "4f4c81b1fe43bfe0d721a22d0aeb93079776cf6d", - "component.badge.ai.text": "bb4daee92817073da0366090742d0a17babb5728", - "component.badge.ai.background": "c5764a2304bf0e8a153c9ce0da20827696a76b41", - "component.breadcrumb.item-inactive": "2f009ca6cafb50c994205c9df02ee2d2503f7d23", - "component.breadcrumb.item-current": "7b502cc2e72f66bb501fdc5f480d0133d1b3841a", - "component.breadcrumb.separator": "1cd28c3ff97ab2f529a19c632d89dd44af0aad80", - "component.btn.primary.text": "9d32f032da93c9aab8b3bc6087c26aa12f507ad7", - "component.btn.primary.background": "410d584a3469233e067d0592a366fdebbe1049bc", - "component.btn.primary.border": "1491ac71f9681307c2d6528e443504e079061988", - "component.btn.secondary.text": "12c93d1b08ae50645a3b8f59256fcec00a4f84ca", - "component.btn.secondary.background": "86434310c95f5c055783011cc0e7c7918f67a35c", - "component.btn.secondary.border": "66bda91f87154efd3cefdc7a634ecb8afa8cd285", - "component.btn.outline.unselected.text": "9cf2c495178d6fdfd8f1360376242acbd4dc5e75", - "component.btn.outline.unselected.icon": "af1510c6050f671219d2089e0e59d5febb4422d6", - "component.btn.outline.unselected.border": "2b3013d632e566301e9f5f1a5cbb6aab4e7ec53f", - "component.btn.outline.selected.text": "13b50089245dec1899db2012412efcf649e2c0b4", - "component.btn.outline.selected.icon": "2bdf2c92b22e814109f4e05ec4d41d92f934a15d", - "component.btn.outline.selected.border": "ef10f4599233f62203def151b386013ddaa63afb", - "component.btn.ghost.unselected.text": "43fa10dd413cddb9a2e2142ead9ca3b4a91b49a6", - "component.btn.ghost.unselected.icon": "5ce332f51238b374104ec53067d685c26882f38e", - "component.btn.ghost.selected.text": "74cbf3b86016e05517f8c7bc64652281c940363e", - "component.btn.ghost.selected.icon": "1d8c6206a136d9c176ffba600a1e94618c4b96f8", - "component.btn.success.text": "52a336440e013bbc849ad67a43d0e136cf4f0b51", - "component.btn.success.background": "608ca6930129b4e5ff36d7f38508ae2537b66629", - "component.btn.success.border": "1f74d9985a10fe20e0acc4647cf4949005e9d4f1", - "component.btn.success.state.hover": "d05bde38a6539a11e3ccd87345af113ccd6bd113", - "component.btn.success.state.active": "f6e48e68dba6c32de27fadcaca3d1959f081d2e5", - "component.btn.danger.text": "49c02562362b8f775cfc2c4c614ecd646dcc2716", - "component.btn.danger.background": "0b015d0a4f456781969d7ffaf135c7c2a8858440", - "component.btn.danger.border": "9f99ee56f1ae2b7eb2f98300b83d4f53b15fd763", - "component.btn.danger.state.hover": "e7756e1d022d893bfa5fdd619f181d26fb7b117b", - "component.btn.danger.state.active": "23c7c85ff6104e098a208b6f4b86c1d0eef0f543", - "component.btn.ai.text": "380368600319fa12b73538ff52acd9d0e977e367", - "component.btn.ai.background": "8c9a1d07e05837f50588b642a4b51462f883887d", - "component.card.background": "256878745d17a46b7159919d8e30a3e960f59575", - "component.card.border": "3688ffcc56c4fb44dc0e221b8e09a958fd9e509d", - "component.dialog.title": "e6e0ff2bf1f3802eb21492e8b833c5f5e679cd82", - "component.dialog.description": "301509fcf2faac8497b2136f7879b9b0b3c64433", - "component.dialog.background": "ff2918d712798a4b487b6f6e5befe7b3eef59883", - "component.dialog.border": "4a6cb3732ad8b36bb9de0d15cbed575c87996088", - "component.dialog.backdrop": "893e60ed671f891241a3084707057185398446ed", - "component.dropdown.background": "09b2dca27ba9efabfe838d713a14ca6e6ac46685", - "component.dropdown.border": "c8cdfff63f4e142d651070ff1056b69a638aaab7", - "component.dropdown.item.delete.text": "864396a8c9b5df0fd948ded7d520ded936d74a8b", - "component.dropdown.item.delete.state.hover": "308dc9064be8e754f8385b0e8ff5489563d7c984", - "component.diff.grey": "43bf4f466a6e231c9951a639313740579c29d824", - "component.diff.add-content": "eb4eccf789a2bda6f3d3875c3310ef0579fd3555", - "component.diff.add-lineNumber": "61583aa6e36aaddd0be173a4a082a450e2522d3a", - "component.diff.add-content-highlight": "ad544fc527ca8b4c297993fe0722b8a7a96ef903", - "component.diff.add-widget": "c1def698ab707194d8f1558e16b05c55d50920d9", - "component.diff.add-widget-color": "a27c504a1f1151974669cf06054c1d0f704ecc38", - "component.diff.del-content": "465e6eb3613967f489cfee4b04f0b283b9e88f91", - "component.diff.del-lineNumber": "4cbe83072b6781d6e3edff645ccb2fb7426c5628", - "component.diff.del-content-highlight": "3e635e401a1a37a259211d093bef70e3a0c507ea", - "component.diff.plain-content": "984456faee2f6a5c202cfd76078ef5b6cd3a05f1", - "component.diff.plain-lineNumber": "6a5550287e7c58afa9d2375c5bfdca4d6c214cf1", - "component.diff.plain-lineNumber-color": "7c1186d20725b53cbefe87f56c5bc6db4e77d898", - "component.diff.empty-content": "712d93a0c1bc9503abda77ae50d624bd328c0057", - "component.diff.hunk-content": "79ad0dfc599f9bc246a6618c85bc1dc59744537f", - "component.diff.hunk-lineNumber": "bccfad80b84e35edf4b47af2ca30057eba2b2ebf", - "component.diff.hunk-content-color": "68c5d6a95d475f7275062e3eb58dba464df3d059", - "component.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", - "component.input.text": "df946237ac2ea0d177f3f2818a673fdf876944c7", - "component.input.placeholder": "85d7632aba08fd476083e508cc2660b17c30981a", - "component.input.icon": "75ca1f38c16fbd5e2697a36c74b0b1dd01f3f5c0", - "component.input.background": "585327333fbbf97bb8db21fbc613025719ca8a87", - "component.input.border": "911dac823dac21c9ccf4e35e10b2eb82a9c6f0ef", - "component.label.text": "80403cd630bba01a064550d9783313227b1d010f", - "component.link.default": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", - "component.link.visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", - "component.nav-tabs.unselected.text": "c085805657bb81574da85d3cb29f89ca08980daa", - "component.nav-tabs.selected.text": "16aa825c8038347237cbe91f7eeece4d2a8d1a2b", - "component.nav-tabs.selected.border": "3427b967112facd59f09fa310c863d7193ea4ffe", - "component.nav-tabs.border": "791d71ca187934e4b98ddff04bc9447a10358699", - "component.nav-tabs.background": "b92549e37390005f2bd1cfce06f9dfb8f67e39e0", - "component.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", - "component.pipeline.card.background": "f207dcff97f000326c4f28293fdbd2830860ce54", - "component.pipeline.card.border": "aa9d9528b1e8e25f9e6dae387b76d9beb2de35a8", - "component.pipeline.card.running.border": "179c0e4d47becc896eb1fbb7f9e8461779b3f680", - "component.pipeline.card.error.border": "1c0b41b41e25250cfb65bdb539bd573be66b0d00", - "component.pipeline.card.completed.border": "14251a54f431aae617af6b9577454a0e212ad76f", - "component.pipeline.card-canvas.1.background": "01bd392d5ddafe85e5575296d08254e52054ba8d", - "component.pipeline.card-canvas.1.border": "b9510abf89f82fb7b779bb730caa1bf393c83bd4", - "component.pipeline.card-canvas.2.background": "87b6b3e65b995fc4180dfb7bf613efb0098d1fff", - "component.pipeline.card-canvas.2.border": "1f9fa1e95134d87995a21738a3877f1c15158e5e", - "component.pipeline.background.dotes": "2784742abff27552789cdd4f2b51cab1331abb4a", - "component.sidebar.background": "8b6619fafae38e8ad94fffd488f2cf53d3c31d76", - "component.sidebar.border": "2263230eae16609a3d95ba5863aa3cc343010131", - "component.sidebar.separator": "a0c913dd38e81e3b2c20ee17642433da6da5f147", - "component.sidebar.hover": "4925b4511178bd2853a6b7b329683d036508aec1", - "component.sidebar.selected": "31f335ecde0aedb12407221718069f5b13574d41", - "component.sidebar.item.unselected.text": "9609e0ad8d79127a3784876f0204d02964f09e43", - "component.sidebar.item.unselected.icon": "5afba128858cf7494fb8a326a435860faf00b0ee", - "component.sidebar.item.selected.text": "5f1daf88cebaea07bd4c2a57c862638340827496", - "component.sidebar.item.selected.icon": "18325fda8139122c4a7cdf6debe2cd1f25d120b7", - "component.sidebar.logo.text": "a3ffa09fdf368badab24aecdbd26709ed7b3c2b2", - "component.sidebar.logo.icon": "c572d382a2018718d719f6a427d31fc9a42f57bd", - "component.sidebar.search.background": "33822e390046e5ec8f71a07fc041514a28778e74", - "component.sidebar.search.border": "f2044f7e8cf503f8809a48a14a88c5ef6466176f", - "component.sidebar.search.placeholder": "665cc00a32edd27b62371ee820d3c3250e629e78", - "component.sidebar.search.btn.background": "70c80e61b9ec397214c809c51de4fdf8177185da", - "component.sidebar.search.btn.border": "1c434c7d16cd4ba880e2d57520c90bc37f6b3879", - "component.sidebar.search.btn.text": "589c7d0162d67165a8752ea54a2c63bb63ee3ad7", - "component.sidebar.footer.username": "68298a8f471bb04f2f0305d9433a2b59613abd8d", - "component.sidebar.footer.data": "6a681d2abb90c2b62a39e20a1d29419c5086f01a", - "component.scrollbar.thumb": "9818c03d003381a966d08d3c6da75af8468bb8ef", - "component.selection.unselected.item": "7a7cad2aa2d6b2803a52eb26c78ea177b84ce241", - "component.selection.unselected.background": "a63ba949d12afc99020e77f95d0538bddba457b3", - "component.selection.unselected.border": "6ef997ebe03bb209ca568a648eb0cc8be69746a6", - "component.selection.selected.item": "f1f43c8acf2d4da10ee2e0d164d4dbe955816018", - "component.selection.selected.background": "1d1bbb9958f047744b66861fd8bd75dc2726dc25", - "component.selection.selected.border": "44b31378ed175b87b50ebad88cfd4a73a66ab9d5", - "component.separator.background": "9f4c82c269bc5aff0fa55d52a0ed59f914057be0", - "component.slider.track.base": "34dc3b5be6733e38f6c28d24d4f3699b2d7ea6f3", - "component.slider.track.progress": "38d8cac26c1cfb91293198eee25299e4aef9c1d8", - "component.slider.track-segments.base": "cb752791a51ff48c6d481426a1affb15048a152a", - "component.slider.track-segments.progress": "a7943fda0e4646e7018046354a9be54cf7d03075", - "component.slider.handle.background": "5c423cc3b672079f1e7dc0d1c8170dade368711a", - "component.slider.handle.border": "94347a2ed2900445946d18c653fb179b8602c533", - "component.status-indicator.completed": "c4c3bce2d28c84c25db4f444f9144b94523737b7", - "component.status-indicator.cancelled": "5aa15732d9ebc41f14b111e252819e2e36617124", - "component.status-indicator.warning": "4dc6e5ea4c736869aee4ebd0ee006f2d73861423", - "component.status-indicator.running": "07ce029f27cf34bf8d6fe3b9a6a600be01c8947e", - "component.status-indicator.merged": "d9eb24404452e6cc2617094fe8f29c69a760ea55", - "component.status-indicator.action-required": "2f1b8543c44b5d93cebddd80b5a9ee2d60fdb146", - "component.status-indicator.waiting": "62f68d300850ce20cf0be8c07d82a41bf1a56ecd", - "component.switch.unselected.thumb": "94d5f0b3a97924583ff697d56db74727b133ba95", - "component.switch.unselected.background": "a8ae87c7bb7ba7f4bfa71f2fdd5f404d19c3a1be", - "component.switch.selected.thumb": "cf6964ec11d69899d5dd39e82d322ea544367e90", - "component.switch.selected.background": "bba05ff96eae08a4adc31a6406e417022d9e5dad", - "component.table.header.text": "65cfc045aa01e3d3eeae4a227cac9be150839db8", - "component.table.header.background": "137c4f2e14bb8cadaf6f900a443700fe928a1fcd", - "component.table.row.alternate-background": "2863f92db433f88f24f62dda4cc9fd50c48130be", - "component.table.row.border": "445d945c4fe4426c3b73cf6f8fe0a572e4525798", - "component.table.cell.text": "73a28f25ba54aff507877ecbfd9942a6ea9f3cea", - "component.tabs.background": "8689ee01219675fb951a2517c2397fba52487971", - "component.tabs.border": "e5bc8cfac224234021c11b381f505da5fcac84ed", - "component.tabs.item.unselected.text": "4af8a5b79c55621f1ed11a7b6fc605657934dc1e", - "component.tabs.item.unselected.background": "fa041cdeb34ba5da6f1bd4cd6d8bb4b8273e0e70", - "component.tabs.item.unselected.border": "79b1a6fe839c012efec923edf40b3bfa2bcdab19", - "component.tabs.item.selected.text": "d048f7001829ff9949b2712b8ca746c8f3f49767", - "component.tabs.item.selected.background": "33269e9854800d565f728ba2a85c5cd3e549b5e8", - "component.tabs.item.selected.border": "11b7e5aeb83fd2f5d968021c750af2ceb5ba5841", - "component.tag.blue.text": "b35e0aebd9d1ebf0fd5d24bbd5ad184db9e11b86", - "component.tag.blue.background": "072fc2901d8ad0199c07bc339d46db086c7b0379", - "component.tag.blue.background-subtle": "67307c003cb91d76e00ef0f3777318e25efac628", - "component.tag.blue.border": "680fb2a6a11251e2619789595cd28c7861aaa530", - "component.tag.brown.text": "b48491f46d15503df99e2d8d9394aa552d09461b", - "component.tag.brown.background": "90b0ee0df4ebe7f06bfd07a7acbe812a45d621a4", - "component.tag.brown.background-subtle": "134ffd2a91ef027e197db6a5331d2726bc080ad6", - "component.tag.brown.border": "675776ff7a30540c297579d72b7f00779d778c14", - "component.tag.cyan.text": "6bf9361c5931ba40663d2c412f28f15382498517", - "component.tag.cyan.background": "83107c8cff314c553ed2cea5c9af1ff3356485e5", - "component.tag.cyan.background-subtle": "7f2724127eebb6e01713828af3736cd2e3734436", - "component.tag.cyan.border": "3286065f931626298e8f3dab2328297e83a79771", - "component.tag.green.text": "699a30f1d5f76ed4e631faa3da63be65e88af039", - "component.tag.green.background": "8b06c35974700260dff1a712c0a3976d4ddb0df5", - "component.tag.green.background-subtle": "c4f47c34772d8367bc3b00645420511f37aaecad", - "component.tag.green.border": "db85545b7d00ef9e199bf863dcdcc2be520f520c", - "component.tag.indigo.text": "d641d4626278e4d17ff4d98202112da9580a6b89", - "component.tag.indigo.background": "bb4af9a068f716c2f0b4f77c228b88009ac049c9", - "component.tag.indigo.background-subtle": "877e3b4ee6040ed581a8349c8fdb5e49ed36dfe0", - "component.tag.indigo.border": "885fdb80c956855c30666c660d5839dc357d1f5f", - "component.tag.lime.text": "763399447b243f761b7cce55f7dcf2fbb1797ee3", - "component.tag.lime.background": "d51cede4c823e16ac204bcaddb65d49c325c3cbe", - "component.tag.lime.background-subtle": "556934df078200ab014c762eeaa04deecd05422e", - "component.tag.lime.border": "fbb53e37ef7cb87cfae5298e69a5ffe4f99a23a7", - "component.tag.mint.text": "d3d406bffbadb1b894e4bb6aef7b1f5a1945094c", - "component.tag.mint.background": "04568a7d0bff5fbc11600bf840916f5451a0fe62", - "component.tag.mint.background-subtle": "1d39716bceda8510beb02e19847c391523e3690a", - "component.tag.mint.border": "c703cecfc8bd82c593dc9d81ce18748edd6ecf4d", - "component.tag.orange.text": "ba407492439b283fedf30a8ab8b16774c0931a9f", - "component.tag.orange.background": "ef766412f340a4aa62c8888a6fdfb2890f3ea207", - "component.tag.orange.background-subtle": "05e823662de8b1f99a062cea3c0f24df69b29362", - "component.tag.orange.border": "2f3023f2311c12acb44cdd28beb888f64d6d2183", - "component.tag.pink.text": "83b73e0e328485233004d42baa8a0948ff2198b0", - "component.tag.pink.background": "b23a211249a71f32bf15757316d0596fdb395962", - "component.tag.pink.background-subtle": "c144f19e07b839d68f20eb5c51ebd94e0f333a82", - "component.tag.pink.border": "b4874a81a08261362f3d8237833b80e68a851b76", - "component.tag.purple.text": "9869d8aad416ac3f9e530b0d62b05dda66906de4", - "component.tag.purple.background": "bc59008310427ba5883f71079b19b8cb4c6dd862", - "component.tag.purple.background-subtle": "a3598602d6e6b1d03f638f1a941801f147f4657a", - "component.tag.purple.border": "de1d577bd170613ab46460e9c50ca8de420152f6", - "component.tag.red.text": "aca8c1832317ac859b4263769855f423840a8569", - "component.tag.red.background": "9008e05416a00096c234511275b92be7204363b6", - "component.tag.red.background-subtle": "986bdd3f8d16488337ca9f46b71b04195d7578b0", - "component.tag.red.border": "f7f9067262546ee6eb77955e38aa0a451fc7f98a", - "component.tag.violet.text": "2ab996ff3465a0b97dee4d7c5606df3d46ab2a07", - "component.tag.violet.background": "4c9b9c2658479fc0e56894975a9b9b8d76df5b00", - "component.tag.violet.background-subtle": "fded9a84a20755592f57f081ebb594bfbaf8cfb3", - "component.tag.violet.border": "77de89ef1ab5168b7ff5e329bde8608047149a04", - "component.tag.yellow.text": "cadfcb4d0fe72fd5828cd764d54198026520e10c", - "component.tag.yellow.background": "a29464cd2a618a77586cb8760478a4d82b12b3ca", - "component.tag.yellow.background-subtle": "1b262be32c5779f024da5ad5696c805a83eb96c7", - "component.tag.yellow.border": "b595821fd5ef662361820415bb878e8ef4ab8939", - "component.tag.gray.text": "e7608c51a2421de226afebbcb909180c8a0cdb5a", - "component.tag.gray.background": "9bcc758ef67bbaac88637e99a702da5d7f7a3144", - "component.tag.gray.background-subtle": "76dfa99dd57cbaf2e7cbec9511cd1e1ddd92ee0e", - "component.tag.gray.border": "02e03f32969f9e6120bb6c7a3b781a5446f1bef1", - "component.toast.default.title": "f791d24eeab59c12cf4aad84f4677099bb4a01c1", - "component.toast.default.description": "6000da4ada3b9445750fb4b7b990726df120c271", - "component.toast.default.background": "5b9e9ea5b7de018a92d3deb902257e4e2bbb49f9", - "component.toast.default.border": "f74755bc7843dc9d7c788c54178b7ce3b83dea3f", - "component.toast.danger.title": "b5ad1c43fcee32eb251b980e884e77ea137c3369", - "component.toast.danger.description": "d281b5c13f2a4a293042f52b168e39f8bec398da", - "component.toast.danger.background": "8ba5c70e994ab44aeb72b3ed7f26ca9646d59cc0", - "component.toast.danger.border": "7f5252c13b96825084248b367f36377bb003ca96", - "component.tooltip.text": "b79a7ec441cdc7c6eee9313602f081d063327c1d", - "component.tooltip.background": "a35d0240a1c4de13350e6a4770dd1703a90a9227", - "shadow-color.0": "c0c282f63e107374a732d74c1742cf60d52e6e5c", - "shadow-color.1": "1ec33a9c84353664d23cd23d6c033d1c330c149a", - "shadow-color.2": "6200a000044d8dbee421ed4afb0c3ff42febb6ef", - "shadow-color.3": "77d99afb159d8e193a82f615dd84de3214e00703", - "shadow-color.4": "2b2e0307d252bdc6db53a23ce2cc2e9bb4f6b914", - "shadow-color.5": "5a6c707240bab54cb4403f47262abfe0756efc9a", - "shadow-color.6": "928283d00759150575a8f155da90180a582be438", - "shadow-color.inner": "6cb5a98fba0b13e952859b9f023259b5c06cfd1a", - "gradient.ai.gradient-stop-1": "8db516caa68afc5b8fdd6fc6e5a9bad7715c5f26", - "gradient.ai.gradient-stop-2": "33930f41665251a281973a37847f357480aedca3", - "gradient.ai.gradient-stop-3": "c9e14c3db8e622b10b1cd3e860115cd6f876ae49", - "gradient.ai.gradient-stop-4": "6e7d0850d7eb1e699f87b41f6ffd4cb8d73d72e8", - "gradient.skeleton.gradient-stop-1": "5427016b990b75f0d1ce60eef8cb9b96d75fbde2", - "gradient.skeleton.gradient-stop-2": "01442c311e6da751c30c3518fc32970306767274", - "gradient.skeleton.gradient-stop-3": "7fda4c834a3daf0c56bb59777c525670ae2dee3e", - "gradient.pipeline.running.gradient-stop-1": "0c187d1ebb015ec66bac356009795316f84807ae", - "gradient.pipeline.running.gradient-stop-2": "d1251f86c91bd0f29d8ac8cfa01056bc307156b4", - "gradient.pipeline.running.gradient-stop-3": "b09bdab234cdf7c204cb153ec94ea0a9b2bb4976", - "gradient.pipeline.arrows.gradient-stop-1": "0465e74baaf10a12f23b9eaa40fc1ae08485a0d5", - "gradient.pipeline.arrows.gradient-stop-2": "4cadc4f9a5e66f28eaa27fb54b6ce538ea430c7d", - "gradient.pipeline.arrows.gradient-stop-3": "5af16d4ae6b63ff8dcf3254009e712db4ac1a3f9", - "gradient.pipeline.card.background.gradient-from": "8404a4e146121987426681accb996902179fad72", - "gradient.pipeline.card.background.gradient-to": "037bbd7fb410d05993a48594626a7babb32605a6", - "gradient.pipeline.card.border.gradient-from": "342926ec7179e7cbe133981050c1e1e41d94ed7a", - "gradient.pipeline.card.border.gradient-to": "8e39428cc5ce20f3593127f2ef71f180b38ee9a4", - "gradient.pipeline.widget.number.gradient-from": "dc372cb50eedf6023cd80cb6a4520e5fdf91358b", - "gradient.pipeline.widget.number.gradient-to": "e505c8d9dd140f5a671c1291ffd519fcff5c3e2c", - "gradient.pipeline.widget.blob.big.gradient-from": "b518524b25a5b95804988c640c4d52ba7ebd4599", - "gradient.pipeline.widget.blob.big.gradient-to": "80a493af10245e0ebbc6a51f5452d61d836a3754", - "gradient.pipeline.widget.blob.small.gradient-from": "8d7be31e69f0e54dd2e493d9051c2268078ea5ed", - "gradient.pipeline.widget.blob.small.gradient-to": "198813cf6242881ce0e0d030ca22ef31f9190d13", - "iconStrokeWidth.xxs": "751ceaa292e27736009bef894b62f83c1b2d66d8", - "iconStrokeWidth.xs": "77ca59c88a0b47972554b1db3f6469a230a6ad8c", - "iconStrokeWidth.sm": "e445b22e1f18af07002a1dc76f900dada5477383", - "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", - "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", - "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "component.dropdown.item.text": "2f1f1ea9d368ec8be380803506fbf657cabe6ac0" - }, - "group": "mode" - }, - { - "id": "7c69cf5c03848280cbf1cdcb001ad3e8b14b97e3", - "name": "light-tritanopia", - "$figmaStyleReferences": { - "shadow.0": "S:a2ed3778198048e91067a04633c27ba20e9fcbec,", - "shadow.1": "S:947694488889f7271c428950bec937ee79f8a536,", - "shadow.2": "S:70378f090cb66b03ee4b18e25742743934f37757,", - "shadow.3": "S:aa7e83fd47e75f5a1ae3e17f64417d5e9fcb96ae,", - "shadow.4": "S:5dfba690094db266c4ab7686fccbbedd8c16385f,", - "shadow.5": "S:d6752151a8dd3bd4b4bf12ad15a80c522f760731,", - "shadow.6": "S:da8e7b5b0f1352215fbaab66eff62a3e19d22b67,", - "shadow.inner": "S:2805cdc40176a4707d5cfc549b4c12e7ec4e74ff,", - "ring.focus": "S:062018f6483f54f1255b952aa1759b028d502ac3," - }, - "selectedTokenSets": { - "mode/light/default-tritanopia": "enabled" - }, - "$figmaCollectionId": "VariableCollectionId:1340:156918", - "$figmaModeId": "1389:19", - "$figmaVariableReferences": { - "background.1": "633e5f77aa1bd1bd133852d8372b9c9f1231a9e4", - "background.2": "14e8d4b56cc273b508af8a2c58cb00e99e08d1d3", - "background.3": "33554ff11e1eab35e50aa3570f51d53f16f46d6a", - "text.1": "38382b9984a98f9d26692a7f2882dfb5c5d51825", - "text.2": "115f62efd02491e85a63dfd601b03725d3711f23", - "text.3": "1c7327f01cf759b17fd0523cb540afa8700c1dc7", - "text.accent": "0b3cd5357659e6542cca163ccfd96c0cac059203", - "text.success": "ee56057b81e6d0872a84ca6b29affc8911fe333e", - "text.danger": "c7e38d7c7afc899f4d40392dbd6bc5ed6580264d", - "text.warning": "b03334e4c9db4b76269e4be886df6c1abf74d0ca", - "border.1": "5ad2231a611605964ba70f80e7aabb48f04bc704", - "border.2": "9084bef359e38136e0dddac25a464896456a9b1a", - "border.3": "5ff5d5233f7cb0233ce7634bc480026668c818f6", - "border.focus": "8db219e896acc4d828aaaf4add646d96540a84ea", - "border.success": "b13758973865eab0b4d79028a48e457eae8bec47", - "border.danger": "33d53c1486021bb3c9edce4123b484a2aabc8de0", - "border.warning": "027e57e08a1edcaaa7fbe033902bb3f65497abb4", - "state.hover": "78426caca2a07ee56132762a720ae07e2810f03b", - "state.selected": "ef914056c9c9dbaef00fa8795702a3cb933ee761", - "state.disabled.text": "967ab1b863941c100f58cc55e611ee2709051f01", - "state.disabled.background": "7a192b5ddcc570f0c8e3a5dbfd54d780e2832bbd", - "state.disabled.border": "067fd26e80ad39a28f738a3b76d21d354092d551", - "component.accordion.title": "5e49d6ddf7f2b21724b474d4a5545256143dce54", - "component.accordion.description": "bc47401a69d07fa71f0371765ed940745fc7a5b9", - "component.accordion.chevron": "5dd530f96134323125031668d4ea98a36ea0de86", - "component.accordion.border": "0b3fcc0e02a2a86625b2b4a9cfeebfad9486bc3a", - "component.alert.default.title": "d8e59ed205399e9727b0dcecdccad3d8daaaa622", - "component.alert.default.description": "f9ec7fec91747435740f000fb642f9009e8fc2db", - "component.alert.default.background": "7fbbdfcc33a3051394f89675798db2159741a5fc", - "component.alert.default.border": "549692bf2f70f6b40c7d55259f8890189aa6cc98", - "component.alert.danger.title": "c8da1cdbba8e0f86edda5fd3869f6186d53881ca", - "component.alert.danger.description": "366849405bd53c78f0b73d72585034a52f05d9a7", - "component.alert.danger.background": "5756a9bdba027993a9879b32ed129e3034028cdf", - "component.alert.danger.border": "a1a3be9eefab6edf2e996a46537872680dc45a09", - "component.avatar.text": "23018f4c7f22c4afb3b7e49f585a1fbb591209de", - "component.avatar.background": "57703fddbd26d363509fdba3aea037bd2f515ee0", - "component.avatar.border": "d651f4cb9082aa4d6e6af2c5abab700d683a5c85", - "component.badge.default.text": "ab90828e3b8c6adce5dc10bf85107b001b958e95", - "component.badge.default.background": "706b070b298e2d2a97665baf7af05187eefeb4fe", - "component.badge.default.border": "a935a2968ca4ecfb8cc58a18f31ae8fe65eb516b", - "component.badge.neutral.text": "82d39f1786c4371303ae21e4c02db79989c54e36", - "component.badge.neutral.background": "f5480b1a2b648fdb0561acda7515c38271cfb04b", - "component.badge.neutral.border": "00f05792ddf6e53bff79346df6a34144426d50e0", - "component.badge.success.text": "71014a6138e8747257a21144f8114b906cfe0f0a", - "component.badge.success.border": "190589c6021debb7bb676f05ac7f063c237fd4aa", - "component.badge.success.background": "177eb9f406784ddb958232cd643ebbb3490a53d4", - "component.badge.danger.text": "6c0c04f17c2bc0ee085d09bf0f205dcbc66c1e17", - "component.badge.danger.border": "6bb014acbbd68a796ed0c4d8c4f73e8e9e619923", - "component.badge.danger.background": "4162b10332d17800585d97ed45e45d69c2006808", - "component.badge.warning.text": "8581620d95e5b92a8c85341ebf63f21fcf7133d0", - "component.badge.warning.border": "71cb519182108ac72ffef823935546e4bff62bbc", - "component.badge.warning.background": "74c13457a85684a054426bd833859fe93eaec978", - "component.badge.running.text": "0b0c1be217e557a5b14c1cb25e988e4ac6d40583", - "component.badge.running.border": "27d3c48d3c316bc4f980282759b5e82f8aaaf49d", - "component.badge.running.background": "a85fddc26baf586ac7ba79e381e5f8fefca87c65", - "component.badge.merged.text": "a83d66ef53e8a094a62f2b32a4d17e58d552b1ef", - "component.badge.merged.border": "755392bca643af0a3fe5492069881a870aa11dc3", - "component.badge.merged.background": "4f4c81b1fe43bfe0d721a22d0aeb93079776cf6d", - "component.badge.ai.text": "bb4daee92817073da0366090742d0a17babb5728", - "component.badge.ai.background": "c5764a2304bf0e8a153c9ce0da20827696a76b41", - "component.breadcrumb.item-inactive": "2f009ca6cafb50c994205c9df02ee2d2503f7d23", - "component.breadcrumb.item-current": "7b502cc2e72f66bb501fdc5f480d0133d1b3841a", - "component.breadcrumb.separator": "1cd28c3ff97ab2f529a19c632d89dd44af0aad80", - "component.btn.primary.text": "9d32f032da93c9aab8b3bc6087c26aa12f507ad7", - "component.btn.primary.background": "410d584a3469233e067d0592a366fdebbe1049bc", - "component.btn.primary.border": "1491ac71f9681307c2d6528e443504e079061988", - "component.btn.secondary.text": "12c93d1b08ae50645a3b8f59256fcec00a4f84ca", - "component.btn.secondary.background": "86434310c95f5c055783011cc0e7c7918f67a35c", - "component.btn.secondary.border": "66bda91f87154efd3cefdc7a634ecb8afa8cd285", - "component.btn.outline.unselected.text": "9cf2c495178d6fdfd8f1360376242acbd4dc5e75", - "component.btn.outline.unselected.icon": "af1510c6050f671219d2089e0e59d5febb4422d6", - "component.btn.outline.unselected.border": "2b3013d632e566301e9f5f1a5cbb6aab4e7ec53f", - "component.btn.outline.selected.text": "13b50089245dec1899db2012412efcf649e2c0b4", - "component.btn.outline.selected.icon": "2bdf2c92b22e814109f4e05ec4d41d92f934a15d", - "component.btn.outline.selected.border": "ef10f4599233f62203def151b386013ddaa63afb", - "component.btn.ghost.unselected.text": "43fa10dd413cddb9a2e2142ead9ca3b4a91b49a6", - "component.btn.ghost.unselected.icon": "5ce332f51238b374104ec53067d685c26882f38e", - "component.btn.ghost.selected.text": "74cbf3b86016e05517f8c7bc64652281c940363e", - "component.btn.ghost.selected.icon": "1d8c6206a136d9c176ffba600a1e94618c4b96f8", - "component.btn.success.text": "52a336440e013bbc849ad67a43d0e136cf4f0b51", - "component.btn.success.background": "608ca6930129b4e5ff36d7f38508ae2537b66629", - "component.btn.success.border": "1f74d9985a10fe20e0acc4647cf4949005e9d4f1", - "component.btn.success.state.hover": "d05bde38a6539a11e3ccd87345af113ccd6bd113", - "component.btn.success.state.active": "f6e48e68dba6c32de27fadcaca3d1959f081d2e5", - "component.btn.danger.text": "49c02562362b8f775cfc2c4c614ecd646dcc2716", - "component.btn.danger.background": "0b015d0a4f456781969d7ffaf135c7c2a8858440", - "component.btn.danger.border": "9f99ee56f1ae2b7eb2f98300b83d4f53b15fd763", - "component.btn.danger.state.hover": "e7756e1d022d893bfa5fdd619f181d26fb7b117b", - "component.btn.danger.state.active": "23c7c85ff6104e098a208b6f4b86c1d0eef0f543", - "component.btn.ai.text": "380368600319fa12b73538ff52acd9d0e977e367", - "component.btn.ai.background": "8c9a1d07e05837f50588b642a4b51462f883887d", - "component.card.background": "256878745d17a46b7159919d8e30a3e960f59575", - "component.card.border": "3688ffcc56c4fb44dc0e221b8e09a958fd9e509d", - "component.dialog.title": "e6e0ff2bf1f3802eb21492e8b833c5f5e679cd82", - "component.dialog.description": "301509fcf2faac8497b2136f7879b9b0b3c64433", - "component.dialog.background": "ff2918d712798a4b487b6f6e5befe7b3eef59883", - "component.dialog.border": "4a6cb3732ad8b36bb9de0d15cbed575c87996088", - "component.dialog.backdrop": "893e60ed671f891241a3084707057185398446ed", - "component.dropdown.background": "09b2dca27ba9efabfe838d713a14ca6e6ac46685", - "component.dropdown.border": "c8cdfff63f4e142d651070ff1056b69a638aaab7", - "component.dropdown.item.delete.text": "864396a8c9b5df0fd948ded7d520ded936d74a8b", - "component.dropdown.item.delete.state.hover": "308dc9064be8e754f8385b0e8ff5489563d7c984", - "component.diff.grey": "43bf4f466a6e231c9951a639313740579c29d824", - "component.diff.add-content": "eb4eccf789a2bda6f3d3875c3310ef0579fd3555", - "component.diff.add-lineNumber": "61583aa6e36aaddd0be173a4a082a450e2522d3a", - "component.diff.add-content-highlight": "ad544fc527ca8b4c297993fe0722b8a7a96ef903", - "component.diff.add-widget": "c1def698ab707194d8f1558e16b05c55d50920d9", - "component.diff.add-widget-color": "a27c504a1f1151974669cf06054c1d0f704ecc38", - "component.diff.del-content": "465e6eb3613967f489cfee4b04f0b283b9e88f91", - "component.diff.del-lineNumber": "4cbe83072b6781d6e3edff645ccb2fb7426c5628", - "component.diff.del-content-highlight": "3e635e401a1a37a259211d093bef70e3a0c507ea", - "component.diff.plain-content": "984456faee2f6a5c202cfd76078ef5b6cd3a05f1", - "component.diff.plain-lineNumber": "6a5550287e7c58afa9d2375c5bfdca4d6c214cf1", - "component.diff.plain-lineNumber-color": "7c1186d20725b53cbefe87f56c5bc6db4e77d898", - "component.diff.empty-content": "712d93a0c1bc9503abda77ae50d624bd328c0057", - "component.diff.hunk-content": "79ad0dfc599f9bc246a6618c85bc1dc59744537f", - "component.diff.hunk-lineNumber": "bccfad80b84e35edf4b47af2ca30057eba2b2ebf", - "component.diff.hunk-content-color": "68c5d6a95d475f7275062e3eb58dba464df3d059", - "component.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", - "component.input.text": "df946237ac2ea0d177f3f2818a673fdf876944c7", - "component.input.placeholder": "85d7632aba08fd476083e508cc2660b17c30981a", - "component.input.icon": "75ca1f38c16fbd5e2697a36c74b0b1dd01f3f5c0", - "component.input.background": "585327333fbbf97bb8db21fbc613025719ca8a87", - "component.input.border": "911dac823dac21c9ccf4e35e10b2eb82a9c6f0ef", - "component.label.text": "80403cd630bba01a064550d9783313227b1d010f", - "component.link.default": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", - "component.link.visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", - "component.nav-tabs.unselected.text": "c085805657bb81574da85d3cb29f89ca08980daa", - "component.nav-tabs.selected.text": "16aa825c8038347237cbe91f7eeece4d2a8d1a2b", - "component.nav-tabs.selected.border": "3427b967112facd59f09fa310c863d7193ea4ffe", - "component.nav-tabs.border": "791d71ca187934e4b98ddff04bc9447a10358699", - "component.nav-tabs.background": "b92549e37390005f2bd1cfce06f9dfb8f67e39e0", - "component.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", - "component.pipeline.card.background": "f207dcff97f000326c4f28293fdbd2830860ce54", - "component.pipeline.card.border": "aa9d9528b1e8e25f9e6dae387b76d9beb2de35a8", - "component.pipeline.card.running.border": "179c0e4d47becc896eb1fbb7f9e8461779b3f680", - "component.pipeline.card.error.border": "1c0b41b41e25250cfb65bdb539bd573be66b0d00", - "component.pipeline.card.completed.border": "14251a54f431aae617af6b9577454a0e212ad76f", - "component.pipeline.card-canvas.1.background": "01bd392d5ddafe85e5575296d08254e52054ba8d", - "component.pipeline.card-canvas.1.border": "b9510abf89f82fb7b779bb730caa1bf393c83bd4", - "component.pipeline.card-canvas.2.background": "87b6b3e65b995fc4180dfb7bf613efb0098d1fff", - "component.pipeline.card-canvas.2.border": "1f9fa1e95134d87995a21738a3877f1c15158e5e", - "component.pipeline.background.dotes": "2784742abff27552789cdd4f2b51cab1331abb4a", - "component.sidebar.background": "8b6619fafae38e8ad94fffd488f2cf53d3c31d76", - "component.sidebar.border": "2263230eae16609a3d95ba5863aa3cc343010131", - "component.sidebar.separator": "a0c913dd38e81e3b2c20ee17642433da6da5f147", - "component.sidebar.hover": "4925b4511178bd2853a6b7b329683d036508aec1", - "component.sidebar.selected": "31f335ecde0aedb12407221718069f5b13574d41", - "component.sidebar.item.unselected.text": "9609e0ad8d79127a3784876f0204d02964f09e43", - "component.sidebar.item.unselected.icon": "5afba128858cf7494fb8a326a435860faf00b0ee", - "component.sidebar.item.selected.text": "5f1daf88cebaea07bd4c2a57c862638340827496", - "component.sidebar.item.selected.icon": "18325fda8139122c4a7cdf6debe2cd1f25d120b7", - "component.sidebar.logo.text": "a3ffa09fdf368badab24aecdbd26709ed7b3c2b2", - "component.sidebar.logo.icon": "c572d382a2018718d719f6a427d31fc9a42f57bd", - "component.sidebar.search.background": "33822e390046e5ec8f71a07fc041514a28778e74", - "component.sidebar.search.border": "f2044f7e8cf503f8809a48a14a88c5ef6466176f", - "component.sidebar.search.placeholder": "665cc00a32edd27b62371ee820d3c3250e629e78", - "component.sidebar.search.btn.background": "70c80e61b9ec397214c809c51de4fdf8177185da", - "component.sidebar.search.btn.border": "1c434c7d16cd4ba880e2d57520c90bc37f6b3879", - "component.sidebar.search.btn.text": "589c7d0162d67165a8752ea54a2c63bb63ee3ad7", - "component.sidebar.footer.username": "68298a8f471bb04f2f0305d9433a2b59613abd8d", - "component.sidebar.footer.data": "6a681d2abb90c2b62a39e20a1d29419c5086f01a", - "component.scrollbar.thumb": "9818c03d003381a966d08d3c6da75af8468bb8ef", - "component.selection.unselected.item": "7a7cad2aa2d6b2803a52eb26c78ea177b84ce241", - "component.selection.unselected.background": "a63ba949d12afc99020e77f95d0538bddba457b3", - "component.selection.unselected.border": "6ef997ebe03bb209ca568a648eb0cc8be69746a6", - "component.selection.selected.item": "f1f43c8acf2d4da10ee2e0d164d4dbe955816018", - "component.selection.selected.background": "1d1bbb9958f047744b66861fd8bd75dc2726dc25", - "component.selection.selected.border": "44b31378ed175b87b50ebad88cfd4a73a66ab9d5", - "component.separator.background": "9f4c82c269bc5aff0fa55d52a0ed59f914057be0", - "component.slider.track.base": "34dc3b5be6733e38f6c28d24d4f3699b2d7ea6f3", - "component.slider.track.progress": "38d8cac26c1cfb91293198eee25299e4aef9c1d8", - "component.slider.track-segments.base": "cb752791a51ff48c6d481426a1affb15048a152a", - "component.slider.track-segments.progress": "a7943fda0e4646e7018046354a9be54cf7d03075", - "component.slider.handle.background": "5c423cc3b672079f1e7dc0d1c8170dade368711a", - "component.slider.handle.border": "94347a2ed2900445946d18c653fb179b8602c533", - "component.status-indicator.completed": "c4c3bce2d28c84c25db4f444f9144b94523737b7", - "component.status-indicator.cancelled": "5aa15732d9ebc41f14b111e252819e2e36617124", - "component.status-indicator.warning": "4dc6e5ea4c736869aee4ebd0ee006f2d73861423", - "component.status-indicator.running": "07ce029f27cf34bf8d6fe3b9a6a600be01c8947e", - "component.status-indicator.merged": "d9eb24404452e6cc2617094fe8f29c69a760ea55", - "component.status-indicator.action-required": "2f1b8543c44b5d93cebddd80b5a9ee2d60fdb146", - "component.status-indicator.waiting": "62f68d300850ce20cf0be8c07d82a41bf1a56ecd", - "component.switch.unselected.thumb": "94d5f0b3a97924583ff697d56db74727b133ba95", - "component.switch.unselected.background": "a8ae87c7bb7ba7f4bfa71f2fdd5f404d19c3a1be", - "component.switch.selected.thumb": "cf6964ec11d69899d5dd39e82d322ea544367e90", - "component.switch.selected.background": "bba05ff96eae08a4adc31a6406e417022d9e5dad", - "component.table.header.text": "65cfc045aa01e3d3eeae4a227cac9be150839db8", - "component.table.header.background": "137c4f2e14bb8cadaf6f900a443700fe928a1fcd", - "component.table.row.alternate-background": "2863f92db433f88f24f62dda4cc9fd50c48130be", - "component.table.row.border": "445d945c4fe4426c3b73cf6f8fe0a572e4525798", - "component.table.cell.text": "73a28f25ba54aff507877ecbfd9942a6ea9f3cea", - "component.tabs.background": "8689ee01219675fb951a2517c2397fba52487971", - "component.tabs.border": "e5bc8cfac224234021c11b381f505da5fcac84ed", - "component.tabs.item.unselected.text": "4af8a5b79c55621f1ed11a7b6fc605657934dc1e", - "component.tabs.item.unselected.background": "fa041cdeb34ba5da6f1bd4cd6d8bb4b8273e0e70", - "component.tabs.item.unselected.border": "79b1a6fe839c012efec923edf40b3bfa2bcdab19", - "component.tabs.item.selected.text": "d048f7001829ff9949b2712b8ca746c8f3f49767", - "component.tabs.item.selected.background": "33269e9854800d565f728ba2a85c5cd3e549b5e8", - "component.tabs.item.selected.border": "11b7e5aeb83fd2f5d968021c750af2ceb5ba5841", - "component.tag.blue.text": "b35e0aebd9d1ebf0fd5d24bbd5ad184db9e11b86", - "component.tag.blue.background": "072fc2901d8ad0199c07bc339d46db086c7b0379", - "component.tag.blue.background-subtle": "67307c003cb91d76e00ef0f3777318e25efac628", - "component.tag.blue.border": "680fb2a6a11251e2619789595cd28c7861aaa530", - "component.tag.brown.text": "b48491f46d15503df99e2d8d9394aa552d09461b", - "component.tag.brown.background": "90b0ee0df4ebe7f06bfd07a7acbe812a45d621a4", - "component.tag.brown.background-subtle": "134ffd2a91ef027e197db6a5331d2726bc080ad6", - "component.tag.brown.border": "675776ff7a30540c297579d72b7f00779d778c14", - "component.tag.cyan.text": "6bf9361c5931ba40663d2c412f28f15382498517", - "component.tag.cyan.background": "83107c8cff314c553ed2cea5c9af1ff3356485e5", - "component.tag.cyan.background-subtle": "7f2724127eebb6e01713828af3736cd2e3734436", - "component.tag.cyan.border": "3286065f931626298e8f3dab2328297e83a79771", - "component.tag.green.text": "699a30f1d5f76ed4e631faa3da63be65e88af039", - "component.tag.green.background": "8b06c35974700260dff1a712c0a3976d4ddb0df5", - "component.tag.green.background-subtle": "c4f47c34772d8367bc3b00645420511f37aaecad", - "component.tag.green.border": "db85545b7d00ef9e199bf863dcdcc2be520f520c", - "component.tag.indigo.text": "d641d4626278e4d17ff4d98202112da9580a6b89", - "component.tag.indigo.background": "bb4af9a068f716c2f0b4f77c228b88009ac049c9", - "component.tag.indigo.background-subtle": "877e3b4ee6040ed581a8349c8fdb5e49ed36dfe0", - "component.tag.indigo.border": "885fdb80c956855c30666c660d5839dc357d1f5f", - "component.tag.lime.text": "763399447b243f761b7cce55f7dcf2fbb1797ee3", - "component.tag.lime.background": "d51cede4c823e16ac204bcaddb65d49c325c3cbe", - "component.tag.lime.background-subtle": "556934df078200ab014c762eeaa04deecd05422e", - "component.tag.lime.border": "fbb53e37ef7cb87cfae5298e69a5ffe4f99a23a7", - "component.tag.mint.text": "d3d406bffbadb1b894e4bb6aef7b1f5a1945094c", - "component.tag.mint.background": "04568a7d0bff5fbc11600bf840916f5451a0fe62", - "component.tag.mint.background-subtle": "1d39716bceda8510beb02e19847c391523e3690a", - "component.tag.mint.border": "c703cecfc8bd82c593dc9d81ce18748edd6ecf4d", - "component.tag.orange.text": "ba407492439b283fedf30a8ab8b16774c0931a9f", - "component.tag.orange.background": "ef766412f340a4aa62c8888a6fdfb2890f3ea207", - "component.tag.orange.background-subtle": "05e823662de8b1f99a062cea3c0f24df69b29362", - "component.tag.orange.border": "2f3023f2311c12acb44cdd28beb888f64d6d2183", - "component.tag.pink.text": "83b73e0e328485233004d42baa8a0948ff2198b0", - "component.tag.pink.background": "b23a211249a71f32bf15757316d0596fdb395962", - "component.tag.pink.background-subtle": "c144f19e07b839d68f20eb5c51ebd94e0f333a82", - "component.tag.pink.border": "b4874a81a08261362f3d8237833b80e68a851b76", - "component.tag.purple.text": "9869d8aad416ac3f9e530b0d62b05dda66906de4", - "component.tag.purple.background": "bc59008310427ba5883f71079b19b8cb4c6dd862", - "component.tag.purple.background-subtle": "a3598602d6e6b1d03f638f1a941801f147f4657a", - "component.tag.purple.border": "de1d577bd170613ab46460e9c50ca8de420152f6", - "component.tag.red.text": "aca8c1832317ac859b4263769855f423840a8569", - "component.tag.red.background": "9008e05416a00096c234511275b92be7204363b6", - "component.tag.red.background-subtle": "986bdd3f8d16488337ca9f46b71b04195d7578b0", - "component.tag.red.border": "f7f9067262546ee6eb77955e38aa0a451fc7f98a", - "component.tag.violet.text": "2ab996ff3465a0b97dee4d7c5606df3d46ab2a07", - "component.tag.violet.background": "4c9b9c2658479fc0e56894975a9b9b8d76df5b00", - "component.tag.violet.background-subtle": "fded9a84a20755592f57f081ebb594bfbaf8cfb3", - "component.tag.violet.border": "77de89ef1ab5168b7ff5e329bde8608047149a04", - "component.tag.yellow.text": "cadfcb4d0fe72fd5828cd764d54198026520e10c", - "component.tag.yellow.background": "a29464cd2a618a77586cb8760478a4d82b12b3ca", - "component.tag.yellow.background-subtle": "1b262be32c5779f024da5ad5696c805a83eb96c7", - "component.tag.yellow.border": "b595821fd5ef662361820415bb878e8ef4ab8939", - "component.tag.gray.text": "e7608c51a2421de226afebbcb909180c8a0cdb5a", - "component.tag.gray.background": "9bcc758ef67bbaac88637e99a702da5d7f7a3144", - "component.tag.gray.background-subtle": "76dfa99dd57cbaf2e7cbec9511cd1e1ddd92ee0e", - "component.tag.gray.border": "02e03f32969f9e6120bb6c7a3b781a5446f1bef1", - "component.toast.default.title": "f791d24eeab59c12cf4aad84f4677099bb4a01c1", - "component.toast.default.description": "6000da4ada3b9445750fb4b7b990726df120c271", - "component.toast.default.background": "5b9e9ea5b7de018a92d3deb902257e4e2bbb49f9", - "component.toast.default.border": "f74755bc7843dc9d7c788c54178b7ce3b83dea3f", - "component.toast.danger.title": "b5ad1c43fcee32eb251b980e884e77ea137c3369", - "component.toast.danger.description": "d281b5c13f2a4a293042f52b168e39f8bec398da", - "component.toast.danger.background": "8ba5c70e994ab44aeb72b3ed7f26ca9646d59cc0", - "component.toast.danger.border": "7f5252c13b96825084248b367f36377bb003ca96", - "component.tooltip.text": "b79a7ec441cdc7c6eee9313602f081d063327c1d", - "component.tooltip.background": "a35d0240a1c4de13350e6a4770dd1703a90a9227", - "shadow-color.0": "c0c282f63e107374a732d74c1742cf60d52e6e5c", - "shadow-color.1": "1ec33a9c84353664d23cd23d6c033d1c330c149a", - "shadow-color.2": "6200a000044d8dbee421ed4afb0c3ff42febb6ef", - "shadow-color.3": "77d99afb159d8e193a82f615dd84de3214e00703", - "shadow-color.4": "2b2e0307d252bdc6db53a23ce2cc2e9bb4f6b914", - "shadow-color.5": "5a6c707240bab54cb4403f47262abfe0756efc9a", - "shadow-color.6": "928283d00759150575a8f155da90180a582be438", - "shadow-color.inner": "6cb5a98fba0b13e952859b9f023259b5c06cfd1a", - "gradient.ai.gradient-stop-1": "8db516caa68afc5b8fdd6fc6e5a9bad7715c5f26", - "gradient.ai.gradient-stop-2": "33930f41665251a281973a37847f357480aedca3", - "gradient.ai.gradient-stop-3": "c9e14c3db8e622b10b1cd3e860115cd6f876ae49", - "gradient.ai.gradient-stop-4": "6e7d0850d7eb1e699f87b41f6ffd4cb8d73d72e8", - "gradient.skeleton.gradient-stop-1": "5427016b990b75f0d1ce60eef8cb9b96d75fbde2", - "gradient.skeleton.gradient-stop-2": "01442c311e6da751c30c3518fc32970306767274", - "gradient.skeleton.gradient-stop-3": "7fda4c834a3daf0c56bb59777c525670ae2dee3e", - "gradient.pipeline.running.gradient-stop-1": "0c187d1ebb015ec66bac356009795316f84807ae", - "gradient.pipeline.running.gradient-stop-2": "d1251f86c91bd0f29d8ac8cfa01056bc307156b4", - "gradient.pipeline.running.gradient-stop-3": "b09bdab234cdf7c204cb153ec94ea0a9b2bb4976", - "gradient.pipeline.arrows.gradient-stop-1": "0465e74baaf10a12f23b9eaa40fc1ae08485a0d5", - "gradient.pipeline.arrows.gradient-stop-2": "4cadc4f9a5e66f28eaa27fb54b6ce538ea430c7d", - "gradient.pipeline.arrows.gradient-stop-3": "5af16d4ae6b63ff8dcf3254009e712db4ac1a3f9", - "gradient.pipeline.card.background.gradient-from": "8404a4e146121987426681accb996902179fad72", - "gradient.pipeline.card.background.gradient-to": "037bbd7fb410d05993a48594626a7babb32605a6", - "gradient.pipeline.card.border.gradient-from": "342926ec7179e7cbe133981050c1e1e41d94ed7a", - "gradient.pipeline.card.border.gradient-to": "8e39428cc5ce20f3593127f2ef71f180b38ee9a4", - "gradient.pipeline.widget.number.gradient-from": "dc372cb50eedf6023cd80cb6a4520e5fdf91358b", - "gradient.pipeline.widget.number.gradient-to": "e505c8d9dd140f5a671c1291ffd519fcff5c3e2c", - "gradient.pipeline.widget.blob.big.gradient-from": "b518524b25a5b95804988c640c4d52ba7ebd4599", - "gradient.pipeline.widget.blob.big.gradient-to": "80a493af10245e0ebbc6a51f5452d61d836a3754", - "gradient.pipeline.widget.blob.small.gradient-from": "8d7be31e69f0e54dd2e493d9051c2268078ea5ed", - "gradient.pipeline.widget.blob.small.gradient-to": "198813cf6242881ce0e0d030ca22ef31f9190d13", - "iconStrokeWidth.xxs": "751ceaa292e27736009bef894b62f83c1b2d66d8", - "iconStrokeWidth.xs": "77ca59c88a0b47972554b1db3f6469a230a6ad8c", - "iconStrokeWidth.sm": "e445b22e1f18af07002a1dc76f900dada5477383", - "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", - "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", - "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "component.dropdown.item.text": "2f1f1ea9d368ec8be380803506fbf657cabe6ac0" - }, - "group": "mode" - }, - { - "id": "d3ee9e10ed075e54d23af7c6362a35bb9867ce66", - "name": "light-dimmer-tritanopia", - "$figmaStyleReferences": { - "shadow.0": "S:a2ed3778198048e91067a04633c27ba20e9fcbec,", - "shadow.1": "S:947694488889f7271c428950bec937ee79f8a536,", - "shadow.2": "S:70378f090cb66b03ee4b18e25742743934f37757,", - "shadow.3": "S:aa7e83fd47e75f5a1ae3e17f64417d5e9fcb96ae,", - "shadow.4": "S:5dfba690094db266c4ab7686fccbbedd8c16385f,", - "shadow.5": "S:d6752151a8dd3bd4b4bf12ad15a80c522f760731,", - "shadow.6": "S:da8e7b5b0f1352215fbaab66eff62a3e19d22b67,", - "shadow.inner": "S:2805cdc40176a4707d5cfc549b4c12e7ec4e74ff,", - "ring.focus": "S:062018f6483f54f1255b952aa1759b028d502ac3," - }, - "selectedTokenSets": { - "mode/light/dimmer-tritanopia": "enabled" - }, - "$figmaCollectionId": "VariableCollectionId:1340:156918", - "$figmaModeId": "1389:20", - "$figmaVariableReferences": { - "background.1": "633e5f77aa1bd1bd133852d8372b9c9f1231a9e4", - "background.2": "14e8d4b56cc273b508af8a2c58cb00e99e08d1d3", - "background.3": "33554ff11e1eab35e50aa3570f51d53f16f46d6a", - "text.1": "38382b9984a98f9d26692a7f2882dfb5c5d51825", - "text.2": "115f62efd02491e85a63dfd601b03725d3711f23", - "text.3": "1c7327f01cf759b17fd0523cb540afa8700c1dc7", - "text.accent": "0b3cd5357659e6542cca163ccfd96c0cac059203", - "text.success": "ee56057b81e6d0872a84ca6b29affc8911fe333e", - "text.danger": "c7e38d7c7afc899f4d40392dbd6bc5ed6580264d", - "text.warning": "b03334e4c9db4b76269e4be886df6c1abf74d0ca", - "border.1": "5ad2231a611605964ba70f80e7aabb48f04bc704", - "border.2": "9084bef359e38136e0dddac25a464896456a9b1a", - "border.3": "5ff5d5233f7cb0233ce7634bc480026668c818f6", - "border.focus": "8db219e896acc4d828aaaf4add646d96540a84ea", - "border.success": "b13758973865eab0b4d79028a48e457eae8bec47", - "border.danger": "33d53c1486021bb3c9edce4123b484a2aabc8de0", - "border.warning": "027e57e08a1edcaaa7fbe033902bb3f65497abb4", - "state.hover": "78426caca2a07ee56132762a720ae07e2810f03b", - "state.selected": "ef914056c9c9dbaef00fa8795702a3cb933ee761", - "state.disabled.text": "967ab1b863941c100f58cc55e611ee2709051f01", - "state.disabled.background": "7a192b5ddcc570f0c8e3a5dbfd54d780e2832bbd", - "state.disabled.border": "067fd26e80ad39a28f738a3b76d21d354092d551", - "component.accordion.title": "5e49d6ddf7f2b21724b474d4a5545256143dce54", - "component.accordion.description": "bc47401a69d07fa71f0371765ed940745fc7a5b9", - "component.accordion.chevron": "5dd530f96134323125031668d4ea98a36ea0de86", - "component.accordion.border": "0b3fcc0e02a2a86625b2b4a9cfeebfad9486bc3a", - "component.alert.default.title": "d8e59ed205399e9727b0dcecdccad3d8daaaa622", - "component.alert.default.description": "f9ec7fec91747435740f000fb642f9009e8fc2db", - "component.alert.default.background": "7fbbdfcc33a3051394f89675798db2159741a5fc", - "component.alert.default.border": "549692bf2f70f6b40c7d55259f8890189aa6cc98", - "component.alert.danger.title": "c8da1cdbba8e0f86edda5fd3869f6186d53881ca", - "component.alert.danger.description": "366849405bd53c78f0b73d72585034a52f05d9a7", - "component.alert.danger.background": "5756a9bdba027993a9879b32ed129e3034028cdf", - "component.alert.danger.border": "a1a3be9eefab6edf2e996a46537872680dc45a09", - "component.avatar.text": "23018f4c7f22c4afb3b7e49f585a1fbb591209de", - "component.avatar.background": "57703fddbd26d363509fdba3aea037bd2f515ee0", - "component.avatar.border": "d651f4cb9082aa4d6e6af2c5abab700d683a5c85", - "component.badge.default.text": "ab90828e3b8c6adce5dc10bf85107b001b958e95", - "component.badge.default.background": "706b070b298e2d2a97665baf7af05187eefeb4fe", - "component.badge.default.border": "a935a2968ca4ecfb8cc58a18f31ae8fe65eb516b", - "component.badge.neutral.text": "82d39f1786c4371303ae21e4c02db79989c54e36", - "component.badge.neutral.background": "f5480b1a2b648fdb0561acda7515c38271cfb04b", - "component.badge.neutral.border": "00f05792ddf6e53bff79346df6a34144426d50e0", - "component.badge.success.text": "71014a6138e8747257a21144f8114b906cfe0f0a", - "component.badge.success.border": "190589c6021debb7bb676f05ac7f063c237fd4aa", - "component.badge.success.background": "177eb9f406784ddb958232cd643ebbb3490a53d4", - "component.badge.danger.text": "6c0c04f17c2bc0ee085d09bf0f205dcbc66c1e17", - "component.badge.danger.border": "6bb014acbbd68a796ed0c4d8c4f73e8e9e619923", - "component.badge.danger.background": "4162b10332d17800585d97ed45e45d69c2006808", - "component.badge.warning.text": "8581620d95e5b92a8c85341ebf63f21fcf7133d0", - "component.badge.warning.border": "71cb519182108ac72ffef823935546e4bff62bbc", - "component.badge.warning.background": "74c13457a85684a054426bd833859fe93eaec978", - "component.badge.running.text": "0b0c1be217e557a5b14c1cb25e988e4ac6d40583", - "component.badge.running.border": "27d3c48d3c316bc4f980282759b5e82f8aaaf49d", - "component.badge.running.background": "a85fddc26baf586ac7ba79e381e5f8fefca87c65", - "component.badge.merged.text": "a83d66ef53e8a094a62f2b32a4d17e58d552b1ef", - "component.badge.merged.border": "755392bca643af0a3fe5492069881a870aa11dc3", - "component.badge.merged.background": "4f4c81b1fe43bfe0d721a22d0aeb93079776cf6d", - "component.badge.ai.text": "bb4daee92817073da0366090742d0a17babb5728", - "component.badge.ai.background": "c5764a2304bf0e8a153c9ce0da20827696a76b41", - "component.breadcrumb.item-inactive": "2f009ca6cafb50c994205c9df02ee2d2503f7d23", - "component.breadcrumb.item-current": "7b502cc2e72f66bb501fdc5f480d0133d1b3841a", - "component.breadcrumb.separator": "1cd28c3ff97ab2f529a19c632d89dd44af0aad80", - "component.btn.primary.text": "9d32f032da93c9aab8b3bc6087c26aa12f507ad7", - "component.btn.primary.background": "410d584a3469233e067d0592a366fdebbe1049bc", - "component.btn.primary.border": "1491ac71f9681307c2d6528e443504e079061988", - "component.btn.secondary.text": "12c93d1b08ae50645a3b8f59256fcec00a4f84ca", - "component.btn.secondary.background": "86434310c95f5c055783011cc0e7c7918f67a35c", - "component.btn.secondary.border": "66bda91f87154efd3cefdc7a634ecb8afa8cd285", - "component.btn.outline.unselected.text": "9cf2c495178d6fdfd8f1360376242acbd4dc5e75", - "component.btn.outline.unselected.icon": "af1510c6050f671219d2089e0e59d5febb4422d6", - "component.btn.outline.unselected.border": "2b3013d632e566301e9f5f1a5cbb6aab4e7ec53f", - "component.btn.outline.selected.text": "13b50089245dec1899db2012412efcf649e2c0b4", - "component.btn.outline.selected.icon": "2bdf2c92b22e814109f4e05ec4d41d92f934a15d", - "component.btn.outline.selected.border": "ef10f4599233f62203def151b386013ddaa63afb", - "component.btn.ghost.unselected.text": "43fa10dd413cddb9a2e2142ead9ca3b4a91b49a6", - "component.btn.ghost.unselected.icon": "5ce332f51238b374104ec53067d685c26882f38e", - "component.btn.ghost.selected.text": "74cbf3b86016e05517f8c7bc64652281c940363e", - "component.btn.ghost.selected.icon": "1d8c6206a136d9c176ffba600a1e94618c4b96f8", - "component.btn.success.text": "52a336440e013bbc849ad67a43d0e136cf4f0b51", - "component.btn.success.background": "608ca6930129b4e5ff36d7f38508ae2537b66629", - "component.btn.success.border": "1f74d9985a10fe20e0acc4647cf4949005e9d4f1", - "component.btn.success.state.hover": "d05bde38a6539a11e3ccd87345af113ccd6bd113", - "component.btn.success.state.active": "f6e48e68dba6c32de27fadcaca3d1959f081d2e5", - "component.btn.danger.text": "49c02562362b8f775cfc2c4c614ecd646dcc2716", - "component.btn.danger.background": "0b015d0a4f456781969d7ffaf135c7c2a8858440", - "component.btn.danger.border": "9f99ee56f1ae2b7eb2f98300b83d4f53b15fd763", - "component.btn.danger.state.hover": "e7756e1d022d893bfa5fdd619f181d26fb7b117b", - "component.btn.danger.state.active": "23c7c85ff6104e098a208b6f4b86c1d0eef0f543", - "component.btn.ai.text": "380368600319fa12b73538ff52acd9d0e977e367", - "component.btn.ai.background": "8c9a1d07e05837f50588b642a4b51462f883887d", - "component.card.background": "256878745d17a46b7159919d8e30a3e960f59575", - "component.card.border": "3688ffcc56c4fb44dc0e221b8e09a958fd9e509d", - "component.dialog.title": "e6e0ff2bf1f3802eb21492e8b833c5f5e679cd82", - "component.dialog.description": "301509fcf2faac8497b2136f7879b9b0b3c64433", - "component.dialog.background": "ff2918d712798a4b487b6f6e5befe7b3eef59883", - "component.dialog.border": "4a6cb3732ad8b36bb9de0d15cbed575c87996088", - "component.dialog.backdrop": "893e60ed671f891241a3084707057185398446ed", - "component.dropdown.background": "09b2dca27ba9efabfe838d713a14ca6e6ac46685", - "component.dropdown.border": "c8cdfff63f4e142d651070ff1056b69a638aaab7", - "component.dropdown.item.delete.text": "864396a8c9b5df0fd948ded7d520ded936d74a8b", - "component.dropdown.item.delete.state.hover": "308dc9064be8e754f8385b0e8ff5489563d7c984", - "component.diff.grey": "43bf4f466a6e231c9951a639313740579c29d824", - "component.diff.add-content": "eb4eccf789a2bda6f3d3875c3310ef0579fd3555", - "component.diff.add-lineNumber": "61583aa6e36aaddd0be173a4a082a450e2522d3a", - "component.diff.add-content-highlight": "ad544fc527ca8b4c297993fe0722b8a7a96ef903", - "component.diff.add-widget": "c1def698ab707194d8f1558e16b05c55d50920d9", - "component.diff.add-widget-color": "a27c504a1f1151974669cf06054c1d0f704ecc38", - "component.diff.del-content": "465e6eb3613967f489cfee4b04f0b283b9e88f91", - "component.diff.del-lineNumber": "4cbe83072b6781d6e3edff645ccb2fb7426c5628", - "component.diff.del-content-highlight": "3e635e401a1a37a259211d093bef70e3a0c507ea", - "component.diff.plain-content": "984456faee2f6a5c202cfd76078ef5b6cd3a05f1", - "component.diff.plain-lineNumber": "6a5550287e7c58afa9d2375c5bfdca4d6c214cf1", - "component.diff.plain-lineNumber-color": "7c1186d20725b53cbefe87f56c5bc6db4e77d898", - "component.diff.empty-content": "712d93a0c1bc9503abda77ae50d624bd328c0057", - "component.diff.hunk-content": "79ad0dfc599f9bc246a6618c85bc1dc59744537f", - "component.diff.hunk-lineNumber": "bccfad80b84e35edf4b47af2ca30057eba2b2ebf", - "component.diff.hunk-content-color": "68c5d6a95d475f7275062e3eb58dba464df3d059", - "component.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", - "component.input.text": "df946237ac2ea0d177f3f2818a673fdf876944c7", - "component.input.placeholder": "85d7632aba08fd476083e508cc2660b17c30981a", - "component.input.icon": "75ca1f38c16fbd5e2697a36c74b0b1dd01f3f5c0", - "component.input.background": "585327333fbbf97bb8db21fbc613025719ca8a87", - "component.input.border": "911dac823dac21c9ccf4e35e10b2eb82a9c6f0ef", - "component.label.text": "80403cd630bba01a064550d9783313227b1d010f", - "component.link.default": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", - "component.link.visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", - "component.nav-tabs.unselected.text": "c085805657bb81574da85d3cb29f89ca08980daa", - "component.nav-tabs.selected.text": "16aa825c8038347237cbe91f7eeece4d2a8d1a2b", - "component.nav-tabs.selected.border": "3427b967112facd59f09fa310c863d7193ea4ffe", - "component.nav-tabs.border": "791d71ca187934e4b98ddff04bc9447a10358699", - "component.nav-tabs.background": "b92549e37390005f2bd1cfce06f9dfb8f67e39e0", - "component.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", - "component.pipeline.card.background": "f207dcff97f000326c4f28293fdbd2830860ce54", - "component.pipeline.card.border": "aa9d9528b1e8e25f9e6dae387b76d9beb2de35a8", - "component.pipeline.card.running.border": "179c0e4d47becc896eb1fbb7f9e8461779b3f680", - "component.pipeline.card.error.border": "1c0b41b41e25250cfb65bdb539bd573be66b0d00", - "component.pipeline.card.completed.border": "14251a54f431aae617af6b9577454a0e212ad76f", - "component.pipeline.card-canvas.1.background": "01bd392d5ddafe85e5575296d08254e52054ba8d", - "component.pipeline.card-canvas.1.border": "b9510abf89f82fb7b779bb730caa1bf393c83bd4", - "component.pipeline.card-canvas.2.background": "87b6b3e65b995fc4180dfb7bf613efb0098d1fff", - "component.pipeline.card-canvas.2.border": "1f9fa1e95134d87995a21738a3877f1c15158e5e", - "component.pipeline.background.dotes": "2784742abff27552789cdd4f2b51cab1331abb4a", - "component.sidebar.background": "8b6619fafae38e8ad94fffd488f2cf53d3c31d76", - "component.sidebar.border": "2263230eae16609a3d95ba5863aa3cc343010131", - "component.sidebar.separator": "a0c913dd38e81e3b2c20ee17642433da6da5f147", - "component.sidebar.hover": "4925b4511178bd2853a6b7b329683d036508aec1", - "component.sidebar.selected": "31f335ecde0aedb12407221718069f5b13574d41", - "component.sidebar.item.unselected.text": "9609e0ad8d79127a3784876f0204d02964f09e43", - "component.sidebar.item.unselected.icon": "5afba128858cf7494fb8a326a435860faf00b0ee", - "component.sidebar.item.selected.text": "5f1daf88cebaea07bd4c2a57c862638340827496", - "component.sidebar.item.selected.icon": "18325fda8139122c4a7cdf6debe2cd1f25d120b7", - "component.sidebar.logo.text": "a3ffa09fdf368badab24aecdbd26709ed7b3c2b2", - "component.sidebar.logo.icon": "c572d382a2018718d719f6a427d31fc9a42f57bd", - "component.sidebar.search.background": "33822e390046e5ec8f71a07fc041514a28778e74", - "component.sidebar.search.border": "f2044f7e8cf503f8809a48a14a88c5ef6466176f", - "component.sidebar.search.placeholder": "665cc00a32edd27b62371ee820d3c3250e629e78", - "component.sidebar.search.btn.background": "70c80e61b9ec397214c809c51de4fdf8177185da", - "component.sidebar.search.btn.border": "1c434c7d16cd4ba880e2d57520c90bc37f6b3879", - "component.sidebar.search.btn.text": "589c7d0162d67165a8752ea54a2c63bb63ee3ad7", - "component.sidebar.footer.username": "68298a8f471bb04f2f0305d9433a2b59613abd8d", - "component.sidebar.footer.data": "6a681d2abb90c2b62a39e20a1d29419c5086f01a", - "component.scrollbar.thumb": "9818c03d003381a966d08d3c6da75af8468bb8ef", - "component.selection.unselected.item": "7a7cad2aa2d6b2803a52eb26c78ea177b84ce241", - "component.selection.unselected.background": "a63ba949d12afc99020e77f95d0538bddba457b3", - "component.selection.unselected.border": "6ef997ebe03bb209ca568a648eb0cc8be69746a6", - "component.selection.selected.item": "f1f43c8acf2d4da10ee2e0d164d4dbe955816018", - "component.selection.selected.background": "1d1bbb9958f047744b66861fd8bd75dc2726dc25", - "component.selection.selected.border": "44b31378ed175b87b50ebad88cfd4a73a66ab9d5", - "component.separator.background": "9f4c82c269bc5aff0fa55d52a0ed59f914057be0", - "component.slider.track.base": "34dc3b5be6733e38f6c28d24d4f3699b2d7ea6f3", - "component.slider.track.progress": "38d8cac26c1cfb91293198eee25299e4aef9c1d8", - "component.slider.track-segments.base": "cb752791a51ff48c6d481426a1affb15048a152a", - "component.slider.track-segments.progress": "a7943fda0e4646e7018046354a9be54cf7d03075", - "component.slider.handle.background": "5c423cc3b672079f1e7dc0d1c8170dade368711a", - "component.slider.handle.border": "94347a2ed2900445946d18c653fb179b8602c533", - "component.status-indicator.completed": "c4c3bce2d28c84c25db4f444f9144b94523737b7", - "component.status-indicator.cancelled": "5aa15732d9ebc41f14b111e252819e2e36617124", - "component.status-indicator.warning": "4dc6e5ea4c736869aee4ebd0ee006f2d73861423", - "component.status-indicator.running": "07ce029f27cf34bf8d6fe3b9a6a600be01c8947e", - "component.status-indicator.merged": "d9eb24404452e6cc2617094fe8f29c69a760ea55", - "component.status-indicator.action-required": "2f1b8543c44b5d93cebddd80b5a9ee2d60fdb146", - "component.status-indicator.waiting": "62f68d300850ce20cf0be8c07d82a41bf1a56ecd", - "component.switch.unselected.thumb": "94d5f0b3a97924583ff697d56db74727b133ba95", - "component.switch.unselected.background": "a8ae87c7bb7ba7f4bfa71f2fdd5f404d19c3a1be", - "component.switch.selected.thumb": "cf6964ec11d69899d5dd39e82d322ea544367e90", - "component.switch.selected.background": "bba05ff96eae08a4adc31a6406e417022d9e5dad", - "component.table.header.text": "65cfc045aa01e3d3eeae4a227cac9be150839db8", - "component.table.header.background": "137c4f2e14bb8cadaf6f900a443700fe928a1fcd", - "component.table.row.alternate-background": "2863f92db433f88f24f62dda4cc9fd50c48130be", - "component.table.row.border": "445d945c4fe4426c3b73cf6f8fe0a572e4525798", - "component.table.cell.text": "73a28f25ba54aff507877ecbfd9942a6ea9f3cea", - "component.tabs.background": "8689ee01219675fb951a2517c2397fba52487971", - "component.tabs.border": "e5bc8cfac224234021c11b381f505da5fcac84ed", - "component.tabs.item.unselected.text": "4af8a5b79c55621f1ed11a7b6fc605657934dc1e", - "component.tabs.item.unselected.background": "fa041cdeb34ba5da6f1bd4cd6d8bb4b8273e0e70", - "component.tabs.item.unselected.border": "79b1a6fe839c012efec923edf40b3bfa2bcdab19", - "component.tabs.item.selected.text": "d048f7001829ff9949b2712b8ca746c8f3f49767", - "component.tabs.item.selected.background": "33269e9854800d565f728ba2a85c5cd3e549b5e8", - "component.tabs.item.selected.border": "11b7e5aeb83fd2f5d968021c750af2ceb5ba5841", - "component.tag.blue.text": "b35e0aebd9d1ebf0fd5d24bbd5ad184db9e11b86", - "component.tag.blue.background": "072fc2901d8ad0199c07bc339d46db086c7b0379", - "component.tag.blue.background-subtle": "67307c003cb91d76e00ef0f3777318e25efac628", - "component.tag.blue.border": "680fb2a6a11251e2619789595cd28c7861aaa530", - "component.tag.brown.text": "b48491f46d15503df99e2d8d9394aa552d09461b", - "component.tag.brown.background": "90b0ee0df4ebe7f06bfd07a7acbe812a45d621a4", - "component.tag.brown.background-subtle": "134ffd2a91ef027e197db6a5331d2726bc080ad6", - "component.tag.brown.border": "675776ff7a30540c297579d72b7f00779d778c14", - "component.tag.cyan.text": "6bf9361c5931ba40663d2c412f28f15382498517", - "component.tag.cyan.background": "83107c8cff314c553ed2cea5c9af1ff3356485e5", - "component.tag.cyan.background-subtle": "7f2724127eebb6e01713828af3736cd2e3734436", - "component.tag.cyan.border": "3286065f931626298e8f3dab2328297e83a79771", - "component.tag.green.text": "699a30f1d5f76ed4e631faa3da63be65e88af039", - "component.tag.green.background": "8b06c35974700260dff1a712c0a3976d4ddb0df5", - "component.tag.green.background-subtle": "c4f47c34772d8367bc3b00645420511f37aaecad", - "component.tag.green.border": "db85545b7d00ef9e199bf863dcdcc2be520f520c", - "component.tag.indigo.text": "d641d4626278e4d17ff4d98202112da9580a6b89", - "component.tag.indigo.background": "bb4af9a068f716c2f0b4f77c228b88009ac049c9", - "component.tag.indigo.background-subtle": "877e3b4ee6040ed581a8349c8fdb5e49ed36dfe0", - "component.tag.indigo.border": "885fdb80c956855c30666c660d5839dc357d1f5f", - "component.tag.lime.text": "763399447b243f761b7cce55f7dcf2fbb1797ee3", - "component.tag.lime.background": "d51cede4c823e16ac204bcaddb65d49c325c3cbe", - "component.tag.lime.background-subtle": "556934df078200ab014c762eeaa04deecd05422e", - "component.tag.lime.border": "fbb53e37ef7cb87cfae5298e69a5ffe4f99a23a7", - "component.tag.mint.text": "d3d406bffbadb1b894e4bb6aef7b1f5a1945094c", - "component.tag.mint.background": "04568a7d0bff5fbc11600bf840916f5451a0fe62", - "component.tag.mint.background-subtle": "1d39716bceda8510beb02e19847c391523e3690a", - "component.tag.mint.border": "c703cecfc8bd82c593dc9d81ce18748edd6ecf4d", - "component.tag.orange.text": "ba407492439b283fedf30a8ab8b16774c0931a9f", - "component.tag.orange.background": "ef766412f340a4aa62c8888a6fdfb2890f3ea207", - "component.tag.orange.background-subtle": "05e823662de8b1f99a062cea3c0f24df69b29362", - "component.tag.orange.border": "2f3023f2311c12acb44cdd28beb888f64d6d2183", - "component.tag.pink.text": "83b73e0e328485233004d42baa8a0948ff2198b0", - "component.tag.pink.background": "b23a211249a71f32bf15757316d0596fdb395962", - "component.tag.pink.background-subtle": "c144f19e07b839d68f20eb5c51ebd94e0f333a82", - "component.tag.pink.border": "b4874a81a08261362f3d8237833b80e68a851b76", - "component.tag.purple.text": "9869d8aad416ac3f9e530b0d62b05dda66906de4", - "component.tag.purple.background": "bc59008310427ba5883f71079b19b8cb4c6dd862", - "component.tag.purple.background-subtle": "a3598602d6e6b1d03f638f1a941801f147f4657a", - "component.tag.purple.border": "de1d577bd170613ab46460e9c50ca8de420152f6", - "component.tag.red.text": "aca8c1832317ac859b4263769855f423840a8569", - "component.tag.red.background": "9008e05416a00096c234511275b92be7204363b6", - "component.tag.red.background-subtle": "986bdd3f8d16488337ca9f46b71b04195d7578b0", - "component.tag.red.border": "f7f9067262546ee6eb77955e38aa0a451fc7f98a", - "component.tag.violet.text": "2ab996ff3465a0b97dee4d7c5606df3d46ab2a07", - "component.tag.violet.background": "4c9b9c2658479fc0e56894975a9b9b8d76df5b00", - "component.tag.violet.background-subtle": "fded9a84a20755592f57f081ebb594bfbaf8cfb3", - "component.tag.violet.border": "77de89ef1ab5168b7ff5e329bde8608047149a04", - "component.tag.yellow.text": "cadfcb4d0fe72fd5828cd764d54198026520e10c", - "component.tag.yellow.background": "a29464cd2a618a77586cb8760478a4d82b12b3ca", - "component.tag.yellow.background-subtle": "1b262be32c5779f024da5ad5696c805a83eb96c7", - "component.tag.yellow.border": "b595821fd5ef662361820415bb878e8ef4ab8939", - "component.tag.gray.text": "e7608c51a2421de226afebbcb909180c8a0cdb5a", - "component.tag.gray.background": "9bcc758ef67bbaac88637e99a702da5d7f7a3144", - "component.tag.gray.background-subtle": "76dfa99dd57cbaf2e7cbec9511cd1e1ddd92ee0e", - "component.tag.gray.border": "02e03f32969f9e6120bb6c7a3b781a5446f1bef1", - "component.toast.default.title": "f791d24eeab59c12cf4aad84f4677099bb4a01c1", - "component.toast.default.description": "6000da4ada3b9445750fb4b7b990726df120c271", - "component.toast.default.background": "5b9e9ea5b7de018a92d3deb902257e4e2bbb49f9", - "component.toast.default.border": "f74755bc7843dc9d7c788c54178b7ce3b83dea3f", - "component.toast.danger.title": "b5ad1c43fcee32eb251b980e884e77ea137c3369", - "component.toast.danger.description": "d281b5c13f2a4a293042f52b168e39f8bec398da", - "component.toast.danger.background": "8ba5c70e994ab44aeb72b3ed7f26ca9646d59cc0", - "component.toast.danger.border": "7f5252c13b96825084248b367f36377bb003ca96", - "component.tooltip.text": "b79a7ec441cdc7c6eee9313602f081d063327c1d", - "component.tooltip.background": "a35d0240a1c4de13350e6a4770dd1703a90a9227", - "shadow-color.0": "c0c282f63e107374a732d74c1742cf60d52e6e5c", - "shadow-color.1": "1ec33a9c84353664d23cd23d6c033d1c330c149a", - "shadow-color.2": "6200a000044d8dbee421ed4afb0c3ff42febb6ef", - "shadow-color.3": "77d99afb159d8e193a82f615dd84de3214e00703", - "shadow-color.4": "2b2e0307d252bdc6db53a23ce2cc2e9bb4f6b914", - "shadow-color.5": "5a6c707240bab54cb4403f47262abfe0756efc9a", - "shadow-color.6": "928283d00759150575a8f155da90180a582be438", - "shadow-color.inner": "6cb5a98fba0b13e952859b9f023259b5c06cfd1a", - "gradient.ai.gradient-stop-1": "8db516caa68afc5b8fdd6fc6e5a9bad7715c5f26", - "gradient.ai.gradient-stop-2": "33930f41665251a281973a37847f357480aedca3", - "gradient.ai.gradient-stop-3": "c9e14c3db8e622b10b1cd3e860115cd6f876ae49", - "gradient.ai.gradient-stop-4": "6e7d0850d7eb1e699f87b41f6ffd4cb8d73d72e8", - "gradient.skeleton.gradient-stop-1": "5427016b990b75f0d1ce60eef8cb9b96d75fbde2", - "gradient.skeleton.gradient-stop-2": "01442c311e6da751c30c3518fc32970306767274", - "gradient.skeleton.gradient-stop-3": "7fda4c834a3daf0c56bb59777c525670ae2dee3e", - "gradient.pipeline.running.gradient-stop-1": "0c187d1ebb015ec66bac356009795316f84807ae", - "gradient.pipeline.running.gradient-stop-2": "d1251f86c91bd0f29d8ac8cfa01056bc307156b4", - "gradient.pipeline.running.gradient-stop-3": "b09bdab234cdf7c204cb153ec94ea0a9b2bb4976", - "gradient.pipeline.arrows.gradient-stop-1": "0465e74baaf10a12f23b9eaa40fc1ae08485a0d5", - "gradient.pipeline.arrows.gradient-stop-2": "4cadc4f9a5e66f28eaa27fb54b6ce538ea430c7d", - "gradient.pipeline.arrows.gradient-stop-3": "5af16d4ae6b63ff8dcf3254009e712db4ac1a3f9", - "gradient.pipeline.card.background.gradient-from": "8404a4e146121987426681accb996902179fad72", - "gradient.pipeline.card.background.gradient-to": "037bbd7fb410d05993a48594626a7babb32605a6", - "gradient.pipeline.card.border.gradient-from": "342926ec7179e7cbe133981050c1e1e41d94ed7a", - "gradient.pipeline.card.border.gradient-to": "8e39428cc5ce20f3593127f2ef71f180b38ee9a4", - "gradient.pipeline.widget.number.gradient-from": "dc372cb50eedf6023cd80cb6a4520e5fdf91358b", - "gradient.pipeline.widget.number.gradient-to": "e505c8d9dd140f5a671c1291ffd519fcff5c3e2c", - "gradient.pipeline.widget.blob.big.gradient-from": "b518524b25a5b95804988c640c4d52ba7ebd4599", - "gradient.pipeline.widget.blob.big.gradient-to": "80a493af10245e0ebbc6a51f5452d61d836a3754", - "gradient.pipeline.widget.blob.small.gradient-from": "8d7be31e69f0e54dd2e493d9051c2268078ea5ed", - "gradient.pipeline.widget.blob.small.gradient-to": "198813cf6242881ce0e0d030ca22ef31f9190d13", - "iconStrokeWidth.xxs": "751ceaa292e27736009bef894b62f83c1b2d66d8", - "iconStrokeWidth.xs": "77ca59c88a0b47972554b1db3f6469a230a6ad8c", - "iconStrokeWidth.sm": "e445b22e1f18af07002a1dc76f900dada5477383", - "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", - "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", - "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "component.dropdown.item.text": "2f1f1ea9d368ec8be380803506fbf657cabe6ac0" - }, - "group": "mode" - }, - { - "id": "b3258d74d3429d881e4fd4aa5b9fb3456dcfb038", - "name": "light-high-contrast-tritanopia", - "$figmaStyleReferences": { - "shadow.0": "S:a2ed3778198048e91067a04633c27ba20e9fcbec,", - "shadow.1": "S:947694488889f7271c428950bec937ee79f8a536,", - "shadow.2": "S:70378f090cb66b03ee4b18e25742743934f37757,", - "shadow.3": "S:aa7e83fd47e75f5a1ae3e17f64417d5e9fcb96ae,", - "shadow.4": "S:5dfba690094db266c4ab7686fccbbedd8c16385f,", - "shadow.5": "S:d6752151a8dd3bd4b4bf12ad15a80c522f760731,", - "shadow.6": "S:da8e7b5b0f1352215fbaab66eff62a3e19d22b67,", - "shadow.inner": "S:2805cdc40176a4707d5cfc549b4c12e7ec4e74ff,", - "ring.focus": "S:062018f6483f54f1255b952aa1759b028d502ac3," - }, - "selectedTokenSets": { - "mode/light/high-contrast-tritanopia": "enabled" - }, - "$figmaCollectionId": "VariableCollectionId:1340:156918", - "$figmaModeId": "1389:21", - "$figmaVariableReferences": { - "background.1": "633e5f77aa1bd1bd133852d8372b9c9f1231a9e4", - "background.2": "14e8d4b56cc273b508af8a2c58cb00e99e08d1d3", - "background.3": "33554ff11e1eab35e50aa3570f51d53f16f46d6a", - "text.1": "38382b9984a98f9d26692a7f2882dfb5c5d51825", - "text.2": "115f62efd02491e85a63dfd601b03725d3711f23", - "text.3": "1c7327f01cf759b17fd0523cb540afa8700c1dc7", - "text.accent": "0b3cd5357659e6542cca163ccfd96c0cac059203", - "text.success": "ee56057b81e6d0872a84ca6b29affc8911fe333e", - "text.danger": "c7e38d7c7afc899f4d40392dbd6bc5ed6580264d", - "text.warning": "b03334e4c9db4b76269e4be886df6c1abf74d0ca", - "border.1": "5ad2231a611605964ba70f80e7aabb48f04bc704", - "border.2": "9084bef359e38136e0dddac25a464896456a9b1a", - "border.3": "5ff5d5233f7cb0233ce7634bc480026668c818f6", - "border.focus": "8db219e896acc4d828aaaf4add646d96540a84ea", - "border.success": "b13758973865eab0b4d79028a48e457eae8bec47", - "border.danger": "33d53c1486021bb3c9edce4123b484a2aabc8de0", - "border.warning": "027e57e08a1edcaaa7fbe033902bb3f65497abb4", - "state.hover": "78426caca2a07ee56132762a720ae07e2810f03b", - "state.selected": "ef914056c9c9dbaef00fa8795702a3cb933ee761", - "state.disabled.text": "967ab1b863941c100f58cc55e611ee2709051f01", - "state.disabled.background": "7a192b5ddcc570f0c8e3a5dbfd54d780e2832bbd", - "state.disabled.border": "067fd26e80ad39a28f738a3b76d21d354092d551", - "component.accordion.title": "5e49d6ddf7f2b21724b474d4a5545256143dce54", - "component.accordion.description": "bc47401a69d07fa71f0371765ed940745fc7a5b9", - "component.accordion.chevron": "5dd530f96134323125031668d4ea98a36ea0de86", - "component.accordion.border": "0b3fcc0e02a2a86625b2b4a9cfeebfad9486bc3a", - "component.alert.default.title": "d8e59ed205399e9727b0dcecdccad3d8daaaa622", - "component.alert.default.description": "f9ec7fec91747435740f000fb642f9009e8fc2db", - "component.alert.default.background": "7fbbdfcc33a3051394f89675798db2159741a5fc", - "component.alert.default.border": "549692bf2f70f6b40c7d55259f8890189aa6cc98", - "component.alert.danger.title": "c8da1cdbba8e0f86edda5fd3869f6186d53881ca", - "component.alert.danger.description": "366849405bd53c78f0b73d72585034a52f05d9a7", - "component.alert.danger.background": "5756a9bdba027993a9879b32ed129e3034028cdf", - "component.alert.danger.border": "a1a3be9eefab6edf2e996a46537872680dc45a09", - "component.avatar.text": "23018f4c7f22c4afb3b7e49f585a1fbb591209de", - "component.avatar.background": "57703fddbd26d363509fdba3aea037bd2f515ee0", - "component.avatar.border": "d651f4cb9082aa4d6e6af2c5abab700d683a5c85", - "component.badge.default.text": "ab90828e3b8c6adce5dc10bf85107b001b958e95", - "component.badge.default.background": "706b070b298e2d2a97665baf7af05187eefeb4fe", - "component.badge.default.border": "a935a2968ca4ecfb8cc58a18f31ae8fe65eb516b", - "component.badge.neutral.text": "82d39f1786c4371303ae21e4c02db79989c54e36", - "component.badge.neutral.background": "f5480b1a2b648fdb0561acda7515c38271cfb04b", - "component.badge.neutral.border": "00f05792ddf6e53bff79346df6a34144426d50e0", - "component.badge.success.text": "71014a6138e8747257a21144f8114b906cfe0f0a", - "component.badge.success.border": "190589c6021debb7bb676f05ac7f063c237fd4aa", - "component.badge.success.background": "177eb9f406784ddb958232cd643ebbb3490a53d4", - "component.badge.danger.text": "6c0c04f17c2bc0ee085d09bf0f205dcbc66c1e17", - "component.badge.danger.border": "6bb014acbbd68a796ed0c4d8c4f73e8e9e619923", - "component.badge.danger.background": "4162b10332d17800585d97ed45e45d69c2006808", - "component.badge.warning.text": "8581620d95e5b92a8c85341ebf63f21fcf7133d0", - "component.badge.warning.border": "71cb519182108ac72ffef823935546e4bff62bbc", - "component.badge.warning.background": "74c13457a85684a054426bd833859fe93eaec978", - "component.badge.running.text": "0b0c1be217e557a5b14c1cb25e988e4ac6d40583", - "component.badge.running.border": "27d3c48d3c316bc4f980282759b5e82f8aaaf49d", - "component.badge.running.background": "a85fddc26baf586ac7ba79e381e5f8fefca87c65", - "component.badge.merged.text": "a83d66ef53e8a094a62f2b32a4d17e58d552b1ef", - "component.badge.merged.border": "755392bca643af0a3fe5492069881a870aa11dc3", - "component.badge.merged.background": "4f4c81b1fe43bfe0d721a22d0aeb93079776cf6d", - "component.badge.ai.text": "bb4daee92817073da0366090742d0a17babb5728", - "component.badge.ai.background": "c5764a2304bf0e8a153c9ce0da20827696a76b41", - "component.breadcrumb.item-inactive": "2f009ca6cafb50c994205c9df02ee2d2503f7d23", - "component.breadcrumb.item-current": "7b502cc2e72f66bb501fdc5f480d0133d1b3841a", - "component.breadcrumb.separator": "1cd28c3ff97ab2f529a19c632d89dd44af0aad80", - "component.btn.primary.text": "9d32f032da93c9aab8b3bc6087c26aa12f507ad7", - "component.btn.primary.background": "410d584a3469233e067d0592a366fdebbe1049bc", - "component.btn.primary.border": "1491ac71f9681307c2d6528e443504e079061988", - "component.btn.secondary.text": "12c93d1b08ae50645a3b8f59256fcec00a4f84ca", - "component.btn.secondary.background": "86434310c95f5c055783011cc0e7c7918f67a35c", - "component.btn.secondary.border": "66bda91f87154efd3cefdc7a634ecb8afa8cd285", - "component.btn.outline.unselected.text": "9cf2c495178d6fdfd8f1360376242acbd4dc5e75", - "component.btn.outline.unselected.icon": "af1510c6050f671219d2089e0e59d5febb4422d6", - "component.btn.outline.unselected.border": "2b3013d632e566301e9f5f1a5cbb6aab4e7ec53f", - "component.btn.outline.selected.text": "13b50089245dec1899db2012412efcf649e2c0b4", - "component.btn.outline.selected.icon": "2bdf2c92b22e814109f4e05ec4d41d92f934a15d", - "component.btn.outline.selected.border": "ef10f4599233f62203def151b386013ddaa63afb", - "component.btn.ghost.unselected.text": "43fa10dd413cddb9a2e2142ead9ca3b4a91b49a6", - "component.btn.ghost.unselected.icon": "5ce332f51238b374104ec53067d685c26882f38e", - "component.btn.ghost.selected.text": "74cbf3b86016e05517f8c7bc64652281c940363e", - "component.btn.ghost.selected.icon": "1d8c6206a136d9c176ffba600a1e94618c4b96f8", - "component.btn.success.text": "52a336440e013bbc849ad67a43d0e136cf4f0b51", - "component.btn.success.background": "608ca6930129b4e5ff36d7f38508ae2537b66629", - "component.btn.success.border": "1f74d9985a10fe20e0acc4647cf4949005e9d4f1", - "component.btn.success.state.hover": "d05bde38a6539a11e3ccd87345af113ccd6bd113", - "component.btn.success.state.active": "f6e48e68dba6c32de27fadcaca3d1959f081d2e5", - "component.btn.danger.text": "49c02562362b8f775cfc2c4c614ecd646dcc2716", - "component.btn.danger.background": "0b015d0a4f456781969d7ffaf135c7c2a8858440", - "component.btn.danger.border": "9f99ee56f1ae2b7eb2f98300b83d4f53b15fd763", - "component.btn.danger.state.hover": "e7756e1d022d893bfa5fdd619f181d26fb7b117b", - "component.btn.danger.state.active": "23c7c85ff6104e098a208b6f4b86c1d0eef0f543", - "component.btn.ai.text": "380368600319fa12b73538ff52acd9d0e977e367", - "component.btn.ai.background": "8c9a1d07e05837f50588b642a4b51462f883887d", - "component.card.background": "256878745d17a46b7159919d8e30a3e960f59575", - "component.card.border": "3688ffcc56c4fb44dc0e221b8e09a958fd9e509d", - "component.dialog.title": "e6e0ff2bf1f3802eb21492e8b833c5f5e679cd82", - "component.dialog.description": "301509fcf2faac8497b2136f7879b9b0b3c64433", - "component.dialog.background": "ff2918d712798a4b487b6f6e5befe7b3eef59883", - "component.dialog.border": "4a6cb3732ad8b36bb9de0d15cbed575c87996088", - "component.dialog.backdrop": "893e60ed671f891241a3084707057185398446ed", - "component.dropdown.background": "09b2dca27ba9efabfe838d713a14ca6e6ac46685", - "component.dropdown.border": "c8cdfff63f4e142d651070ff1056b69a638aaab7", - "component.dropdown.item.delete.text": "864396a8c9b5df0fd948ded7d520ded936d74a8b", - "component.dropdown.item.delete.state.hover": "308dc9064be8e754f8385b0e8ff5489563d7c984", - "component.diff.grey": "43bf4f466a6e231c9951a639313740579c29d824", - "component.diff.add-content": "eb4eccf789a2bda6f3d3875c3310ef0579fd3555", - "component.diff.add-lineNumber": "61583aa6e36aaddd0be173a4a082a450e2522d3a", - "component.diff.add-content-highlight": "ad544fc527ca8b4c297993fe0722b8a7a96ef903", - "component.diff.add-widget": "c1def698ab707194d8f1558e16b05c55d50920d9", - "component.diff.add-widget-color": "a27c504a1f1151974669cf06054c1d0f704ecc38", - "component.diff.del-content": "465e6eb3613967f489cfee4b04f0b283b9e88f91", - "component.diff.del-lineNumber": "4cbe83072b6781d6e3edff645ccb2fb7426c5628", - "component.diff.del-content-highlight": "3e635e401a1a37a259211d093bef70e3a0c507ea", - "component.diff.plain-content": "984456faee2f6a5c202cfd76078ef5b6cd3a05f1", - "component.diff.plain-lineNumber": "6a5550287e7c58afa9d2375c5bfdca4d6c214cf1", - "component.diff.plain-lineNumber-color": "7c1186d20725b53cbefe87f56c5bc6db4e77d898", - "component.diff.empty-content": "712d93a0c1bc9503abda77ae50d624bd328c0057", - "component.diff.hunk-content": "79ad0dfc599f9bc246a6618c85bc1dc59744537f", - "component.diff.hunk-lineNumber": "bccfad80b84e35edf4b47af2ca30057eba2b2ebf", - "component.diff.hunk-content-color": "68c5d6a95d475f7275062e3eb58dba464df3d059", - "component.diff.expand-content": "1f0c136f21d9abc2ce4a585f7750043932bfc30f", - "component.input.text": "df946237ac2ea0d177f3f2818a673fdf876944c7", - "component.input.placeholder": "85d7632aba08fd476083e508cc2660b17c30981a", - "component.input.icon": "75ca1f38c16fbd5e2697a36c74b0b1dd01f3f5c0", - "component.input.background": "585327333fbbf97bb8db21fbc613025719ca8a87", - "component.input.border": "911dac823dac21c9ccf4e35e10b2eb82a9c6f0ef", - "component.label.text": "80403cd630bba01a064550d9783313227b1d010f", - "component.link.default": "e387bb4185d01d8a3a7d52b15f3868ba40b31ec9", - "component.link.visited": "39b6b12d8317b7e916bcba67f322018c02b42d82", - "component.nav-tabs.unselected.text": "c085805657bb81574da85d3cb29f89ca08980daa", - "component.nav-tabs.selected.text": "16aa825c8038347237cbe91f7eeece4d2a8d1a2b", - "component.nav-tabs.selected.border": "3427b967112facd59f09fa310c863d7193ea4ffe", - "component.nav-tabs.border": "791d71ca187934e4b98ddff04bc9447a10358699", - "component.nav-tabs.background": "b92549e37390005f2bd1cfce06f9dfb8f67e39e0", - "component.pipeline.arrow.border": "e2beaac31e79580c5cb1d64e29cb8bffec601ad6", - "component.pipeline.card.background": "f207dcff97f000326c4f28293fdbd2830860ce54", - "component.pipeline.card.border": "aa9d9528b1e8e25f9e6dae387b76d9beb2de35a8", - "component.pipeline.card.running.border": "179c0e4d47becc896eb1fbb7f9e8461779b3f680", - "component.pipeline.card.error.border": "1c0b41b41e25250cfb65bdb539bd573be66b0d00", - "component.pipeline.card.completed.border": "14251a54f431aae617af6b9577454a0e212ad76f", - "component.pipeline.card-canvas.1.background": "01bd392d5ddafe85e5575296d08254e52054ba8d", - "component.pipeline.card-canvas.1.border": "b9510abf89f82fb7b779bb730caa1bf393c83bd4", - "component.pipeline.card-canvas.2.background": "87b6b3e65b995fc4180dfb7bf613efb0098d1fff", - "component.pipeline.card-canvas.2.border": "1f9fa1e95134d87995a21738a3877f1c15158e5e", - "component.pipeline.background.dotes": "2784742abff27552789cdd4f2b51cab1331abb4a", - "component.sidebar.background": "8b6619fafae38e8ad94fffd488f2cf53d3c31d76", - "component.sidebar.border": "2263230eae16609a3d95ba5863aa3cc343010131", - "component.sidebar.separator": "a0c913dd38e81e3b2c20ee17642433da6da5f147", - "component.sidebar.hover": "4925b4511178bd2853a6b7b329683d036508aec1", - "component.sidebar.selected": "31f335ecde0aedb12407221718069f5b13574d41", - "component.sidebar.item.unselected.text": "9609e0ad8d79127a3784876f0204d02964f09e43", - "component.sidebar.item.unselected.icon": "5afba128858cf7494fb8a326a435860faf00b0ee", - "component.sidebar.item.selected.text": "5f1daf88cebaea07bd4c2a57c862638340827496", - "component.sidebar.item.selected.icon": "18325fda8139122c4a7cdf6debe2cd1f25d120b7", - "component.sidebar.logo.text": "a3ffa09fdf368badab24aecdbd26709ed7b3c2b2", - "component.sidebar.logo.icon": "c572d382a2018718d719f6a427d31fc9a42f57bd", - "component.sidebar.search.background": "33822e390046e5ec8f71a07fc041514a28778e74", - "component.sidebar.search.border": "f2044f7e8cf503f8809a48a14a88c5ef6466176f", - "component.sidebar.search.placeholder": "665cc00a32edd27b62371ee820d3c3250e629e78", - "component.sidebar.search.btn.background": "70c80e61b9ec397214c809c51de4fdf8177185da", - "component.sidebar.search.btn.border": "1c434c7d16cd4ba880e2d57520c90bc37f6b3879", - "component.sidebar.search.btn.text": "589c7d0162d67165a8752ea54a2c63bb63ee3ad7", - "component.sidebar.footer.username": "68298a8f471bb04f2f0305d9433a2b59613abd8d", - "component.sidebar.footer.data": "6a681d2abb90c2b62a39e20a1d29419c5086f01a", - "component.scrollbar.thumb": "9818c03d003381a966d08d3c6da75af8468bb8ef", - "component.selection.unselected.item": "7a7cad2aa2d6b2803a52eb26c78ea177b84ce241", - "component.selection.unselected.background": "a63ba949d12afc99020e77f95d0538bddba457b3", - "component.selection.unselected.border": "6ef997ebe03bb209ca568a648eb0cc8be69746a6", - "component.selection.selected.item": "f1f43c8acf2d4da10ee2e0d164d4dbe955816018", - "component.selection.selected.background": "1d1bbb9958f047744b66861fd8bd75dc2726dc25", - "component.selection.selected.border": "44b31378ed175b87b50ebad88cfd4a73a66ab9d5", - "component.separator.background": "9f4c82c269bc5aff0fa55d52a0ed59f914057be0", - "component.slider.track.base": "34dc3b5be6733e38f6c28d24d4f3699b2d7ea6f3", - "component.slider.track.progress": "38d8cac26c1cfb91293198eee25299e4aef9c1d8", - "component.slider.track-segments.base": "cb752791a51ff48c6d481426a1affb15048a152a", - "component.slider.track-segments.progress": "a7943fda0e4646e7018046354a9be54cf7d03075", - "component.slider.handle.background": "5c423cc3b672079f1e7dc0d1c8170dade368711a", - "component.slider.handle.border": "94347a2ed2900445946d18c653fb179b8602c533", - "component.status-indicator.completed": "c4c3bce2d28c84c25db4f444f9144b94523737b7", - "component.status-indicator.cancelled": "5aa15732d9ebc41f14b111e252819e2e36617124", - "component.status-indicator.warning": "4dc6e5ea4c736869aee4ebd0ee006f2d73861423", - "component.status-indicator.running": "07ce029f27cf34bf8d6fe3b9a6a600be01c8947e", - "component.status-indicator.merged": "d9eb24404452e6cc2617094fe8f29c69a760ea55", - "component.status-indicator.action-required": "2f1b8543c44b5d93cebddd80b5a9ee2d60fdb146", - "component.status-indicator.waiting": "62f68d300850ce20cf0be8c07d82a41bf1a56ecd", - "component.switch.unselected.thumb": "94d5f0b3a97924583ff697d56db74727b133ba95", - "component.switch.unselected.background": "a8ae87c7bb7ba7f4bfa71f2fdd5f404d19c3a1be", - "component.switch.selected.thumb": "cf6964ec11d69899d5dd39e82d322ea544367e90", - "component.switch.selected.background": "bba05ff96eae08a4adc31a6406e417022d9e5dad", - "component.table.header.text": "65cfc045aa01e3d3eeae4a227cac9be150839db8", - "component.table.header.background": "137c4f2e14bb8cadaf6f900a443700fe928a1fcd", - "component.table.row.alternate-background": "2863f92db433f88f24f62dda4cc9fd50c48130be", - "component.table.row.border": "445d945c4fe4426c3b73cf6f8fe0a572e4525798", - "component.table.cell.text": "73a28f25ba54aff507877ecbfd9942a6ea9f3cea", - "component.tabs.background": "8689ee01219675fb951a2517c2397fba52487971", - "component.tabs.border": "e5bc8cfac224234021c11b381f505da5fcac84ed", - "component.tabs.item.unselected.text": "4af8a5b79c55621f1ed11a7b6fc605657934dc1e", - "component.tabs.item.unselected.background": "fa041cdeb34ba5da6f1bd4cd6d8bb4b8273e0e70", - "component.tabs.item.unselected.border": "79b1a6fe839c012efec923edf40b3bfa2bcdab19", - "component.tabs.item.selected.text": "d048f7001829ff9949b2712b8ca746c8f3f49767", - "component.tabs.item.selected.background": "33269e9854800d565f728ba2a85c5cd3e549b5e8", - "component.tabs.item.selected.border": "11b7e5aeb83fd2f5d968021c750af2ceb5ba5841", - "component.tag.blue.text": "b35e0aebd9d1ebf0fd5d24bbd5ad184db9e11b86", - "component.tag.blue.background": "072fc2901d8ad0199c07bc339d46db086c7b0379", - "component.tag.blue.background-subtle": "67307c003cb91d76e00ef0f3777318e25efac628", - "component.tag.blue.border": "680fb2a6a11251e2619789595cd28c7861aaa530", - "component.tag.brown.text": "b48491f46d15503df99e2d8d9394aa552d09461b", - "component.tag.brown.background": "90b0ee0df4ebe7f06bfd07a7acbe812a45d621a4", - "component.tag.brown.background-subtle": "134ffd2a91ef027e197db6a5331d2726bc080ad6", - "component.tag.brown.border": "675776ff7a30540c297579d72b7f00779d778c14", - "component.tag.cyan.text": "6bf9361c5931ba40663d2c412f28f15382498517", - "component.tag.cyan.background": "83107c8cff314c553ed2cea5c9af1ff3356485e5", - "component.tag.cyan.background-subtle": "7f2724127eebb6e01713828af3736cd2e3734436", - "component.tag.cyan.border": "3286065f931626298e8f3dab2328297e83a79771", - "component.tag.green.text": "699a30f1d5f76ed4e631faa3da63be65e88af039", - "component.tag.green.background": "8b06c35974700260dff1a712c0a3976d4ddb0df5", - "component.tag.green.background-subtle": "c4f47c34772d8367bc3b00645420511f37aaecad", - "component.tag.green.border": "db85545b7d00ef9e199bf863dcdcc2be520f520c", - "component.tag.indigo.text": "d641d4626278e4d17ff4d98202112da9580a6b89", - "component.tag.indigo.background": "bb4af9a068f716c2f0b4f77c228b88009ac049c9", - "component.tag.indigo.background-subtle": "877e3b4ee6040ed581a8349c8fdb5e49ed36dfe0", - "component.tag.indigo.border": "885fdb80c956855c30666c660d5839dc357d1f5f", - "component.tag.lime.text": "763399447b243f761b7cce55f7dcf2fbb1797ee3", - "component.tag.lime.background": "d51cede4c823e16ac204bcaddb65d49c325c3cbe", - "component.tag.lime.background-subtle": "556934df078200ab014c762eeaa04deecd05422e", - "component.tag.lime.border": "fbb53e37ef7cb87cfae5298e69a5ffe4f99a23a7", - "component.tag.mint.text": "d3d406bffbadb1b894e4bb6aef7b1f5a1945094c", - "component.tag.mint.background": "04568a7d0bff5fbc11600bf840916f5451a0fe62", - "component.tag.mint.background-subtle": "1d39716bceda8510beb02e19847c391523e3690a", - "component.tag.mint.border": "c703cecfc8bd82c593dc9d81ce18748edd6ecf4d", - "component.tag.orange.text": "ba407492439b283fedf30a8ab8b16774c0931a9f", - "component.tag.orange.background": "ef766412f340a4aa62c8888a6fdfb2890f3ea207", - "component.tag.orange.background-subtle": "05e823662de8b1f99a062cea3c0f24df69b29362", - "component.tag.orange.border": "2f3023f2311c12acb44cdd28beb888f64d6d2183", - "component.tag.pink.text": "83b73e0e328485233004d42baa8a0948ff2198b0", - "component.tag.pink.background": "b23a211249a71f32bf15757316d0596fdb395962", - "component.tag.pink.background-subtle": "c144f19e07b839d68f20eb5c51ebd94e0f333a82", - "component.tag.pink.border": "b4874a81a08261362f3d8237833b80e68a851b76", - "component.tag.purple.text": "9869d8aad416ac3f9e530b0d62b05dda66906de4", - "component.tag.purple.background": "bc59008310427ba5883f71079b19b8cb4c6dd862", - "component.tag.purple.background-subtle": "a3598602d6e6b1d03f638f1a941801f147f4657a", - "component.tag.purple.border": "de1d577bd170613ab46460e9c50ca8de420152f6", - "component.tag.red.text": "aca8c1832317ac859b4263769855f423840a8569", - "component.tag.red.background": "9008e05416a00096c234511275b92be7204363b6", - "component.tag.red.background-subtle": "986bdd3f8d16488337ca9f46b71b04195d7578b0", - "component.tag.red.border": "f7f9067262546ee6eb77955e38aa0a451fc7f98a", - "component.tag.violet.text": "2ab996ff3465a0b97dee4d7c5606df3d46ab2a07", - "component.tag.violet.background": "4c9b9c2658479fc0e56894975a9b9b8d76df5b00", - "component.tag.violet.background-subtle": "fded9a84a20755592f57f081ebb594bfbaf8cfb3", - "component.tag.violet.border": "77de89ef1ab5168b7ff5e329bde8608047149a04", - "component.tag.yellow.text": "cadfcb4d0fe72fd5828cd764d54198026520e10c", - "component.tag.yellow.background": "a29464cd2a618a77586cb8760478a4d82b12b3ca", - "component.tag.yellow.background-subtle": "1b262be32c5779f024da5ad5696c805a83eb96c7", - "component.tag.yellow.border": "b595821fd5ef662361820415bb878e8ef4ab8939", - "component.tag.gray.text": "e7608c51a2421de226afebbcb909180c8a0cdb5a", - "component.tag.gray.background": "9bcc758ef67bbaac88637e99a702da5d7f7a3144", - "component.tag.gray.background-subtle": "76dfa99dd57cbaf2e7cbec9511cd1e1ddd92ee0e", - "component.tag.gray.border": "02e03f32969f9e6120bb6c7a3b781a5446f1bef1", - "component.toast.default.title": "f791d24eeab59c12cf4aad84f4677099bb4a01c1", - "component.toast.default.description": "6000da4ada3b9445750fb4b7b990726df120c271", - "component.toast.default.background": "5b9e9ea5b7de018a92d3deb902257e4e2bbb49f9", - "component.toast.default.border": "f74755bc7843dc9d7c788c54178b7ce3b83dea3f", - "component.toast.danger.title": "b5ad1c43fcee32eb251b980e884e77ea137c3369", - "component.toast.danger.description": "d281b5c13f2a4a293042f52b168e39f8bec398da", - "component.toast.danger.background": "8ba5c70e994ab44aeb72b3ed7f26ca9646d59cc0", - "component.toast.danger.border": "7f5252c13b96825084248b367f36377bb003ca96", - "component.tooltip.text": "b79a7ec441cdc7c6eee9313602f081d063327c1d", - "component.tooltip.background": "a35d0240a1c4de13350e6a4770dd1703a90a9227", - "shadow-color.0": "c0c282f63e107374a732d74c1742cf60d52e6e5c", - "shadow-color.1": "1ec33a9c84353664d23cd23d6c033d1c330c149a", - "shadow-color.2": "6200a000044d8dbee421ed4afb0c3ff42febb6ef", - "shadow-color.3": "77d99afb159d8e193a82f615dd84de3214e00703", - "shadow-color.4": "2b2e0307d252bdc6db53a23ce2cc2e9bb4f6b914", - "shadow-color.5": "5a6c707240bab54cb4403f47262abfe0756efc9a", - "shadow-color.6": "928283d00759150575a8f155da90180a582be438", - "shadow-color.inner": "6cb5a98fba0b13e952859b9f023259b5c06cfd1a", - "gradient.ai.gradient-stop-1": "8db516caa68afc5b8fdd6fc6e5a9bad7715c5f26", - "gradient.ai.gradient-stop-2": "33930f41665251a281973a37847f357480aedca3", - "gradient.ai.gradient-stop-3": "c9e14c3db8e622b10b1cd3e860115cd6f876ae49", - "gradient.ai.gradient-stop-4": "6e7d0850d7eb1e699f87b41f6ffd4cb8d73d72e8", - "gradient.skeleton.gradient-stop-1": "5427016b990b75f0d1ce60eef8cb9b96d75fbde2", - "gradient.skeleton.gradient-stop-2": "01442c311e6da751c30c3518fc32970306767274", - "gradient.skeleton.gradient-stop-3": "7fda4c834a3daf0c56bb59777c525670ae2dee3e", - "gradient.pipeline.running.gradient-stop-1": "0c187d1ebb015ec66bac356009795316f84807ae", - "gradient.pipeline.running.gradient-stop-2": "d1251f86c91bd0f29d8ac8cfa01056bc307156b4", - "gradient.pipeline.running.gradient-stop-3": "b09bdab234cdf7c204cb153ec94ea0a9b2bb4976", - "gradient.pipeline.arrows.gradient-stop-1": "0465e74baaf10a12f23b9eaa40fc1ae08485a0d5", - "gradient.pipeline.arrows.gradient-stop-2": "4cadc4f9a5e66f28eaa27fb54b6ce538ea430c7d", - "gradient.pipeline.arrows.gradient-stop-3": "5af16d4ae6b63ff8dcf3254009e712db4ac1a3f9", - "gradient.pipeline.card.background.gradient-from": "8404a4e146121987426681accb996902179fad72", - "gradient.pipeline.card.background.gradient-to": "037bbd7fb410d05993a48594626a7babb32605a6", - "gradient.pipeline.card.border.gradient-from": "342926ec7179e7cbe133981050c1e1e41d94ed7a", - "gradient.pipeline.card.border.gradient-to": "8e39428cc5ce20f3593127f2ef71f180b38ee9a4", - "gradient.pipeline.widget.number.gradient-from": "dc372cb50eedf6023cd80cb6a4520e5fdf91358b", - "gradient.pipeline.widget.number.gradient-to": "e505c8d9dd140f5a671c1291ffd519fcff5c3e2c", - "gradient.pipeline.widget.blob.big.gradient-from": "b518524b25a5b95804988c640c4d52ba7ebd4599", - "gradient.pipeline.widget.blob.big.gradient-to": "80a493af10245e0ebbc6a51f5452d61d836a3754", - "gradient.pipeline.widget.blob.small.gradient-from": "8d7be31e69f0e54dd2e493d9051c2268078ea5ed", - "gradient.pipeline.widget.blob.small.gradient-to": "198813cf6242881ce0e0d030ca22ef31f9190d13", - "iconStrokeWidth.xxs": "751ceaa292e27736009bef894b62f83c1b2d66d8", - "iconStrokeWidth.xs": "77ca59c88a0b47972554b1db3f6469a230a6ad8c", - "iconStrokeWidth.sm": "e445b22e1f18af07002a1dc76f900dada5477383", - "iconStrokeWidth.default": "4377ec04d21e3851d7f71914a0051ed09daad5fb", - "iconStrokeWidth.md": "580043ec5bcae9c2097bff41e3e24e49883451c9", - "iconStrokeWidth.lg": "e72029e275f9e020f7d772662521389ea67a279a", - "component.dropdown.item.text": "2f1f1ea9d368ec8be380803506fbf657cabe6ac0" - }, - "group": "mode" - }, - { - "id": "859ec40c364b0922f609dfa64a502a7a90feb206", - "name": "desktop", - "$figmaStyleReferences": { - "typography..display.base": "S:bb256a17dbdec1f2e7d7684a62169c513387510d,", - "typography..display.strong": "S:9533c858c9d1654919a626ee5e01b82aa7b9116f,", - "typography..title.base": "S:4e9364b1e78fd4fad0158e3c51db48342dcdc284,", - "typography..title.strong": "S:424a09ddaed50ce2d3773e72acba431ae01904e6,", - "typography..body.subtle": "S:ca7f305c207d44110b5d205671b2a3f08e2717ad,", - "typography..body.base": "S:7b8ea2853286c57e652bdcc1117667dd188cec64,", - "typography..body.emphasized": "S:a0e926ac67e86ba7426b1cac95cff65456c509f0,", - "typography..body.strong": "S:a6ac7eb3165b4cc662cf91d50447eb7bf3629c53,", - "typography..caption.subtle": "S:4001db9ef1d2a8de3ddfc597f59393fd429e330a,", - "typography..caption.base": "S:e14660a6016b116a52d79dcea725415c96530e4d,", - "typography..code.subtle": "S:ad0b1455c84d6a46a510759a1a486b734955485f,", - "typography..code.base": "S:918522d679beb596b24e975608cfcc3895836a7c,", - "typography.body.subtle": "S:2fc37f986c92e50706670578e70009c1ed97ca7b,", - "typography.body.base": "S:56e7e349df484d7d89428e07a4cf8316798b51ed,", - "typography.code.subtle": "S:cd77c886d0451353ddfc72cf041bc852b626f01a,", - "Components setup.base": "S:f9ac193655dc742d6d488d2858d827543d41f308,", - "Components setup.emphasized": "S:e478bd14d275b99c4dc9c4413ce2541aedc141ab,", - "Components setup.components.base": "S:a50eb11aab1b3bb9dd922b2aa66d2d8e4f3b7b6f,", - "Components setup.components.emphasized": "S:30a63da2312281c2920e413268243a26858e7d7a,", - "typography.caption.data.normal": "S:90f7b282b4cc6d944f8422b10c730c194f9c6bd5,", - "typography.display.default.normal": "S:f658f5fa4300d8d8ee70c617e75cef4ba5d1e05d,", - "typography.display.default.none": "S:c241e89f726af3993bd100e2cd26b20794815441,", - "typography.display.default.snug": "S:c9cb50655bc57d9f5a2508bfcd1fa200008494c2,", - "typography.display.default.relaxed": "S:7338a28780aa8c5d5386f3545af677cfc43cc91d,", - "typography.display.default.loose": "S:6bbad47850c2cb2bb02a6adb3591f63abff72bfe,", - "typography.caption.leading-normal.default": "S:581179f7b7d13947841c2172552d3ce2956bc733,", - "typography.caption.leading-normal.subtle": "S:f83626a8af88f6b10fc97761587b83454bc4472b,", - "display.large": "S:636f0da9299c070c934a0c02b6a0ebeb21f15359,", - "display.base": "S:d900002a68cad8ac5293f48c3d492206331546af,", - "title.large": "S:e368d182e72091a10c16096a92cff28358937c8a,", - "body.leading-normal.subtle": "S:23d9b6e4231a1fa79d63162391dd6cb6e5b9d853,", - "body.leading-normal.default": "S:1811145e6245fb4c6a82a52fa9bc76aa27daa22f,", - "body.leading-normal.accent": "S:31151e3365a35326aabfc09b9a43f3d0a1e97eb0,", - "body.leading-normal.strong": "S:15b189639f72b59fb2f5ad561116a1efb0f1c3fe,", - "body.leading-none.default": "S:5a215ebc21c77c91235977c12a03c9164476888a,", - "body.leading-tight.default": "S:f71157dc760badae2dccddcbb6ddf10845829d12,", - "body.leading-tight.accent": "S:52a2d72cc357b0c9022b57097574199056da150c,", - "body.leading-none.accent": "S:ea9576022f90d1911eafcfd874b82b88b723efda,", - "caption.leading-snug.default": "S:b06ba893c7e798994f77d110cb73ef363caa6d97,", - "caption.leading-snug.subtle": "S:d2fba795d67be80e6afa991e6cb45f3ecc592a3f,", - "component.markdown-editor.title.h1": "S:f1b57a327f5b8b6ee1a5c2c358366b73a2f6f8ab,", - "component.markdown-editor.title.h2": "S:b266584196fcbce5eedb899c13fa475efc4a009c,", - "component.markdown-editor.title.h3": "S:464606c9cebe20fecf8ca3bb3f35f8560f0bd224,", - "component.markdown-editor.content.lead": "S:594b906739ae96b94950934ff732ef0c56c8f77f,", - "component.markdown-editor.content.emphasized": "S:061aad96d53bf2820b1e5e6041f8e6084698c7ee,", - "component.markdown-editor.content.paragraph": "S:6c5c7b213514a90340c62995f71422ea492b063a,", - "body.leading-snug.default": "S:a309cc10bc90ccfa5c5be2b3376e5abb6aedbd36,", - "body.leading-snug.accent": "S:1d96370491acbd60b51ac86c936850240028c786,", - "body.leading-relaxed.subtle": "S:60017640c281184cc2983253a05f8dcd08b874b3,", - "body.leading-relaxed.default": "S:15cf59bd0990bbeee3c6f7c1fa9eac297b65c81c,", - "body.leading-relaxed.accent": "S:0ad35f0da82b53720264ffc5b8207d7033a50eef,", - "body.leading-relaxed.strong": "S:a74ff3ceb9259f843551bf274f760d5a4f15e9d0,", - "caption.leading-none.default": "S:357f15b760a1abcf5a7d8cecaedfb09ca9099f52,", - "caption.leading-none.subtle": "S:cc895ef61f7737502f80ca92b93b8da48e34e9aa,", - "body.none.normal": "S:5aa8b416753cd12a87d524bf704399473a0f348e,", - "body.none.strong": "S:fa12753ccbfe001cb9725f18b44fb6eaa04a79d9,", - "body.tight.normal": "S:7ffac82ed013f06bdac90112d1fffbb7648c298a,", - "body.tight.strong": "S:b7f935ed23aca4e8491105acd8ae843520e0f727,", - "caption.none.normal": "S:2e4c2a1fe87adbe0c2e3238f5646fc1849554fd1,", - "caption.none.soft": "S:6bc7dfd59f33f680a6ad0e78ca35a3c15f0d8b61,", - "heading.base": "S:269c03fdcac19cbeb8253cf3fcdff55f4d31ac32,", - "heading.hero": "S:09b94fb5f78a99affb38d37dca53070a25fc14a4,", - "heading.section": "S:692eff1447f3fb718a771f84d3d6dbb1fc170211,", - "heading.subsection": "S:c8ac8fb110c149662a7fc54bda84c1d185726ee4,", - "body.normal": "S:afc6c075910510c46e02c7fbf8e8ae05e88a3a68,", - "body.strong": "S:d11a700c6577e35728cf8ebf1971fa9c151ec0c0,", - "caption.normal": "S:7a02114f954dcd4ded5217eeecdb2c8356712be0,", - "caption.soft": "S:80ee38bd2b28f54cfd49dcd7145a5e4e3336dbe7,", - "heading.small": "S:61fab6fed30dea60e495ac6c595a79d59cc4a69c,", - "body.code": "S:7b5065654e86755ce767176dadc8dc008365d77c,", - "heading.dialog": "S:e322c6b501907f19d24264c95d5938de89a66308," - }, - "selectedTokenSets": { - "breakpoint/desktop": "enabled", - "components/desktop/base/input": "enabled", - "components/desktop/base/dropdown menu": "enabled", - "components/desktop/base/btn": "enabled", - "components/desktop/base/badge": "enabled", - "components/desktop/base/tag": "enabled" - }, - "$figmaCollectionId": "VariableCollectionId:630:194356", - "$figmaModeId": "630:7", - "$figmaVariableReferences": { - "breakpoint.viewport": "c0aa3fc7895e8b9f4b381b233a80214821447dfa", - "breakpoint.viewportMin": "6be5f8330bfa441a8ad6e3e543365c7864021a72", - "breakpoint.viewportMax": "8a8be6a3522300c276a7f78aed8779e0b6bd0fda", - "breakpoint.container": "ed2c337e342e73dec8eef97c30c677b147362d8e", - "btn.size.sm": "7564493c6f6e1b31d870f780a63186a83d391b92", - "btn.size.default": "a0dae7caa10a660e5a4e323c53ce92e18649f8c4", - "btn.size.icon": "ba8c0767d71c382a2e85d147e2eb6a848a2eedb6", - "btn.size.lg": "da0096d7be55eae5cd33fb29aca005e9b684aeb2", - "btn.gap.sm": "bc933be436aa19c62fc92b8cd092d89f060be7ea", - "btn.gap.default": "cb438207df15d1ee698464077876ef43bb8f7f06", - "btn.gap.lg": "71f8e02050eaf99ea1c24f4f6e562d205a8b0bfe", - "btn.default.radius": "fe21f367994c9a945aaf255df154a1d00bebbbb3", - "btn.rounded.radius": "c237bc86ecb12a01a720f2b30d4b54db8d4fb06a", - "btn.border": "2f2e2f08083ae1191902c04c004704c5210b43d4", - "btn.px.sm": "df494629c1be513beed98951a6fc02bcb13efe84", - "btn.px.default": "44e8cdd0574d4f523842cf38fa0e247f99a5017c", - "btn.px.lg": "e2d715a544fc44ee3159811b053816f2669f9f8a", - "btn.py.sm": "0016f78f877b26a9f8843fa820d41a7ec6fb1a13", - "btn.py.default": "a8bac530920096f2a857ec837cef9d6960808670", - "btn.py.lg": "dbadfa238e54880a13fdd4fc66f14dc44afab1b3", - "btn-link.size.sm": "f1a6a9a93b686ef09366cd063be3a9514f63afb4", - "btn-link.size.default": "fc8b764fd37e777e224ff881106fa0f8f30d5857", - "btn-link.gap.sm": "e63b120b0015804d7581ad9bdcde168886bf350c", - "btn-link.gap.default": "dd3aa27e1885fd22d4ab02fd4055d911d46d075c", - "input.size.sm": "edf74ccf6b9a46893ee8f8e5795b3f159c377ecd", - "input.size.default": "4a95892360734e5c46645204d2e2aec45eb2eeab", - "input.radius": "5aa981e02cf0c544fba6bbb492d41ec5c76e2160", - "input.gap": "d1c4fb60bade86c4a73111042fdb6f6cd82866a8", - "input.px": "2276d5824d4c1306ec045888740194851fe50c2a", - "input.py": "c7ae71898285e79260ecb1d681cdc72978ab818a", - "badge.size.sm": "971d8a416219bea28ec1287a1b54daf028ebb4fa", - "badge.size.default": "cad204331a3d056d1cd49b8d85f982e03cc768a4", - "badge.default.gap": "d78cd5b01cce6b22996f167916bb926b5dfb913c", - "badge.default.py": "122f6bc32c7efab7a5e27a2dc32def7b9a6e0826", - "badge.default.px": "f0bc7c9701c0a55677d9813597af807a8644fe23", - "badge.default.radius": "347be28d0a728945866ff529cd499b1e58bee6f0", - "badge.rounded.radius": "7a19a52ddc4cde699ca52b3100e9532770b9b551", - "badge.rounded.px": "6014b3b6218847f226fd965b8138f261aef9610e", - "badge.border": "d88ba47bad873744978e01f0850a8839922ed608", - "tag.size": "45fdf4ccb209bc1471e98dcb9f94d14e80bcdaf0", - "tag.gap": "4f428fa34534b2d68ed54fbaf34bd38e6cc9ee6b", - "tag.py": "589ebb2a07278d0f3d36d87832caeca247ce3784", - "tag.px": "9d984545ca43b563aa41e07dd69fed3ccc24a8a3", - "tag.default.radius": "196e635394c01a3d415fdfa15bcc584a8d536214", - "tag.split.right.radius.r": "ba3922868c448b06ee463ae1c3ec1920462f5ada", - "tag.split.right.radius.l": "8782f461abdbe60dc066672499571c4ca3ad52c1", - "tag.border": "f675fc12a9f950c500255b0c4cca35fa4b94539f", - "tag.split.left.radius.r": "0bdbf22f9f5fc456aff5ba59a82d85e93bae3d40", - "tag.split.left.radius.l": "d15e1b06b764a00ac53f563ffbdea56db2b08f20", - "dropdown.item.px": "8a447a832a15108a63270884d819bd8c73119f39", - "dropdown.item.gap": "5811c5344cc681a87424c899866d939993632f82", - "dropdown.item.radius": "fe54e79b3bdb596ef734f8de2bfad219cad77108", - "dropdown.sub-item.px": "510f1b5d88220a176e5fb6df785d531dfcb32070", - "dropdown.sub-item.py": "c91e77aba6ccd0f23fa158c177915d62f2fe0b06", - "dropdown.sub-item.gap": "91c68994497fe0c724599224c904954efeb337d2", - "dropdown.sub-item.radius": "67906229cc422c614910959894741c178ad8a76f", - "dropdown.sub-item.size": "ded5e6c8cd591a554a8be9f968121994b905d19a", - "dropdown.sub-item.gap-y": "7594be6c17f84a7348ff85b2a8adc8dbe43259ea", - "dropdown.container.py": "d63e01af7a6bf8a73360e69645ad96648c739e78", - "dropdown.container.radius": "623504b7b1438de7d3330abd369c6bbcdb6ce642", - "dropdown.container.min-w": "d609efbc8a53fe82d0a899c10f804b0b5cffca98", - "dropdown.menu-item-branch-selector.tag.px": "35594a38718a20c7f3e3fd133e8c44ff831c5a05", - "dropdown.menu-item-branch-selector.tag.size": "4b9f6544cf9aec4068151e8e37a986d832f5606c", - "dropdown.menu-items.header-footer.px": "ac04ab19d02649e4354bb5f650c0a9435f7a7f19", - "dropdown.menu-items.header-footer.py": "7f108d35da597212c12b81e397b921cf5365874b" - }, - "group": "breakpoint" - }, - { - "id": "e0d6354f6e44bcfb6d8d9348097505be518ab3da", - "name": "Harness", - "$figmaStyleReferences": { - "shadow.0": "S:a2ed3778198048e91067a04633c27ba20e9fcbec,", - "shadow.1": "S:947694488889f7271c428950bec937ee79f8a536,", - "shadow.2": "S:70378f090cb66b03ee4b18e25742743934f37757,", - "shadow.3": "S:aa7e83fd47e75f5a1ae3e17f64417d5e9fcb96ae,", - "shadow.4": "S:5dfba690094db266c4ab7686fccbbedd8c16385f,", - "shadow.5": "S:d6752151a8dd3bd4b4bf12ad15a80c522f760731,", - "shadow.6": "S:da8e7b5b0f1352215fbaab66eff62a3e19d22b67,", - "shadow.inner": "S:2805cdc40176a4707d5cfc549b4c12e7ec4e74ff,", - "ring.focus": "S:062018f6483f54f1255b952aa1759b028d502ac3,", - "heading.hero": "S:09b94fb5f78a99affb38d37dca53070a25fc14a4,", - "heading.section": "S:692eff1447f3fb718a771f84d3d6dbb1fc170211,", - "heading.subsection": "S:c8ac8fb110c149662a7fc54bda84c1d185726ee4,", - "heading.base": "S:269c03fdcac19cbeb8253cf3fcdff55f4d31ac32,", - "heading.small": "S:61fab6fed30dea60e495ac6c595a79d59cc4a69c,", - "body.normal": "S:afc6c075910510c46e02c7fbf8e8ae05e88a3a68,", - "body.strong": "S:d11a700c6577e35728cf8ebf1971fa9c151ec0c0,", - "body.code": "S:7b5065654e86755ce767176dadc8dc008365d77c,", - "body.none.normal": "S:5aa8b416753cd12a87d524bf704399473a0f348e,", - "body.none.strong": "S:fa12753ccbfe001cb9725f18b44fb6eaa04a79d9,", - "body.tight.normal": "S:7ffac82ed013f06bdac90112d1fffbb7648c298a,", - "body.tight.strong": "S:b7f935ed23aca4e8491105acd8ae843520e0f727,", - "caption.normal": "S:7a02114f954dcd4ded5217eeecdb2c8356712be0,", - "caption.soft": "S:80ee38bd2b28f54cfd49dcd7145a5e4e3336dbe7,", - "caption.none.normal": "S:2e4c2a1fe87adbe0c2e3238f5646fc1849554fd1,", - "caption.none.soft": "S:6bc7dfd59f33f680a6ad0e78ca35a3c15f0d8b61,", - "component.markdown-editor.title.h1": "S:f1b57a327f5b8b6ee1a5c2c358366b73a2f6f8ab,", - "component.markdown-editor.title.h2": "S:b266584196fcbce5eedb899c13fa475efc4a009c,", - "component.markdown-editor.title.h3": "S:464606c9cebe20fecf8ca3bb3f35f8560f0bd224,", - "component.markdown-editor.content.lead": "S:594b906739ae96b94950934ff732ef0c56c8f77f,", - "component.markdown-editor.content.paragraph": "S:6c5c7b213514a90340c62995f71422ea492b063a,", - "component.markdown-editor.content.emphasized": "S:061aad96d53bf2820b1e5e6041f8e6084698c7ee," - }, - "selectedTokenSets": { - "brand/Harness": "source" - }, - "$figmaCollectionId": "VariableCollectionId:1328:8740", - "$figmaModeId": "1328:1", - "$figmaVariableReferences": { - "brand.color.50": "c9a6b44d962605951fd5f061b6da67979d9bb407", - "brand.color.100": "cd23f86a199d0a60fbee2dd9245c8837ba679355", - "brand.color.200": "b526c8e1798e66e15b42ddca6fdc3ed3951f6626", - "brand.color.300": "d763d2bba7130cf6da5d308e90d5683812b090ea", - "brand.color.400": "80685ad12d700a45ca7df4b34e429b6eba650fe0", - "brand.color.500": "61185f0b7b2762e90f528c356e566c03fe3c22eb", - "brand.color.600": "308f68b7b74d26c9113cba11f5b24e54b7e0c1bc", - "brand.color.700": "da448d82021cad191b08ee1f1443e91cdeec73c1", - "brand.color.800": "29767a00205fda7be362c35030318c3a7ca60c2e", - "brand.color.900": "2242d02fa5fa47efd533e72314c0427749940d18", - "brand.color.950": "dccdb3fd098aa11a08e059469843196d74fa1501", - "brand.onColor.50": "311472554cdb58bea2aa2a683cd047c924bb0895", - "brand.onColor.100": "5b86df052445a3cd791c910f57c9290f33972104", - "brand.onColor.200": "73ccd8fadcb85e3f3ca51c10689f89110b1492da", - "brand.onColor.300": "9654657d854ad763316e9c0f738180a0ef8b60b7", - "brand.onColor.400": "497edaca8162dfa1c7b587fb7b1a4a240c8625bd", - "brand.onColor.500": "661f550d90034a9382a0ad58e6350c666d941e2b", - "brand.onColor.600": "a48ecdd4e1c465e7d3da0c8bdd28e64e92bf8855", - "brand.onColor.700": "81909f30a1f47c94ec3bf425d6401b33fab2924c", - "brand.onColor.800": "dcdf795267352295c819448fa9f0fe7a1f1cea22", - "brand.onColor.900": "5ed456f16f42cebcf31ae6d5adbffd63b04bc8ea", - "brand.onColor.950": "07ebad268237bb60b304f81670a89b7662a75dbf" - }, - "group": "brand" - }, - { - "id": "5d856d8b81ae6d6cc8a1ef35d9bb5d96e1b21ffa", - "name": "Gitness", - "$figmaStyleReferences": {}, - "selectedTokenSets": { - "brand/Gitness": "source" - }, - "$figmaCollectionId": "VariableCollectionId:1328:8740", - "$figmaModeId": "1328:2", - "$figmaVariableReferences": { - "brand.color.50": "c9a6b44d962605951fd5f061b6da67979d9bb407", - "brand.color.100": "cd23f86a199d0a60fbee2dd9245c8837ba679355", - "brand.color.200": "b526c8e1798e66e15b42ddca6fdc3ed3951f6626", - "brand.color.300": "d763d2bba7130cf6da5d308e90d5683812b090ea", - "brand.color.400": "80685ad12d700a45ca7df4b34e429b6eba650fe0", - "brand.color.500": "61185f0b7b2762e90f528c356e566c03fe3c22eb", - "brand.color.600": "308f68b7b74d26c9113cba11f5b24e54b7e0c1bc", - "brand.color.700": "da448d82021cad191b08ee1f1443e91cdeec73c1", - "brand.color.800": "29767a00205fda7be362c35030318c3a7ca60c2e", - "brand.color.900": "2242d02fa5fa47efd533e72314c0427749940d18", - "brand.color.950": "dccdb3fd098aa11a08e059469843196d74fa1501", - "brand.onColor.50": "311472554cdb58bea2aa2a683cd047c924bb0895", - "brand.onColor.100": "5b86df052445a3cd791c910f57c9290f33972104", - "brand.onColor.200": "73ccd8fadcb85e3f3ca51c10689f89110b1492da", - "brand.onColor.300": "9654657d854ad763316e9c0f738180a0ef8b60b7", - "brand.onColor.400": "497edaca8162dfa1c7b587fb7b1a4a240c8625bd", - "brand.onColor.500": "661f550d90034a9382a0ad58e6350c666d941e2b", - "brand.onColor.600": "a48ecdd4e1c465e7d3da0c8bdd28e64e92bf8855", - "brand.onColor.700": "81909f30a1f47c94ec3bf425d6401b33fab2924c", - "brand.onColor.800": "dcdf795267352295c819448fa9f0fe7a1f1cea22", - "brand.onColor.900": "5ed456f16f42cebcf31ae6d5adbffd63b04bc8ea", - "brand.onColor.950": "07ebad268237bb60b304f81670a89b7662a75dbf" - }, - "group": "brand" - } -] \ No newline at end of file diff --git a/packages/ui/design-tokens/brand/Gitness.json b/packages/ui/design-tokens/brand/Gitness.json deleted file mode 100644 index c1c85848e5..0000000000 --- a/packages/ui/design-tokens/brand/Gitness.json +++ /dev/null @@ -1,96 +0,0 @@ -{ - "brand": { - "color": { - "50": { - "$type": "color", - "$value": "{colors.chrome.150}" - }, - "100": { - "$type": "color", - "$value": "{colors.chrome.150}" - }, - "200": { - "$type": "color", - "$value": "{colors.chrome.150}" - }, - "300": { - "$type": "color", - "$value": "{colors.chrome.150}" - }, - "400": { - "$type": "color", - "$value": "{colors.chrome.150}" - }, - "500": { - "$type": "color", - "$value": "{colors.chrome.900}" - }, - "600": { - "$type": "color", - "$value": "{colors.chrome.150}" - }, - "700": { - "$type": "color", - "$value": "{colors.chrome.900}" - }, - "800": { - "$type": "color", - "$value": "{colors.chrome.900}" - }, - "900": { - "$type": "color", - "$value": "{colors.chrome.900}" - }, - "950": { - "$type": "color", - "$value": "{colors.chrome.900}" - } - }, - "onColor": { - "50": { - "$type": "color", - "$value": "{colors.pure.black}" - }, - "100": { - "$type": "color", - "$value": "{colors.pure.black}" - }, - "200": { - "$type": "color", - "$value": "{colors.pure.black}" - }, - "300": { - "$type": "color", - "$value": "{colors.pure.black}" - }, - "400": { - "$type": "color", - "$value": "{colors.pure.black}" - }, - "500": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "600": { - "$type": "color", - "$value": "{colors.pure.black}" - }, - "700": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "800": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "900": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "950": { - "$type": "color", - "$value": "{colors.pure.white}" - } - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/brand/Harness.json b/packages/ui/design-tokens/brand/Harness.json deleted file mode 100644 index 064804a6bb..0000000000 --- a/packages/ui/design-tokens/brand/Harness.json +++ /dev/null @@ -1,96 +0,0 @@ -{ - "brand": { - "color": { - "50": { - "$type": "color", - "$value": "{colors.cyan.50}" - }, - "100": { - "$type": "color", - "$value": "{colors.cyan.100}" - }, - "200": { - "$type": "color", - "$value": "{colors.cyan.200}" - }, - "300": { - "$type": "color", - "$value": "{colors.cyan.300}" - }, - "400": { - "$type": "color", - "$value": "{colors.cyan.400}" - }, - "500": { - "$type": "color", - "$value": "{colors.cyan.500}" - }, - "600": { - "$type": "color", - "$value": "{colors.cyan.600}" - }, - "700": { - "$type": "color", - "$value": "{colors.cyan.700}" - }, - "800": { - "$type": "color", - "$value": "{colors.cyan.800}" - }, - "900": { - "$type": "color", - "$value": "{colors.cyan.900}" - }, - "950": { - "$type": "color", - "$value": "{colors.cyan.950}" - } - }, - "onColor": { - "50": { - "$type": "color", - "$value": "{colors.chrome.950}" - }, - "100": { - "$type": "color", - "$value": "{colors.chrome.950}" - }, - "200": { - "$type": "color", - "$value": "{colors.chrome.950}" - }, - "300": { - "$type": "color", - "$value": "{colors.chrome.950}" - }, - "400": { - "$type": "color", - "$value": "{colors.chrome.950}" - }, - "500": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "600": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "700": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "800": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "900": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "950": { - "$type": "color", - "$value": "{colors.pure.white}" - } - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/breakpoint/desktop.json b/packages/ui/design-tokens/breakpoint/desktop.json deleted file mode 100644 index 0bf44d58a9..0000000000 --- a/packages/ui/design-tokens/breakpoint/desktop.json +++ /dev/null @@ -1,293 +0,0 @@ -{ - "breakpoint": { - "viewport": { - "$type": "number", - "$value": "1440" - }, - "viewportMin": { - "$type": "number", - "$value": "1080" - }, - "viewportMax": { - "$type": "number", - "$value": "1919" - }, - "container": { - "$type": "number", - "$value": "{spacing.8}" - } - }, - "heading": { - "hero": { - "$type": "typography", - "$value": { - "fontFamily": "{fontFamily.default}", - "fontWeight": "{fontWeight.default.normal.500}", - "fontSize": "{fontSize.9}", - "lineHeight": "{lineHeight.9.tight}", - "letterSpacing": "{tracking.tight}", - "textCase": "{textCase.none}" - }, - "$description": "Large headlines with extra emphasis." - }, - "section": { - "$type": "typography", - "$value": { - "fontFamily": "{fontFamily.default}", - "fontWeight": "{fontWeight.default.normal.500}", - "fontSize": "{fontSize.7}", - "lineHeight": "{lineHeight.7.tight}", - "letterSpacing": "{tracking.tight}", - "textCase": "{textCase.none}" - }, - "$description": "Large headlines, hero sections." - }, - "subsection": { - "$type": "typography", - "$value": { - "fontFamily": "{fontFamily.default}", - "fontWeight": "{fontWeight.default.normal.500}", - "fontSize": "{fontSize.6}", - "lineHeight": "{lineHeight.6.tight}", - "letterSpacing": "{tracking.normal}" - }, - "$description": "Emphasized section headers." - }, - "dialog": { - "$type": "typography", - "$value": { - "fontFamily": "{fontFamily.default}", - "fontWeight": "{fontWeight.default.normal.500}", - "fontSize": "{fontSize.5}", - "lineHeight": "{lineHeight.5.tight}", - "letterSpacing": "{tracking.tight}" - }, - "$description": "Dialog headers." - }, - "base": { - "$type": "typography", - "$value": { - "fontFamily": "{fontFamily.default}", - "fontWeight": "{fontWeight.default.normal.500}", - "fontSize": "{fontSize.3}", - "lineHeight": "{lineHeight.3.tight}", - "letterSpacing": "{tracking.normal}" - }, - "$description": "Section headers." - }, - "small": { - "$type": "typography", - "$value": { - "fontFamily": "{fontFamily.default}", - "fontWeight": "{fontWeight.default.normal.600}", - "fontSize": "{fontSize.2}", - "lineHeight": "{lineHeight.2.snug}", - "letterSpacing": "{tracking.normal}" - }, - "$description": "Section headers." - } - }, - "body": { - "normal": { - "$type": "typography", - "$value": { - "fontFamily": "{fontFamily.default}", - "fontWeight": "{fontWeight.default.normal.400}", - "fontSize": "{fontSize.2}", - "lineHeight": "{lineHeight.2.snug}", - "letterSpacing": "{tracking.tight}" - }, - "$description": "Primary text style for UI and content." - }, - "strong": { - "$type": "typography", - "$value": { - "fontFamily": "{fontFamily.default}", - "fontWeight": "{fontWeight.default.normal.500}", - "fontSize": "{fontSize.2}", - "lineHeight": "{lineHeight.2.snug}", - "letterSpacing": "{tracking.normal}" - }, - "$description": "Primary text style for UI and content." - }, - "code": { - "$type": "typography", - "$value": { - "fontFamily": "{fontFamily.mono}", - "fontWeight": "{fontWeight.default.normal.400}", - "fontSize": "{fontSize.2}", - "lineHeight": "{lineHeight.2.normal}", - "letterSpacing": "{tracking.tight}" - }, - "$description": "Code blocks and larger code snippets." - }, - "none": { - "normal": { - "$type": "typography", - "$value": { - "fontFamily": "{fontFamily.default}", - "fontWeight": "{fontWeight.default.normal.400}", - "fontSize": "{fontSize.2}", - "lineHeight": "{lineHeight.2.none}", - "letterSpacing": "{tracking.tight}" - }, - "$description": "Primary text style for UI and content." - }, - "strong": { - "$type": "typography", - "$value": { - "fontFamily": "{fontFamily.default}", - "fontWeight": "{fontWeight.default.normal.500}", - "fontSize": "{fontSize.2}", - "lineHeight": "{lineHeight.2.none}", - "letterSpacing": "{tracking.normal}" - } - } - }, - "tight": { - "normal": { - "$type": "typography", - "$value": { - "fontFamily": "{fontFamily.default}", - "fontWeight": "{fontWeight.default.normal.400}", - "fontSize": "{fontSize.2}", - "lineHeight": "{lineHeight.2.tight}", - "letterSpacing": "{tracking.tight}" - }, - "$description": "Primary text style for UI and content." - }, - "strong": { - "$type": "typography", - "$value": { - "fontFamily": "{fontFamily.default}", - "fontWeight": "{fontWeight.default.normal.500}", - "fontSize": "{fontSize.2}", - "lineHeight": "{lineHeight.2.tight}", - "letterSpacing": "{tracking.normal}" - } - } - } - }, - "caption": { - "normal": { - "$type": "typography", - "$value": { - "fontFamily": "{fontFamily.default}", - "fontWeight": "{fontWeight.default.normal.500}", - "fontSize": "{fontSize.1}", - "lineHeight": "{lineHeight.1.snug}", - "letterSpacing": "{tracking.normal}" - }, - "$description": "Primary caption style, small but important text." - }, - "soft": { - "$type": "typography", - "$value": { - "fontFamily": "{fontFamily.default}", - "fontWeight": "{fontWeight.default.normal.400}", - "fontSize": "{fontSize.1}", - "lineHeight": "{lineHeight.1.snug}", - "letterSpacing": "{tracking.normal}" - }, - "$description": "Helper text, meta information." - }, - "none": { - "normal": { - "$type": "typography", - "$value": { - "fontFamily": "{fontFamily.default}", - "fontWeight": "{fontWeight.default.normal.500}", - "fontSize": "{fontSize.1}", - "lineHeight": "{lineHeight.1.none}", - "letterSpacing": "{tracking.normal}" - }, - "$description": "Primary caption style, small but important text." - }, - "soft": { - "$type": "typography", - "$value": { - "fontFamily": "{fontFamily.default}", - "fontWeight": "{fontWeight.default.normal.400}", - "fontSize": "{fontSize.1}", - "lineHeight": "{lineHeight.1.none}", - "letterSpacing": "{tracking.normal}" - }, - "$description": "Helper text, meta information." - } - } - }, - "component": { - "markdown-editor": { - "title": { - "h1": { - "$type": "typography", - "$value": { - "fontFamily": "{fontFamily.default}", - "fontWeight": "{fontWeight.default.normal.600}", - "fontSize": "{fontSize.7}", - "lineHeight": "{lineHeight.7.normal}", - "letterSpacing": "{tracking.tight}" - }, - "$description": "Article main heading." - }, - "h2": { - "$type": "typography", - "$value": { - "fontFamily": "{fontFamily.default}", - "fontWeight": "{fontWeight.default.normal.600}", - "fontSize": "{fontSize.6}", - "lineHeight": "{lineHeight.6.normal}", - "letterSpacing": "{tracking.tight}" - }, - "$description": "Article section heading." - }, - "h3": { - "$type": "typography", - "$value": { - "fontFamily": "{fontFamily.default}", - "fontWeight": "{fontWeight.default.normal.600}", - "fontSize": "{fontSize.3}", - "lineHeight": "{lineHeight.3.normal}", - "letterSpacing": "{tracking.normal}" - }, - "$description": "Article subsection heading." - } - }, - "content": { - "lead": { - "$type": "typography", - "$value": { - "fontFamily": "{fontFamily.default}", - "fontWeight": "{fontWeight.default.normal.400}", - "fontSize": "{fontSize.5}", - "lineHeight": "{lineHeight.5.normal}", - "letterSpacing": "{tracking.tight}" - }, - "$description": "Article introduction paragraph." - }, - "paragraph": { - "$type": "typography", - "$value": { - "fontFamily": "{fontFamily.default}", - "fontWeight": "{fontWeight.default.normal.400}", - "fontSize": "{fontSize.3}", - "lineHeight": "{lineHeight.3.relaxed}", - "letterSpacing": "{tracking.normal}" - }, - "$description": "Article paragraph text." - }, - "emphasized": { - "$type": "typography", - "$value": { - "fontFamily": "{fontFamily.default}", - "fontWeight": "{fontWeight.default.normal.500}", - "fontSize": "{fontSize.3}", - "lineHeight": "{lineHeight.3.relaxed}", - "letterSpacing": "{tracking.tight}" - }, - "$description": "Emphasized paragraph text." - } - } - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/components/desktop/base/badge.json b/packages/ui/design-tokens/components/desktop/base/badge.json deleted file mode 100644 index f758523d55..0000000000 --- a/packages/ui/design-tokens/components/desktop/base/badge.json +++ /dev/null @@ -1,46 +0,0 @@ -{ - "badge": { - "size": { - "sm": { - "$type": "sizing", - "$value": "{size.5}" - }, - "default": { - "$type": "sizing", - "$value": "{size.6}" - } - }, - "default": { - "gap": { - "$type": "spacing", - "$value": "{spacing.1}" - }, - "py": { - "$type": "spacing", - "$value": "{spacing.half}" - }, - "px": { - "$type": "spacing", - "$value": "{spacing.2}" - }, - "radius": { - "$type": "borderRadius", - "$value": "{rounded.2}" - } - }, - "rounded": { - "radius": { - "$type": "borderRadius", - "$value": "{rounded.full}" - }, - "px": { - "$type": "spacing", - "$value": "{spacing.2-half}" - } - }, - "border": { - "$type": "borderWidth", - "$value": "{borderWidth.1}" - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/components/desktop/base/btn.json b/packages/ui/design-tokens/components/desktop/base/btn.json deleted file mode 100644 index e2b9e69fe1..0000000000 --- a/packages/ui/design-tokens/components/desktop/base/btn.json +++ /dev/null @@ -1,102 +0,0 @@ -{ - "btn": { - "size": { - "sm": { - "$type": "sizing", - "$value": "{size.7}" - }, - "default": { - "$type": "sizing", - "$value": "{size.8}" - }, - "icon": { - "$type": "sizing", - "$value": "{size.8}" - }, - "lg": { - "$type": "sizing", - "$value": "{size.10}" - } - }, - "gap": { - "sm": { - "$type": "spacing", - "$value": "{spacing.1-half}" - }, - "default": { - "$type": "spacing", - "$value": "{spacing.2-half}" - }, - "lg": { - "$type": "spacing", - "$value": "{spacing.2-half}" - } - }, - "default": { - "radius": { - "$type": "borderRadius", - "$value": "{rounded.2}" - } - }, - "rounded": { - "radius": { - "$type": "borderRadius", - "$value": "{rounded.full}" - } - }, - "border": { - "$type": "borderWidth", - "$value": "{borderWidth.1}" - }, - "px": { - "sm": { - "$type": "spacing", - "$value": "{spacing.5}" - }, - "default": { - "$type": "spacing", - "$value": "{spacing.5}" - }, - "lg": { - "$type": "spacing", - "$value": "{spacing.6}" - } - }, - "py": { - "sm": { - "$type": "spacing", - "$value": "{spacing.1-half}" - }, - "default": { - "$type": "spacing", - "$value": "{spacing.2}" - }, - "lg": { - "$type": "spacing", - "$value": "{spacing.3}" - } - } - }, - "btn-link": { - "size": { - "sm": { - "$type": "sizing", - "$value": "{size.4}" - }, - "default": { - "$type": "sizing", - "$value": "{size.4}" - } - }, - "gap": { - "sm": { - "$type": "spacing", - "$value": "{spacing.2}" - }, - "default": { - "$type": "spacing", - "$value": "{spacing.2-half}" - } - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/components/desktop/base/dropdown menu.json b/packages/ui/design-tokens/components/desktop/base/dropdown menu.json deleted file mode 100644 index b2853baf69..0000000000 --- a/packages/ui/design-tokens/components/desktop/base/dropdown menu.json +++ /dev/null @@ -1,93 +0,0 @@ -{ - "dropdown": { - "item": { - "px": { - "$type": "spacing", - "$value": "{spacing.1}", - "$description": "4px\n" - }, - "gap": { - "$type": "spacing", - "$value": "{spacing.2-half}", - "$description": "8px" - }, - "radius": { - "$type": "borderRadius", - "$value": "{dropdown.sub-item.radius}" - } - }, - "sub-item": { - "px": { - "$type": "spacing", - "$value": "{spacing.3}", - "$description": "12px" - }, - "py": { - "$type": "spacing", - "$value": "{spacing.2}", - "$description": "8px" - }, - "gap": { - "$type": "spacing", - "$value": "{spacing.2-half}" - }, - "radius": { - "$type": "borderRadius", - "$value": "{rounded.1}" - }, - "size": { - "$type": "sizing", - "$value": "{size.8}" - }, - "gap-y": { - "$type": "spacing", - "$value": "{spacing.1}", - "$description": "4px gap between text" - } - }, - "container": { - "py": { - "$type": "spacing", - "$value": "{spacing.1}", - "$description": "4px\n" - }, - "radius": { - "$type": "borderRadius", - "$value": "{rounded.3}", - "$description": "6px" - }, - "min-w": { - "$type": "sizing", - "$value": "320px" - } - }, - "menu-item-branch-selector": { - "tag": { - "px": { - "$type": "spacing", - "$value": "{spacing.2}", - "$description": "8px horizontal padding" - }, - "size": { - "$type": "sizing", - "$value": "{size.5}", - "$description": "20px height\n" - } - } - }, - "menu-items": { - "header-footer": { - "px": { - "$type": "spacing", - "$value": "{spacing.4}", - "$description": "16px horizontal padding" - }, - "py": { - "$type": "spacing", - "$value": "{spacing.2-half}", - "$description": "10px vertical padding" - } - } - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/components/desktop/base/input.json b/packages/ui/design-tokens/components/desktop/base/input.json deleted file mode 100644 index 0754b25d9a..0000000000 --- a/packages/ui/design-tokens/components/desktop/base/input.json +++ /dev/null @@ -1,35 +0,0 @@ -{ - "input": { - "size": { - "sm": { - "$type": "sizing", - "$value": "{size.8}", - "$description": "32px" - }, - "default": { - "$type": "sizing", - "$value": "{size.9}", - "$description": "36px\n" - } - }, - "radius": { - "$type": "borderRadius", - "$value": "{rounded.3}", - "$description": "6px" - }, - "gap": { - "$type": "spacing", - "$value": "{spacing.1-half}" - }, - "px": { - "$type": "spacing", - "$value": "{spacing.3}", - "$description": "12px horizontal padding" - }, - "py": { - "$type": "spacing", - "$value": "{spacing.2}", - "$description": "8px vertical padding" - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/components/desktop/base/pagination.json b/packages/ui/design-tokens/components/desktop/base/pagination.json deleted file mode 100644 index 76108603c4..0000000000 --- a/packages/ui/design-tokens/components/desktop/base/pagination.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "pagination": { - "size": { - "$type": "sizing", - "$value": "{size.7}" - }, - "gap": { - "$type": "spacing", - "$value": "{spacing.1}" - }, - "radius": { - "$type": "borderRadius", - "$value": "{rounded.full}" - }, - "subpages": { - "$type": "spacing", - "$value": "{spacing.2-half}" - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/components/desktop/base/tag.json b/packages/ui/design-tokens/components/desktop/base/tag.json deleted file mode 100644 index 131019afa5..0000000000 --- a/packages/ui/design-tokens/components/desktop/base/tag.json +++ /dev/null @@ -1,56 +0,0 @@ -{ - "tag": { - "size": { - "$type": "sizing", - "$value": "{size.5}" - }, - "gap": { - "$type": "spacing", - "$value": "{spacing.1}" - }, - "py": { - "$type": "spacing", - "$value": "{spacing.1}" - }, - "px": { - "$type": "spacing", - "$value": "{spacing.2}" - }, - "default": { - "radius": { - "$type": "borderRadius", - "$value": "{rounded.2}" - } - }, - "split": { - "right": { - "radius": { - "r": { - "$type": "borderRadius", - "$value": "{rounded.2}" - }, - "l": { - "$type": "borderRadius", - "$value": "{rounded.none}" - } - } - }, - "left": { - "radius": { - "r": { - "$type": "borderRadius", - "$value": "{rounded.none}" - }, - "l": { - "$type": "borderRadius", - "$value": "{rounded.2}" - } - } - } - }, - "border": { - "$type": "borderWidth", - "$value": "{borderWidth.1}" - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/components/desktop/base/tooltip.json b/packages/ui/design-tokens/components/desktop/base/tooltip.json deleted file mode 100644 index 789a72b1b3..0000000000 --- a/packages/ui/design-tokens/components/desktop/base/tooltip.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "tooltip": { - "radius": { - "$type": "borderRadius", - "$value": "{rounded.3}" - }, - "padding": { - "py": { - "$type": "spacing", - "$value": "{spacing.3}" - }, - "px": { - "$type": "spacing", - "$value": "{spacing.1-half}" - } - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/core/colors_hex.json b/packages/ui/design-tokens/core/colors_hex.json deleted file mode 100644 index b9c18ca7cb..0000000000 --- a/packages/ui/design-tokens/core/colors_hex.json +++ /dev/null @@ -1,547 +0,0 @@ -{ - "colors": { - "$type": "color", - "pure": { - "white": { - "$value": "#ffffff" - }, - "black": { - "$value": "#09090c" - } - }, - "chrome": { - "50": { - "$value": "#fafafa" - }, - "100": { - "$value": "#e4e4e5" - }, - "150": { - "$value": "#d7d7de" - }, - "200": { - "$value": "#c9c9d2" - }, - "300": { - "$value": "#b6b6bf" - }, - "400": { - "$value": "#a4a4ac" - }, - "500": { - "$value": "#8b8b97" - }, - "600": { - "$value": "#6d6d7a" - }, - "700": { - "$value": "#5c5c6b" - }, - "800": { - "$value": "#3f3e4a" - }, - "850": { - "$value": "#2d2d37" - }, - "900": { - "$value": "#18181e" - }, - "950": { - "$value": "#111116" - }, - "1000": { - "$value": "#0d0d11" - } - }, - "blue": { - "50": { - "$value": "#f0f1f9" - }, - "100": { - "$value": "#dee1f7" - }, - "200": { - "$value": "#a5b1f2" - }, - "300": { - "$value": "#8097ef" - }, - "400": { - "$value": "#577fea" - }, - "500": { - "$value": "#176ee6" - }, - "600": { - "$value": "#0852b4" - }, - "700": { - "$value": "#053f8d" - }, - "800": { - "$value": "#032b65" - }, - "900": { - "$value": "#011947" - }, - "950": { - "$value": "#010629" - } - }, - "red": { - "50": { - "$value": "#fceeec" - }, - "100": { - "$value": "#fbdad5" - }, - "200": { - "$value": "#ff9484" - }, - "300": { - "$value": "#ff7160" - }, - "400": { - "$value": "#ef3327" - }, - "500": { - "$value": "#c7291f" - }, - "600": { - "$value": "#a01f17" - }, - "700": { - "$value": "#7d160f" - }, - "800": { - "$value": "#5a0d08" - }, - "900": { - "$value": "#3b0603" - }, - "950": { - "$value": "#1c0202" - } - }, - "pink": { - "50": { - "$value": "#fbeef3" - }, - "100": { - "$value": "#f9d9e6" - }, - "200": { - "$value": "#f98ec1" - }, - "300": { - "$value": "#f754ac" - }, - "400": { - "$value": "#d94295" - }, - "500": { - "$value": "#b5367b" - }, - "600": { - "$value": "#912962" - }, - "700": { - "$value": "#711e4c" - }, - "800": { - "$value": "#511335" - }, - "900": { - "$value": "#350a21" - }, - "950": { - "$value": "#18030d" - } - }, - "yellow": { - "50": { - "$value": "#fbf2cf" - }, - "100": { - "$value": "#fcdeb2" - }, - "200": { - "$value": "#eca71c" - }, - "300": { - "$value": "#cc9012" - }, - "400": { - "$value": "#ae7c10" - }, - "500": { - "$value": "#8f6609" - }, - "600": { - "$value": "#735105" - }, - "700": { - "$value": "#593e04" - }, - "800": { - "$value": "#3f2b02" - }, - "900": { - "$value": "#281a01" - }, - "950": { - "$value": "#110a01" - } - }, - "orange": { - "50": { - "$value": "#fbf0df" - }, - "100": { - "$value": "#fbdcc5" - }, - "200": { - "$value": "#ff9f71" - }, - "300": { - "$value": "#f37228" - }, - "400": { - "$value": "#d16120" - }, - "500": { - "$value": "#ad4f1a" - }, - "600": { - "$value": "#8b3e12" - }, - "700": { - "$value": "#722a0d" - }, - "800": { - "$value": "#511c07" - }, - "900": { - "$value": "#321203" - }, - "950": { - "$value": "#170601" - } - }, - "brown": { - "50": { - "$value": "#f9f2da" - }, - "100": { - "$value": "#f5e0bf" - }, - "200": { - "$value": "#eea26f" - }, - "300": { - "$value": "#d58852" - }, - "400": { - "$value": "#bc7848" - }, - "500": { - "$value": "#976038" - }, - "600": { - "$value": "#794c2c" - }, - "700": { - "$value": "#5e3a20" - }, - "800": { - "$value": "#422815" - }, - "900": { - "$value": "#29190b" - }, - "950": { - "$value": "#120903" - } - }, - "mint": { - "50": { - "$value": "#dbfaef" - }, - "100": { - "$value": "#aef4e1" - }, - "200": { - "$value": "#00ccad" - }, - "300": { - "$value": "#00b79b" - }, - "400": { - "$value": "#009d81" - }, - "500": { - "$value": "#008268" - }, - "600": { - "$value": "#00684f" - }, - "700": { - "$value": "#00513b" - }, - "800": { - "$value": "#003927" - }, - "900": { - "$value": "#002415" - }, - "950": { - "$value": "#010f07" - } - }, - "lime": { - "50": { - "$value": "#e8f8db" - }, - "100": { - "$value": "#d0efb7" - }, - "200": { - "$value": "#92c560" - }, - "300": { - "$value": "#80ad53" - }, - "400": { - "$value": "#6d9447" - }, - "500": { - "$value": "#5a7a39" - }, - "600": { - "$value": "#47622c" - }, - "700": { - "$value": "#364b20" - }, - "800": { - "$value": "#253515" - }, - "900": { - "$value": "#16210b" - }, - "950": { - "$value": "#070d04" - } - }, - "green": { - "50": { - "$value": "#e0f9e9" - }, - "100": { - "$value": "#b8f3cf" - }, - "200": { - "$value": "#27ce85" - }, - "300": { - "$value": "#20b977" - }, - "400": { - "$value": "#1b9e65" - }, - "500": { - "$value": "#158353" - }, - "600": { - "$value": "#0d6941" - }, - "700": { - "$value": "#085131" - }, - "800": { - "$value": "#053922" - }, - "900": { - "$value": "#022413" - }, - "950": { - "$value": "#010f06" - } - }, - "purple": { - "50": { - "$value": "#f4effd" - }, - "100": { - "$value": "#e9dcfd" - }, - "200": { - "$value": "#cb9eff" - }, - "300": { - "$value": "#b973ff" - }, - "400": { - "$value": "#aa41ff" - }, - "500": { - "$value": "#9500f6" - }, - "600": { - "$value": "#7800c7" - }, - "700": { - "$value": "#5d009c" - }, - "800": { - "$value": "#420071" - }, - "900": { - "$value": "#2a004c" - }, - "950": { - "$value": "#130025" - } - }, - "violet": { - "50": { - "$value": "#f3f0fc" - }, - "100": { - "$value": "#e6ddfd" - }, - "200": { - "$value": "#bca3ff" - }, - "300": { - "$value": "#a98dff" - }, - "400": { - "$value": "#8a5eff" - }, - "500": { - "$value": "#761eff" - }, - "600": { - "$value": "#6100df" - }, - "700": { - "$value": "#4d00ae" - }, - "800": { - "$value": "#39007b" - }, - "900": { - "$value": "#2b004b" - }, - "950": { - "$value": "#130024" - } - }, - "indigo": { - "50": { - "$value": "#f0f1fd" - }, - "100": { - "$value": "#dee0fd" - }, - "200": { - "$value": "#a5b0f7" - }, - "300": { - "$value": "#859bff" - }, - "400": { - "$value": "#5c7af4" - }, - "500": { - "$value": "#445de4" - }, - "600": { - "$value": "#3142c8" - }, - "700": { - "$value": "#232ca7" - }, - "800": { - "$value": "#161980" - }, - "900": { - "$value": "#0b0a59" - }, - "950": { - "$value": "#030231" - } - }, - "cyan": { - "50": { - "$value": "#e9f4fa" - }, - "100": { - "$value": "#cce8f9" - }, - "200": { - "$value": "#7fbfe4" - }, - "300": { - "$value": "#00ade4" - }, - "400": { - "$value": "#0092cd" - }, - "500": { - "$value": "#0078b0" - }, - "600": { - "$value": "#005f91" - }, - "700": { - "$value": "#094871" - }, - "800": { - "$value": "#0f3250" - }, - "900": { - "$value": "#0d1e32" - }, - "950": { - "$value": "#040c18" - } - }, - "peach": { - "50": { - "$value": "#fceeed" - }, - "100": { - "$value": "#fbdad7" - }, - "200": { - "$value": "#ff9092" - }, - "300": { - "$value": "#ff5f5e" - }, - "400": { - "$value": "#ee323d" - }, - "500": { - "$value": "#c62831" - }, - "600": { - "$value": "#a01e26" - }, - "700": { - "$value": "#7d161c" - }, - "800": { - "$value": "#5a0c11" - }, - "900": { - "$value": "#3b0508" - }, - "950": { - "$value": "#1c0203" - } - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/core/colors_lch.json b/packages/ui/design-tokens/core/colors_lch.json deleted file mode 100644 index 8e950618ec..0000000000 --- a/packages/ui/design-tokens/core/colors_lch.json +++ /dev/null @@ -1,547 +0,0 @@ -{ - "colors": { - "$type": "color", - "pure": { - "white": { - "$value": "lch(100% 0 134.54)" - }, - "black": { - "$value": "lch(2.44% 1.49 285.81)" - } - }, - "chrome": { - "50": { - "$value": "lch(98.27% 0.36 135.2)" - }, - "100": { - "$value": "lch(90.71% 0.38 284.93)" - }, - "150": { - "$value": "lch(85.99% 3.77 285.34)" - }, - "200": { - "$value": "lch(81.33% 4.52 285.46)" - }, - "300": { - "$value": "lch(74.37% 4.52 285.5)" - }, - "400": { - "$value": "lch(67.41% 4.51 285.56)" - }, - "500": { - "$value": "lch(58.08% 6.76 286.02)" - }, - "600": { - "$value": "lch(46.46% 7.5 286.37)" - }, - "700": { - "$value": "lch(39.46% 8.98 286.89)" - }, - "800": { - "$value": "lch(26.73% 7.48 287.06)" - }, - "850": { - "$value": "lch(18.63% 6.73 287.29)" - }, - "900": { - "$value": "lch(8.25% 4.49 287.18)" - }, - "950": { - "$value": "lch(5.2% 3.07 285.78)" - }, - "1000": { - "$value": "lch(3.66% 1.93 285.7)" - } - }, - "blue": { - "50": { - "$value": "lch(95.27% 4.16 280.86)" - }, - "100": { - "$value": "lch(89.92% 10.91 279.8)" - }, - "200": { - "$value": "lch(73.08% 34.81 281.21)" - }, - "300": { - "$value": "lch(63.4% 48.44 281.2)" - }, - "400": { - "$value": "lch(54.29% 60.55 281.11)" - }, - "500": { - "$value": "lch(47.04% 69.94 279.78)" - }, - "600": { - "$value": "lch(35.67% 59.7 280.58)" - }, - "700": { - "$value": "lch(27.25% 49.8 280.51)" - }, - "800": { - "$value": "lch(18.28% 39.2 280.4)" - }, - "900": { - "$value": "lch(9.63% 33.17 284.31)" - }, - "950": { - "$value": "lch(2.52% 22.28 283.9)" - } - }, - "cyan": { - "50": { - "$value": "lch(95.4% 5 238.5)" - }, - "100": { - "$value": "lch(90.24% 13.5 239.5)" - }, - "200": { - "$value": "lch(74.15% 29 241)" - }, - "300": { - "$value": "lch(65.49% 45.28 239)" - }, - "400": { - "$value": "lch(56.15% 44.5 246.5)" - }, - "500": { - "$value": "lch(46.84% 41.5 250)" - }, - "600": { - "$value": "lch(37.53% 36.5 254)" - }, - "700": { - "$value": "lch(28.81% 30 257.5)" - }, - "800": { - "$value": "lch(19.49% 23 261.5)" - }, - "900": { - "$value": "lch(10.76% 15.5 265)" - }, - "950": { - "$value": "lch(3.09% 7.5 268)" - } - }, - "red": { - "50": { - "$value": "lch(95.23% 5.25 32.59)" - }, - "100": { - "$value": "lch(89.81% 13.4 32.67)" - }, - "200": { - "$value": "lch(72.7% 48.17 33.53)" - }, - "300": { - "$value": "lch(65.59% 65.99 34.56)" - }, - "400": { - "$value": "lch(53.74% 88.37 37.69)" - }, - "500": { - "$value": "lch(44.74% 76.92 37.68)" - }, - "600": { - "$value": "lch(35.74% 65.47 37.67)" - }, - "700": { - "$value": "lch(27.3% 54.82 37.68)" - }, - "800": { - "$value": "lch(18.31% 42.35 35.83)" - }, - "900": { - "$value": "lch(9.87% 29.51 28.59)" - }, - "950": { - "$value": "lch(2.8% 10.22 21.65)" - } - }, - "pink": { - "50": { - "$value": "lch(95.15% 5.42 350.29)" - }, - "100": { - "$value": "lch(89.61% 13.47 350.26)" - }, - "200": { - "$value": "lch(72% 46.72 350.11)" - }, - "300": { - "$value": "lch(61.26% 69.37 350)" - }, - "400": { - "$value": "lch(53.21% 65.17 349.99)" - }, - "500": { - "$value": "lch(44.27% 56.78 349.99)" - }, - "600": { - "$value": "lch(35.34% 48.39 349.99)" - }, - "700": { - "$value": "lch(26.98% 40.34 349.99)" - }, - "800": { - "$value": "lch(18.05% 31.95 349.99)" - }, - "900": { - "$value": "lch(9.69% 23.89 349.99)" - }, - "950": { - "$value": "lch(2.74% 8.62 350.99)" - } - }, - "peach": { - "50": { - "$value": "lch(95.22% 5.2 27.21)" - }, - "100": { - "$value": "lch(89.79% 12.88 27.31)" - }, - "200": { - "$value": "lch(72.22% 46.73 23.25)" - }, - "300": { - "$value": "lch(62.66% 70.81 29.46)" - }, - "400": { - "$value": "lch(53.64% 82.24 30.93)" - }, - "500": { - "$value": "lch(44.66% 71.48 30.92)" - }, - "600": { - "$value": "lch(35.68% 60.73 30.9)" - }, - "700": { - "$value": "lch(27.25% 50.72 30.88)" - }, - "800": { - "$value": "lch(18.26% 40.26 30.65)" - }, - "900": { - "$value": "lch(9.84% 28.78 25.16)" - }, - "950": { - "$value": "lch(2.79% 10.24 18.76)" - } - }, - "yellow": { - "50": { - "$value": "lch(95.62% 18.31 92.87)" - }, - "100": { - "$value": "lch(90.23% 26.34 77.18)" - }, - "200": { - "$value": "lch(73.82% 74.92 75.35)" - }, - "300": { - "$value": "lch(64.58% 68.1 76.07)" - }, - "400": { - "$value": "lch(55.9% 60.21 76.41)" - }, - "500": { - "$value": "lch(46.64% 52.59 77.11)" - }, - "600": { - "$value": "lch(37.37% 44.92 77.47)" - }, - "700": { - "$value": "lch(28.67% 36.97 77.45)" - }, - "800": { - "$value": "lch(19.4% 27.53 77.01)" - }, - "900": { - "$value": "lch(10.69% 16.28 73.34)" - }, - "950": { - "$value": "lch(3.06% 4.5 71.6)" - } - }, - "orange": { - "50": { - "$value": "lch(95.42% 10.03 79.83)" - }, - "100": { - "$value": "lch(90.02% 17.62 61.56)" - }, - "200": { - "$value": "lch(74.82% 51.93 49.87)" - }, - "300": { - "$value": "lch(63.38% 78.04 52.26)" - }, - "400": { - "$value": "lch(54.81% 69.74 52.27)" - }, - "500": { - "$value": "lch(45.68% 60.45 52.23)" - }, - "600": { - "$value": "lch(36.54% 51.77 52.28)" - }, - "700": { - "$value": "lch(27.78% 46.26 47.39)" - }, - "800": { - "$value": "lch(18.69% 35.31 45.59)" - }, - "900": { - "$value": "lch(10.26% 21.63 42.58)" - }, - "950": { - "$value": "lch(2.93% 6.64 36.42)" - } - }, - "brown": { - "50": { - "$value": "lch(95.55% 12.75 93.47)" - }, - "100": { - "$value": "lch(90.24% 19.27 79.52)" - }, - "200": { - "$value": "lch(73.38% 45.67 56.65)" - }, - "300": { - "$value": "lch(64.06% 48.96 57.29)" - }, - "400": { - "$value": "lch(57.17% 44.39 57.69)" - }, - "500": { - "$value": "lch(46.22% 37.68 57.68)" - }, - "600": { - "$value": "lch(37.01% 31.77 57.67)" - }, - "700": { - "$value": "lch(28.37% 26.84 58.1)" - }, - "800": { - "$value": "lch(19.16% 20.96 58.49)" - }, - "900": { - "$value": "lch(10.55% 13.64 57.69)" - }, - "950": { - "$value": "lch(3% 4.01 51.14)" - } - }, - "green": { - "50": { - "$value": "lch(95.82% 11.79 156.15)" - }, - "100": { - "$value": "lch(91.19% 27.27 156.17)" - }, - "200": { - "$value": "lch(73.78% 60.44 156.25)" - }, - "300": { - "$value": "lch(66.65% 55.77 156.25)" - }, - "400": { - "$value": "lch(57.73% 49.65 156.25)" - }, - "500": { - "$value": "lch(48.21% 43.17 156.25)" - }, - "600": { - "$value": "lch(38.71% 37.07 156.25)" - }, - "700": { - "$value": "lch(29.79% 30.94 156.25)" - }, - "800": { - "$value": "lch(20.26% 24.09 156.25)" - }, - "900": { - "$value": "lch(11.35% 18.27 156.36)" - }, - "950": { - "$value": "lch(3.27% 5.33 156.53)" - } - }, - "mint": { - "50": { - "$value": "lch(95.82% 11.97 171.06)" - }, - "100": { - "$value": "lch(91.09% 25.48 176.08)" - }, - "200": { - "$value": "lch(73.4% 50.15 176.67)" - }, - "300": { - "$value": "lch(66.3% 46.27 176.67)" - }, - "400": { - "$value": "lch(57.46% 42.15 174.53)" - }, - "500": { - "$value": "lch(48.03% 37.67 171.84)" - }, - "600": { - "$value": "lch(38.59% 33.16 169.14)" - }, - "700": { - "$value": "lch(29.72% 28.6 166.42)" - }, - "800": { - "$value": "lch(20.24% 23.29 164.22)" - }, - "900": { - "$value": "lch(11.35% 18.26 160.23)" - }, - "950": { - "$value": "lch(3.26% 5.16 160.96)" - } - }, - "lime": { - "50": { - "$value": "lch(95.86% 15.3 127.41)" - }, - "100": { - "$value": "lch(91.05% 29.33 126.46)" - }, - "200": { - "$value": "lch(74.24% 53.56 123.85)" - }, - "300": { - "$value": "lch(65.98% 48.66 123.85)" - }, - "400": { - "$value": "lch(57.13% 43.37 123.85)" - }, - "500": { - "$value": "lch(47.69% 37.71 123.86)" - }, - "600": { - "$value": "lch(38.26% 32.05 123.88)" - }, - "700": { - "$value": "lch(29.42% 27.17 123.81)" - }, - "800": { - "$value": "lch(19.97% 21.1 123.91)" - }, - "900": { - "$value": "lch(11.12% 14.71 126.9)" - }, - "950": { - "$value": "lch(3.2% 4.34 131.4)" - } - }, - "purple": { - "50": { - "$value": "lch(95.14% 7 301.11)" - }, - "100": { - "$value": "lch(89.58% 17.29 301.92)" - }, - "200": { - "$value": "lch(72.4% 55.68 305.19)" - }, - "300": { - "$value": "lch(61.28% 80.51 307.53)" - }, - "400": { - "$value": "lch(50.99% 105.85 309.98)" - }, - "500": { - "$value": "lch(40.58% 118.62 311.84)" - }, - "600": { - "$value": "lch(32.21% 100.98 311.83)" - }, - "700": { - "$value": "lch(24.34% 84.56 311.84)" - }, - "800": { - "$value": "lch(15.97% 66.91 311.83)" - }, - "900": { - "$value": "lch(8.1% 50.49 311.83)" - }, - "950": { - "$value": "lch(2.32% 21.96 302.37)" - } - }, - "violet": { - "50": { - "$value": "lch(95.18% 6.31 296.62)" - }, - "100": { - "$value": "lch(89.64% 16.29 297.99)" - }, - "200": { - "$value": "lch(72.11% 52.02 298.43)" - }, - "300": { - "$value": "lch(65.15% 65.45 298.5)" - }, - "400": { - "$value": "lch(51.98% 93.37 301.42)" - }, - "500": { - "$value": "lch(40.56% 121.68 305.61)" - }, - "600": { - "$value": "lch(31.46% 113.1 306.9)" - }, - "700": { - "$value": "lch(23.77% 93.78 307.37)" - }, - "800": { - "$value": "lch(15.62% 72.5 308.3)" - }, - "900": { - "$value": "lch(8.15% 49.81 312.23)" - }, - "950": { - "$value": "lch(2.33% 21.62 302.28)" - } - }, - "indigo": { - "50": { - "$value": "lch(95.23% 6.03 283.32)" - }, - "100": { - "$value": "lch(89.8% 14.62 283.7)" - }, - "200": { - "$value": "lch(72.68% 45.97 284.36)" - }, - "300": { - "$value": "lch(65.79% 58.29 283.92)" - }, - "400": { - "$value": "lch(53.15% 81.87 288.43)" - }, - "500": { - "$value": "lch(42.04% 107.17 295.8)" - }, - "600": { - "$value": "lch(30.63% 128.3 302.36)" - }, - "700": { - "$value": "lch(23.02% 107.52 302.38)" - }, - "800": { - "$value": "lch(14.93% 84.93 302.33)" - }, - "900": { - "$value": "lch(7.38% 63.51 302.14)" - }, - "950": { - "$value": "lch(2.17% 29.85 290.49)" - } - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/core/dimensions.json b/packages/ui/design-tokens/core/dimensions.json deleted file mode 100644 index 8e7ace3bb4..0000000000 --- a/packages/ui/design-tokens/core/dimensions.json +++ /dev/null @@ -1,388 +0,0 @@ -{ - "spacing": { - "0": { - "$type": "spacing", - "$value": "0px" - }, - "1": { - "$type": "spacing", - "$value": "4px" - }, - "2": { - "$type": "spacing", - "$value": "8px" - }, - "3": { - "$type": "spacing", - "$value": "12px" - }, - "4": { - "$type": "spacing", - "$value": "16px" - }, - "5": { - "$type": "spacing", - "$value": "20px" - }, - "6": { - "$type": "spacing", - "$value": "24px" - }, - "7": { - "$type": "spacing", - "$value": "28px" - }, - "8": { - "$type": "spacing", - "$value": "32px" - }, - "9": { - "$type": "spacing", - "$value": "36px" - }, - "10": { - "$type": "spacing", - "$value": "40px" - }, - "11": { - "$type": "spacing", - "$value": "44px" - }, - "12": { - "$type": "spacing", - "$value": "48px" - }, - "14": { - "$type": "spacing", - "$value": "56px" - }, - "16": { - "$type": "spacing", - "$value": "64px" - }, - "20": { - "$type": "spacing", - "$value": "80px" - }, - "24": { - "$type": "spacing", - "$value": "96px" - }, - "28": { - "$type": "spacing", - "$value": "112px" - }, - "32": { - "$type": "spacing", - "$value": "128px" - }, - "36": { - "$type": "spacing", - "$value": "144px" - }, - "40": { - "$type": "spacing", - "$value": "160px" - }, - "44": { - "$type": "spacing", - "$value": "176px" - }, - "48": { - "$type": "spacing", - "$value": "192px" - }, - "52": { - "$type": "spacing", - "$value": "208px" - }, - "56": { - "$type": "spacing", - "$value": "224px" - }, - "60": { - "$type": "spacing", - "$value": "240px" - }, - "64": { - "$type": "spacing", - "$value": "256px" - }, - "72": { - "$type": "spacing", - "$value": "288px" - }, - "80": { - "$type": "spacing", - "$value": "320px" - }, - "96": { - "$type": "spacing", - "$value": "384px" - }, - "px": { - "$type": "spacing", - "$value": "1px" - }, - "half": { - "$type": "spacing", - "$value": "2px", - "$description": "0.5" - }, - "1-half": { - "$type": "spacing", - "$value": "6px", - "$description": "1.5" - }, - "2-half": { - "$type": "spacing", - "$value": "10px", - "$description": "2.5" - }, - "3-half": { - "$type": "spacing", - "$value": "14px", - "$description": "3.5" - } - }, - "rounded": { - "1": { - "$type": "borderRadius", - "$value": "2px" - }, - "2": { - "$type": "borderRadius", - "$value": "4px" - }, - "3": { - "$type": "borderRadius", - "$value": "6px" - }, - "4": { - "$type": "borderRadius", - "$value": "8px" - }, - "5": { - "$type": "borderRadius", - "$value": "12px" - }, - "6": { - "$type": "borderRadius", - "$value": "16px" - }, - "7": { - "$type": "borderRadius", - "$value": "24px" - }, - "none": { - "$type": "borderRadius", - "$value": "0px", - "$description": "No border radius" - }, - "full": { - "$type": "borderRadius", - "$value": "9999px", - "$description": "Fully rounded corners (circular)" - } - }, - "size": { - "0": { - "$type": "sizing", - "$value": "0px" - }, - "1": { - "$type": "sizing", - "$value": "4px" - }, - "2": { - "$type": "sizing", - "$value": "8px" - }, - "3": { - "$type": "sizing", - "$value": "12px" - }, - "4": { - "$type": "sizing", - "$value": "16px" - }, - "5": { - "$type": "sizing", - "$value": "20px" - }, - "6": { - "$type": "sizing", - "$value": "24px" - }, - "7": { - "$type": "sizing", - "$value": "28px" - }, - "8": { - "$type": "sizing", - "$value": "32px" - }, - "9": { - "$type": "sizing", - "$value": "36px" - }, - "10": { - "$type": "sizing", - "$value": "40px" - }, - "11": { - "$type": "sizing", - "$value": "44px" - }, - "12": { - "$type": "sizing", - "$value": "48px" - }, - "14": { - "$type": "sizing", - "$value": "56px" - }, - "16": { - "$type": "sizing", - "$value": "64px" - }, - "20": { - "$type": "sizing", - "$value": "80px" - }, - "24": { - "$type": "sizing", - "$value": "96px" - }, - "28": { - "$type": "sizing", - "$value": "112px" - }, - "32": { - "$type": "sizing", - "$value": "128px" - }, - "36": { - "$type": "sizing", - "$value": "144px" - }, - "40": { - "$type": "sizing", - "$value": "160px" - }, - "44": { - "$type": "sizing", - "$value": "176px" - }, - "48": { - "$type": "sizing", - "$value": "192px" - }, - "52": { - "$type": "sizing", - "$value": "208px" - }, - "56": { - "$type": "sizing", - "$value": "224px" - }, - "60": { - "$type": "sizing", - "$value": "240px" - }, - "64": { - "$type": "sizing", - "$value": "256px" - }, - "72": { - "$type": "sizing", - "$value": "288px" - }, - "80": { - "$type": "sizing", - "$value": "320px" - }, - "96": { - "$type": "sizing", - "$value": "384px" - }, - "px": { - "$type": "sizing", - "$value": "1px" - }, - "half": { - "$type": "sizing", - "$value": "2px", - "$description": "0.5" - }, - "1-half": { - "$type": "sizing", - "$value": "6px", - "$description": "1.5" - }, - "2-half": { - "$type": "sizing", - "$value": "10px", - "$description": "2.5" - }, - "3-half": { - "$type": "sizing", - "$value": "14px", - "$description": "3.5" - } - }, - "borderWidth": { - "0": { - "$type": "borderWidth", - "$value": "0rem", - "$description": "No border (border-0)" - }, - "1": { - "$type": "borderWidth", - "$value": "1px", - "$description": "Default border width (border)" - }, - "2": { - "$type": "borderWidth", - "$value": "2px", - "$description": "Medium border width (border-2)" - }, - "4": { - "$type": "borderWidth", - "$value": "4px", - "$description": "Thick border width (border-4)" - }, - "8": { - "$type": "borderWidth", - "$value": "8px", - "$description": "Extra thick border width (border-8)" - } - }, - "iconSize": { - "xxs": { - "$type": "sizing", - "$value": "{size.2}" - }, - "xs": { - "$type": "sizing", - "$value": "{size.3}" - }, - "sm": { - "$type": "sizing", - "$value": "{size.3-half}" - }, - "default": { - "$type": "sizing", - "$value": "{size.4}" - }, - "md": { - "$type": "sizing", - "$value": "{size.5}" - }, - "lg": { - "$type": "sizing", - "$value": "{size.8}", - "$description": "\n" - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/core/typography.json b/packages/ui/design-tokens/core/typography.json deleted file mode 100644 index 7ec59c08be..0000000000 --- a/packages/ui/design-tokens/core/typography.json +++ /dev/null @@ -1,649 +0,0 @@ -{ - "tracking": { - "tighter": { - "$type": "letterSpacing", - "$value": "-0.05em", - "$description": "Very tight, display text" - }, - "tight": { - "$type": "letterSpacing", - "$value": "-0.02em", - "$description": "Headings" - }, - "normal": { - "$type": "letterSpacing", - "$value": "0em", - "$description": "Default body text" - }, - "wide": { - "$type": "letterSpacing", - "$value": "0.025em", - "$description": "Improved readability" - }, - "wider": { - "$type": "letterSpacing", - "$value": "0.05em", - "$description": "Spaced text" - }, - "widest": { - "$type": "letterSpacing", - "$value": "0.1em", - "$description": "All caps text" - } - }, - "fontWeight": { - "default": { - "normal": { - "100": { - "$type": "fontWeights", - "$value": "Thin" - }, - "200": { - "$type": "fontWeights", - "$value": "ExtraLight" - }, - "300": { - "$type": "fontWeights", - "$value": "Light" - }, - "400": { - "$type": "fontWeights", - "$value": "Regular" - }, - "500": { - "$type": "fontWeights", - "$value": "Medium" - }, - "600": { - "$type": "fontWeights", - "$value": "SemiBold" - }, - "700": { - "$type": "fontWeights", - "$value": "Bold" - }, - "800": { - "$type": "fontWeights", - "$value": "ExtraBold" - }, - "900": { - "$type": "fontWeights", - "$value": "Black" - } - }, - "italic": { - "100": { - "$type": "fontWeights", - "$value": "Thin Italic" - }, - "200": { - "$type": "fontWeights", - "$value": "ExtraLight Italic" - }, - "300": { - "$type": "fontWeights", - "$value": "Light Italic" - }, - "400": { - "$type": "fontWeights", - "$value": "Italic" - }, - "500": { - "$type": "fontWeights", - "$value": "Medium Italic" - }, - "600": { - "$type": "fontWeights", - "$value": "SemiBold Italic" - }, - "700": { - "$type": "fontWeights", - "$value": "Bold Italic" - }, - "800": { - "$type": "fontWeights", - "$value": "ExtraBold Italic" - }, - "900": { - "$type": "fontWeights", - "$value": "Black Italic" - } - } - }, - "mono": { - "normal": { - "100": { - "$type": "fontWeights", - "$value": "Thin" - }, - "200": { - "$type": "fontWeights", - "$value": "ExtraLight" - }, - "300": { - "$type": "fontWeights", - "$value": "Light" - }, - "400": { - "$type": "fontWeights", - "$value": "Regular" - }, - "500": { - "$type": "fontWeights", - "$value": "Medium" - }, - "700": { - "$type": "fontWeights", - "$value": "Bold" - }, - "800": { - "$type": "fontWeights", - "$value": "ExtraBold" - } - }, - "italic": { - "100": { - "$type": "fontWeights", - "$value": "Thin Italic" - }, - "200": { - "$type": "fontWeights", - "$value": "ExtraLight Italic" - }, - "300": { - "$type": "fontWeights", - "$value": "Light Italic" - }, - "400": { - "$type": "fontWeights", - "$value": "Italic" - }, - "500": { - "$type": "fontWeights", - "$value": "Medium Italic" - }, - "700": { - "$type": "fontWeights", - "$value": "Bold Italic" - }, - "800": { - "$type": "fontWeights", - "$value": "ExtraBold Italic" - } - } - } - }, - "fontFamily": { - "default": { - "$type": "fontFamilies", - "$value": "Inter" - }, - "mono": { - "$type": "fontFamilies", - "$value": "JetBrains Mono" - } - }, - "textDecoration": { - "none": { - "$type": "textDecoration", - "$value": "none" - }, - "underline": { - "$type": "textDecoration", - "$value": "underline" - }, - "line-through": { - "$type": "textDecoration", - "$value": "line-through" - } - }, - "textCase": { - "none": { - "$type": "textCase", - "$value": "none" - }, - "uppercase": { - "$type": "textCase", - "$value": "uppercase" - }, - "lowercase": { - "$type": "textCase", - "$value": "lowercase" - }, - "capitalize": { - "$type": "textCase", - "$value": "capitalize" - } - }, - "fontSize": { - "1": { - "$type": "fontSizes", - "$value": "0.75rem", - "$description": "12px" - }, - "2": { - "$type": "fontSizes", - "$value": "0.875rem", - "$description": "14px" - }, - "3": { - "$type": "fontSizes", - "$value": "1rem", - "$description": "16px" - }, - "4": { - "$type": "fontSizes", - "$value": "1.125rem", - "$description": "18px" - }, - "5": { - "$type": "fontSizes", - "$value": "1.25rem", - "$description": "20px" - }, - "6": { - "$type": "fontSizes", - "$value": "1.5rem", - "$description": "24px" - }, - "7": { - "$type": "fontSizes", - "$value": "1.875rem", - "$description": "30px" - }, - "8": { - "$type": "fontSizes", - "$value": "2.25rem", - "$description": "36px" - }, - "9": { - "$type": "fontSizes", - "$value": "3rem", - "$description": "48px" - }, - "10": { - "$type": "fontSizes", - "$value": "3.75rem", - "$description": "60px" - }, - "11": { - "$type": "fontSizes", - "$value": "4.5rem", - "$description": "72px" - }, - "12": { - "$type": "fontSizes", - "$value": "6rem", - "$description": "96px" - }, - "13": { - "$type": "fontSizes", - "$value": "8rem", - "$description": "128px" - } - }, - "lineHeight": { - "1": { - "none": { - "$type": "lineHeights", - "$value": "{fontSize.1}*{lineHeight.none}" - }, - "tight": { - "$type": "lineHeights", - "$value": "{fontSize.1}*{lineHeight.tight}" - }, - "snug": { - "$type": "lineHeights", - "$value": "{fontSize.1}*{lineHeight.snug}" - }, - "normal": { - "$type": "lineHeights", - "$value": "{fontSize.1}*{lineHeight.normal}" - }, - "relaxed": { - "$type": "lineHeights", - "$value": "{fontSize.1}*{lineHeight.relaxed}" - }, - "loose": { - "$type": "lineHeights", - "$value": "{fontSize.1}*{lineHeight.loose}" - } - }, - "2": { - "none": { - "$type": "lineHeights", - "$value": "{fontSize.2}*{lineHeight.none}" - }, - "tight": { - "$type": "lineHeights", - "$value": "{fontSize.2}*{lineHeight.tight}" - }, - "snug": { - "$type": "lineHeights", - "$value": "{fontSize.2}*{lineHeight.snug}" - }, - "normal": { - "$type": "lineHeights", - "$value": "{fontSize.2}*{lineHeight.normal}" - }, - "relaxed": { - "$type": "lineHeights", - "$value": "{fontSize.2}*{lineHeight.relaxed}" - }, - "loose": { - "$type": "lineHeights", - "$value": "{fontSize.2}*{lineHeight.loose}" - } - }, - "3": { - "none": { - "$type": "lineHeights", - "$value": "{fontSize.3}*{lineHeight.none}" - }, - "tight": { - "$type": "lineHeights", - "$value": "{fontSize.3}*{lineHeight.tight}" - }, - "snug": { - "$type": "lineHeights", - "$value": "{fontSize.3}*{lineHeight.snug}" - }, - "normal": { - "$type": "lineHeights", - "$value": "{fontSize.3}*{lineHeight.normal}" - }, - "relaxed": { - "$type": "lineHeights", - "$value": "{fontSize.3}*{lineHeight.relaxed}" - }, - "loose": { - "$type": "lineHeights", - "$value": "{fontSize.3}*{lineHeight.loose}" - } - }, - "4": { - "none": { - "$type": "lineHeights", - "$value": "{fontSize.4}*{lineHeight.none}" - }, - "tight": { - "$type": "lineHeights", - "$value": "{fontSize.4}*{lineHeight.tight}" - }, - "snug": { - "$type": "lineHeights", - "$value": "{fontSize.4}*{lineHeight.snug}" - }, - "normal": { - "$type": "lineHeights", - "$value": "{fontSize.4}*{lineHeight.normal}" - }, - "relaxed": { - "$type": "lineHeights", - "$value": "{fontSize.4}*{lineHeight.relaxed}" - }, - "loose": { - "$type": "lineHeights", - "$value": "{fontSize.4}*{lineHeight.loose}" - } - }, - "5": { - "none": { - "$type": "lineHeights", - "$value": "{fontSize.5}*{lineHeight.none}" - }, - "tight": { - "$type": "lineHeights", - "$value": "{fontSize.5}*{lineHeight.tight}" - }, - "snug": { - "$type": "lineHeights", - "$value": "{fontSize.5}*{lineHeight.snug}" - }, - "normal": { - "$type": "lineHeights", - "$value": "{fontSize.5}*{lineHeight.normal}" - }, - "relaxed": { - "$type": "lineHeights", - "$value": "{fontSize.5}*{lineHeight.relaxed}" - }, - "loose": { - "$type": "lineHeights", - "$value": "{fontSize.5}*{lineHeight.loose}" - } - }, - "6": { - "none": { - "$type": "lineHeights", - "$value": "{fontSize.6}*{lineHeight.none}" - }, - "tight": { - "$type": "lineHeights", - "$value": "{fontSize.6}*{lineHeight.tight}" - }, - "snug": { - "$type": "lineHeights", - "$value": "{fontSize.6}*{lineHeight.snug}" - }, - "normal": { - "$type": "lineHeights", - "$value": "{fontSize.6}*{lineHeight.normal}" - }, - "relaxed": { - "$type": "lineHeights", - "$value": "{fontSize.6}*{lineHeight.relaxed}" - }, - "loose": { - "$type": "lineHeights", - "$value": "{fontSize.6}*{lineHeight.loose}" - } - }, - "7": { - "none": { - "$type": "lineHeights", - "$value": "{fontSize.7}*{lineHeight.none}" - }, - "tight": { - "$type": "lineHeights", - "$value": "{fontSize.7}*{lineHeight.tight}" - }, - "snug": { - "$type": "lineHeights", - "$value": "{fontSize.7}*{lineHeight.snug}" - }, - "normal": { - "$type": "lineHeights", - "$value": "{fontSize.7}*{lineHeight.normal}" - }, - "relaxed": { - "$type": "lineHeights", - "$value": "{fontSize.7}*{lineHeight.relaxed}" - }, - "loose": { - "$type": "lineHeights", - "$value": "{fontSize.7}*{lineHeight.loose}" - } - }, - "8": { - "none": { - "$type": "lineHeights", - "$value": "{fontSize.8}*{lineHeight.none}" - }, - "tight": { - "$type": "lineHeights", - "$value": "{fontSize.8}*{lineHeight.tight}" - }, - "snug": { - "$type": "lineHeights", - "$value": "{fontSize.8}*{lineHeight.snug}" - }, - "normal": { - "$type": "lineHeights", - "$value": "{fontSize.8}*{lineHeight.normal}" - }, - "relaxed": { - "$type": "lineHeights", - "$value": "{fontSize.8}*{lineHeight.relaxed}" - }, - "loose": { - "$type": "lineHeights", - "$value": "{fontSize.8}*{lineHeight.loose}" - } - }, - "9": { - "none": { - "$type": "lineHeights", - "$value": "{fontSize.9}*{lineHeight.none}" - }, - "tight": { - "$type": "lineHeights", - "$value": "{fontSize.9}*{lineHeight.tight}" - }, - "snug": { - "$type": "lineHeights", - "$value": "{fontSize.9}*{lineHeight.snug}" - }, - "normal": { - "$type": "lineHeights", - "$value": "{fontSize.9}*{lineHeight.normal}" - }, - "relaxed": { - "$type": "lineHeights", - "$value": "{fontSize.9}*{lineHeight.relaxed}" - }, - "loose": { - "$type": "lineHeights", - "$value": "{fontSize.9}*{lineHeight.loose}" - } - }, - "10": { - "none": { - "$type": "lineHeights", - "$value": "{fontSize.10}*{lineHeight.none}" - }, - "tight": { - "$type": "lineHeights", - "$value": "{fontSize.10}*{lineHeight.tight}" - }, - "snug": { - "$type": "lineHeights", - "$value": "{fontSize.10}*{lineHeight.snug}" - }, - "normal": { - "$type": "lineHeights", - "$value": "{fontSize.10}*{lineHeight.normal}" - }, - "relaxed": { - "$type": "lineHeights", - "$value": "{fontSize.10}*{lineHeight.relaxed}" - }, - "loose": { - "$type": "lineHeights", - "$value": "{fontSize.10}*{lineHeight.loose}" - } - }, - "11": { - "none": { - "$type": "lineHeights", - "$value": "{fontSize.11}*{lineHeight.none}" - }, - "tight": { - "$type": "lineHeights", - "$value": "{fontSize.11}*{lineHeight.tight}" - }, - "snug": { - "$type": "lineHeights", - "$value": "{fontSize.11}*{lineHeight.snug}" - }, - "normal": { - "$type": "lineHeights", - "$value": "{fontSize.11}*{lineHeight.normal}" - }, - "relaxed": { - "$type": "lineHeights", - "$value": "{fontSize.11}*{lineHeight.relaxed}" - }, - "loose": { - "$type": "lineHeights", - "$value": "{fontSize.11}*{lineHeight.loose}" - } - }, - "12": { - "none": { - "$type": "lineHeights", - "$value": "{fontSize.12}*{lineHeight.none}" - }, - "tight": { - "$type": "lineHeights", - "$value": "{fontSize.12}*{lineHeight.tight}" - }, - "snug": { - "$type": "lineHeights", - "$value": "{fontSize.12}*{lineHeight.snug}" - }, - "normal": { - "$type": "lineHeights", - "$value": "{fontSize.12}*{lineHeight.normal}" - }, - "relaxed": { - "$type": "lineHeights", - "$value": "{fontSize.12}*{lineHeight.relaxed}" - }, - "loose": { - "$type": "lineHeights", - "$value": "{fontSize.12}*{lineHeight.loose}" - } - }, - "13": { - "none": { - "$type": "lineHeights", - "$value": "{fontSize.13}*{lineHeight.none}" - }, - "tight": { - "$type": "lineHeights", - "$value": "{fontSize.13}*{lineHeight.tight}" - }, - "snug": { - "$type": "lineHeights", - "$value": "{fontSize.13}*{lineHeight.snug}" - }, - "normal": { - "$type": "lineHeights", - "$value": "{fontSize.13}*{lineHeight.normal}" - }, - "relaxed": { - "$type": "lineHeights", - "$value": "{fontSize.13}*{lineHeight.relaxed}" - }, - "loose": { - "$type": "lineHeights", - "$value": "{fontSize.13}*{lineHeight.loose}" - } - }, - "none": { - "$type": "lineHeights", - "$value": "1" - }, - "tight": { - "$type": "lineHeights", - "$value": "1.25" - }, - "snug": { - "$type": "lineHeights", - "$value": "1.375" - }, - "normal": { - "$type": "lineHeights", - "$value": "1.5" - }, - "relaxed": { - "$type": "lineHeights", - "$value": "1.625" - }, - "loose": { - "$type": "lineHeights", - "$value": "2" - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/mode/dark/default-deuteranopia.json b/packages/ui/design-tokens/mode/dark/default-deuteranopia.json deleted file mode 100644 index 5e553e2668..0000000000 --- a/packages/ui/design-tokens/mode/dark/default-deuteranopia.json +++ /dev/null @@ -1,2342 +0,0 @@ -{ - "background": { - "1": { - "$type": "color", - "$value": "{colors.chrome.1000}", - "$description": "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers." - } - }, - "text": { - "1": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders." - }, - "accent": { - "$type": "color", - "$value": "{brand.color.200}", - "$description": "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements." - }, - "success": { - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.200}", - "$description": "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications." - } - }, - "border": { - "1": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.7", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows." - }, - "focus": { - "$type": "color", - "$value": "{brand.color.400}", - "$description": "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators." - }, - "success": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements." - } - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item." - }, - "disabled": { - "text": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries." - } - } - }, - "component": { - "accordion": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for accordion content. Applied to the expandable text within accordion panels." - }, - "chevron": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for accordion items. Provides visual separation between accordion panels." - } - }, - "alert": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational alerts. Ensures high visibility for the alert heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational alerts. Provides readable contrast for alert content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational alerts. Creates visual distinction from surrounding content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational alerts. Subtly defines the alert's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.orange.100}", - "$description": "Text color for danger alerts. Communicates critical information through high-contrast text." - }, - "description": { - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Description text color for danger alerts. Ensures readability while maintaining the error state styling." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background color for danger alerts. Creates subtle but recognizable error state styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for danger alerts. Provides definition for error state alerts." - } - } - }, - "avatar": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for avatar initials or text. Ensures visibility against the avatar background." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for avatar components. Provides contrast for text or image content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for avatars. Creates subtle definition around the avatar element." - } - }, - "badge": { - "default": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for secondary badges. Provides readable contrast on secondary badge styling." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for secondary badges. Creates less prominent badge styling for secondary information." - }, - "border": { - "$type": "color", - "$value": "{component.badge.default.background}", - "$description": "Border color for secondary badges. Matches background for clean, cohesive appearance." - } - }, - "neutral": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for outline badges. Ensures readability for badges with transparent backgrounds." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Border color for outline badges. Creates definition for badges without background fill." - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Text color for success badges. Communicates positive status through readable cyan text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for success badges. Provides subtle definition for success state indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Background color for success badges. Creates a subtle but recognizable success indicator." - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Text color for danger badges. Communicates error or warning status with high visibility." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for danger badges. Creates definition for error or warning indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background color for danger badges. Provides subtle visual indication of error states." - } - }, - "warning": { - "text": { - "$type": "color", - "$value": "{colors.yellow.200}", - "$description": "Text color for warning badges. Signals caution states with readable amber text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Border color for warning badges. Defines the boundary of caution status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.500}", - "$description": "Background color for warning badges. Creates subtle but recognizable caution indicators." - } - }, - "running": { - "text": { - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Text color for running state badges. Indicates active or in-progress operations." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for running state badges. Defines the boundary of active status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background color for running state badges. Creates subtle visual indication of in-progress states." - } - }, - "merged": { - "text": { - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Text color for merged state badges. Indicates completed merge actions in version control contexts." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for merged state badges. Defines the boundary of merge status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Background color for merged state badges. Creates subtle but recognizable merge indicators." - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-related badges. Ensures high contrast against AI badge gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "breadcrumb": { - "item-inactive": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps." - }, - "item-current": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy." - }, - "separator": { - "$type": "color", - "$value": "{state.disabled.text}", - "$description": "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items." - } - }, - "btn": { - "primary": { - "text": { - "$type": "color", - "$value": "{brand.onColor.600}", - "$description": "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements." - }, - "background": { - "$type": "color", - "$value": "{brand.color.600}", - "$description": "Background color for primary action buttons. Creates emphasis for the most important action in a given context." - }, - "border": { - "$type": "color", - "$value": "{component.btn.primary.background}", - "$description": "Border color for primary action buttons. Matches background for clean, cohesive appearance." - } - }, - "secondary": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions." - }, - "border": { - "$type": "color", - "$value": "{component.btn.secondary.background}", - "$description": "Border color for secondary action buttons. Matches background for clean, cohesive appearance." - } - }, - "outline": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected outline buttons. Creates subtle emphasis for button icons." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for unselected outline buttons. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected outline buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected outline buttons. Increases visibility for active button states." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for selected outline buttons. Creates stronger visual indication of the active state." - } - } - }, - "ghost": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected ghost buttons. Provides readable contrast for minimal styling." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected ghost buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected ghost buttons. Increases visibility for active button states." - } - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Text color for success buttons. Communicates positive actions through readable cyan text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Background color for success buttons. Creates subtle but recognizable positive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for success buttons. Provides definition for positive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Hover state background color for success buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Text color for danger buttons. Communicates destructive or warning actions through high-contrast text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background color for danger buttons. Creates subtle but recognizable destructive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for danger buttons. Provides definition for destructive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Hover state background color for danger buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for AI-powered buttons." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for card components. Creates a distinct surface that appears elevated from the page background." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content." - } - }, - "dialog": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dialog content. Provides readable contrast for the modal's primary text content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dialog components." - }, - "backdrop": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." - } - }, - "dropdown": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for dropdown menus. Creates a distinct surface for selectable options." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for dropdown menus container." - }, - "item": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dropdown menu items. Ensures readability of selectable options." - }, - "delete": { - "text": { - "$type": "color", - "$value": "{text.danger}", - "$description": "Text color for dropdown menu delete-item." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Specific hover state color for dropdown delete-item." - } - } - } - } - }, - "diff": { - "grey": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent." - }, - "add-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Cyan background highlighting newly added code lines while maintaining readability." - }, - "add-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Background for line numbers of added code, providing visual connection to added content." - }, - "add-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Stronger emphasis color for specific character changes within added lines." - }, - "add-widget": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background for interactive UI elements related to added content." - }, - "add-widget-color": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text/icon color for add-related interactive elements, ensuring readability." - }, - "del-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Orange background highlighting removed code lines without causing eye strain." - }, - "del-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background for line numbers of deleted code, connecting numbers to removed content." - }, - "del-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Stronger emphasis color for specific character changes within deleted lines." - }, - "plain-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral background for unchanged code that allows modified content to stand out." - }, - "plain-lineNumber": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for line numbers of unchanged code, maintaining visual rhythm." - }, - "plain-lineNumber-color": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unchanged line numbers, visually subdued compared to changed content." - }, - "empty-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for placeholder spaces and empty lines, maintaining visual continuity." - }, - "hunk-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for diff section headers ('hunks') that indicate which part of the file is displayed." - }, - "hunk-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for line numbers in section headers." - }, - "hunk-content-color": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for section header content showing file position information." - }, - "expand-content": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background for controls that expand/collapse code sections to show additional context." - } - }, - "input": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for input field content. Ensures readability of user-entered information." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for input fields. Creates a distinct surface for user interaction and data entry." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for input fields. Defines the input area with a visible boundary for improved usability." - } - }, - "label": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for form labels and field identifiers. Ensures high contrast for important contextual information." - } - }, - "link": { - "default": { - "$type": "color", - "$value": "{text.accent}", - "$description": "Default color for text links. Creates distinct visual identification of interactive text elements." - }, - "visited": { - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." - } - }, - "nav-tabs": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Unselected tab item text." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Selected tab item text." - }, - "border": { - "$type": "color", - "$value": "{border.focus}", - "$description": "Selected tab item border." - } - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Navigation container border." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Navigation tabs container background." - } - }, - "pipeline": { - "arrow": { - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for pipeline connection arrows. Defines the visual path between pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", - "$description": "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", - "$description": "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements." - }, - "border": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", - "$description": "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", - "$description": "Animated gradient border for running pipeline states. Provides visual indication of active processing." - } - }, - "error": { - "border": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution." - } - }, - "completed": { - "border": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for completed pipeline states. Indicates successful pipeline execution." - } - } - }, - "card-canvas": { - "1": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container." - } - }, - "2": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization." - } - } - }, - "background": { - "dotes": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Refers to the dotted pattern visible in the background of the workspace." - } - } - }, - "sidebar": { - "background": { - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Background color for navigation components. Creates a consistent foundation for navigation elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for navigation components. Creates visual boundaries and separation from adjacent content." - }, - "separator": { - "$type": "color", - "$value": "{border.3}", - "$description": "Color for separators between navigation sections. Creates visual organization within the navigation structure." - }, - "hover": { - "$type": "color", - "$value": "{state.hover}", - "$description": "Hover state for navigation items." - }, - "selected": { - "$type": "color", - "$value": "{state.selected}", - "$description": "Selected state for navigation items." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected navigation items. Provides readable but less emphasized styling for available options." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected navigation items. Increases contrast to highlight the current location." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected navigation items. Creates stronger visual indication of the current selection." - } - } - }, - "logo": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for Logo in sidebar navigation." - }, - "icon": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Icon color for Logo in sidebar navigation." - } - }, - "search": { - "background": { - "$type": "color", - "$value": "{component.sidebar.background}", - "$description": "Search input specific background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Search input specific border on sidebar navigation." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Search input specific placeholder on sidebar navigation." - }, - "btn": { - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Search input specific button background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Search input specific button border on sidebar navigation." - }, - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Search input specific button text on sidebar navigation." - } - } - }, - "footer": { - "username": { - "$type": "color", - "$value": "{text.1}", - "$description": "Username in the footer sidebar navigation menu." - }, - "data": { - "$type": "color", - "$value": "{text.3}", - "$description": "User data in the footer sidebar navigation menu." - } - } - }, - "scrollbar": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability." - } - }, - "selection": { - "unselected": { - "item": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected state in selection controls. Creates visual distinction from selected items." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "item": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Color for selected items in selection controls. Creates high contrast against selected background state." - }, - "background": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background color for selected state in selection controls. Creates strong visual indication of active selection." - }, - "border": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling." - } - } - }, - "separator": { - "background": { - "$type": "color", - "$value": "{border.3}", - "$description": "Background color for separator elements. Creates visual division between content sections with a subtle line or space." - } - }, - "skeleton": { - "background": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", - "$description": "Animation color that sweeps across skeleton elements. Creates a \"shimmer\" effect indicating content loading states." - } - }, - "slider": { - "track": { - "base": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for slider tracks. Represents the full range of available values in an unselected state." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Filled portion color for slider tracks. Visually represents the selected value or range within the track." - } - }, - "track-segments": { - "base": { - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.800}", - "$description": "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range." - } - }, - "handle": { - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for slider handles. Creates a distinct, interactive element for adjusting values." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Border color for slider handles. Provides definition and contrast for the interactive control." - } - } - }, - "status-indicator": { - "completed": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Color for success status indicators. Communicates completed or positive states." - }, - "cancelled": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Color for danger status indicators. Communicates error or critical warning states." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Color for warning status indicators. Communicates caution or potential issue states." - }, - "running": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Color for running status indicators. Communicates active or in-progress operations." - }, - "merged": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Color for merged status indicators. Communicates successful integration or completion in version control contexts." - }, - "action-required": { - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Color for action-required status indicators. Communicates that user attention or intervention is needed." - }, - "waiting": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Color for pending status indicators. Communicates in waiting states." - } - }, - "switch": { - "unselected": { - "thumb": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for the unselected state of switch controls. Creates visual distinction from the selected state." - } - }, - "selected": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track." - }, - "background": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background color for the selected state of switch controls. Creates strong visual indication of active state." - } - } - }, - "table": { - "header": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for table header cells. Ensures readability of column labels and titles." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for table header rows. Creates visual distinction between headers and data rows." - } - }, - "row": { - "alternate-background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for alternate table rows. Improves readability by differentiating adjacent rows." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for table rows. Provides subtle separation between data rows." - } - }, - "cell": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for table cell content. Ensures high readability of tabular data." - } - } - }, - "tabs": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for the tabs container. Creates a consistent foundation for tab elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tab containers and separators. Provides subtle definition for tab boundaries." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected tab items. Creates visual distinction from the active tab." - }, - "border": { - "$type": "color", - "$value": "{component.tabs.item.unselected.background}", - "$description": "Border color for unselected tab items. Maintains consistent styling with the tab background." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for the selected tab item. Increases contrast to highlight the active tab." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for the selected tab item. Creates strong visual indication of the active tab." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for the selected tab item. Reinforces the active state with defined boundaries." - } - } - } - }, - "tag": { - "blue": { - "text": { - "$type": "color", - "$value": "{colors.blue.200}", - "$description": "Text color for blue tags. Ensures readability while maintaining the blue color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.900}", - "$description": "Background color for blue tags. Creates a distinct surface with blue theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.950}", - "$description": "Subtle background variation for blue tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.blue.background}", - "$description": "Border color for blue tags." - } - }, - "brown": { - "text": { - "$type": "color", - "$value": "{colors.brown.200}", - "$description": "Text color for brown tags. Ensures readability while maintaining the brown color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.brown.900}", - "$description": "Background color for brown tags. Creates a distinct surface with brown theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.brown.950}", - "$description": "Subtle background variation for brown tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.brown.background}", - "$description": "Border color for brown tags." - } - }, - "cyan": { - "text": { - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Text color for cyan tags. Ensures readability while maintaining the cyan color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.900}", - "$description": "Background color for cyan tags. Creates a distinct surface with cyan theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.950}", - "$description": "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.cyan.background}", - "$description": "Border color for cyan tags." - } - }, - "green": { - "text": { - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Text color for green tags, replaced with cyan for deuteranopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.900}", - "$description": "Background color for green tags, replaced with cyan for deuteranopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.950}", - "$description": "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.green.background}", - "$description": "Border color for green tags, replaced with cyan." - } - }, - "indigo": { - "text": { - "$type": "color", - "$value": "{colors.indigo.200}", - "$description": "Text color for indigo tags. Ensures readability while maintaining the indigo color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.indigo.900}", - "$description": "Background color for indigo tags. Creates a distinct surface with indigo theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.indigo.950}", - "$description": "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.indigo.background}", - "$description": "Border color for indigo tags." - } - }, - "lime": { - "text": { - "$type": "color", - "$value": "{colors.lime.200}", - "$description": "Text color for lime tags. Ensures readability while maintaining the lime color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.lime.900}", - "$description": "Background color for lime tags. Creates a distinct surface with lime theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.lime.950}", - "$description": "Subtle background variation for lime tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.lime.background}", - "$description": "Border color for lime tags." - } - }, - "mint": { - "text": { - "$type": "color", - "$value": "{colors.mint.200}", - "$description": "Text color for mint tags. Ensures readability while maintaining the mint color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.mint.900}", - "$description": "Background color for mint tags. Creates a distinct surface with mint theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.mint.950}", - "$description": "Subtle background variation for mint tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.mint.background}", - "$description": "Border color for mint tags." - } - }, - "orange": { - "text": { - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Text color for orange tags. Ensures readability while maintaining the orange color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.900}", - "$description": "Background color for orange tags. Creates a distinct surface with orange theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.950}", - "$description": "Subtle background variation for orange tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.orange.background}", - "$description": "Border color for orange tags." - } - }, - "pink": { - "text": { - "$type": "color", - "$value": "{colors.pink.200}", - "$description": "Text color for pink tags. Ensures readability while maintaining the pink color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.pink.900}", - "$description": "Background color for pink tags. Creates a distinct surface with pink theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.pink.950}", - "$description": "Subtle background variation for pink tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.pink.background}", - "$description": "Border color for pink tags." - } - }, - "purple": { - "text": { - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Text color for purple tags, replaced with cyan for deuteranopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.900}", - "$description": "Background color for purple tags, replaced with cyan for deuteranopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.950}", - "$description": "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.purple.background}", - "$description": "Border color for purple tags, replaced with cyan." - } - }, - "red": { - "text": { - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Text color for red tags, replaced with orange for deuteranopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.900}", - "$description": "Background color for red tags, replaced with orange for deuteranopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.950}", - "$description": "Subtle background variation for red tags, replaced with orange for deuteranopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.red.background}", - "$description": "Border color for red tags, replaced with orange." - } - }, - "violet": { - "text": { - "$type": "color", - "$value": "{colors.blue.200}", - "$description": "Text color for violet tags, replaced with blue for deuteranopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.900}", - "$description": "Background color for violet tags, replaced with blue for deuteranopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.950}", - "$description": "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.violet.background}", - "$description": "Border color for violet tags, replaced with blue." - } - }, - "yellow": { - "text": { - "$type": "color", - "$value": "{colors.yellow.200}", - "$description": "Text color for yellow tags. Ensures readability while maintaining the yellow color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.yellow.900}", - "$description": "Background color for yellow tags. Creates a distinct surface with yellow theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.yellow.950}", - "$description": "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.yellow.background}", - "$description": "Border color for yellow tags." - } - }, - "gray": { - "text": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Text color for gray tags. Ensures readability while maintaining the gray color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for gray tags. Creates a distinct surface with gray theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Subtle background variation for gray tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.gray.background}", - "$description": "Border color for gray tags." - } - } - }, - "toast": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational toast notifications. Ensures high visibility for the notification headline." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational toast notifications. Provides readable contrast for notification content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational toast notifications. Creates visual distinction from UI content beneath." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational toast notifications. Subtly defines the notification's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Title text color for danger toast notifications. Provides maximum contrast against the error background." - }, - "description": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Description text color for danger toast notifications. Ensures readability of critical information." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.700}", - "$description": "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings." - }, - "border": { - "$type": "color", - "$value": "{component.toast.danger.background}", - "$description": "Border color for danger toast notifications. Reinforces the critical nature of the notification message." - } - } - }, - "tooltip": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for tooltip content. Ensures readability of helpful contextual information." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - } - } - }, - "shadow": { - "0": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "0", - "blur": "0", - "spread": "0", - "color": "{shadow-color.0}", - "type": "dropShadow" - }, - "$description": "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile." - }, - "1": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "1", - "blur": "2", - "spread": "0", - "color": "{shadow-color.1}", - "type": "dropShadow" - }, - "$description": "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements." - }, - "2": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "1", - "blur": "3", - "spread": "0", - "color": "{shadow-color.2}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "1", - "blur": "2", - "spread": "-1", - "color": "{shadow-color.2}", - "type": "dropShadow" - } - ], - "$description": "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state." - }, - "3": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-1", - "color": "{shadow-color.3}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "2", - "blur": "4", - "spread": "-2", - "color": "{shadow-color.3}", - "type": "dropShadow" - } - ], - "$description": "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover." - }, - "4": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "10", - "blur": "15", - "spread": "-3", - "color": "{shadow-color.4}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-4", - "color": "{shadow-color.4}", - "type": "dropShadow" - } - ], - "$description": "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns." - }, - "5": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "20", - "blur": "25", - "spread": "-5", - "color": "{shadow-color.5}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "8", - "blur": "10", - "spread": "-6", - "color": "{shadow-color.5}", - "type": "dropShadow" - } - ], - "$description": "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections." - }, - "6": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "25", - "blur": "50", - "spread": "-12", - "color": "{shadow-color.6}", - "type": "dropShadow" - }, - "$description": "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation." - }, - "inner": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "2", - "blur": "4", - "spread": "0", - "color": "{shadow-color.inner}", - "type": "innerShadow" - }, - "$description": "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields." - } - }, - "shadow-color": { - "0": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Transparent shadow color. Used when no shadow effect is desired." - }, - "1": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Light shadow color with 60% opacity. Creates subtle depth for small UI elements." - }, - "2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Medium shadow color with 60% opacity. Provides balanced depth for common UI components." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Medium shadow color with 50% opacity. Creates moderate depth for elevated components." - }, - "4": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Deep shadow color with 50% opacity. Provides significant depth for floating elements." - }, - "5": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content." - }, - "6": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements." - }, - "inner": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states." - } - }, - "ring": { - "focus": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "2", - "color": "{background.1}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "4", - "color": "{border.focus}", - "type": "dropShadow" - } - ], - "$description": "Focus ring effect with background offset and accent border." - } - }, - "gradient": { - "ai": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.yellow.100}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.orange.200}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.cyan.300}" - }, - "gradient-stop-4": { - "$type": "color", - "$value": "{colors.cyan.200}" - } - }, - "skeleton": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - }, - "pipeline": { - "running": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.orange.200}" - }, - "gradient-stop-2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.orange.200}" - } - }, - "arrows": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.blue.300}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{border.1}" - } - }, - "card": { - "background": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.900}" - } - }, - "border": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - } - }, - "widget": { - "number": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.200}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.600}" - } - }, - "blob": { - "big": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.950}" - } - }, - "small": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - } - } - } - } - }, - "iconStrokeWidth": { - "xxs": { - "$type": "borderWidth", - "$value": "1.1" - }, - "xs": { - "$type": "borderWidth", - "$value": "1" - }, - "sm": { - "$type": "borderWidth", - "$value": "1.1" - }, - "default": { - "$type": "borderWidth", - "$value": "1.1" - }, - "md": { - "$type": "borderWidth", - "$value": "1.4" - }, - "lg": { - "$type": "borderWidth", - "$value": "2" - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/mode/dark/default-protanopia.json b/packages/ui/design-tokens/mode/dark/default-protanopia.json deleted file mode 100644 index 389595e3d7..0000000000 --- a/packages/ui/design-tokens/mode/dark/default-protanopia.json +++ /dev/null @@ -1,2342 +0,0 @@ -{ - "background": { - "1": { - "$type": "color", - "$value": "{colors.chrome.1000}", - "$description": "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers." - } - }, - "text": { - "1": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders." - }, - "accent": { - "$type": "color", - "$value": "{brand.color.200}", - "$description": "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements." - }, - "success": { - "$type": "color", - "$value": "{colors.blue.200}", - "$description": "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.100}", - "$description": "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.200}", - "$description": "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications." - } - }, - "border": { - "1": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.7", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows." - }, - "focus": { - "$type": "color", - "$value": "{brand.color.400}", - "$description": "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators." - }, - "success": { - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.400}", - "$description": "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements." - } - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item." - }, - "disabled": { - "text": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries." - } - } - }, - "component": { - "accordion": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for accordion content. Applied to the expandable text within accordion panels." - }, - "chevron": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for accordion items. Provides visual separation between accordion panels." - } - }, - "alert": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational alerts. Ensures high visibility for the alert heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational alerts. Provides readable contrast for alert content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational alerts. Creates visual distinction from surrounding content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational alerts. Subtly defines the alert's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.red.100}", - "$description": "Text color for danger alerts. Communicates critical information through high-contrast red text." - }, - "description": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Description text color for danger alerts. Ensures readability while maintaining the error state styling." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger alerts. Creates subtle but recognizable error state styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger alerts. Provides definition for error state alerts." - } - } - }, - "avatar": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for avatar initials or text. Ensures visibility against the avatar background." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for avatar components. Provides contrast for text or image content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for avatars. Creates subtle definition around the avatar element." - } - }, - "badge": { - "default": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for secondary badges. Provides readable contrast on secondary badge styling." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for secondary badges. Creates less prominent badge styling for secondary information." - }, - "border": { - "$type": "color", - "$value": "{component.badge.default.background}", - "$description": "Border color for secondary badges. Matches background for clean, cohesive appearance." - } - }, - "neutral": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for outline badges. Ensures readability for badges with transparent backgrounds." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Border color for outline badges. Creates definition for badges without background fill." - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.blue.200}", - "$description": "Text color for success badges. Communicates positive status through readable blue text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Border color for success badges. Provides subtle definition for success state indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background color for success badges. Creates a subtle but recognizable success indicator." - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Text color for danger badges. Communicates error or warning status with high visibility." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger badges. Creates definition for error or warning indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger badges. Provides subtle visual indication of error states." - } - }, - "warning": { - "text": { - "$type": "color", - "$value": "{colors.yellow.200}", - "$description": "Text color for warning badges. Signals caution states with readable amber text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Border color for warning badges. Defines the boundary of caution status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.500}", - "$description": "Background color for warning badges. Creates subtle but recognizable caution indicators." - } - }, - "running": { - "text": { - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Text color for running state badges. Indicates active or in-progress operations." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for running state badges. Defines the boundary of active status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background color for running state badges. Creates subtle visual indication of in-progress states." - } - }, - "merged": { - "text": { - "$type": "color", - "$value": "{colors.purple.200}", - "$description": "Text color for merged state badges. Indicates completed merge actions in version control contexts." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.purple.300}", - "$description": "Border color for merged state badges. Defines the boundary of merge status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.purple.500}", - "$description": "Background color for merged state badges. Creates subtle but recognizable merge indicators." - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-related badges. Ensures high contrast against AI badge gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "breadcrumb": { - "item-inactive": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps." - }, - "item-current": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy." - }, - "separator": { - "$type": "color", - "$value": "{state.disabled.text}", - "$description": "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items." - } - }, - "btn": { - "primary": { - "text": { - "$type": "color", - "$value": "{brand.onColor.600}", - "$description": "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements." - }, - "background": { - "$type": "color", - "$value": "{brand.color.600}", - "$description": "Background color for primary action buttons. Creates emphasis for the most important action in a given context." - }, - "border": { - "$type": "color", - "$value": "{component.btn.primary.background}", - "$description": "Border color for primary action buttons. Matches background for clean, cohesive appearance." - } - }, - "secondary": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions." - }, - "border": { - "$type": "color", - "$value": "{component.btn.secondary.background}", - "$description": "Border color for secondary action buttons. Matches background for clean, cohesive appearance." - } - }, - "outline": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected outline buttons. Creates subtle emphasis for button icons." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for unselected outline buttons. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected outline buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected outline buttons. Increases visibility for active button states." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for selected outline buttons. Creates stronger visual indication of the active state." - } - } - }, - "ghost": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected ghost buttons. Provides readable contrast for minimal styling." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected ghost buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected ghost buttons. Increases visibility for active button states." - } - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.blue.200}", - "$description": "Text color for success buttons. Communicates positive actions through readable blue text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background color for success buttons. Creates subtle but recognizable positive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Border color for success buttons. Provides definition for positive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Hover state background color for success buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger buttons. Creates subtle but recognizable destructive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger buttons. Provides definition for destructive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Hover state background color for danger buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for AI-powered buttons." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for card components. Creates a distinct surface that appears elevated from the page background." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content." - } - }, - "dialog": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dialog content. Provides readable contrast for the modal's primary text content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dialog components." - }, - "backdrop": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." - } - }, - "dropdown": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for dropdown menus. Creates a distinct surface for selectable options." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dropdown menus container." - }, - "item": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dropdown menu items. Ensures readability of selectable options." - }, - "delete": { - "text": { - "$type": "color", - "$value": "{text.danger}", - "$description": "Text color for dropdown menu delete-item." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Specific hover state color for dropdown delete-item." - } - } - } - } - }, - "diff": { - "grey": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent." - }, - "add-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Blue background highlighting newly added code lines while maintaining readability." - }, - "add-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for line numbers of added code, providing visual connection to added content." - }, - "add-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Stronger emphasis color for specific character changes within added lines." - }, - "add-widget": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background for interactive UI elements related to added content." - }, - "add-widget-color": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text/icon color for add-related interactive elements, ensuring readability." - }, - "del-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Red background highlighting removed code lines without causing eye strain." - }, - "del-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background for line numbers of deleted code, connecting numbers to removed content." - }, - "del-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Stronger emphasis color for specific character changes within deleted lines." - }, - "plain-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral background for unchanged code that allows modified content to stand out." - }, - "plain-lineNumber": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for line numbers of unchanged code, maintaining visual rhythm." - }, - "plain-lineNumber-color": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unchanged line numbers, visually subdued compared to changed content." - }, - "empty-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for placeholder spaces and empty lines, maintaining visual continuity." - }, - "hunk-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for diff section headers ('hunks') that indicate which part of the file is displayed." - }, - "hunk-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for line numbers in section headers." - }, - "hunk-content-color": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for section header content showing file position information." - }, - "expand-content": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background for controls that expand/collapse code sections to show additional context." - } - }, - "input": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for input field content. Ensures readability of user-entered information." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for input fields. Creates a distinct surface for user interaction and data entry." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for input fields. Defines the input area with a visible boundary for improved usability." - } - }, - "label": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for form labels and field identifiers. Ensures high contrast for important contextual information." - } - }, - "link": { - "default": { - "$type": "color", - "$value": "{text.accent}", - "$description": "Default color for text links. Creates distinct visual identification of interactive text elements." - }, - "visited": { - "$type": "color", - "$value": "{colors.purple.300}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." - } - }, - "nav-tabs": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Unselected tab item text." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Selected tab item text." - }, - "border": { - "$type": "color", - "$value": "{border.focus}", - "$description": "Selected tab item border." - } - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Navigation container border." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Navigation tabs container background." - } - }, - "pipeline": { - "arrow": { - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for pipeline connection arrows. Defines the visual path between pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", - "$description": "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", - "$description": "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements." - }, - "border": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", - "$description": "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", - "$description": "Animated gradient border for running pipeline states. Provides visual indication of active processing." - } - }, - "error": { - "border": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution." - } - }, - "completed": { - "border": { - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Border color for completed pipeline states. Indicates successful pipeline execution." - } - } - }, - "card-canvas": { - "1": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container." - } - }, - "2": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization." - } - } - }, - "background": { - "dotes": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Refers to the dotted pattern visible in the background of the workspace." - } - } - }, - "sidebar": { - "background": { - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Background color for navigation components. Creates a consistent foundation for navigation elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for navigation components. Creates visual boundaries and separation from adjacent content." - }, - "separator": { - "$type": "color", - "$value": "{border.3}", - "$description": "Color for separators between navigation sections. Creates visual organization within the navigation structure." - }, - "hover": { - "$type": "color", - "$value": "{state.hover}", - "$description": "Hover state for navigation items." - }, - "selected": { - "$type": "color", - "$value": "{state.selected}", - "$description": "Selected state for navigation items." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected navigation items. Provides readable but less emphasized styling for available options." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected navigation items. Increases contrast to highlight the current location." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected navigation items. Creates stronger visual indication of the current selection." - } - } - }, - "logo": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for Logo in sidebar navigation." - }, - "icon": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Icon color for Logo in sidebar navigation." - } - }, - "search": { - "background": { - "$type": "color", - "$value": "{component.sidebar.background}", - "$description": "Search input specific background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Search input specific border on sidebar navigation." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Search input specific placeholder on sidebar navigation." - }, - "btn": { - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Search input specific button background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Search input specific button border on sidebar navigation." - }, - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Search input specific button text on sidebar navigation." - } - } - }, - "footer": { - "username": { - "$type": "color", - "$value": "{text.1}", - "$description": "Username in the footer sidebar navigation menu." - }, - "data": { - "$type": "color", - "$value": "{text.3}", - "$description": "User data in the footer sidebar navigation menu." - } - } - }, - "scrollbar": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability." - } - }, - "selection": { - "unselected": { - "item": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected state in selection controls. Creates visual distinction from selected items." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "item": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Color for selected items in selection controls. Creates high contrast against selected background state." - }, - "background": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background color for selected state in selection controls. Creates strong visual indication of active selection." - }, - "border": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling." - } - } - }, - "separator": { - "background": { - "$type": "color", - "$value": "{border.3}", - "$description": "Background color for separator elements. Creates visual division between content sections with a subtle line or space." - } - }, - "skeleton": { - "background": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", - "$description": "Animation color that sweeps across skeleton elements. Creates a \"shimmer\" effect indicating content loading states." - } - }, - "slider": { - "track": { - "base": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for slider tracks. Represents the full range of available values in an unselected state." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Filled portion color for slider tracks. Visually represents the selected value or range within the track." - } - }, - "track-segments": { - "base": { - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.800}", - "$description": "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range." - } - }, - "handle": { - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for slider handles. Creates a distinct, interactive element for adjusting values." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Border color for slider handles. Provides definition and contrast for the interactive control." - } - } - }, - "status-indicator": { - "completed": { - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Color for success status indicators. Communicates completed or positive states." - }, - "cancelled": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Color for danger status indicators. Communicates error or critical warning states." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Color for warning status indicators. Communicates caution or potential issue states." - }, - "running": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Color for running status indicators. Communicates active or in-progress operations." - }, - "merged": { - "$type": "color", - "$value": "{colors.purple.300}", - "$description": "Color for merged status indicators. Communicates successful integration or completion in version control contexts." - }, - "action-required": { - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Color for action-required status indicators. Communicates that user attention or intervention is needed." - }, - "waiting": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Color for pending status indicators. Communicates in waiting states." - } - }, - "switch": { - "unselected": { - "thumb": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for the unselected state of switch controls. Creates visual distinction from the selected state." - } - }, - "selected": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track." - }, - "background": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background color for the selected state of switch controls. Creates strong visual indication of active state." - } - } - }, - "table": { - "header": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for table header cells. Ensures readability of column labels and titles." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for table header rows. Creates visual distinction between headers and data rows." - } - }, - "row": { - "alternate-background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for alternate table rows. Improves readability by differentiating adjacent rows." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for table rows. Provides subtle separation between data rows." - } - }, - "cell": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for table cell content. Ensures high readability of tabular data." - } - } - }, - "tabs": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for the tabs container. Creates a consistent foundation for tab elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tab containers and separators. Provides subtle definition for tab boundaries." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected tab items. Creates visual distinction from the active tab." - }, - "border": { - "$type": "color", - "$value": "{component.tabs.item.unselected.background}", - "$description": "Border color for unselected tab items. Maintains consistent styling with the tab background." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for the selected tab item. Increases contrast to highlight the active tab." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for the selected tab item. Creates strong visual indication of the active tab." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for the selected tab item. Reinforces the active state with defined boundaries." - } - } - } - }, - "tag": { - "blue": { - "text": { - "$type": "color", - "$value": "{colors.blue.200}", - "$description": "Text color for blue tags. Ensures readability while maintaining the blue color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.900}", - "$description": "Background color for blue tags. Creates a distinct surface with blue theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.950}", - "$description": "Subtle background variation for blue tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.blue.background}", - "$description": "Border color for blue tags." - } - }, - "brown": { - "text": { - "$type": "color", - "$value": "{colors.brown.200}", - "$description": "Text color for brown tags. Ensures readability while maintaining the brown color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.brown.900}", - "$description": "Background color for brown tags. Creates a distinct surface with brown theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.brown.950}", - "$description": "Subtle background variation for brown tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.brown.background}", - "$description": "Border color for brown tags." - } - }, - "cyan": { - "text": { - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Text color for cyan tags. Ensures readability while maintaining the cyan color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.900}", - "$description": "Background color for cyan tags. Creates a distinct surface with cyan theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.950}", - "$description": "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.cyan.background}", - "$description": "Border color for cyan tags." - } - }, - "green": { - "text": { - "$type": "color", - "$value": "{colors.blue.200}", - "$description": "Text color for green tags. Adjusted for protanopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.900}", - "$description": "Background color for green tags. Adjusted for protanopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.950}", - "$description": "Subtle background variation for green tags. Adjusted for protanopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.green.background}", - "$description": "Border color for green tags." - } - }, - "indigo": { - "text": { - "$type": "color", - "$value": "{colors.indigo.200}", - "$description": "Text color for indigo tags. Ensures readability while maintaining the indigo color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.indigo.900}", - "$description": "Background color for indigo tags. Creates a distinct surface with indigo theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.indigo.950}", - "$description": "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.indigo.background}", - "$description": "Border color for indigo tags." - } - }, - "lime": { - "text": { - "$type": "color", - "$value": "{colors.lime.200}", - "$description": "Text color for lime tags. Ensures readability while maintaining the lime color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.lime.900}", - "$description": "Background color for lime tags. Creates a distinct surface with lime theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.lime.950}", - "$description": "Subtle background variation for lime tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.lime.background}", - "$description": "Border color for lime tags." - } - }, - "mint": { - "text": { - "$type": "color", - "$value": "{colors.mint.200}", - "$description": "Text color for mint tags. Ensures readability while maintaining the mint color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.mint.900}", - "$description": "Background color for mint tags. Creates a distinct surface with mint theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.mint.950}", - "$description": "Subtle background variation for mint tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.mint.background}", - "$description": "Border color for mint tags." - } - }, - "orange": { - "text": { - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Text color for orange tags. Ensures readability while maintaining the orange color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.900}", - "$description": "Background color for orange tags. Creates a distinct surface with orange theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.950}", - "$description": "Subtle background variation for orange tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.orange.background}", - "$description": "Border color for orange tags." - } - }, - "pink": { - "text": { - "$type": "color", - "$value": "{colors.pink.200}", - "$description": "Text color for pink tags. Ensures readability while maintaining the pink color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.pink.900}", - "$description": "Background color for pink tags. Creates a distinct surface with pink theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.pink.950}", - "$description": "Subtle background variation for pink tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.pink.background}", - "$description": "Border color for pink tags." - } - }, - "purple": { - "text": { - "$type": "color", - "$value": "{colors.purple.200}", - "$description": "Text color for purple tags. Ensures readability while maintaining the purple color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.purple.900}", - "$description": "Background color for purple tags. Creates a distinct surface with purple theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.purple.950}", - "$description": "Subtle background variation for purple tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.purple.background}", - "$description": "Border color for purple tags." - } - }, - "red": { - "text": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Text color for red tags. Ensures readability while maintaining the red color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.red.900}", - "$description": "Background color for red tags. Creates a distinct surface with red theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.red.950}", - "$description": "Subtle background variation for red tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.red.background}", - "$description": "Border color for red tags." - } - }, - "violet": { - "text": { - "$type": "color", - "$value": "{colors.violet.200}", - "$description": "Text color for violet tags. Ensures readability while maintaining the violet color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.violet.900}", - "$description": "Background color for violet tags. Creates a distinct surface with violet theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.violet.950}", - "$description": "Subtle background variation for violet tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.violet.background}", - "$description": "Border color for violet tags." - } - }, - "yellow": { - "text": { - "$type": "color", - "$value": "{colors.yellow.200}", - "$description": "Text color for yellow tags. Ensures readability while maintaining the yellow color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.yellow.900}", - "$description": "Background color for yellow tags. Creates a distinct surface with yellow theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.yellow.950}", - "$description": "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.yellow.background}", - "$description": "Border color for yellow tags." - } - }, - "gray": { - "text": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Text color for gray tags. Ensures readability while maintaining the gray color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for gray tags. Creates a distinct surface with gray theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Subtle background variation for gray tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.gray.background}", - "$description": "Border color for gray tags." - } - } - }, - "toast": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational toast notifications. Ensures high visibility for the notification headline." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational toast notifications. Provides readable contrast for notification content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational toast notifications. Creates visual distinction from UI content beneath." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational toast notifications. Subtly defines the notification's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Title text color for danger toast notifications. Provides maximum contrast against the error background." - }, - "description": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Description text color for danger toast notifications. Ensures readability of critical information." - }, - "background": { - "$type": "color", - "$value": "{colors.red.700}", - "$description": "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings." - }, - "border": { - "$type": "color", - "$value": "{component.toast.danger.background}", - "$description": "Border color for danger toast notifications. Reinforces the critical nature of the notification message." - } - } - }, - "tooltip": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for tooltip content. Ensures readability of helpful contextual information." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - } - } - }, - "shadow": { - "0": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "0", - "blur": "0", - "spread": "0", - "color": "{shadow-color.0}", - "type": "dropShadow" - }, - "$description": "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile." - }, - "1": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "1", - "blur": "2", - "spread": "0", - "color": "{shadow-color.1}", - "type": "dropShadow" - }, - "$description": "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements." - }, - "2": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "1", - "blur": "3", - "spread": "0", - "color": "{shadow-color.2}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "1", - "blur": "2", - "spread": "-1", - "color": "{shadow-color.2}", - "type": "dropShadow" - } - ], - "$description": "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state." - }, - "3": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-1", - "color": "{shadow-color.3}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "2", - "blur": "4", - "spread": "-2", - "color": "{shadow-color.3}", - "type": "dropShadow" - } - ], - "$description": "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover." - }, - "4": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "10", - "blur": "15", - "spread": "-3", - "color": "{shadow-color.4}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-4", - "color": "{shadow-color.4}", - "type": "dropShadow" - } - ], - "$description": "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns." - }, - "5": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "20", - "blur": "25", - "spread": "-5", - "color": "{shadow-color.5}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "8", - "blur": "10", - "spread": "-6", - "color": "{shadow-color.5}", - "type": "dropShadow" - } - ], - "$description": "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections." - }, - "6": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "25", - "blur": "50", - "spread": "-12", - "color": "{shadow-color.6}", - "type": "dropShadow" - }, - "$description": "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation." - }, - "inner": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "2", - "blur": "4", - "spread": "0", - "color": "{shadow-color.inner}", - "type": "innerShadow" - }, - "$description": "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields." - } - }, - "shadow-color": { - "0": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Transparent shadow color. Used when no shadow effect is desired." - }, - "1": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Light shadow color with 60% opacity. Creates subtle depth for small UI elements." - }, - "2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Medium shadow color with 60% opacity. Provides balanced depth for common UI components." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Medium shadow color with 50% opacity. Creates moderate depth for elevated components." - }, - "4": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Deep shadow color with 50% opacity. Provides significant depth for floating elements." - }, - "5": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content." - }, - "6": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements." - }, - "inner": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states." - } - }, - "ring": { - "focus": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "2", - "color": "{background.1}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "4", - "color": "{border.focus}", - "type": "dropShadow" - } - ], - "$description": "Focus ring effect with background offset and accent border." - } - }, - "gradient": { - "ai": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.yellow.100}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pink.200}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.purple.300}" - }, - "gradient-stop-4": { - "$type": "color", - "$value": "{colors.cyan.200}" - } - }, - "skeleton": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - }, - "pipeline": { - "running": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.orange.200}" - }, - "gradient-stop-2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.orange.200}" - } - }, - "arrows": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.blue.300}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{border.1}" - } - }, - "card": { - "background": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.900}" - } - }, - "border": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - } - }, - "widget": { - "number": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.200}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.600}" - } - }, - "blob": { - "big": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.950}" - } - }, - "small": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - } - } - } - } - }, - "iconStrokeWidth": { - "xxs": { - "$type": "borderWidth", - "$value": "1.1" - }, - "xs": { - "$type": "borderWidth", - "$value": "1" - }, - "sm": { - "$type": "borderWidth", - "$value": "1.1" - }, - "default": { - "$type": "borderWidth", - "$value": "1.1" - }, - "md": { - "$type": "borderWidth", - "$value": "1.4" - }, - "lg": { - "$type": "borderWidth", - "$value": "2" - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/mode/dark/default-tritanopia.json b/packages/ui/design-tokens/mode/dark/default-tritanopia.json deleted file mode 100644 index 77b46d23fd..0000000000 --- a/packages/ui/design-tokens/mode/dark/default-tritanopia.json +++ /dev/null @@ -1,2342 +0,0 @@ -{ - "background": { - "1": { - "$type": "color", - "$value": "{colors.chrome.1000}", - "$description": "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers." - } - }, - "text": { - "1": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders." - }, - "accent": { - "$type": "color", - "$value": "{brand.color.200}", - "$description": "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements." - }, - "success": { - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels." - }, - "warning": { - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications." - } - }, - "border": { - "1": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.7", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows." - }, - "focus": { - "$type": "color", - "$value": "{brand.color.400}", - "$description": "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators." - }, - "success": { - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers." - }, - "warning": { - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements." - } - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item." - }, - "disabled": { - "text": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries." - } - } - }, - "component": { - "accordion": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for accordion content. Applied to the expandable text within accordion panels." - }, - "chevron": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for accordion items. Provides visual separation between accordion panels." - } - }, - "alert": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational alerts. Ensures high visibility for the alert heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational alerts. Provides readable contrast for alert content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational alerts. Creates visual distinction from surrounding content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational alerts. Subtly defines the alert's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.red.100}", - "$description": "Text color for danger alerts. Communicates critical information through high-contrast red text." - }, - "description": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Description text color for danger alerts. Ensures readability while maintaining the error state styling." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger alerts. Creates subtle but recognizable error state styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger alerts. Provides definition for error state alerts." - } - } - }, - "avatar": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for avatar initials or text. Ensures visibility against the avatar background." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for avatar components. Provides contrast for text or image content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for avatars. Creates subtle definition around the avatar element." - } - }, - "badge": { - "default": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for secondary badges. Provides readable contrast on secondary badge styling." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for secondary badges. Creates less prominent badge styling for secondary information." - }, - "border": { - "$type": "color", - "$value": "{component.badge.default.background}", - "$description": "Border color for secondary badges. Matches background for clean, cohesive appearance." - } - }, - "neutral": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for outline badges. Ensures readability for badges with transparent backgrounds." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Border color for outline badges. Creates definition for badges without background fill." - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Text color for success badges. Communicates positive status through readable cyan text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for success badges. Provides subtle definition for success state indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Background color for success badges. Creates a subtle but recognizable success indicator." - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Text color for danger badges. Communicates error or warning status with high visibility." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger badges. Creates definition for error or warning indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger badges. Provides subtle visual indication of error states." - } - }, - "warning": { - "text": { - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Text color for warning badges. Signals caution states with readable orange text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for warning badges. Defines the boundary of caution status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background color for warning badges. Creates subtle but recognizable caution indicators." - } - }, - "running": { - "text": { - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Text color for running state badges. Indicates active or in-progress operations." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for running state badges. Defines the boundary of active status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background color for running state badges. Creates subtle visual indication of in-progress states." - } - }, - "merged": { - "text": { - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Text color for merged state badges. Indicates completed merge actions in version control contexts." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for merged state badges. Defines the boundary of merge status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Background color for merged state badges. Creates subtle but recognizable merge indicators." - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-related badges. Ensures high contrast against AI badge gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "breadcrumb": { - "item-inactive": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps." - }, - "item-current": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy." - }, - "separator": { - "$type": "color", - "$value": "{state.disabled.text}", - "$description": "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items." - } - }, - "btn": { - "primary": { - "text": { - "$type": "color", - "$value": "{brand.onColor.600}", - "$description": "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements." - }, - "background": { - "$type": "color", - "$value": "{brand.color.600}", - "$description": "Background color for primary action buttons. Creates emphasis for the most important action in a given context." - }, - "border": { - "$type": "color", - "$value": "{component.btn.primary.background}", - "$description": "Border color for primary action buttons. Matches background for clean, cohesive appearance." - } - }, - "secondary": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions." - }, - "border": { - "$type": "color", - "$value": "{component.btn.secondary.background}", - "$description": "Border color for secondary action buttons. Matches background for clean, cohesive appearance." - } - }, - "outline": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected outline buttons. Creates subtle emphasis for button icons." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for unselected outline buttons. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected outline buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected outline buttons. Increases visibility for active button states." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for selected outline buttons. Creates stronger visual indication of the active state." - } - } - }, - "ghost": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected ghost buttons. Provides readable contrast for minimal styling." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected ghost buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected ghost buttons. Increases visibility for active button states." - } - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Text color for success buttons. Communicates positive actions through readable cyan text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Background color for success buttons. Creates subtle but recognizable positive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for success buttons. Provides definition for positive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Hover state background color for success buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger buttons. Creates subtle but recognizable destructive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger buttons. Provides definition for destructive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Hover state background color for danger buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for AI-powered buttons." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for card components. Creates a distinct surface that appears elevated from the page background." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content." - } - }, - "dialog": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dialog content. Provides readable contrast for the modal's primary text content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dialog components." - }, - "backdrop": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." - } - }, - "dropdown": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for dropdown menus. Creates a distinct surface for selectable options." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dropdown menus container." - }, - "item": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dropdown menu items. Ensures readability of selectable options." - }, - "delete": { - "text": { - "$type": "color", - "$value": "{text.danger}", - "$description": "Text color for dropdown menu delete-item." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Specific hover state color for dropdown delete-item." - } - } - } - } - }, - "diff": { - "grey": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent." - }, - "add-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Cyan background highlighting newly added code lines while maintaining readability." - }, - "add-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Background for line numbers of added code, providing visual connection to added content." - }, - "add-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Stronger emphasis color for specific character changes within added lines." - }, - "add-widget": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background for interactive UI elements related to added content." - }, - "add-widget-color": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text/icon color for add-related interactive elements, ensuring readability." - }, - "del-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Red background highlighting removed code lines without causing eye strain." - }, - "del-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background for line numbers of deleted code, connecting numbers to removed content." - }, - "del-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Stronger emphasis color for specific character changes within deleted lines." - }, - "plain-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral background for unchanged code that allows modified content to stand out." - }, - "plain-lineNumber": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for line numbers of unchanged code, maintaining visual rhythm." - }, - "plain-lineNumber-color": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unchanged line numbers, visually subdued compared to changed content." - }, - "empty-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for placeholder spaces and empty lines, maintaining visual continuity." - }, - "hunk-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for diff section headers ('hunks') that indicate which part of the file is displayed." - }, - "hunk-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for line numbers in section headers." - }, - "hunk-content-color": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for section header content showing file position information." - }, - "expand-content": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background for controls that expand/collapse code sections to show additional context." - } - }, - "input": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for input field content. Ensures readability of user-entered information." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for input fields. Creates a distinct surface for user interaction and data entry." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for input fields. Defines the input area with a visible boundary for improved usability." - } - }, - "label": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for form labels and field identifiers. Ensures high contrast for important contextual information." - } - }, - "link": { - "default": { - "$type": "color", - "$value": "{text.accent}", - "$description": "Default color for text links. Creates distinct visual identification of interactive text elements." - }, - "visited": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." - } - }, - "nav-tabs": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Unselected tab item text." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Selected tab item text." - }, - "border": { - "$type": "color", - "$value": "{border.focus}", - "$description": "Selected tab item border." - } - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Navigation container border." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Navigation tabs container background." - } - }, - "pipeline": { - "arrow": { - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for pipeline connection arrows. Defines the visual path between pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", - "$description": "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", - "$description": "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements." - }, - "border": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", - "$description": "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", - "$description": "Animated gradient border for running pipeline states. Provides visual indication of active processing." - } - }, - "error": { - "border": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution." - } - }, - "completed": { - "border": { - "$type": "color", - "$value": "{colors.cyan.400}", - "$description": "Border color for completed pipeline states. Indicates successful pipeline execution." - } - } - }, - "card-canvas": { - "1": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container." - } - }, - "2": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization." - } - } - }, - "background": { - "dotes": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Refers to the dotted pattern visible in the background of the workspace." - } - } - }, - "sidebar": { - "background": { - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Background color for navigation components. Creates a consistent foundation for navigation elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for navigation components. Creates visual boundaries and separation from adjacent content." - }, - "separator": { - "$type": "color", - "$value": "{border.3}", - "$description": "Color for separators between navigation sections. Creates visual organization within the navigation structure." - }, - "hover": { - "$type": "color", - "$value": "{state.hover}", - "$description": "Hover state for navigation items." - }, - "selected": { - "$type": "color", - "$value": "{state.selected}", - "$description": "Selected state for navigation items." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected navigation items. Provides readable but less emphasized styling for available options." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected navigation items. Increases contrast to highlight the current location." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected navigation items. Creates stronger visual indication of the current selection." - } - } - }, - "logo": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for Logo in sidebar navigation." - }, - "icon": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Icon color for Logo in sidebar navigation." - } - }, - "search": { - "background": { - "$type": "color", - "$value": "{component.sidebar.background}", - "$description": "Search input specific background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Search input specific border on sidebar navigation." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Search input specific placeholder on sidebar navigation." - }, - "btn": { - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Search input specific button background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Search input specific button border on sidebar navigation." - }, - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Search input specific button text on sidebar navigation." - } - } - }, - "footer": { - "username": { - "$type": "color", - "$value": "{text.1}", - "$description": "Username in the footer sidebar navigation menu." - }, - "data": { - "$type": "color", - "$value": "{text.3}", - "$description": "User data in the footer sidebar navigation menu." - } - } - }, - "scrollbar": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability." - } - }, - "selection": { - "unselected": { - "item": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected state in selection controls. Creates visual distinction from selected items." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "item": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Color for selected items in selection controls. Creates high contrast against selected background state." - }, - "background": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background color for selected state in selection controls. Creates strong visual indication of active selection." - }, - "border": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling." - } - } - }, - "separator": { - "background": { - "$type": "color", - "$value": "{border.3}", - "$description": "Background color for separator elements. Creates visual division between content sections with a subtle line or space." - } - }, - "skeleton": { - "background": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", - "$description": "Animation color that sweeps across skeleton elements. Creates a \"shimmer\" effect indicating content loading states." - } - }, - "slider": { - "track": { - "base": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for slider tracks. Represents the full range of available values in an unselected state." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Filled portion color for slider tracks. Visually represents the selected value or range within the track." - } - }, - "track-segments": { - "base": { - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.800}", - "$description": "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range." - } - }, - "handle": { - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for slider handles. Creates a distinct, interactive element for adjusting values." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Border color for slider handles. Provides definition and contrast for the interactive control." - } - } - }, - "status-indicator": { - "completed": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Color for success status indicators. Communicates completed or positive states." - }, - "cancelled": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Color for danger status indicators. Communicates error or critical warning states." - }, - "warning": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Color for warning status indicators. Communicates caution or potential issue states." - }, - "running": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Color for running status indicators. Communicates active or in-progress operations." - }, - "merged": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Color for merged status indicators. Communicates successful integration or completion in version control contexts." - }, - "action-required": { - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Color for action-required status indicators. Communicates that user attention or intervention is needed." - }, - "waiting": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Color for pending status indicators. Communicates in waiting states." - } - }, - "switch": { - "unselected": { - "thumb": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for the unselected state of switch controls. Creates visual distinction from the selected state." - } - }, - "selected": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track." - }, - "background": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background color for the selected state of switch controls. Creates strong visual indication of active state." - } - } - }, - "table": { - "header": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for table header cells. Ensures readability of column labels and titles." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for table header rows. Creates visual distinction between headers and data rows." - } - }, - "row": { - "alternate-background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for alternate table rows. Improves readability by differentiating adjacent rows." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for table rows. Provides subtle separation between data rows." - } - }, - "cell": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for table cell content. Ensures high readability of tabular data." - } - } - }, - "tabs": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for the tabs container. Creates a consistent foundation for tab elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tab containers and separators. Provides subtle definition for tab boundaries." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected tab items. Creates visual distinction from the active tab." - }, - "border": { - "$type": "color", - "$value": "{component.tabs.item.unselected.background}", - "$description": "Border color for unselected tab items. Maintains consistent styling with the tab background." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for the selected tab item. Increases contrast to highlight the active tab." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for the selected tab item. Creates strong visual indication of the active tab." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for the selected tab item. Reinforces the active state with defined boundaries." - } - } - } - }, - "tag": { - "blue": { - "text": { - "$type": "color", - "$value": "{colors.blue.200}", - "$description": "Text color for blue tags. Ensures readability while maintaining the blue color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.900}", - "$description": "Background color for blue tags. Creates a distinct surface with blue theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.950}", - "$description": "Subtle background variation for blue tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.blue.background}", - "$description": "Border color for blue tags." - } - }, - "brown": { - "text": { - "$type": "color", - "$value": "{colors.brown.200}", - "$description": "Text color for brown tags. Ensures readability while maintaining the brown color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.brown.900}", - "$description": "Background color for brown tags. Creates a distinct surface with brown theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.brown.950}", - "$description": "Subtle background variation for brown tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.brown.background}", - "$description": "Border color for brown tags." - } - }, - "cyan": { - "text": { - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Text color for cyan tags. Ensures readability while maintaining the cyan color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.900}", - "$description": "Background color for cyan tags. Creates a distinct surface with cyan theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.950}", - "$description": "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.cyan.background}", - "$description": "Border color for cyan tags." - } - }, - "green": { - "text": { - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Text color for green tags, replaced with cyan for tritanopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.900}", - "$description": "Background color for green tags, replaced with cyan for tritanopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.950}", - "$description": "Subtle background variation for green tags, replaced with cyan for tritanopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.green.background}", - "$description": "Border color for green tags, replaced with cyan." - } - }, - "indigo": { - "text": { - "$type": "color", - "$value": "{colors.indigo.200}", - "$description": "Text color for indigo tags. Ensures readability while maintaining the indigo color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.indigo.900}", - "$description": "Background color for indigo tags. Creates a distinct surface with indigo theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.indigo.950}", - "$description": "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.indigo.background}", - "$description": "Border color for indigo tags." - } - }, - "lime": { - "text": { - "$type": "color", - "$value": "{colors.lime.200}", - "$description": "Text color for lime tags. Ensures readability while maintaining the lime color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.lime.900}", - "$description": "Background color for lime tags. Creates a distinct surface with lime theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.lime.950}", - "$description": "Subtle background variation for lime tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.lime.background}", - "$description": "Border color for lime tags." - } - }, - "mint": { - "text": { - "$type": "color", - "$value": "{colors.mint.200}", - "$description": "Text color for mint tags. Ensures readability while maintaining the mint color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.mint.900}", - "$description": "Background color for mint tags. Creates a distinct surface with mint theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.mint.950}", - "$description": "Subtle background variation for mint tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.mint.background}", - "$description": "Border color for mint tags." - } - }, - "orange": { - "text": { - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Text color for orange tags. Ensures readability while maintaining the orange color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.900}", - "$description": "Background color for orange tags. Creates a distinct surface with orange theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.950}", - "$description": "Subtle background variation for orange tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.orange.background}", - "$description": "Border color for orange tags." - } - }, - "pink": { - "text": { - "$type": "color", - "$value": "{colors.pink.200}", - "$description": "Text color for pink tags. Ensures readability while maintaining the pink color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.pink.900}", - "$description": "Background color for pink tags. Creates a distinct surface with pink theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.pink.950}", - "$description": "Subtle background variation for pink tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.pink.background}", - "$description": "Border color for pink tags." - } - }, - "purple": { - "text": { - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Text color for purple tags, replaced with cyan for tritanopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.900}", - "$description": "Background color for purple tags, replaced with cyan for tritanopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.950}", - "$description": "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.purple.background}", - "$description": "Border color for purple tags, replaced with cyan." - } - }, - "red": { - "text": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Text color for red tags. Ensures readability while maintaining the red color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.red.900}", - "$description": "Background color for red tags. Creates a distinct surface with red theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.red.950}", - "$description": "Subtle background variation for red tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.red.background}", - "$description": "Border color for red tags." - } - }, - "violet": { - "text": { - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Text color for violet tags, replaced with cyan for tritanopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.900}", - "$description": "Background color for violet tags, replaced with cyan for tritanopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.950}", - "$description": "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.violet.background}", - "$description": "Border color for violet tags, replaced with cyan." - } - }, - "yellow": { - "text": { - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Text color for yellow tags, replaced with orange for tritanopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.900}", - "$description": "Background color for yellow tags, replaced with orange for tritanopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.950}", - "$description": "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.yellow.background}", - "$description": "Border color for yellow tags, replaced with orange." - } - }, - "gray": { - "text": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Text color for gray tags. Ensures readability while maintaining the gray color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for gray tags. Creates a distinct surface with gray theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Subtle background variation for gray tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.gray.background}", - "$description": "Border color for gray tags." - } - } - }, - "toast": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational toast notifications. Ensures high visibility for the notification headline." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational toast notifications. Provides readable contrast for notification content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational toast notifications. Creates visual distinction from UI content beneath." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational toast notifications. Subtly defines the notification's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Title text color for danger toast notifications. Provides maximum contrast against the error background." - }, - "description": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Description text color for danger toast notifications. Ensures readability of critical information." - }, - "background": { - "$type": "color", - "$value": "{colors.red.700}", - "$description": "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings." - }, - "border": { - "$type": "color", - "$value": "{component.toast.danger.background}", - "$description": "Border color for danger toast notifications. Reinforces the critical nature of the notification message." - } - } - }, - "tooltip": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for tooltip content. Ensures readability of helpful contextual information." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - } - } - }, - "shadow": { - "0": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "0", - "blur": "0", - "spread": "0", - "color": "{shadow-color.0}", - "type": "dropShadow" - }, - "$description": "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile." - }, - "1": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "1", - "blur": "2", - "spread": "0", - "color": "{shadow-color.1}", - "type": "dropShadow" - }, - "$description": "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements." - }, - "2": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "1", - "blur": "3", - "spread": "0", - "color": "{shadow-color.2}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "1", - "blur": "2", - "spread": "-1", - "color": "{shadow-color.2}", - "type": "dropShadow" - } - ], - "$description": "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state." - }, - "3": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-1", - "color": "{shadow-color.3}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "2", - "blur": "4", - "spread": "-2", - "color": "{shadow-color.3}", - "type": "dropShadow" - } - ], - "$description": "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover." - }, - "4": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "10", - "blur": "15", - "spread": "-3", - "color": "{shadow-color.4}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-4", - "color": "{shadow-color.4}", - "type": "dropShadow" - } - ], - "$description": "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns." - }, - "5": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "20", - "blur": "25", - "spread": "-5", - "color": "{shadow-color.5}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "8", - "blur": "10", - "spread": "-6", - "color": "{shadow-color.5}", - "type": "dropShadow" - } - ], - "$description": "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections." - }, - "6": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "25", - "blur": "50", - "spread": "-12", - "color": "{shadow-color.6}", - "type": "dropShadow" - }, - "$description": "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation." - }, - "inner": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "2", - "blur": "4", - "spread": "0", - "color": "{shadow-color.inner}", - "type": "innerShadow" - }, - "$description": "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields." - } - }, - "shadow-color": { - "0": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Transparent shadow color. Used when no shadow effect is desired." - }, - "1": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Light shadow color with 60% opacity. Creates subtle depth for small UI elements." - }, - "2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Medium shadow color with 60% opacity. Provides balanced depth for common UI components." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Medium shadow color with 50% opacity. Creates moderate depth for elevated components." - }, - "4": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Deep shadow color with 50% opacity. Provides significant depth for floating elements." - }, - "5": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content." - }, - "6": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements." - }, - "inner": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states." - } - }, - "ring": { - "focus": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "2", - "color": "{background.1}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "4", - "color": "{border.focus}", - "type": "dropShadow" - } - ], - "$description": "Focus ring effect with background offset and accent border." - } - }, - "gradient": { - "ai": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.yellow.100}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pink.200}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.orange.300}" - }, - "gradient-stop-4": { - "$type": "color", - "$value": "{colors.cyan.200}" - } - }, - "skeleton": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - }, - "pipeline": { - "running": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.orange.200}" - }, - "gradient-stop-2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.orange.200}" - } - }, - "arrows": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.blue.300}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{border.1}" - } - }, - "card": { - "background": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.900}" - } - }, - "border": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - } - }, - "widget": { - "number": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.200}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.600}" - } - }, - "blob": { - "big": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.950}" - } - }, - "small": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - } - } - } - } - }, - "iconStrokeWidth": { - "xxs": { - "$type": "borderWidth", - "$value": "1.1" - }, - "xs": { - "$type": "borderWidth", - "$value": "1" - }, - "sm": { - "$type": "borderWidth", - "$value": "1.1" - }, - "default": { - "$type": "borderWidth", - "$value": "1.1" - }, - "md": { - "$type": "borderWidth", - "$value": "1.4" - }, - "lg": { - "$type": "borderWidth", - "$value": "2" - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/mode/dark/default.json b/packages/ui/design-tokens/mode/dark/default.json deleted file mode 100644 index d2f1b52053..0000000000 --- a/packages/ui/design-tokens/mode/dark/default.json +++ /dev/null @@ -1,2347 +0,0 @@ -{ - "background": { - "1": { - "$type": "color", - "$value": "{colors.chrome.1000}", - "$description": "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers." - } - }, - "text": { - "1": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders." - }, - "accent": { - "$type": "color", - "$value": "{brand.color.200}", - "$description": "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements." - }, - "success": { - "$type": "color", - "$value": "{colors.green.200}", - "$description": "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.200}", - "$description": "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications." - } - }, - "border": { - "1": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.7", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows." - }, - "focus": { - "$type": "color", - "$value": "{brand.color.400}", - "$description": "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators." - }, - "success": { - "$type": "color", - "$value": "{colors.green.400}", - "$description": "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.500}", - "$description": "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements." - } - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.05", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.08", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item." - }, - "disabled": { - "text": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries." - } - } - }, - "component": { - "accordion": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for accordion content. Applied to the expandable text within accordion panels." - }, - "chevron": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for accordion items. Provides visual separation between accordion panels." - } - }, - "alert": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational alerts. Ensures high visibility for the alert heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational alerts. Provides readable contrast for alert content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational alerts. Creates visual distinction from surrounding content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational alerts. Subtly defines the alert's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.red.100}", - "$description": "Text color for danger alerts. Communicates critical information through high-contrast red text." - }, - "description": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Description text color for danger alerts. Ensures readability while maintaining the error state styling." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger alerts. Creates subtle but recognizable error state styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger alerts. Provides definition for error state alerts." - } - } - }, - "avatar": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for avatar initials or text. Ensures visibility against the avatar background." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for avatar components. Provides contrast for text or image content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for avatars. Creates subtle definition around the avatar element." - } - }, - "badge": { - "default": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for secondary badges. Provides readable contrast on secondary badge styling." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for secondary badges. Creates less prominent badge styling for secondary information." - }, - "border": { - "$type": "color", - "$value": "{component.badge.default.background}", - "$description": "Border color for secondary badges. Matches background for clean, cohesive appearance." - } - }, - "neutral": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for outline badges. Ensures readability for badges with transparent backgrounds." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Border color for outline badges. Creates definition for badges without background fill." - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.green.200}", - "$description": "Text color for success badges. Communicates positive status through readable green text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.300}", - "$description": "Border color for success badges. Provides subtle definition for success state indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Background color for success badges. Creates a subtle but recognizable success indicator." - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Text color for danger badges. Communicates error or warning status with high visibility." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger badges. Creates definition for error or warning indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger badges. Provides subtle visual indication of error states." - } - }, - "warning": { - "text": { - "$type": "color", - "$value": "{colors.yellow.200}", - "$description": "Text color for warning badges. Signals caution states with readable amber text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Border color for warning badges. Defines the boundary of caution status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.500}", - "$description": "Background color for warning badges. Creates subtle but recognizable caution indicators." - } - }, - "running": { - "text": { - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Text color for running state badges. Indicates active or in-progress operations." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for running state badges. Defines the boundary of active status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background color for running state badges. Creates subtle visual indication of in-progress states." - } - }, - "merged": { - "text": { - "$type": "color", - "$value": "{colors.purple.200}", - "$description": "Text color for merged state badges. Indicates completed merge actions in version control contexts." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.purple.300}", - "$description": "Border color for merged state badges. Defines the boundary of merge status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.purple.500}", - "$description": "Background color for merged state badges. Creates subtle but recognizable merge indicators." - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-related badges. Ensures high contrast against AI badge gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "breadcrumb": { - "item-inactive": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps." - }, - "item-current": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy." - }, - "separator": { - "$type": "color", - "$value": "{state.disabled.text}", - "$description": "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items." - } - }, - "btn": { - "primary": { - "text": { - "$type": "color", - "$value": "{brand.onColor.600}", - "$description": "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements." - }, - "background": { - "$type": "color", - "$value": "{brand.color.600}", - "$description": "Background color for primary action buttons. Creates emphasis for the most important action in a given context." - }, - "border": { - "$type": "color", - "$value": "{component.btn.primary.background}", - "$description": "Border color for primary action buttons. Matches background for clean, cohesive appearance." - } - }, - "secondary": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions." - }, - "border": { - "$type": "color", - "$value": "{component.btn.secondary.background}", - "$description": "Border color for secondary action buttons. Matches background for clean, cohesive appearance." - } - }, - "outline": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected outline buttons. Creates subtle emphasis for button icons." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for unselected outline buttons. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected outline buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected outline buttons. Increases visibility for active button states." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for selected outline buttons. Creates stronger visual indication of the active state." - } - } - }, - "ghost": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected ghost buttons. Provides readable contrast for minimal styling." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected ghost buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected ghost buttons. Increases visibility for active button states." - } - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.green.200}", - "$description": "Text color for success buttons. Communicates positive actions through readable green text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Background color for success buttons. Creates subtle but recognizable positive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.300}", - "$description": "Border color for success buttons. Provides definition for positive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Hover state background color for success buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger buttons. Creates subtle but recognizable destructive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger buttons. Provides definition for destructive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Hover state background color for danger buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for AI-powered buttons." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for card components. Creates a distinct surface that appears elevated from the page background." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content." - } - }, - "dialog": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dialog content. Provides readable contrast for the modal's primary text content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dialog components." - }, - "backdrop": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." - } - }, - "dropdown": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for dropdown menus. Creates a distinct surface for selectable options." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dropdown menus container." - }, - "item": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for dropdown menu items. Ensures readability of selectable options." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dropdown menu items. Ensures readability of selectable options." - }, - "delete": { - "text": { - "$type": "color", - "$value": "{text.danger}", - "$description": "Text color for dropdown menu delete-item." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Specific hover state color for dropdown delete-item." - } - } - } - } - }, - "diff": { - "grey": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent." - }, - "add-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Green background highlighting newly added code lines while maintaining readability." - }, - "add-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Background for line numbers of added code, providing visual connection to added content." - }, - "add-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Stronger emphasis color for specific character changes within added lines." - }, - "add-widget": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background for interactive UI elements related to added content." - }, - "add-widget-color": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text/icon color for add-related interactive elements, ensuring readability." - }, - "del-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Red background highlighting removed code lines without causing eye strain." - }, - "del-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background for line numbers of deleted code, connecting numbers to removed content." - }, - "del-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Stronger emphasis color for specific character changes within deleted lines." - }, - "plain-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral background for unchanged code that allows modified content to stand out." - }, - "plain-lineNumber": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for line numbers of unchanged code, maintaining visual rhythm." - }, - "plain-lineNumber-color": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unchanged line numbers, visually subdued compared to changed content." - }, - "empty-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for placeholder spaces and empty lines, maintaining visual continuity." - }, - "hunk-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for diff section headers ('hunks') that indicate which part of the file is displayed." - }, - "hunk-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for line numbers in section headers." - }, - "hunk-content-color": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for section header content showing file position information." - }, - "expand-content": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background for controls that expand/collapse code sections to show additional context." - } - }, - "input": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for input field content. Ensures readability of user-entered information." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for input fields. Creates a distinct surface for user interaction and data entry." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for input fields. Defines the input area with a visible boundary for improved usability." - } - }, - "label": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for form labels and field identifiers. Ensures high contrast for important contextual information." - } - }, - "link": { - "default": { - "$type": "color", - "$value": "{text.accent}", - "$description": "Default color for text links. Creates distinct visual identification of interactive text elements." - }, - "visited": { - "$type": "color", - "$value": "{colors.purple.300}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." - } - }, - "nav-tabs": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Unselected tab item text." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Selected tab item text." - }, - "border": { - "$type": "color", - "$value": "{border.focus}", - "$description": "Selected tab item border." - } - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Navigation container border." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Navigation tabs container background." - } - }, - "pipeline": { - "arrow": { - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for pipeline connection arrows. Defines the visual path between pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", - "$description": "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", - "$description": "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements." - }, - "border": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", - "$description": "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", - "$description": "Animated gradient border for running pipeline states. Provides visual indication of active processing." - } - }, - "error": { - "border": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution." - } - }, - "completed": { - "border": { - "$type": "color", - "$value": "{colors.green.300}", - "$description": "Border color for completed pipeline states. Indicates successful pipeline execution." - } - } - }, - "card-canvas": { - "1": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container." - } - }, - "2": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization." - } - } - }, - "background": { - "dotes": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Refers to the dotted pattern visible in the background of the workspace." - } - } - }, - "sidebar": { - "background": { - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Background color for navigation components. Creates a consistent foundation for navigation elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for navigation components. Creates visual boundaries and separation from adjacent content." - }, - "separator": { - "$type": "color", - "$value": "{border.3}", - "$description": "Color for separators between navigation sections. Creates visual organization within the navigation structure." - }, - "hover": { - "$type": "color", - "$value": "{state.hover}", - "$description": "Hover state for navigation items." - }, - "selected": { - "$type": "color", - "$value": "{state.selected}", - "$description": "Selected state for navigation items." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected navigation items. Provides readable but less emphasized styling for available options." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected navigation items. Increases contrast to highlight the current location." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected navigation items. Creates stronger visual indication of the current selection." - } - } - }, - "logo": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for Logo in sidebar navigation." - }, - "icon": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Icon color for Logo in sidebar navigation." - } - }, - "search": { - "background": { - "$type": "color", - "$value": "{component.sidebar.background}", - "$description": "Search input specific background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Search input specific border on sidebar navigation." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Search input specific placeholder on sidebar navigation." - }, - "btn": { - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Search input specific button background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Search input specific button border on sidebar navigation." - }, - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Search input specific button text on sidebar navigation." - } - } - }, - "footer": { - "username": { - "$type": "color", - "$value": "{text.1}", - "$description": "Username in the footer sidebar navigation menu." - }, - "data": { - "$type": "color", - "$value": "{text.3}", - "$description": "User data in the footer sidebar navigation menu." - } - } - }, - "scrollbar": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability." - } - }, - "selection": { - "unselected": { - "item": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected state in selection controls. Creates visual distinction from selected items." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "item": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Color for selected items in selection controls. Creates high contrast against selected background state." - }, - "background": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background color for selected state in selection controls. Creates strong visual indication of active selection." - }, - "border": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling." - } - } - }, - "separator": { - "background": { - "$type": "color", - "$value": "{border.3}", - "$description": "Background color for separator elements. Creates visual division between content sections with a subtle line or space." - } - }, - "skeleton": { - "background": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", - "$description": "Animation color that sweeps across skeleton elements. Creates a \"shimmer\" effect indicating content loading states." - } - }, - "slider": { - "track": { - "base": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for slider tracks. Represents the full range of available values in an unselected state." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Filled portion color for slider tracks. Visually represents the selected value or range within the track." - } - }, - "track-segments": { - "base": { - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.800}", - "$description": "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range." - } - }, - "handle": { - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for slider handles. Creates a distinct, interactive element for adjusting values." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Border color for slider handles. Provides definition and contrast for the interactive control." - } - } - }, - "status-indicator": { - "completed": { - "$type": "color", - "$value": "{colors.green.300}", - "$description": "Color for success status indicators. Communicates completed or positive states." - }, - "cancelled": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Color for danger status indicators. Communicates error or critical warning states." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Color for warning status indicators. Communicates caution or potential issue states." - }, - "running": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Color for running status indicators. Communicates active or in-progress operations." - }, - "merged": { - "$type": "color", - "$value": "{colors.purple.300}", - "$description": "Color for merged status indicators. Communicates successful integration or completion in version control contexts." - }, - "action-required": { - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Color for action-required status indicators. Communicates that user attention or intervention is needed. " - }, - "waiting": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Color for pending status indicators. Communicates in waiting states." - } - }, - "switch": { - "unselected": { - "thumb": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for the unselected state of switch controls. Creates visual distinction from the selected state." - } - }, - "selected": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track." - }, - "background": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background color for the selected state of switch controls. Creates strong visual indication of active state." - } - } - }, - "table": { - "header": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for table header cells. Ensures readability of column labels and titles." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for table header rows. Creates visual distinction between headers and data rows." - } - }, - "row": { - "alternate-background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for alternate table rows. Improves readability by differentiating adjacent rows." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for table rows. Provides subtle separation between data rows." - } - }, - "cell": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for table cell content. Ensures high readability of tabular data." - } - } - }, - "tabs": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for the tabs container. Creates a consistent foundation for tab elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tab containers and separators. Provides subtle definition for tab boundaries." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected tab items. Creates visual distinction from the active tab." - }, - "border": { - "$type": "color", - "$value": "{component.tabs.item.unselected.background}", - "$description": "Border color for unselected tab items. Maintains consistent styling with the tab background." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for the selected tab item. Increases contrast to highlight the active tab." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for the selected tab item. Creates strong visual indication of the active tab." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for the selected tab item. Reinforces the active state with defined boundaries." - } - } - } - }, - "tag": { - "blue": { - "text": { - "$type": "color", - "$value": "{colors.blue.200}", - "$description": "Text color for blue tags. Ensures readability while maintaining the blue color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.900}", - "$description": "Background color for blue tags. Creates a distinct surface with blue theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.950}", - "$description": "Subtle background variation for blue tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.blue.background}", - "$description": "Border color for blue tags. " - } - }, - "brown": { - "text": { - "$type": "color", - "$value": "{colors.brown.200}", - "$description": "Text color for brown tags. Ensures readability while maintaining the brown color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.brown.900}", - "$description": "Background color for brown tags. Creates a distinct surface with brown theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.brown.950}", - "$description": "Subtle background variation for brown tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.brown.background}", - "$description": "Border color for brown tags. " - } - }, - "cyan": { - "text": { - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Text color for cyan tags. Ensures readability while maintaining the cyan color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.900}", - "$description": "Background color for cyan tags. Creates a distinct surface with cyan theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.950}", - "$description": "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.cyan.background}", - "$description": "Border color for cyan tags." - } - }, - "green": { - "text": { - "$type": "color", - "$value": "{colors.green.200}", - "$description": "Text color for green tags. Ensures readability while maintaining the green color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.green.900}", - "$description": "Background color for green tags. Creates a distinct surface with green theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.green.950}", - "$description": "Subtle background variation for green tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.green.background}", - "$description": "Border color for green tags." - } - }, - "indigo": { - "text": { - "$type": "color", - "$value": "{colors.indigo.200}", - "$description": "Text color for indigo tags. Ensures readability while maintaining the indigo color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.indigo.900}", - "$description": "Background color for indigo tags. Creates a distinct surface with indigo theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.indigo.950}", - "$description": "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.indigo.background}", - "$description": "Border color for indigo tags." - } - }, - "lime": { - "text": { - "$type": "color", - "$value": "{colors.lime.200}", - "$description": "Text color for lime tags. Ensures readability while maintaining the lime color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.lime.900}", - "$description": "Background color for lime tags. Creates a distinct surface with lime theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.lime.950}", - "$description": "Subtle background variation for lime tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.lime.background}", - "$description": "Border color for lime tags." - } - }, - "mint": { - "text": { - "$type": "color", - "$value": "{colors.mint.200}", - "$description": "Text color for mint tags. Ensures readability while maintaining the mint color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.mint.900}", - "$description": "Background color for mint tags. Creates a distinct surface with mint theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.mint.950}", - "$description": "Subtle background variation for mint tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.mint.background}", - "$description": "Border color for mint tags." - } - }, - "orange": { - "text": { - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Text color for orange tags. Ensures readability while maintaining the orange color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.900}", - "$description": "Background color for orange tags. Creates a distinct surface with orange theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.950}", - "$description": "Subtle background variation for orange tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.orange.background}", - "$description": "Border color for orange tags." - } - }, - "pink": { - "text": { - "$type": "color", - "$value": "{colors.pink.200}", - "$description": "Text color for pink tags. Ensures readability while maintaining the pink color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.pink.900}", - "$description": "Background color for pink tags. Creates a distinct surface with pink theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.pink.950}", - "$description": "Subtle background variation for pink tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.pink.background}", - "$description": "Border color for pink tags." - } - }, - "purple": { - "text": { - "$type": "color", - "$value": "{colors.purple.200}", - "$description": "Text color for purple tags. Ensures readability while maintaining the purple color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.purple.900}", - "$description": "Background color for purple tags. Creates a distinct surface with purple theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.purple.950}", - "$description": "Subtle background variation for purple tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.purple.background}", - "$description": "Border color for purple tags." - } - }, - "red": { - "text": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Text color for red tags. Ensures readability while maintaining the red color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.red.900}", - "$description": "Background color for red tags. Creates a distinct surface with red theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.red.950}", - "$description": "Subtle background variation for red tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.red.background}", - "$description": "Border color for red tags." - } - }, - "violet": { - "text": { - "$type": "color", - "$value": "{colors.violet.200}", - "$description": "Text color for violet tags. Ensures readability while maintaining the violet color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.violet.900}", - "$description": "Background color for violet tags. Creates a distinct surface with violet theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.violet.950}", - "$description": "Subtle background variation for violet tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.violet.background}", - "$description": "Border color for violet tags." - } - }, - "yellow": { - "text": { - "$type": "color", - "$value": "{colors.yellow.200}", - "$description": "Text color for yellow tags. Ensures readability while maintaining the yellow color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.yellow.900}", - "$description": "Background color for yellow tags. Creates a distinct surface with yellow theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.yellow.950}", - "$description": "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.yellow.background}", - "$description": "Border color for yellow tags." - } - }, - "gray": { - "text": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Text color for gray tags. Ensures readability while maintaining the gray color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for gray tags. Creates a distinct surface with gray theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Subtle background variation for gray tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.gray.background}", - "$description": "Border color for gray tags." - } - } - }, - "toast": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational toast notifications. Ensures high visibility for the notification headline." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational toast notifications. Provides readable contrast for notification content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational toast notifications. Creates visual distinction from UI content beneath." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational toast notifications. Subtly defines the notification's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Title text color for danger toast notifications. Provides maximum contrast against the error background." - }, - "description": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Description text color for danger toast notifications. Ensures readability of critical information." - }, - "background": { - "$type": "color", - "$value": "{colors.red.700}", - "$description": "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings." - }, - "border": { - "$type": "color", - "$value": "{component.toast.danger.background}", - "$description": "Border color for danger toast notifications. Reinforces the critical nature of the notification message." - } - } - }, - "tooltip": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for tooltip content. Ensures readability of helpful contextual information." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - } - } - }, - "shadow": { - "0": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "0", - "blur": "0", - "spread": "0", - "color": "{shadow-color.0}", - "type": "dropShadow" - }, - "$description": "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile." - }, - "1": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "1", - "blur": "2", - "spread": "0", - "color": "{shadow-color.1}", - "type": "dropShadow" - }, - "$description": "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements." - }, - "2": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "1", - "blur": "3", - "spread": "0", - "color": "{shadow-color.2}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "1", - "blur": "2", - "spread": "-1", - "color": "{shadow-color.2}", - "type": "dropShadow" - } - ], - "$description": "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state." - }, - "3": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-1", - "color": "{shadow-color.3}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "2", - "blur": "4", - "spread": "-2", - "color": "{shadow-color.3}", - "type": "dropShadow" - } - ], - "$description": "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover." - }, - "4": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "10", - "blur": "15", - "spread": "-3", - "color": "{shadow-color.4}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-4", - "color": "{shadow-color.4}", - "type": "dropShadow" - } - ], - "$description": "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns." - }, - "5": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "20", - "blur": "25", - "spread": "-5", - "color": "{shadow-color.5}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "8", - "blur": "10", - "spread": "-6", - "color": "{shadow-color.5}", - "type": "dropShadow" - } - ], - "$description": "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections." - }, - "6": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "25", - "blur": "50", - "spread": "-12", - "color": "{shadow-color.6}", - "type": "dropShadow" - }, - "$description": "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation." - }, - "inner": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "2", - "blur": "4", - "spread": "0", - "color": "{shadow-color.inner}", - "type": "innerShadow" - }, - "$description": "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields." - } - }, - "shadow-color": { - "0": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Transparent shadow color. Used when no shadow effect is desired." - }, - "1": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Light shadow color with 60% opacity. Creates subtle depth for small UI elements." - }, - "2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Medium shadow color with 60% opacity. Provides balanced depth for common UI components." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Medium shadow color with 50% opacity. Creates moderate depth for elevated components." - }, - "4": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Deep shadow color with 50% opacity. Provides significant depth for floating elements." - }, - "5": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content." - }, - "6": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements." - }, - "inner": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states." - } - }, - "ring": { - "focus": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "2", - "color": "{background.1}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "4", - "color": "{border.focus}", - "type": "dropShadow" - } - ], - "$description": "Focus ring effect with background offset and accent border." - } - }, - "gradient": { - "ai": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.yellow.100}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pink.200}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.purple.300}" - }, - "gradient-stop-4": { - "$type": "color", - "$value": "{colors.cyan.200}" - } - }, - "skeleton": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - }, - "pipeline": { - "running": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.orange.200}" - }, - "gradient-stop-2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.orange.200}" - } - }, - "arrows": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.blue.300}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{border.1}" - } - }, - "card": { - "background": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.900}" - } - }, - "border": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - } - }, - "widget": { - "number": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.200}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.600}" - } - }, - "blob": { - "big": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.950}" - } - }, - "small": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - } - } - } - } - }, - "iconStrokeWidth": { - "xxs": { - "$type": "borderWidth", - "$value": "1.1" - }, - "xs": { - "$type": "borderWidth", - "$value": "1" - }, - "sm": { - "$type": "borderWidth", - "$value": "1.1" - }, - "default": { - "$type": "borderWidth", - "$value": "1.1" - }, - "md": { - "$type": "borderWidth", - "$value": "1.4" - }, - "lg": { - "$type": "borderWidth", - "$value": "2" - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/mode/dark/dimmer-deuteranopia.json b/packages/ui/design-tokens/mode/dark/dimmer-deuteranopia.json deleted file mode 100644 index ca0a4e4a3b..0000000000 --- a/packages/ui/design-tokens/mode/dark/dimmer-deuteranopia.json +++ /dev/null @@ -1,2333 +0,0 @@ -{ - "background": { - "1": { - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.1000}", - "$description": "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers." - } - }, - "text": { - "1": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders." - }, - "accent": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements." - }, - "success": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications." - } - }, - "border": { - "1": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows." - }, - "focus": { - "$type": "color", - "$value": "{brand.color.600}", - "$description": "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators." - }, - "success": { - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.600}", - "$description": "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements." - } - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item." - }, - "disabled": { - "text": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries." - } - } - }, - "component": { - "accordion": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for accordion content. Applied to the expandable text within accordion panels." - }, - "chevron": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for accordion items. Provides visual separation between accordion panels." - } - }, - "alert": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational alerts. Ensures high visibility for the alert heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational alerts. Provides readable contrast for alert content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational alerts. Creates visual distinction from surrounding content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational alerts. Subtly defines the alert's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.orange.100}", - "$description": "Text color for danger alerts. Communicates critical information through high-contrast text." - }, - "description": { - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Description text color for danger alerts. Ensures readability while maintaining the error state styling." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background color for danger alerts. Creates subtle but recognizable error state styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for danger alerts. Provides definition for error state alerts." - } - } - }, - "avatar": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for avatar initials or text. Ensures visibility against the avatar background." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for avatar components. Provides contrast for text or image content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for avatars. Creates subtle definition around the avatar element." - } - }, - "badge": { - "default": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for secondary badges. Provides readable contrast on secondary badge styling." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for secondary badges. Creates less prominent badge styling for secondary information." - }, - "border": { - "$type": "color", - "$value": "{component.badge.default.background}", - "$description": "Border color for secondary badges. Matches background for clean, cohesive appearance." - } - }, - "neutral": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for outline badges. Ensures readability for badges with transparent backgrounds." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Border color for outline badges. Creates definition for badges without background fill." - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Text color for success badges. Communicates positive status through readable cyan text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for success badges. Provides subtle definition for success state indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Background color for success badges. Creates a subtle but recognizable success indicator." - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Text color for danger badges. Communicates error or warning status with high visibility." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for danger badges. Creates definition for error or warning indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background color for danger badges. Provides subtle visual indication of error states." - } - }, - "warning": { - "text": { - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Text color for warning badges. Signals caution states with readable amber text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Border color for warning badges. Defines the boundary of caution status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.500}", - "$description": "Background color for warning badges. Creates subtle but recognizable caution indicators." - } - }, - "running": { - "text": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Text color for running state badges. Indicates active or in-progress operations." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for running state badges. Defines the boundary of active status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background color for running state badges. Creates subtle visual indication of in-progress states." - } - }, - "merged": { - "text": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Text color for merged state badges. Indicates completed merge actions in version control contexts." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for merged state badges. Defines the boundary of merge status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Background color for merged state badges. Creates subtle but recognizable merge indicators." - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-related badges. Ensures high contrast against AI badge gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "breadcrumb": { - "item-inactive": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps." - }, - "item-current": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy." - }, - "separator": { - "$type": "color", - "$value": "{state.disabled.text}", - "$description": "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items." - } - }, - "btn": { - "primary": { - "text": { - "$type": "color", - "$value": "{brand.onColor.600}", - "$description": "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements." - }, - "background": { - "$type": "color", - "$value": "{brand.color.600}", - "$description": "Background color for primary action buttons. Creates emphasis for the most important action in a given context." - }, - "border": { - "$type": "color", - "$value": "{component.btn.primary.background}", - "$description": "Border color for primary action buttons. Matches background for clean, cohesive appearance." - } - }, - "secondary": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions." - }, - "border": { - "$type": "color", - "$value": "{component.btn.secondary.background}", - "$description": "Border color for secondary action buttons. Matches background for clean, cohesive appearance." - } - }, - "outline": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected outline buttons. Creates subtle emphasis for button icons." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for unselected outline buttons. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected outline buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected outline buttons. Increases visibility for active button states." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for selected outline buttons. Creates stronger visual indication of the active state." - } - } - }, - "ghost": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected ghost buttons. Provides readable contrast for minimal styling." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected ghost buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected ghost buttons. Increases visibility for active button states." - } - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Text color for success buttons. Communicates positive actions through readable cyan text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Background color for success buttons. Creates subtle but recognizable positive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for success buttons. Provides definition for positive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Hover state background color for success buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background color for danger buttons. Creates subtle but recognizable destructive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for danger buttons. Provides definition for destructive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Hover state background color for danger buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for AI-powered buttons." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for card components. Creates a distinct surface that appears elevated from the page background." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content." - } - }, - "dialog": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dialog content. Provides readable contrast for the modal's primary text content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dialog components." - }, - "backdrop": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." - } - }, - "dropdown": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for dropdown menus. Creates a distinct surface for selectable options." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dropdown menus container." - }, - "item": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dropdown menu items. Ensures readability of selectable options." - }, - "delete": { - "text": { - "$type": "color", - "$value": "{text.danger}", - "$description": "Text color for dropdown menu delete-item." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Specific hover state color for dropdown delete-item." - } - } - } - } - }, - "diff": { - "grey": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent." - }, - "add-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Cyan background highlighting newly added code lines while maintaining readability." - }, - "add-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Background for line numbers of added code, providing visual connection to added content." - }, - "add-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Stronger emphasis color for specific character changes within added lines." - }, - "add-widget": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background for interactive UI elements related to added content." - }, - "add-widget-color": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text/icon color for add-related interactive elements, ensuring readability." - }, - "del-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Orange background highlighting removed code lines without causing eye strain." - }, - "del-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background for line numbers of deleted code, connecting numbers to removed content." - }, - "del-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Stronger emphasis color for specific character changes within deleted lines." - }, - "plain-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral background for unchanged code that allows modified content to stand out." - }, - "plain-lineNumber": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for line numbers of unchanged code, maintaining visual rhythm." - }, - "plain-lineNumber-color": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unchanged line numbers, visually subdued compared to changed content." - }, - "empty-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for placeholder spaces and empty lines, maintaining visual continuity." - }, - "hunk-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for diff section headers ('hunks') that indicate which part of the file is displayed." - }, - "hunk-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for line numbers in section headers." - }, - "hunk-content-color": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for section header content showing file position information." - }, - "expand-content": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background for controls that expand/collapse code sections to show additional context." - } - }, - "input": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for input field content. Ensures readability of user-entered information." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for input fields. Creates a distinct surface for user interaction and data entry." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for input fields. Defines the input area with a visible boundary for improved usability." - } - }, - "label": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for form labels and field identifiers. Ensures high contrast for important contextual information." - } - }, - "link": { - "default": { - "$type": "color", - "$value": "{text.accent}", - "$description": "Default color for text links. Creates distinct visual identification of interactive text elements." - }, - "visited": { - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." - } - }, - "nav-tabs": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Unselected tab item text." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Selected tab item text." - }, - "border": { - "$type": "color", - "$value": "{border.focus}", - "$description": "Selected tab item border." - } - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Navigation container border." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Navigation tabs container background." - } - }, - "pipeline": { - "arrow": { - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for pipeline connection arrows. Defines the visual path between pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", - "$description": "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", - "$description": "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements." - }, - "border": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", - "$description": "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", - "$description": "Animated gradient border for running pipeline states. Provides visual indication of active processing." - } - }, - "error": { - "border": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution." - } - }, - "completed": { - "border": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for completed pipeline states. Indicates successful pipeline execution." - } - } - }, - "card-canvas": { - "1": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container." - } - }, - "2": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization." - } - } - }, - "background": { - "dotes": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Refers to the dotted pattern visible in the background of the workspace." - } - } - }, - "sidebar": { - "background": { - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Background color for navigation components. Creates a consistent foundation for navigation elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for navigation components. Creates visual boundaries and separation from adjacent content." - }, - "separator": { - "$type": "color", - "$value": "{border.3}", - "$description": "Color for separators between navigation sections. Creates visual organization within the navigation structure." - }, - "hover": { - "$type": "color", - "$value": "{state.hover}", - "$description": "Hover state for navigation items." - }, - "selected": { - "$type": "color", - "$value": "{state.selected}", - "$description": "Selected state for navigation items." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected navigation items. Provides readable but less emphasized styling for available options." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected navigation items. Increases contrast to highlight the current location." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected navigation items. Creates stronger visual indication of the current selection." - } - } - }, - "logo": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for Logo in sidebar navigation." - }, - "icon": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Icon color for Logo in sidebar navigation." - } - }, - "search": { - "background": { - "$type": "color", - "$value": "{component.sidebar.background}", - "$description": "Search input specific background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Search input specific border on sidebar navigation." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Search input specific placeholder on sidebar navigation." - }, - "btn": { - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Search input specific button background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Search input specific button border on sidebar navigation." - }, - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Search input specific button text on sidebar navigation." - } - } - }, - "footer": { - "username": { - "$type": "color", - "$value": "{text.1}", - "$description": "Username in the footer sidebar navigation menu." - }, - "data": { - "$type": "color", - "$value": "{text.3}", - "$description": "User data in the footer sidebar navigation menu." - } - } - }, - "scrollbar": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability." - } - }, - "selection": { - "unselected": { - "item": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected state in selection controls. Creates visual distinction from selected items." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "item": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Color for selected items in selection controls. Creates high contrast against selected background state." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for selected state in selection controls. Creates strong visual indication of active selection." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling." - } - } - }, - "separator": { - "background": { - "$type": "color", - "$value": "{border.3}", - "$description": "Background color for separator elements. Creates visual division between content sections with a subtle line or space." - } - }, - "skeleton": { - "background": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", - "$description": "Animation color that sweeps across skeleton elements. Creates a \"shimmer\" effect indicating content loading states." - } - }, - "slider": { - "track": { - "base": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for slider tracks. Represents the full range of available values in an unselected state." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.400}", - "$description": "Filled portion color for slider tracks. Visually represents the selected value or range within the track." - } - }, - "track-segments": { - "base": { - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.800}", - "$description": "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range." - } - }, - "handle": { - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for slider handles. Creates a distinct, interactive element for adjusting values." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Border color for slider handles. Provides definition and contrast for the interactive control." - } - } - }, - "status-indicator": { - "completed": { - "$type": "color", - "$value": "{colors.cyan.400}", - "$description": "Color for success status indicators. Communicates completed or positive states using cyan for deuteranopia accessibility." - }, - "cancelled": { - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Color for danger status indicators. Communicates error or critical warning states using orange for deuteranopia accessibility." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.400}", - "$description": "Color for warning status indicators. Communicates caution or potential issue states." - }, - "running": { - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Color for running status indicators. Communicates active or in-progress operations." - }, - "merged": { - "$type": "color", - "$value": "{colors.cyan.400}", - "$description": "Color for merged status indicators. Communicates successful integration or completion in version control contexts." - }, - "action-required": { - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Color for action-required status indicators. Communicates that user attention or intervention is needed." - }, - "waiting": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Color for pending status indicators. Communicates in waiting states." - } - }, - "switch": { - "unselected": { - "thumb": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for the unselected state of switch controls. Creates visual distinction from the selected state." - } - }, - "selected": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track." - }, - "background": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background color for the selected state of switch controls. Creates strong visual indication of active state." - } - } - }, - "table": { - "header": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for table header cells. Ensures readability of column labels and titles." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for table header rows. Creates visual distinction between headers and data rows." - } - }, - "row": { - "alternate-background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for alternate table rows. Improves readability by differentiating adjacent rows." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for table rows. Provides subtle separation between data rows." - } - }, - "cell": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for table cell content. Ensures high readability of tabular data." - } - } - }, - "tabs": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for the tabs container. Creates a consistent foundation for tab elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tab containers and separators. Provides subtle definition for tab boundaries." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected tab items. Creates visual distinction from the active tab." - }, - "border": { - "$type": "color", - "$value": "{component.tabs.item.unselected.background}", - "$description": "Border color for unselected tab items. Maintains consistent styling with the tab background." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for the selected tab item. Increases contrast to highlight the active tab." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for the selected tab item. Creates strong visual indication of the active tab." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for the selected tab item. Reinforces the active state with defined boundaries." - } - } - } - }, - "tag": { - "blue": { - "text": { - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Text color for blue tags. Ensures readability while maintaining the blue color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.900}", - "$description": "Background color for blue tags. Creates a distinct surface with blue theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.950}", - "$description": "Subtle background variation for blue tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.blue.background}", - "$description": "Border color for blue tags." - } - }, - "brown": { - "text": { - "$type": "color", - "$value": "{colors.brown.300}", - "$description": "Text color for brown tags. Ensures readability while maintaining the brown color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.brown.900}", - "$description": "Background color for brown tags. Creates a distinct surface with brown theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.brown.950}", - "$description": "Subtle background variation for brown tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.brown.background}", - "$description": "Border color for brown tags." - } - }, - "cyan": { - "text": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Text color for cyan tags. Ensures readability while maintaining the cyan color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.900}", - "$description": "Background color for cyan tags. Creates a distinct surface with cyan theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.950}", - "$description": "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.cyan.background}", - "$description": "Border color for cyan tags." - } - }, - "green": { - "text": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Text color for green tags, replaced with cyan for deuteranopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.900}", - "$description": "Background color for green tags, replaced with cyan for deuteranopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.950}", - "$description": "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.green.background}", - "$description": "Border color for green tags, replaced with cyan." - } - }, - "indigo": { - "text": { - "$type": "color", - "$value": "{colors.indigo.300}", - "$description": "Text color for indigo tags. Ensures readability while maintaining the indigo color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.indigo.900}", - "$description": "Background color for indigo tags. Creates a distinct surface with indigo theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.indigo.950}", - "$description": "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.indigo.background}", - "$description": "Border color for indigo tags." - } - }, - "lime": { - "text": { - "$type": "color", - "$value": "{colors.lime.300}", - "$description": "Text color for lime tags. Ensures readability while maintaining the lime color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.lime.900}", - "$description": "Background color for lime tags. Creates a distinct surface with lime theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.lime.950}", - "$description": "Subtle background variation for lime tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.lime.background}", - "$description": "Border color for lime tags." - } - }, - "mint": { - "text": { - "$type": "color", - "$value": "{colors.mint.300}", - "$description": "Text color for mint tags. Ensures readability while maintaining the mint color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.mint.900}", - "$description": "Background color for mint tags. Creates a distinct surface with mint theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.mint.950}", - "$description": "Subtle background variation for mint tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.mint.background}", - "$description": "Border color for mint tags." - } - }, - "orange": { - "text": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Text color for orange tags. Ensures readability while maintaining the orange color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.900}", - "$description": "Background color for orange tags. Creates a distinct surface with orange theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.950}", - "$description": "Subtle background variation for orange tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.orange.background}", - "$description": "Border color for orange tags." - } - }, - "pink": { - "text": { - "$type": "color", - "$value": "{colors.pink.300}", - "$description": "Text color for pink tags. Ensures readability while maintaining the pink color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.pink.900}", - "$description": "Background color for pink tags. Creates a distinct surface with pink theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.pink.950}", - "$description": "Subtle background variation for pink tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.pink.background}", - "$description": "Border color for pink tags." - } - }, - "purple": { - "text": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Text color for purple tags, replaced with cyan for deuteranopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.900}", - "$description": "Background color for purple tags, replaced with cyan for deuteranopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.950}", - "$description": "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.purple.background}", - "$description": "Border color for purple tags, replaced with cyan." - } - }, - "red": { - "text": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Text color for red tags, replaced with orange for deuteranopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.900}", - "$description": "Background color for red tags, replaced with orange for deuteranopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.950}", - "$description": "Subtle background variation for red tags, replaced with orange for deuteranopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.red.background}", - "$description": "Border color for red tags, replaced with orange." - } - }, - "violet": { - "text": { - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Text color for violet tags, replaced with blue for deuteranopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.900}", - "$description": "Background color for violet tags, replaced with blue for deuteranopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.950}", - "$description": "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.violet.background}", - "$description": "Border color for violet tags, replaced with blue." - } - }, - "yellow": { - "text": { - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Text color for yellow tags. Ensures readability while maintaining the yellow color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.yellow.900}", - "$description": "Background color for yellow tags. Creates a distinct surface with yellow theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.yellow.950}", - "$description": "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.yellow.background}", - "$description": "Border color for yellow tags." - } - }, - "gray": { - "text": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Text color for gray tags. Ensures readability while maintaining the gray color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for gray tags. Creates a distinct surface with gray theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Subtle background variation for gray tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.gray.background}", - "$description": "Border color for gray tags." - } - } - }, - "toast": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational toast notifications. Ensures high visibility for the notification headline." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational toast notifications. Provides readable contrast for notification content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational toast notifications. Creates visual distinction from UI content beneath." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational toast notifications. Subtly defines the notification's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Title text color for danger toast notifications. Provides maximum contrast against the error background." - }, - "description": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Description text color for danger toast notifications. Ensures readability of critical information." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.700}", - "$description": "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings." - }, - "border": { - "$type": "color", - "$value": "{component.toast.danger.background}", - "$description": "Border color for danger toast notifications. Reinforces the critical nature of the notification message." - } - } - }, - "tooltip": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for tooltip content. Ensures readability of helpful contextual information." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - } - } - }, - "shadow": { - "0": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "0", - "blur": "0", - "spread": "0", - "color": "{shadow-color.0}", - "type": "dropShadow" - }, - "$description": "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile." - }, - "1": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "1", - "blur": "2", - "spread": "0", - "color": "{shadow-color.1}", - "type": "dropShadow" - }, - "$description": "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements." - }, - "2": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "1", - "blur": "3", - "spread": "0", - "color": "{shadow-color.2}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "1", - "blur": "2", - "spread": "-1", - "color": "{shadow-color.2}", - "type": "dropShadow" - } - ], - "$description": "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state." - }, - "3": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-1", - "color": "{shadow-color.3}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "2", - "blur": "4", - "spread": "-2", - "color": "{shadow-color.3}", - "type": "dropShadow" - } - ], - "$description": "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover." - }, - "4": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "10", - "blur": "15", - "spread": "-3", - "color": "{shadow-color.4}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-4", - "color": "{shadow-color.4}", - "type": "dropShadow" - } - ], - "$description": "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns." - }, - "5": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "20", - "blur": "25", - "spread": "-5", - "color": "{shadow-color.5}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "8", - "blur": "10", - "spread": "-6", - "color": "{shadow-color.5}", - "type": "dropShadow" - } - ], - "$description": "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections." - }, - "6": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "25", - "blur": "50", - "spread": "-12", - "color": "{shadow-color.6}", - "type": "dropShadow" - }, - "$description": "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation." - }, - "inner": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "2", - "blur": "4", - "spread": "0", - "color": "{shadow-color.inner}", - "type": "innerShadow" - }, - "$description": "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields." - } - }, - "shadow-color": { - "0": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Transparent shadow color. Used when no shadow effect is desired." - }, - "1": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Light shadow color with 60% opacity. Creates subtle depth for small UI elements." - }, - "2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Medium shadow color with 60% opacity. Provides balanced depth for common UI components." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Medium shadow color with 50% opacity. Creates moderate depth for elevated components." - }, - "4": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Deep shadow color with 50% opacity. Provides significant depth for floating elements." - }, - "5": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content." - }, - "6": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements." - }, - "inner": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states." - } - }, - "ring": { - "focus": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "2", - "color": "{background.1}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "4", - "color": "{border.focus}", - "type": "dropShadow" - } - ], - "$description": "Focus ring effect with background offset and accent border." - } - }, - "gradient": { - "ai": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.yellow.100}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.orange.200}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.cyan.300}" - }, - "gradient-stop-4": { - "$type": "color", - "$value": "{colors.cyan.200}" - } - }, - "skeleton": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - }, - "pipeline": { - "running": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.orange.200}" - }, - "gradient-stop-2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.orange.200}" - } - }, - "arrows": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.blue.300}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{border.1}" - } - }, - "card": { - "background": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.900}" - } - }, - "border": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - } - }, - "widget": { - "number": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.200}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.600}" - } - }, - "blob": { - "big": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.950}" - } - }, - "small": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - } - } - } - } - }, - "iconStrokeWidth": { - "xxs": { - "$type": "borderWidth", - "$value": "1.1" - }, - "xs": { - "$type": "borderWidth", - "$value": "1" - }, - "sm": { - "$type": "borderWidth", - "$value": "1.1" - }, - "default": { - "$type": "borderWidth", - "$value": "1.1" - }, - "md": { - "$type": "borderWidth", - "$value": "1.4" - }, - "lg": { - "$type": "borderWidth", - "$value": "2" - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/mode/dark/dimmer-protanopia.json b/packages/ui/design-tokens/mode/dark/dimmer-protanopia.json deleted file mode 100644 index c8992c18b2..0000000000 --- a/packages/ui/design-tokens/mode/dark/dimmer-protanopia.json +++ /dev/null @@ -1,2333 +0,0 @@ -{ - "background": { - "1": { - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.1000}", - "$description": "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers." - } - }, - "text": { - "1": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders." - }, - "accent": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements." - }, - "success": { - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications." - } - }, - "border": { - "1": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows." - }, - "focus": { - "$type": "color", - "$value": "{brand.color.600}", - "$description": "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators." - }, - "success": { - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.600}", - "$description": "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements." - } - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item." - }, - "disabled": { - "text": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries." - } - } - }, - "component": { - "accordion": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for accordion content. Applied to the expandable text within accordion panels." - }, - "chevron": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for accordion items. Provides visual separation between accordion panels." - } - }, - "alert": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational alerts. Ensures high visibility for the alert heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational alerts. Provides readable contrast for alert content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational alerts. Creates visual distinction from surrounding content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational alerts. Subtly defines the alert's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.red.100}", - "$description": "Text color for danger alerts. Communicates critical information through high-contrast red text." - }, - "description": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Description text color for danger alerts. Ensures readability while maintaining the error state styling." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger alerts. Creates subtle but recognizable error state styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger alerts. Provides definition for error state alerts." - } - } - }, - "avatar": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for avatar initials or text. Ensures visibility against the avatar background." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for avatar components. Provides contrast for text or image content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for avatars. Creates subtle definition around the avatar element." - } - }, - "badge": { - "default": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for secondary badges. Provides readable contrast on secondary badge styling." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for secondary badges. Creates less prominent badge styling for secondary information." - }, - "border": { - "$type": "color", - "$value": "{component.badge.default.background}", - "$description": "Border color for secondary badges. Matches background for clean, cohesive appearance." - } - }, - "neutral": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for outline badges. Ensures readability for badges with transparent backgrounds." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Border color for outline badges. Creates definition for badges without background fill." - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Text color for success badges. Communicates positive status through readable blue text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Border color for success badges. Provides subtle definition for success state indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background color for success badges. Creates a subtle but recognizable success indicator." - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Text color for danger badges. Communicates error or warning status with high visibility." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger badges. Creates definition for error or warning indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger badges. Provides subtle visual indication of error states." - } - }, - "warning": { - "text": { - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Text color for warning badges. Signals caution states with readable amber text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Border color for warning badges. Defines the boundary of caution status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.500}", - "$description": "Background color for warning badges. Creates subtle but recognizable caution indicators." - } - }, - "running": { - "text": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Text color for running state badges. Indicates active or in-progress operations." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for running state badges. Defines the boundary of active status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background color for running state badges. Creates subtle visual indication of in-progress states." - } - }, - "merged": { - "text": { - "$type": "color", - "$value": "{colors.purple.300}", - "$description": "Text color for merged state badges. Indicates completed merge actions in version control contexts." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.purple.300}", - "$description": "Border color for merged state badges. Defines the boundary of merge status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.purple.500}", - "$description": "Background color for merged state badges. Creates subtle but recognizable merge indicators." - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-related badges. Ensures high contrast against AI badge gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "breadcrumb": { - "item-inactive": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps." - }, - "item-current": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy." - }, - "separator": { - "$type": "color", - "$value": "{state.disabled.text}", - "$description": "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items." - } - }, - "btn": { - "primary": { - "text": { - "$type": "color", - "$value": "{brand.onColor.600}", - "$description": "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements." - }, - "background": { - "$type": "color", - "$value": "{brand.color.600}", - "$description": "Background color for primary action buttons. Creates emphasis for the most important action in a given context." - }, - "border": { - "$type": "color", - "$value": "{component.btn.primary.background}", - "$description": "Border color for primary action buttons. Matches background for clean, cohesive appearance." - } - }, - "secondary": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions." - }, - "border": { - "$type": "color", - "$value": "{component.btn.secondary.background}", - "$description": "Border color for secondary action buttons. Matches background for clean, cohesive appearance." - } - }, - "outline": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected outline buttons. Creates subtle emphasis for button icons." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for unselected outline buttons. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected outline buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected outline buttons. Increases visibility for active button states." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for selected outline buttons. Creates stronger visual indication of the active state." - } - } - }, - "ghost": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected ghost buttons. Provides readable contrast for minimal styling." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected ghost buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected ghost buttons. Increases visibility for active button states." - } - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Text color for success buttons. Communicates positive actions through readable blue text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background color for success buttons. Creates subtle but recognizable positive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Border color for success buttons. Provides definition for positive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Hover state background color for success buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger buttons. Creates subtle but recognizable destructive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger buttons. Provides definition for destructive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Hover state background color for danger buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for AI-powered buttons." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for card components. Creates a distinct surface that appears elevated from the page background." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content." - } - }, - "dialog": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dialog content. Provides readable contrast for the modal's primary text content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dialog components." - }, - "backdrop": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." - } - }, - "dropdown": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for dropdown menus. Creates a distinct surface for selectable options." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dropdown menus container." - }, - "item": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dropdown menu items. Ensures readability of selectable options." - }, - "delete": { - "text": { - "$type": "color", - "$value": "{text.danger}", - "$description": "Text color for dropdown menu delete-item." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Specific hover state color for dropdown delete-item." - } - } - } - } - }, - "diff": { - "grey": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent." - }, - "add-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Blue background highlighting newly added code lines while maintaining readability." - }, - "add-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for line numbers of added code, providing visual connection to added content." - }, - "add-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Stronger emphasis color for specific character changes within added lines." - }, - "add-widget": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background for interactive UI elements related to added content." - }, - "add-widget-color": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text/icon color for add-related interactive elements, ensuring readability." - }, - "del-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Red background highlighting removed code lines without causing eye strain." - }, - "del-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background for line numbers of deleted code, connecting numbers to removed content." - }, - "del-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Stronger emphasis color for specific character changes within deleted lines." - }, - "plain-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral background for unchanged code that allows modified content to stand out." - }, - "plain-lineNumber": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for line numbers of unchanged code, maintaining visual rhythm." - }, - "plain-lineNumber-color": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unchanged line numbers, visually subdued compared to changed content." - }, - "empty-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for placeholder spaces and empty lines, maintaining visual continuity." - }, - "hunk-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for diff section headers ('hunks') that indicate which part of the file is displayed." - }, - "hunk-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for line numbers in section headers." - }, - "hunk-content-color": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for section header content showing file position information." - }, - "expand-content": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background for controls that expand/collapse code sections to show additional context." - } - }, - "input": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for input field content. Ensures readability of user-entered information." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for input fields. Creates a distinct surface for user interaction and data entry." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for input fields. Defines the input area with a visible boundary for improved usability." - } - }, - "label": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for form labels and field identifiers. Ensures high contrast for important contextual information." - } - }, - "link": { - "default": { - "$type": "color", - "$value": "{text.accent}", - "$description": "Default color for text links. Creates distinct visual identification of interactive text elements." - }, - "visited": { - "$type": "color", - "$value": "{colors.purple.400}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." - } - }, - "nav-tabs": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Unselected tab item text." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Selected tab item text." - }, - "border": { - "$type": "color", - "$value": "{border.focus}", - "$description": "Selected tab item border." - } - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Navigation container border." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Navigation tabs container background." - } - }, - "pipeline": { - "arrow": { - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for pipeline connection arrows. Defines the visual path between pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", - "$description": "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", - "$description": "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements." - }, - "border": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", - "$description": "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", - "$description": "Animated gradient border for running pipeline states. Provides visual indication of active processing." - } - }, - "error": { - "border": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution." - } - }, - "completed": { - "border": { - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Border color for completed pipeline states. Indicates successful pipeline execution." - } - } - }, - "card-canvas": { - "1": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container." - } - }, - "2": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization." - } - } - }, - "background": { - "dotes": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Refers to the dotted pattern visible in the background of the workspace." - } - } - }, - "sidebar": { - "background": { - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Background color for navigation components. Creates a consistent foundation for navigation elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for navigation components. Creates visual boundaries and separation from adjacent content." - }, - "separator": { - "$type": "color", - "$value": "{border.3}", - "$description": "Color for separators between navigation sections. Creates visual organization within the navigation structure." - }, - "hover": { - "$type": "color", - "$value": "{state.hover}", - "$description": "Hover state for navigation items." - }, - "selected": { - "$type": "color", - "$value": "{state.selected}", - "$description": "Selected state for navigation items." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected navigation items. Provides readable but less emphasized styling for available options." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected navigation items. Increases contrast to highlight the current location." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected navigation items. Creates stronger visual indication of the current selection." - } - } - }, - "logo": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for Logo in sidebar navigation." - }, - "icon": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Icon color for Logo in sidebar navigation." - } - }, - "search": { - "background": { - "$type": "color", - "$value": "{component.sidebar.background}", - "$description": "Search input specific background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Search input specific border on sidebar navigation." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Search input specific placeholder on sidebar navigation." - }, - "btn": { - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Search input specific button background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Search input specific button border on sidebar navigation." - }, - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Search input specific button text on sidebar navigation." - } - } - }, - "footer": { - "username": { - "$type": "color", - "$value": "{text.1}", - "$description": "Username in the footer sidebar navigation menu." - }, - "data": { - "$type": "color", - "$value": "{text.3}", - "$description": "User data in the footer sidebar navigation menu." - } - } - }, - "scrollbar": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability." - } - }, - "selection": { - "unselected": { - "item": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected state in selection controls. Creates visual distinction from selected items." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "item": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Color for selected items in selection controls. Creates high contrast against selected background state." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for selected state in selection controls. Creates strong visual indication of active selection." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling." - } - } - }, - "separator": { - "background": { - "$type": "color", - "$value": "{border.3}", - "$description": "Background color for separator elements. Creates visual division between content sections with a subtle line or space." - } - }, - "skeleton": { - "background": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", - "$description": "Animation color that sweeps across skeleton elements. Creates a \"shimmer\" effect indicating content loading states." - } - }, - "slider": { - "track": { - "base": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for slider tracks. Represents the full range of available values in an unselected state." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.400}", - "$description": "Filled portion color for slider tracks. Visually represents the selected value or range within the track." - } - }, - "track-segments": { - "base": { - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.800}", - "$description": "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range." - } - }, - "handle": { - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for slider handles. Creates a distinct, interactive element for adjusting values." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Border color for slider handles. Provides definition and contrast for the interactive control." - } - } - }, - "status-indicator": { - "completed": { - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Color for success status indicators. Communicates completed or positive states." - }, - "cancelled": { - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Color for danger status indicators. Communicates error or critical warning states." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.400}", - "$description": "Color for warning status indicators. Communicates caution or potential issue states." - }, - "running": { - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Color for running status indicators. Communicates active or in-progress operations." - }, - "merged": { - "$type": "color", - "$value": "{colors.purple.400}", - "$description": "Color for merged status indicators. Communicates successful integration or completion in version control contexts." - }, - "action-required": { - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Color for action-required status indicators. Communicates that user attention or intervention is needed." - }, - "waiting": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Color for pending status indicators. Communicates in waiting states." - } - }, - "switch": { - "unselected": { - "thumb": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for the unselected state of switch controls. Creates visual distinction from the selected state." - } - }, - "selected": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track." - }, - "background": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background color for the selected state of switch controls. Creates strong visual indication of active state." - } - } - }, - "table": { - "header": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for table header cells. Ensures readability of column labels and titles." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for table header rows. Creates visual distinction between headers and data rows." - } - }, - "row": { - "alternate-background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for alternate table rows. Improves readability by differentiating adjacent rows." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for table rows. Provides subtle separation between data rows." - } - }, - "cell": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for table cell content. Ensures high readability of tabular data." - } - } - }, - "tabs": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for the tabs container. Creates a consistent foundation for tab elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tab containers and separators. Provides subtle definition for tab boundaries." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected tab items. Creates visual distinction from the active tab." - }, - "border": { - "$type": "color", - "$value": "{component.tabs.item.unselected.background}", - "$description": "Border color for unselected tab items. Maintains consistent styling with the tab background." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for the selected tab item. Increases contrast to highlight the active tab." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for the selected tab item. Creates strong visual indication of the active tab." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for the selected tab item. Reinforces the active state with defined boundaries." - } - } - } - }, - "tag": { - "blue": { - "text": { - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Text color for blue tags. Ensures readability while maintaining the blue color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.900}", - "$description": "Background color for blue tags. Creates a distinct surface with blue theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.950}", - "$description": "Subtle background variation for blue tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.blue.background}", - "$description": "Border color for blue tags." - } - }, - "brown": { - "text": { - "$type": "color", - "$value": "{colors.brown.300}", - "$description": "Text color for brown tags. Ensures readability while maintaining the brown color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.brown.900}", - "$description": "Background color for brown tags. Creates a distinct surface with brown theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.brown.950}", - "$description": "Subtle background variation for brown tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.brown.background}", - "$description": "Border color for brown tags." - } - }, - "cyan": { - "text": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Text color for cyan tags. Ensures readability while maintaining the cyan color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.900}", - "$description": "Background color for cyan tags. Creates a distinct surface with cyan theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.950}", - "$description": "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.cyan.background}", - "$description": "Border color for cyan tags." - } - }, - "green": { - "text": { - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Text color for green tags. Adjusted for protanopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.900}", - "$description": "Background color for green tags. Adjusted for protanopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.950}", - "$description": "Subtle background variation for green tags. Adjusted for protanopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.green.background}", - "$description": "Border color for green tags." - } - }, - "indigo": { - "text": { - "$type": "color", - "$value": "{colors.indigo.300}", - "$description": "Text color for indigo tags. Ensures readability while maintaining the indigo color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.indigo.900}", - "$description": "Background color for indigo tags. Creates a distinct surface with indigo theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.indigo.950}", - "$description": "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.indigo.background}", - "$description": "Border color for indigo tags." - } - }, - "lime": { - "text": { - "$type": "color", - "$value": "{colors.lime.300}", - "$description": "Text color for lime tags. Ensures readability while maintaining the lime color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.lime.900}", - "$description": "Background color for lime tags. Creates a distinct surface with lime theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.lime.950}", - "$description": "Subtle background variation for lime tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.lime.background}", - "$description": "Border color for lime tags." - } - }, - "mint": { - "text": { - "$type": "color", - "$value": "{colors.mint.300}", - "$description": "Text color for mint tags. Ensures readability while maintaining the mint color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.mint.900}", - "$description": "Background color for mint tags. Creates a distinct surface with mint theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.mint.950}", - "$description": "Subtle background variation for mint tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.mint.background}", - "$description": "Border color for mint tags." - } - }, - "orange": { - "text": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Text color for orange tags. Ensures readability while maintaining the orange color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.900}", - "$description": "Background color for orange tags. Creates a distinct surface with orange theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.950}", - "$description": "Subtle background variation for orange tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.orange.background}", - "$description": "Border color for orange tags." - } - }, - "pink": { - "text": { - "$type": "color", - "$value": "{colors.pink.300}", - "$description": "Text color for pink tags. Ensures readability while maintaining the pink color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.pink.900}", - "$description": "Background color for pink tags. Creates a distinct surface with pink theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.pink.950}", - "$description": "Subtle background variation for pink tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.pink.background}", - "$description": "Border color for pink tags." - } - }, - "purple": { - "text": { - "$type": "color", - "$value": "{colors.purple.300}", - "$description": "Text color for purple tags. Ensures readability while maintaining the purple color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.purple.900}", - "$description": "Background color for purple tags. Creates a distinct surface with purple theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.purple.950}", - "$description": "Subtle background variation for purple tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.purple.background}", - "$description": "Border color for purple tags." - } - }, - "red": { - "text": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Text color for red tags. Ensures readability while maintaining the red color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.red.900}", - "$description": "Background color for red tags. Creates a distinct surface with red theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.red.950}", - "$description": "Subtle background variation for red tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.red.background}", - "$description": "Border color for red tags." - } - }, - "violet": { - "text": { - "$type": "color", - "$value": "{colors.violet.300}", - "$description": "Text color for violet tags. Ensures readability while maintaining the violet color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.violet.900}", - "$description": "Background color for violet tags. Creates a distinct surface with violet theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.violet.950}", - "$description": "Subtle background variation for violet tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.violet.background}", - "$description": "Border color for violet tags." - } - }, - "yellow": { - "text": { - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Text color for yellow tags. Ensures readability while maintaining the yellow color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.yellow.900}", - "$description": "Background color for yellow tags. Creates a distinct surface with yellow theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.yellow.950}", - "$description": "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.yellow.background}", - "$description": "Border color for yellow tags." - } - }, - "gray": { - "text": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Text color for gray tags. Ensures readability while maintaining the gray color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for gray tags. Creates a distinct surface with gray theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Subtle background variation for gray tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.gray.background}", - "$description": "Border color for gray tags." - } - } - }, - "toast": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational toast notifications. Ensures high visibility for the notification headline." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational toast notifications. Provides readable contrast for notification content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational toast notifications. Creates visual distinction from UI content beneath." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational toast notifications. Subtly defines the notification's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Title text color for danger toast notifications. Provides maximum contrast against the error background." - }, - "description": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Description text color for danger toast notifications. Ensures readability of critical information." - }, - "background": { - "$type": "color", - "$value": "{colors.red.700}", - "$description": "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings." - }, - "border": { - "$type": "color", - "$value": "{component.toast.danger.background}", - "$description": "Border color for danger toast notifications. Reinforces the critical nature of the notification message." - } - } - }, - "tooltip": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for tooltip content. Ensures readability of helpful contextual information." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - } - } - }, - "shadow": { - "0": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "0", - "blur": "0", - "spread": "0", - "color": "{shadow-color.0}", - "type": "dropShadow" - }, - "$description": "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile." - }, - "1": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "1", - "blur": "2", - "spread": "0", - "color": "{shadow-color.1}", - "type": "dropShadow" - }, - "$description": "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements." - }, - "2": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "1", - "blur": "3", - "spread": "0", - "color": "{shadow-color.2}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "1", - "blur": "2", - "spread": "-1", - "color": "{shadow-color.2}", - "type": "dropShadow" - } - ], - "$description": "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state." - }, - "3": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-1", - "color": "{shadow-color.3}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "2", - "blur": "4", - "spread": "-2", - "color": "{shadow-color.3}", - "type": "dropShadow" - } - ], - "$description": "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover." - }, - "4": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "10", - "blur": "15", - "spread": "-3", - "color": "{shadow-color.4}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-4", - "color": "{shadow-color.4}", - "type": "dropShadow" - } - ], - "$description": "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns." - }, - "5": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "20", - "blur": "25", - "spread": "-5", - "color": "{shadow-color.5}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "8", - "blur": "10", - "spread": "-6", - "color": "{shadow-color.5}", - "type": "dropShadow" - } - ], - "$description": "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections." - }, - "6": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "25", - "blur": "50", - "spread": "-12", - "color": "{shadow-color.6}", - "type": "dropShadow" - }, - "$description": "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation." - }, - "inner": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "2", - "blur": "4", - "spread": "0", - "color": "{shadow-color.inner}", - "type": "innerShadow" - }, - "$description": "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields." - } - }, - "shadow-color": { - "0": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Transparent shadow color. Used when no shadow effect is desired." - }, - "1": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Light shadow color with 60% opacity. Creates subtle depth for small UI elements." - }, - "2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Medium shadow color with 60% opacity. Provides balanced depth for common UI components." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Medium shadow color with 50% opacity. Creates moderate depth for elevated components." - }, - "4": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Deep shadow color with 50% opacity. Provides significant depth for floating elements." - }, - "5": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content." - }, - "6": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements." - }, - "inner": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states." - } - }, - "ring": { - "focus": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "2", - "color": "{background.1}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "4", - "color": "{border.focus}", - "type": "dropShadow" - } - ], - "$description": "Focus ring effect with background offset and accent border." - } - }, - "gradient": { - "ai": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.yellow.100}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pink.200}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.purple.300}" - }, - "gradient-stop-4": { - "$type": "color", - "$value": "{colors.cyan.200}" - } - }, - "skeleton": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - }, - "pipeline": { - "running": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.orange.200}" - }, - "gradient-stop-2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.orange.200}" - } - }, - "arrows": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.blue.300}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{border.1}" - } - }, - "card": { - "background": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.900}" - } - }, - "border": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - } - }, - "widget": { - "number": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.200}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.600}" - } - }, - "blob": { - "big": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.950}" - } - }, - "small": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - } - } - } - } - }, - "iconStrokeWidth": { - "xxs": { - "$type": "borderWidth", - "$value": "1.1" - }, - "xs": { - "$type": "borderWidth", - "$value": "1" - }, - "sm": { - "$type": "borderWidth", - "$value": "1.1" - }, - "default": { - "$type": "borderWidth", - "$value": "1.1" - }, - "md": { - "$type": "borderWidth", - "$value": "1.4" - }, - "lg": { - "$type": "borderWidth", - "$value": "2" - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/mode/dark/dimmer-tritanopia.json b/packages/ui/design-tokens/mode/dark/dimmer-tritanopia.json deleted file mode 100644 index 3d1ed710cb..0000000000 --- a/packages/ui/design-tokens/mode/dark/dimmer-tritanopia.json +++ /dev/null @@ -1,2331 +0,0 @@ -{ - "background": { - "1": { - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.1000}", - "$description": "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers." - } - }, - "text": { - "1": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders." - }, - "accent": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements." - }, - "success": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels." - }, - "warning": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications." - } - }, - "border": { - "1": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows." - }, - "focus": { - "$type": "color", - "$value": "{brand.color.600}", - "$description": "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators." - }, - "success": { - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers." - }, - "warning": { - "$type": "color", - "$value": "{colors.orange.600}", - "$description": "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements." - } - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item." - }, - "disabled": { - "text": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries." - } - } - }, - "component": { - "accordion": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for accordion content. Applied to the expandable text within accordion panels." - }, - "chevron": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for accordion items. Provides visual separation between accordion panels." - } - }, - "alert": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational alerts. Ensures high visibility for the alert heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational alerts. Provides readable contrast for alert content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational alerts. Creates visual distinction from surrounding content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational alerts. Subtly defines the alert's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.red.100}", - "$description": "Text color for danger alerts. Communicates critical information through high-contrast red text." - }, - "description": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Description text color for danger alerts. Ensures readability while maintaining the error state styling." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger alerts. Creates subtle but recognizable error state styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger alerts. Provides definition for error state alerts." - } - } - }, - "avatar": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for avatar initials or text. Ensures visibility against the avatar background." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for avatar components. Provides contrast for text or image content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for avatars. Creates subtle definition around the avatar element." - } - }, - "badge": { - "default": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for secondary badges. Provides readable contrast on secondary badge styling." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for secondary badges. Creates less prominent badge styling for secondary information." - }, - "border": { - "$type": "color", - "$value": "{component.badge.default.background}", - "$description": "Border color for secondary badges. Matches background for clean, cohesive appearance." - } - }, - "neutral": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for outline badges. Ensures readability for badges with transparent backgrounds." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Border color for outline badges. Creates definition for badges without background fill." - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Text color for success badges. Communicates positive status through readable cyan text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for success badges. Provides subtle definition for success state indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Background color for success badges. Creates a subtle but recognizable success indicator." - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Text color for danger badges. Communicates error or warning status with high visibility." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger badges. Creates definition for error or warning indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger badges. Provides subtle visual indication of error states." - } - }, - "warning": { - "text": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Text color for warning badges. Signals caution states with readable orange text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for warning badges. Defines the boundary of caution status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background color for warning badges. Creates subtle but recognizable caution indicators." - } - }, - "running": { - "text": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Text color for running state badges. Indicates active or in-progress operations." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for running state badges. Defines the boundary of active status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background color for running state badges. Creates subtle visual indication of in-progress states." - } - }, - "merged": { - "text": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Text color for merged state badges. Indicates completed merge actions in version control contexts." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for merged state badges. Defines the boundary of merge status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Background color for merged state badges. Creates subtle but recognizable merge indicators." - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-related badges. Ensures high contrast against AI badge gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "breadcrumb": { - "item-inactive": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps." - }, - "item-current": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy." - }, - "separator": { - "$type": "color", - "$value": "{state.disabled.text}", - "$description": "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items." - } - }, - "btn": { - "primary": { - "text": { - "$type": "color", - "$value": "{brand.onColor.600}", - "$description": "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements." - }, - "background": { - "$type": "color", - "$value": "{brand.color.600}", - "$description": "Background color for primary action buttons. Creates emphasis for the most important action in a given context." - }, - "border": { - "$type": "color", - "$value": "{component.btn.primary.background}", - "$description": "Border color for primary action buttons. Matches background for clean, cohesive appearance." - } - }, - "secondary": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions." - }, - "border": { - "$type": "color", - "$value": "{component.btn.secondary.background}", - "$description": "Border color for secondary action buttons. Matches background for clean, cohesive appearance." - } - }, - "outline": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected outline buttons. Creates subtle emphasis for button icons." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for unselected outline buttons. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected outline buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected outline buttons. Increases visibility for active button states." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for selected outline buttons. Creates stronger visual indication of the active state." - } - } - }, - "ghost": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected ghost buttons. Provides readable contrast for minimal styling." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected ghost buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected ghost buttons. Increases visibility for active button states." - } - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Text color for success buttons. Communicates positive actions through readable cyan text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Background color for success buttons. Creates subtle but recognizable positive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for success buttons. Provides definition for positive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Hover state background color for success buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger buttons. Creates subtle but recognizable destructive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger buttons. Provides definition for destructive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Hover state background color for danger buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for AI-powered buttons." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for card components. Creates a distinct surface that appears elevated from the page background." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content." - } - }, - "dialog": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dialog content. Provides readable contrast for the modal's primary text content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dialog components." - }, - "backdrop": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." - } - }, - "dropdown": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for dropdown menus. Creates a distinct surface for selectable options." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dropdown menus container." - }, - "item": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dropdown menu items. Ensures readability of selectable options." - }, - "delete": { - "text": { - "$type": "color", - "$value": "{text.danger}", - "$description": "Text color for dropdown menu delete-item." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Specific hover state color for dropdown delete-item." - } - } - } - } - }, - "diff": { - "grey": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent." - }, - "add-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Cyan background highlighting newly added code lines while maintaining readability." - }, - "add-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Background for line numbers of added code, providing visual connection to added content." - }, - "add-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Stronger emphasis color for specific character changes within added lines." - }, - "add-widget": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background for interactive UI elements related to added content." - }, - "add-widget-color": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text/icon color for add-related interactive elements, ensuring readability." - }, - "del-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Red background highlighting removed code lines without causing eye strain." - }, - "del-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background for line numbers of deleted code, connecting numbers to removed content." - }, - "del-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Stronger emphasis color for specific character changes within deleted lines." - }, - "plain-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral background for unchanged code that allows modified content to stand out." - }, - "plain-lineNumber": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for line numbers of unchanged code, maintaining visual rhythm." - }, - "plain-lineNumber-color": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unchanged line numbers, visually subdued compared to changed content." - }, - "empty-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for placeholder spaces and empty lines, maintaining visual continuity." - }, - "hunk-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for diff section headers ('hunks') that indicate which part of the file is displayed." - }, - "hunk-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for line numbers in section headers." - }, - "hunk-content-color": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for section header content showing file position information." - }, - "expand-content": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background for controls that expand/collapse code sections to show additional context." - } - }, - "input": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for input field content. Ensures readability of user-entered information." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for input fields. Creates a distinct surface for user interaction and data entry." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for input fields. Defines the input area with a visible boundary for improved usability." - } - }, - "label": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for form labels and field identifiers. Ensures high contrast for important contextual information." - } - }, - "link": { - "default": { - "$type": "color", - "$value": "{text.accent}", - "$description": "Default color for text links. Creates distinct visual identification of interactive text elements." - }, - "visited": { - "$type": "color", - "$value": "{colors.cyan.400}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." - } - }, - "nav-tabs": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Unselected tab item text." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Selected tab item text." - }, - "border": { - "$type": "color", - "$value": "{border.focus}", - "$description": "Selected tab item border." - } - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Navigation container border." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Navigation tabs container background." - } - }, - "pipeline": { - "arrow": { - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for pipeline connection arrows. Defines the visual path between pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", - "$description": "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", - "$description": "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements." - }, - "border": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", - "$description": "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", - "$description": "Animated gradient border for running pipeline states. Provides visual indication of active processing." - } - }, - "error": { - "border": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution." - } - }, - "completed": { - "$type": "color", - "$value": "{colors.cyan.400}", - "$description": "Border color for completed pipeline states. Indicates successful pipeline execution." - } - }, - "card-canvas": { - "1": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container." - } - }, - "2": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization." - } - } - }, - "background": { - "dotes": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Refers to the dotted pattern visible in the background of the workspace." - } - } - }, - "sidebar": { - "background": { - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Background color for navigation components. Creates a consistent foundation for navigation elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for navigation components. Creates visual boundaries and separation from adjacent content." - }, - "separator": { - "$type": "color", - "$value": "{border.3}", - "$description": "Color for separators between navigation sections. Creates visual organization within the navigation structure." - }, - "hover": { - "$type": "color", - "$value": "{state.hover}", - "$description": "Hover state for navigation items." - }, - "selected": { - "$type": "color", - "$value": "{state.selected}", - "$description": "Selected state for navigation items." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected navigation items. Provides readable but less emphasized styling for available options." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected navigation items. Increases contrast to highlight the current location." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected navigation items. Creates stronger visual indication of the current selection." - } - } - }, - "logo": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for Logo in sidebar navigation." - }, - "icon": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Icon color for Logo in sidebar navigation." - } - }, - "search": { - "background": { - "$type": "color", - "$value": "{component.sidebar.background}", - "$description": "Search input specific background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Search input specific border on sidebar navigation." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Search input specific placeholder on sidebar navigation." - }, - "btn": { - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Search input specific button background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Search input specific button border on sidebar navigation." - }, - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Search input specific button text on sidebar navigation." - } - } - }, - "footer": { - "username": { - "$type": "color", - "$value": "{text.1}", - "$description": "Username in the footer sidebar navigation menu." - }, - "data": { - "$type": "color", - "$value": "{text.3}", - "$description": "User data in the footer sidebar navigation menu." - } - } - }, - "scrollbar": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability." - } - }, - "selection": { - "unselected": { - "item": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected state in selection controls. Creates visual distinction from selected items." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "item": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Color for selected items in selection controls. Creates high contrast against selected background state." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for selected state in selection controls. Creates strong visual indication of active selection." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling." - } - } - }, - "separator": { - "background": { - "$type": "color", - "$value": "{border.3}", - "$description": "Background color for separator elements. Creates visual division between content sections with a subtle line or space." - } - }, - "skeleton": { - "background": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", - "$description": "Animation color that sweeps across skeleton elements. Creates a \"shimmer\" effect indicating content loading states." - } - }, - "slider": { - "track": { - "base": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for slider tracks. Represents the full range of available values in an unselected state." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.400}", - "$description": "Filled portion color for slider tracks. Visually represents the selected value or range within the track." - } - }, - "track-segments": { - "base": { - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.800}", - "$description": "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range." - } - }, - "handle": { - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for slider handles. Creates a distinct, interactive element for adjusting values." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Border color for slider handles. Provides definition and contrast for the interactive control." - } - } - }, - "status-indicator": { - "completed": { - "$type": "color", - "$value": "{colors.cyan.400}", - "$description": "Color for success status indicators. Communicates completed or positive states." - }, - "cancelled": { - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Color for danger status indicators. Communicates error or critical warning states." - }, - "warning": { - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Color for warning status indicators. Communicates caution or potential issue states." - }, - "running": { - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Color for running status indicators. Communicates active or in-progress operations." - }, - "merged": { - "$type": "color", - "$value": "{colors.cyan.400}", - "$description": "Color for merged status indicators. Communicates successful integration or completion in version control contexts." - }, - "action-required": { - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Color for action-required status indicators. Communicates that user attention or intervention is needed." - }, - "waiting": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Color for pending status indicators. Communicates in waiting states." - } - }, - "switch": { - "unselected": { - "thumb": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for the unselected state of switch controls. Creates visual distinction from the selected state." - } - }, - "selected": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track." - }, - "background": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background color for the selected state of switch controls. Creates strong visual indication of active state." - } - } - }, - "table": { - "header": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for table header cells. Ensures readability of column labels and titles." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for table header rows. Creates visual distinction between headers and data rows." - } - }, - "row": { - "alternate-background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for alternate table rows. Improves readability by differentiating adjacent rows." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for table rows. Provides subtle separation between data rows." - } - }, - "cell": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for table cell content. Ensures high readability of tabular data." - } - } - }, - "tabs": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for the tabs container. Creates a consistent foundation for tab elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tab containers and separators. Provides subtle definition for tab boundaries." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected tab items. Creates visual distinction from the active tab." - }, - "border": { - "$type": "color", - "$value": "{component.tabs.item.unselected.background}", - "$description": "Border color for unselected tab items. Maintains consistent styling with the tab background." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for the selected tab item. Increases contrast to highlight the active tab." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for the selected tab item. Creates strong visual indication of the active tab." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for the selected tab item. Reinforces the active state with defined boundaries." - } - } - } - }, - "tag": { - "blue": { - "text": { - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Text color for blue tags. Ensures readability while maintaining the blue color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.900}", - "$description": "Background color for blue tags. Creates a distinct surface with blue theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.950}", - "$description": "Subtle background variation for blue tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.blue.background}", - "$description": "Border color for blue tags." - } - }, - "brown": { - "text": { - "$type": "color", - "$value": "{colors.brown.300}", - "$description": "Text color for brown tags. Ensures readability while maintaining the brown color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.brown.900}", - "$description": "Background color for brown tags. Creates a distinct surface with brown theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.brown.950}", - "$description": "Subtle background variation for brown tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.brown.background}", - "$description": "Border color for brown tags." - } - }, - "cyan": { - "text": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Text color for cyan tags. Ensures readability while maintaining the cyan color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.900}", - "$description": "Background color for cyan tags. Creates a distinct surface with cyan theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.950}", - "$description": "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.cyan.background}", - "$description": "Border color for cyan tags." - } - }, - "green": { - "text": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Text color for green tags, replaced with cyan for tritanopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.900}", - "$description": "Background color for green tags, replaced with cyan for tritanopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.950}", - "$description": "Subtle background variation for green tags, replaced with cyan for tritanopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.green.background}", - "$description": "Border color for green tags, replaced with cyan." - } - }, - "indigo": { - "text": { - "$type": "color", - "$value": "{colors.indigo.300}", - "$description": "Text color for indigo tags. Ensures readability while maintaining the indigo color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.indigo.900}", - "$description": "Background color for indigo tags. Creates a distinct surface with indigo theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.indigo.950}", - "$description": "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.indigo.background}", - "$description": "Border color for indigo tags." - } - }, - "lime": { - "text": { - "$type": "color", - "$value": "{colors.lime.300}", - "$description": "Text color for lime tags. Ensures readability while maintaining the lime color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.lime.900}", - "$description": "Background color for lime tags. Creates a distinct surface with lime theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.lime.950}", - "$description": "Subtle background variation for lime tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.lime.background}", - "$description": "Border color for lime tags." - } - }, - "mint": { - "text": { - "$type": "color", - "$value": "{colors.mint.300}", - "$description": "Text color for mint tags. Ensures readability while maintaining the mint color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.mint.900}", - "$description": "Background color for mint tags. Creates a distinct surface with mint theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.mint.950}", - "$description": "Subtle background variation for mint tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.mint.background}", - "$description": "Border color for mint tags." - } - }, - "orange": { - "text": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Text color for orange tags. Ensures readability while maintaining the orange color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.900}", - "$description": "Background color for orange tags. Creates a distinct surface with orange theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.950}", - "$description": "Subtle background variation for orange tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.orange.background}", - "$description": "Border color for orange tags." - } - }, - "pink": { - "text": { - "$type": "color", - "$value": "{colors.pink.300}", - "$description": "Text color for pink tags. Ensures readability while maintaining the pink color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.pink.900}", - "$description": "Background color for pink tags. Creates a distinct surface with pink theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.pink.950}", - "$description": "Subtle background variation for pink tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.pink.background}", - "$description": "Border color for pink tags." - } - }, - "purple": { - "text": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Text color for purple tags, replaced with cyan for tritanopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.900}", - "$description": "Background color for purple tags, replaced with cyan for tritanopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.950}", - "$description": "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.purple.background}", - "$description": "Border color for purple tags, replaced with cyan." - } - }, - "red": { - "text": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Text color for red tags. Ensures readability while maintaining the red color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.red.900}", - "$description": "Background color for red tags. Creates a distinct surface with red theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.red.950}", - "$description": "Subtle background variation for red tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.red.background}", - "$description": "Border color for red tags." - } - }, - "violet": { - "text": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Text color for violet tags, replaced with cyan for tritanopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.900}", - "$description": "Background color for violet tags, replaced with cyan for tritanopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.950}", - "$description": "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.violet.background}", - "$description": "Border color for violet tags, replaced with cyan." - } - }, - "yellow": { - "text": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Text color for yellow tags, replaced with orange for tritanopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.900}", - "$description": "Background color for yellow tags, replaced with orange for tritanopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.950}", - "$description": "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.yellow.background}", - "$description": "Border color for yellow tags, replaced with orange." - } - }, - "gray": { - "text": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Text color for gray tags. Ensures readability while maintaining the gray color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for gray tags. Creates a distinct surface with gray theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Subtle background variation for gray tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.gray.background}", - "$description": "Border color for gray tags." - } - } - }, - "toast": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational toast notifications. Ensures high visibility for the notification headline." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational toast notifications. Provides readable contrast for notification content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational toast notifications. Creates visual distinction from UI content beneath." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational toast notifications. Subtly defines the notification's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Title text color for danger toast notifications. Provides maximum contrast against the error background." - }, - "description": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Description text color for danger toast notifications. Ensures readability of critical information." - }, - "background": { - "$type": "color", - "$value": "{colors.red.700}", - "$description": "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings." - }, - "border": { - "$type": "color", - "$value": "{component.toast.danger.background}", - "$description": "Border color for danger toast notifications. Reinforces the critical nature of the notification message." - } - } - }, - "tooltip": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for tooltip content. Ensures readability of helpful contextual information." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - } - } - }, - "shadow": { - "0": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "0", - "blur": "0", - "spread": "0", - "color": "{shadow-color.0}", - "type": "dropShadow" - }, - "$description": "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile." - }, - "1": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "1", - "blur": "2", - "spread": "0", - "color": "{shadow-color.1}", - "type": "dropShadow" - }, - "$description": "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements." - }, - "2": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "1", - "blur": "3", - "spread": "0", - "color": "{shadow-color.2}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "1", - "blur": "2", - "spread": "-1", - "color": "{shadow-color.2}", - "type": "dropShadow" - } - ], - "$description": "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state." - }, - "3": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-1", - "color": "{shadow-color.3}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "2", - "blur": "4", - "spread": "-2", - "color": "{shadow-color.3}", - "type": "dropShadow" - } - ], - "$description": "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover." - }, - "4": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "10", - "blur": "15", - "spread": "-3", - "color": "{shadow-color.4}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-4", - "color": "{shadow-color.4}", - "type": "dropShadow" - } - ], - "$description": "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns." - }, - "5": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "20", - "blur": "25", - "spread": "-5", - "color": "{shadow-color.5}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "8", - "blur": "10", - "spread": "-6", - "color": "{shadow-color.5}", - "type": "dropShadow" - } - ], - "$description": "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections." - }, - "6": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "25", - "blur": "50", - "spread": "-12", - "color": "{shadow-color.6}", - "type": "dropShadow" - }, - "$description": "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation." - }, - "inner": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "2", - "blur": "4", - "spread": "0", - "color": "{shadow-color.inner}", - "type": "innerShadow" - }, - "$description": "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields." - } - }, - "shadow-color": { - "0": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Transparent shadow color. Used when no shadow effect is desired." - }, - "1": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Light shadow color with 60% opacity. Creates subtle depth for small UI elements." - }, - "2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Medium shadow color with 60% opacity. Provides balanced depth for common UI components." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Medium shadow color with 50% opacity. Creates moderate depth for elevated components." - }, - "4": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Deep shadow color with 50% opacity. Provides significant depth for floating elements." - }, - "5": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content." - }, - "6": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements." - }, - "inner": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states." - } - }, - "ring": { - "focus": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "2", - "color": "{background.1}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "4", - "color": "{border.focus}", - "type": "dropShadow" - } - ], - "$description": "Focus ring effect with background offset and accent border." - } - }, - "gradient": { - "ai": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.yellow.100}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pink.200}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.orange.300}" - }, - "gradient-stop-4": { - "$type": "color", - "$value": "{colors.cyan.200}" - } - }, - "skeleton": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - }, - "pipeline": { - "running": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.orange.200}" - }, - "gradient-stop-2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.orange.200}" - } - }, - "arrows": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.blue.300}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{border.1}" - } - }, - "card": { - "background": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.900}" - } - }, - "border": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - } - }, - "widget": { - "number": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.200}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.600}" - } - }, - "blob": { - "big": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.950}" - } - }, - "small": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - } - } - } - } - }, - "iconStrokeWidth": { - "xxs": { - "$type": "borderWidth", - "$value": "1.1" - }, - "xs": { - "$type": "borderWidth", - "$value": "1" - }, - "sm": { - "$type": "borderWidth", - "$value": "1.1" - }, - "default": { - "$type": "borderWidth", - "$value": "1.1" - }, - "md": { - "$type": "borderWidth", - "$value": "1.4" - }, - "lg": { - "$type": "borderWidth", - "$value": "2" - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/mode/dark/dimmer.json b/packages/ui/design-tokens/mode/dark/dimmer.json deleted file mode 100644 index 336d293c86..0000000000 --- a/packages/ui/design-tokens/mode/dark/dimmer.json +++ /dev/null @@ -1,2333 +0,0 @@ -{ - "background": { - "1": { - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.1000}", - "$description": "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers." - } - }, - "text": { - "1": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders." - }, - "accent": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements." - }, - "success": { - "$type": "color", - "$value": "{colors.green.300}", - "$description": "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications." - } - }, - "border": { - "1": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows." - }, - "focus": { - "$type": "color", - "$value": "{brand.color.600}", - "$description": "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators." - }, - "success": { - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.600}", - "$description": "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements." - } - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item." - }, - "disabled": { - "text": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries." - } - } - }, - "component": { - "accordion": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for accordion content. Applied to the expandable text within accordion panels." - }, - "chevron": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for accordion items. Provides visual separation between accordion panels." - } - }, - "alert": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational alerts. Ensures high visibility for the alert heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational alerts. Provides readable contrast for alert content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational alerts. Creates visual distinction from surrounding content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational alerts. Subtly defines the alert's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.red.100}", - "$description": "Text color for danger alerts. Communicates critical information through high-contrast red text." - }, - "description": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Description text color for danger alerts. Ensures readability while maintaining the error state styling." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger alerts. Creates subtle but recognizable error state styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger alerts. Provides definition for error state alerts." - } - } - }, - "avatar": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for avatar initials or text. Ensures visibility against the avatar background." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for avatar components. Provides contrast for text or image content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for avatars. Creates subtle definition around the avatar element." - } - }, - "badge": { - "default": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for secondary badges. Provides readable contrast on secondary badge styling." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for secondary badges. Creates less prominent badge styling for secondary information." - }, - "border": { - "$type": "color", - "$value": "{component.badge.default.background}", - "$description": "Border color for secondary badges. Matches background for clean, cohesive appearance." - } - }, - "neutral": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for outline badges. Ensures readability for badges with transparent backgrounds." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Border color for outline badges. Creates definition for badges without background fill." - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.green.300}", - "$description": "Text color for success badges. Communicates positive status through readable green text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.300}", - "$description": "Border color for success badges. Provides subtle definition for success state indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Background color for success badges. Creates a subtle but recognizable success indicator." - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Text color for danger badges. Communicates error or warning status with high visibility." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger badges. Creates definition for error or warning indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger badges. Provides subtle visual indication of error states." - } - }, - "warning": { - "text": { - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Text color for warning badges. Signals caution states with readable amber text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Border color for warning badges. Defines the boundary of caution status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.500}", - "$description": "Background color for warning badges. Creates subtle but recognizable caution indicators." - } - }, - "running": { - "text": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Text color for running state badges. Indicates active or in-progress operations." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for running state badges. Defines the boundary of active status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background color for running state badges. Creates subtle visual indication of in-progress states." - } - }, - "merged": { - "text": { - "$type": "color", - "$value": "{colors.purple.300}", - "$description": "Text color for merged state badges. Indicates completed merge actions in version control contexts." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.purple.300}", - "$description": "Border color for merged state badges. Defines the boundary of merge status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.purple.500}", - "$description": "Background color for merged state badges. Creates subtle but recognizable merge indicators." - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-related badges. Ensures high contrast against AI badge gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "breadcrumb": { - "item-inactive": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps." - }, - "item-current": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy." - }, - "separator": { - "$type": "color", - "$value": "{state.disabled.text}", - "$description": "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items." - } - }, - "btn": { - "primary": { - "text": { - "$type": "color", - "$value": "{brand.onColor.600}", - "$description": "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements." - }, - "background": { - "$type": "color", - "$value": "{brand.color.600}", - "$description": "Background color for primary action buttons. Creates emphasis for the most important action in a given context." - }, - "border": { - "$type": "color", - "$value": "{component.btn.primary.background}", - "$description": "Border color for primary action buttons. Matches background for clean, cohesive appearance." - } - }, - "secondary": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions." - }, - "border": { - "$type": "color", - "$value": "{component.btn.secondary.background}", - "$description": "Border color for secondary action buttons. Matches background for clean, cohesive appearance." - } - }, - "outline": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected outline buttons. Creates subtle emphasis for button icons." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for unselected outline buttons. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected outline buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected outline buttons. Increases visibility for active button states." - }, - "border": { - "$type": "color", - "$value": "{borderWidth.1}", - "$description": "Border color for selected outline buttons. Creates stronger visual indication of the active state." - } - } - }, - "ghost": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected ghost buttons. Provides readable contrast for minimal styling." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected ghost buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected ghost buttons. Increases visibility for active button states." - } - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.green.300}", - "$description": "Text color for success buttons. Communicates positive actions through readable green text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Background color for success buttons. Creates subtle but recognizable positive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.300}", - "$description": "Border color for success buttons. Provides definition for positive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Hover state background color for success buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger buttons. Creates subtle but recognizable destructive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger buttons. Provides definition for destructive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Hover state background color for danger buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for AI-powered buttons." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for card components. Creates a distinct surface that appears elevated from the page background." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content." - } - }, - "dialog": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dialog content. Provides readable contrast for the modal's primary text content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dialog components." - }, - "backdrop": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." - } - }, - "dropdown": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for dropdown menus. Creates a distinct surface for selectable options." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dropdown menus container." - }, - "item": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dropdown menu items. Ensures readability of selectable options." - }, - "delete": { - "text": { - "$type": "color", - "$value": "{text.danger}", - "$description": "Text color for dropdown menu delete-item." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Specific hover state color for dropdown delete-item." - } - } - } - } - }, - "diff": { - "grey": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent." - }, - "add-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Green background highlighting newly added code lines while maintaining readability." - }, - "add-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Background for line numbers of added code, providing visual connection to added content." - }, - "add-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Stronger emphasis color for specific character changes within added lines." - }, - "add-widget": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background for interactive UI elements related to added content." - }, - "add-widget-color": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text/icon color for add-related interactive elements, ensuring readability." - }, - "del-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Red background highlighting removed code lines without causing eye strain." - }, - "del-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background for line numbers of deleted code, connecting numbers to removed content." - }, - "del-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Stronger emphasis color for specific character changes within deleted lines." - }, - "plain-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral background for unchanged code that allows modified content to stand out." - }, - "plain-lineNumber": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for line numbers of unchanged code, maintaining visual rhythm." - }, - "plain-lineNumber-color": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unchanged line numbers, visually subdued compared to changed content." - }, - "empty-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for placeholder spaces and empty lines, maintaining visual continuity." - }, - "hunk-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for diff section headers ('hunks') that indicate which part of the file is displayed." - }, - "hunk-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for line numbers in section headers." - }, - "hunk-content-color": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for section header content showing file position information." - }, - "expand-content": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background for controls that expand/collapse code sections to show additional context." - } - }, - "input": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for input field content. Ensures readability of user-entered information." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for input fields. Creates a distinct surface for user interaction and data entry." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for input fields. Defines the input area with a visible boundary for improved usability." - } - }, - "label": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for form labels and field identifiers. Ensures high contrast for important contextual information." - } - }, - "link": { - "default": { - "$type": "color", - "$value": "{text.accent}", - "$description": "Default color for text links. Creates distinct visual identification of interactive text elements." - }, - "visited": { - "$type": "color", - "$value": "{colors.purple.400}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." - } - }, - "nav-tabs": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Unselected tab item text." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Selected tab item text." - }, - "border": { - "$type": "color", - "$value": "{border.focus}", - "$description": "Selected tab item border." - } - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Navigation container border." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Navigation tabs container background." - } - }, - "pipeline": { - "arrow": { - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for pipeline connection arrows. Defines the visual path between pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", - "$description": "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", - "$description": "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements." - }, - "border": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", - "$description": "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", - "$description": "Animated gradient border for running pipeline states. Provides visual indication of active processing." - } - }, - "error": { - "border": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution." - } - }, - "completed": { - "border": { - "$type": "color", - "$value": "{colors.green.300}", - "$description": "Border color for completed pipeline states. Indicates successful pipeline execution." - } - } - }, - "card-canvas": { - "1": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container." - } - }, - "2": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization." - } - } - }, - "background": { - "dotes": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Refers to the dotted pattern visible in the background of the workspace." - } - } - }, - "sidebar": { - "background": { - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Background color for navigation components. Creates a consistent foundation for navigation elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for navigation components. Creates visual boundaries and separation from adjacent content." - }, - "separator": { - "$type": "color", - "$value": "{border.3}", - "$description": "Color for separators between navigation sections. Creates visual organization within the navigation structure." - }, - "hover": { - "$type": "color", - "$value": "{state.hover}", - "$description": "Hover state for navigation items." - }, - "selected": { - "$type": "color", - "$value": "{state.selected}", - "$description": "Selected state for navigation items." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected navigation items. Provides readable but less emphasized styling for available options." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected navigation items. Increases contrast to highlight the current location." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected navigation items. Creates stronger visual indication of the current selection." - } - } - }, - "logo": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for Logo in sidebar navigation." - }, - "icon": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Icon color for Logo in sidebar navigation." - } - }, - "search": { - "background": { - "$type": "color", - "$value": "{component.sidebar.background}", - "$description": "Search input specific background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Search input specific border on sidebar navigation." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Search input specific placeholder on sidebar navigation." - }, - "btn": { - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Search input specific button background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Search input specific button border on sidebar navigation." - }, - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Search input specific button text on sidebar navigation." - } - } - }, - "footer": { - "username": { - "$type": "color", - "$value": "{text.1}", - "$description": "Username in the footer sidebar navigation menu." - }, - "data": { - "$type": "color", - "$value": "{text.3}", - "$description": "User data in the footer sidebar navigation menu." - } - } - }, - "scrollbar": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability." - } - }, - "selection": { - "unselected": { - "item": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected state in selection controls. Creates visual distinction from selected items." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "item": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Color for selected items in selection controls. Creates high contrast against selected background state." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for selected state in selection controls. Creates strong visual indication of active selection." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling." - } - } - }, - "separator": { - "background": { - "$type": "color", - "$value": "{border.3}", - "$description": "Background color for separator elements. Creates visual division between content sections with a subtle line or space." - } - }, - "skeleton": { - "background": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", - "$description": "Animation color that sweeps across skeleton elements. Creates a \"shimmer\" effect indicating content loading states." - } - }, - "slider": { - "track": { - "base": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for slider tracks. Represents the full range of available values in an unselected state." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.400}", - "$description": "Filled portion color for slider tracks. Visually represents the selected value or range within the track." - } - }, - "track-segments": { - "base": { - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.800}", - "$description": "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range." - } - }, - "handle": { - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for slider handles. Creates a distinct, interactive element for adjusting values." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Border color for slider handles. Provides definition and contrast for the interactive control." - } - } - }, - "status-indicator": { - "completed": { - "$type": "color", - "$value": "{colors.green.400}", - "$description": "Color for success status indicators. Communicates completed or positive states." - }, - "cancelled": { - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Color for danger status indicators. Communicates error or critical warning states." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.400}", - "$description": "Color for warning status indicators. Communicates caution or potential issue states." - }, - "running": { - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Color for running status indicators. Communicates active or in-progress operations." - }, - "merged": { - "$type": "color", - "$value": "{colors.purple.400}", - "$description": "Color for merged status indicators. Communicates successful integration or completion in version control contexts." - }, - "action-required": { - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Color for action-required status indicators. Communicates that user attention or intervention is needed. " - }, - "waiting": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Color for pending status indicators. Communicates in waiting states." - } - }, - "switch": { - "unselected": { - "thumb": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for the unselected state of switch controls. Creates visual distinction from the selected state." - } - }, - "selected": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track." - }, - "background": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background color for the selected state of switch controls. Creates strong visual indication of active state." - } - } - }, - "table": { - "header": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for table header cells. Ensures readability of column labels and titles." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for table header rows. Creates visual distinction between headers and data rows." - } - }, - "row": { - "alternate-background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for alternate table rows. Improves readability by differentiating adjacent rows." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for table rows. Provides subtle separation between data rows." - } - }, - "cell": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for table cell content. Ensures high readability of tabular data." - } - } - }, - "tabs": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for the tabs container. Creates a consistent foundation for tab elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tab containers and separators. Provides subtle definition for tab boundaries." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected tab items. Creates visual distinction from the active tab." - }, - "border": { - "$type": "color", - "$value": "{component.tabs.item.unselected.background}", - "$description": "Border color for unselected tab items. Maintains consistent styling with the tab background." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for the selected tab item. Increases contrast to highlight the active tab." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for the selected tab item. Creates strong visual indication of the active tab." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for the selected tab item. Reinforces the active state with defined boundaries." - } - } - } - }, - "tag": { - "blue": { - "text": { - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Text color for blue tags. Ensures readability while maintaining the blue color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.900}", - "$description": "Background color for blue tags. Creates a distinct surface with blue theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.950}", - "$description": "Subtle background variation for blue tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.blue.background}", - "$description": "Border color for blue tags. " - } - }, - "brown": { - "text": { - "$type": "color", - "$value": "{colors.brown.300}", - "$description": "Text color for brown tags. Ensures readability while maintaining the brown color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.brown.900}", - "$description": "Background color for brown tags. Creates a distinct surface with brown theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.brown.950}", - "$description": "Subtle background variation for brown tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.brown.background}", - "$description": "Border color for brown tags. " - } - }, - "cyan": { - "text": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Text color for cyan tags. Ensures readability while maintaining the cyan color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.900}", - "$description": "Background color for cyan tags. Creates a distinct surface with cyan theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.950}", - "$description": "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.cyan.background}", - "$description": "Border color for cyan tags." - } - }, - "green": { - "text": { - "$type": "color", - "$value": "{colors.green.300}", - "$description": "Text color for green tags. Ensures readability while maintaining the green color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.green.900}", - "$description": "Background color for green tags. Creates a distinct surface with green theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.green.950}", - "$description": "Subtle background variation for green tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.green.background}", - "$description": "Border color for green tags." - } - }, - "indigo": { - "text": { - "$type": "color", - "$value": "{colors.indigo.300}", - "$description": "Text color for indigo tags. Ensures readability while maintaining the indigo color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.indigo.900}", - "$description": "Background color for indigo tags. Creates a distinct surface with indigo theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.indigo.950}", - "$description": "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.indigo.background}", - "$description": "Border color for indigo tags." - } - }, - "lime": { - "text": { - "$type": "color", - "$value": "{colors.lime.300}", - "$description": "Text color for lime tags. Ensures readability while maintaining the lime color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.lime.900}", - "$description": "Background color for lime tags. Creates a distinct surface with lime theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.lime.950}", - "$description": "Subtle background variation for lime tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.lime.background}", - "$description": "Border color for lime tags." - } - }, - "mint": { - "text": { - "$type": "color", - "$value": "{colors.mint.300}", - "$description": "Text color for mint tags. Ensures readability while maintaining the mint color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.mint.900}", - "$description": "Background color for mint tags. Creates a distinct surface with mint theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.mint.950}", - "$description": "Subtle background variation for mint tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.mint.background}", - "$description": "Border color for mint tags." - } - }, - "orange": { - "text": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Text color for orange tags. Ensures readability while maintaining the orange color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.900}", - "$description": "Background color for orange tags. Creates a distinct surface with orange theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.950}", - "$description": "Subtle background variation for orange tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.orange.background}", - "$description": "Border color for orange tags." - } - }, - "pink": { - "text": { - "$type": "color", - "$value": "{colors.pink.300}", - "$description": "Text color for pink tags. Ensures readability while maintaining the pink color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.pink.900}", - "$description": "Background color for pink tags. Creates a distinct surface with pink theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.pink.950}", - "$description": "Subtle background variation for pink tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.pink.background}", - "$description": "Border color for pink tags." - } - }, - "purple": { - "text": { - "$type": "color", - "$value": "{colors.purple.300}", - "$description": "Text color for purple tags. Ensures readability while maintaining the purple color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.purple.900}", - "$description": "Background color for purple tags. Creates a distinct surface with purple theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.purple.950}", - "$description": "Subtle background variation for purple tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.purple.background}", - "$description": "Border color for purple tags." - } - }, - "red": { - "text": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Text color for red tags. Ensures readability while maintaining the red color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.red.900}", - "$description": "Background color for red tags. Creates a distinct surface with red theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.red.950}", - "$description": "Subtle background variation for red tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.red.background}", - "$description": "Border color for red tags." - } - }, - "violet": { - "text": { - "$type": "color", - "$value": "{colors.violet.300}", - "$description": "Text color for violet tags. Ensures readability while maintaining the violet color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.violet.900}", - "$description": "Background color for violet tags. Creates a distinct surface with violet theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.violet.950}", - "$description": "Subtle background variation for violet tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.violet.background}", - "$description": "Border color for violet tags." - } - }, - "yellow": { - "text": { - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Text color for yellow tags. Ensures readability while maintaining the yellow color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.yellow.900}", - "$description": "Background color for yellow tags. Creates a distinct surface with yellow theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.yellow.950}", - "$description": "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.yellow.background}", - "$description": "Border color for yellow tags." - } - }, - "gray": { - "text": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Text color for gray tags. Ensures readability while maintaining the gray color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for gray tags. Creates a distinct surface with gray theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Subtle background variation for gray tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.gray.background}", - "$description": "Border color for gray tags." - } - } - }, - "toast": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational toast notifications. Ensures high visibility for the notification headline." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational toast notifications. Provides readable contrast for notification content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational toast notifications. Creates visual distinction from UI content beneath." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational toast notifications. Subtly defines the notification's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Title text color for danger toast notifications. Provides maximum contrast against the error background." - }, - "description": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Description text color for danger toast notifications. Ensures readability of critical information." - }, - "background": { - "$type": "color", - "$value": "{colors.red.700}", - "$description": "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings." - }, - "border": { - "$type": "color", - "$value": "{component.toast.danger.background}", - "$description": "Border color for danger toast notifications. Reinforces the critical nature of the notification message." - } - } - }, - "tooltip": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for tooltip content. Ensures readability of helpful contextual information." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - } - } - }, - "shadow": { - "0": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "0", - "blur": "0", - "spread": "0", - "color": "{shadow-color.0}", - "type": "dropShadow" - }, - "$description": "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile." - }, - "1": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "1", - "blur": "2", - "spread": "0", - "color": "{shadow-color.1}", - "type": "dropShadow" - }, - "$description": "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements." - }, - "2": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "1", - "blur": "3", - "spread": "0", - "color": "{shadow-color.2}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "1", - "blur": "2", - "spread": "-1", - "color": "{shadow-color.2}", - "type": "dropShadow" - } - ], - "$description": "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state." - }, - "3": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-1", - "color": "{shadow-color.3}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "2", - "blur": "4", - "spread": "-2", - "color": "{shadow-color.3}", - "type": "dropShadow" - } - ], - "$description": "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover." - }, - "4": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "10", - "blur": "15", - "spread": "-3", - "color": "{shadow-color.4}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-4", - "color": "{shadow-color.4}", - "type": "dropShadow" - } - ], - "$description": "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns." - }, - "5": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "20", - "blur": "25", - "spread": "-5", - "color": "{shadow-color.5}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "8", - "blur": "10", - "spread": "-6", - "color": "{shadow-color.5}", - "type": "dropShadow" - } - ], - "$description": "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections." - }, - "6": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "25", - "blur": "50", - "spread": "-12", - "color": "{shadow-color.6}", - "type": "dropShadow" - }, - "$description": "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation." - }, - "inner": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "2", - "blur": "4", - "spread": "0", - "color": "{shadow-color.inner}", - "type": "innerShadow" - }, - "$description": "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields." - } - }, - "shadow-color": { - "0": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Transparent shadow color. Used when no shadow effect is desired." - }, - "1": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Light shadow color with 60% opacity. Creates subtle depth for small UI elements." - }, - "2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Medium shadow color with 60% opacity. Provides balanced depth for common UI components." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Medium shadow color with 50% opacity. Creates moderate depth for elevated components." - }, - "4": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Deep shadow color with 50% opacity. Provides significant depth for floating elements." - }, - "5": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content." - }, - "6": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements." - }, - "inner": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states." - } - }, - "ring": { - "focus": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "2", - "color": "{background.1}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "4", - "color": "{border.focus}", - "type": "dropShadow" - } - ], - "$description": "Focus ring effect with background offset and accent border." - } - }, - "gradient": { - "ai": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.yellow.100}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pink.200}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.purple.300}" - }, - "gradient-stop-4": { - "$type": "color", - "$value": "{colors.cyan.200}" - } - }, - "skeleton": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - }, - "pipeline": { - "running": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.orange.200}" - }, - "gradient-stop-2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.orange.200}" - } - }, - "arrows": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.blue.300}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{border.1}" - } - }, - "card": { - "background": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.900}" - } - }, - "border": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - } - }, - "widget": { - "number": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.200}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.600}" - } - }, - "blob": { - "big": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.950}" - } - }, - "small": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - } - } - } - } - }, - "iconStrokeWidth": { - "xxs": { - "$type": "borderWidth", - "$value": "1.1" - }, - "xs": { - "$type": "borderWidth", - "$value": "1" - }, - "sm": { - "$type": "borderWidth", - "$value": "1.1" - }, - "default": { - "$type": "borderWidth", - "$value": "1.1" - }, - "md": { - "$type": "borderWidth", - "$value": "1.4" - }, - "lg": { - "$type": "borderWidth", - "$value": "2" - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/mode/dark/high-contrast-deuteranopia.json b/packages/ui/design-tokens/mode/dark/high-contrast-deuteranopia.json deleted file mode 100644 index 46a5f06e9b..0000000000 --- a/packages/ui/design-tokens/mode/dark/high-contrast-deuteranopia.json +++ /dev/null @@ -1,2342 +0,0 @@ -{ - "background": { - "1": { - "$type": "color", - "$value": "{colors.chrome.1000}", - "$description": "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers." - } - }, - "text": { - "1": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders." - }, - "accent": { - "$type": "color", - "$value": "{brand.color.200}", - "$description": "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements." - }, - "success": { - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.200}", - "$description": "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications." - } - }, - "border": { - "1": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.7", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows." - }, - "focus": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators." - }, - "success": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements." - } - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item." - }, - "disabled": { - "text": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries." - } - } - }, - "component": { - "accordion": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for accordion content. Applied to the expandable text within accordion panels." - }, - "chevron": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for accordion items. Provides visual separation between accordion panels." - } - }, - "alert": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational alerts. Ensures high visibility for the alert heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational alerts. Provides readable contrast for alert content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational alerts. Creates visual distinction from surrounding content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational alerts. Subtly defines the alert's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.orange.100}", - "$description": "Text color for danger alerts. Communicates critical information through high-contrast orange text." - }, - "description": { - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Description text color for danger alerts. Ensures readability while maintaining the error state styling." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background color for danger alerts. Creates subtle but recognizable error state styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for danger alerts. Provides definition for error state alerts." - } - } - }, - "avatar": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for avatar initials or text. Ensures visibility against the avatar background." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for avatar components. Provides contrast for text or image content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for avatars. Creates subtle definition around the avatar element." - } - }, - "badge": { - "default": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for secondary badges. Provides readable contrast on secondary badge styling." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for secondary badges. Creates less prominent badge styling for secondary information." - }, - "border": { - "$type": "color", - "$value": "{component.badge.default.background}", - "$description": "Border color for secondary badges. Matches background for clean, cohesive appearance." - } - }, - "neutral": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for outline badges. Ensures readability for badges with transparent backgrounds." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Border color for outline badges. Creates definition for badges without background fill." - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Text color for success badges. Communicates positive status through readable cyan text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for success badges. Provides subtle definition for success state indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Background color for success badges. Creates a subtle but recognizable success indicator." - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Text color for danger badges. Communicates error or warning status with high visibility." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for danger badges. Creates definition for error or warning indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background color for danger badges. Provides subtle visual indication of error states." - } - }, - "warning": { - "text": { - "$type": "color", - "$value": "{colors.yellow.200}", - "$description": "Text color for warning badges. Signals caution states with readable amber text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Border color for warning badges. Defines the boundary of caution status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.500}", - "$description": "Background color for warning badges. Creates subtle but recognizable caution indicators." - } - }, - "running": { - "text": { - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Text color for running state badges. Indicates active or in-progress operations." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for running state badges. Defines the boundary of active status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background color for running state badges. Creates subtle visual indication of in-progress states." - } - }, - "merged": { - "text": { - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Text color for merged state badges. Indicates completed merge actions in version control contexts." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for merged state badges. Defines the boundary of merge status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Background color for merged state badges. Creates subtle but recognizable merge indicators." - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-related badges. Ensures high contrast against AI badge gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "breadcrumb": { - "item-inactive": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps." - }, - "item-current": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy." - }, - "separator": { - "$type": "color", - "$value": "{state.disabled.text}", - "$description": "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items." - } - }, - "btn": { - "primary": { - "text": { - "$type": "color", - "$value": "{brand.onColor.600}", - "$description": "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements." - }, - "background": { - "$type": "color", - "$value": "{brand.color.600}", - "$description": "Background color for primary action buttons. Creates emphasis for the most important action in a given context." - }, - "border": { - "$type": "color", - "$value": "{component.btn.primary.background}", - "$description": "Border color for primary action buttons. Matches background for clean, cohesive appearance." - } - }, - "secondary": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions." - }, - "border": { - "$type": "color", - "$value": "{component.btn.secondary.background}", - "$description": "Border color for secondary action buttons. Matches background for clean, cohesive appearance." - } - }, - "outline": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected outline buttons. Creates subtle emphasis for button icons." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for unselected outline buttons. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected outline buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected outline buttons. Increases visibility for active button states." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for selected outline buttons. Creates stronger visual indication of the active state." - } - } - }, - "ghost": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected ghost buttons. Provides readable contrast for minimal styling." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected ghost buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected ghost buttons. Increases visibility for active button states." - } - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Text color for success buttons. Communicates positive actions through readable cyan text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Background color for success buttons. Creates subtle but recognizable positive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for success buttons. Provides definition for positive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Hover state background color for success buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background color for danger buttons. Creates subtle but recognizable destructive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for danger buttons. Provides definition for destructive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Hover state background color for danger buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for AI-powered buttons." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for card components. Creates a distinct surface that appears elevated from the page background." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content." - } - }, - "dialog": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dialog content. Provides readable contrast for the modal's primary text content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dialog components." - }, - "backdrop": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." - } - }, - "dropdown": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for dropdown menus. Creates a distinct surface for selectable options." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dropdown menus container." - }, - "item": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dropdown menu items. Ensures readability of selectable options." - }, - "delete": { - "text": { - "$type": "color", - "$value": "{text.danger}", - "$description": "Text color for dropdown menu delete-item." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Specific hover state color for dropdown delete-item." - } - } - } - } - }, - "diff": { - "grey": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent." - }, - "add-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Cyan background highlighting newly added code lines while maintaining readability." - }, - "add-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Background for line numbers of added code, providing visual connection to added content." - }, - "add-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Stronger emphasis color for specific character changes within added lines." - }, - "add-widget": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background for interactive UI elements related to added content." - }, - "add-widget-color": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text/icon color for add-related interactive elements, ensuring readability." - }, - "del-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Orange background highlighting removed code lines without causing eye strain." - }, - "del-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background for line numbers of deleted code, connecting numbers to removed content." - }, - "del-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Stronger emphasis color for specific character changes within deleted lines." - }, - "plain-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral background for unchanged code that allows modified content to stand out." - }, - "plain-lineNumber": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for line numbers of unchanged code, maintaining visual rhythm." - }, - "plain-lineNumber-color": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unchanged line numbers, visually subdued compared to changed content." - }, - "empty-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for placeholder spaces and empty lines, maintaining visual continuity." - }, - "hunk-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for diff section headers ('hunks') that indicate which part of the file is displayed." - }, - "hunk-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for line numbers in section headers." - }, - "hunk-content-color": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for section header content showing file position information." - }, - "expand-content": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background for controls that expand/collapse code sections to show additional context." - } - }, - "input": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for input field content. Ensures readability of user-entered information." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for input fields. Creates a distinct surface for user interaction and data entry." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for input fields. Defines the input area with a visible boundary for improved usability." - } - }, - "label": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for form labels and field identifiers. Ensures high contrast for important contextual information." - } - }, - "link": { - "default": { - "$type": "color", - "$value": "{text.accent}", - "$description": "Default color for text links. Creates distinct visual identification of interactive text elements." - }, - "visited": { - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." - } - }, - "nav-tabs": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Unselected tab item text." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Selected tab item text." - }, - "border": { - "$type": "color", - "$value": "{border.focus}", - "$description": "Selected tab item border." - } - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Navigation container border." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Navigation tabs container background." - } - }, - "pipeline": { - "arrow": { - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for pipeline connection arrows. Defines the visual path between pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", - "$description": "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", - "$description": "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements." - }, - "border": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", - "$description": "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", - "$description": "Animated gradient border for running pipeline states. Provides visual indication of active processing." - } - }, - "error": { - "border": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution." - } - }, - "completed": { - "border": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for completed pipeline states. Indicates successful pipeline execution." - } - } - }, - "card-canvas": { - "1": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container." - } - }, - "2": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization." - } - } - }, - "background": { - "dotes": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Refers to the dotted pattern visible in the background of the workspace." - } - } - }, - "sidebar": { - "background": { - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Background color for navigation components. Creates a consistent foundation for navigation elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for navigation components. Creates visual boundaries and separation from adjacent content." - }, - "separator": { - "$type": "color", - "$value": "{border.3}", - "$description": "Color for separators between navigation sections. Creates visual organization within the navigation structure." - }, - "hover": { - "$type": "color", - "$value": "{state.hover}", - "$description": "Hover state for navigation items." - }, - "selected": { - "$type": "color", - "$value": "{state.selected}", - "$description": "Selected state for navigation items." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected navigation items. Provides readable but less emphasized styling for available options." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected navigation items. Increases contrast to highlight the current location." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected navigation items. Creates stronger visual indication of the current selection." - } - } - }, - "logo": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for Logo in sidebar navigation." - }, - "icon": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Icon color for Logo in sidebar navigation." - } - }, - "search": { - "background": { - "$type": "color", - "$value": "{component.sidebar.background}", - "$description": "Search input specific background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Search input specific border on sidebar navigation." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Search input specific placeholder on sidebar navigation." - }, - "btn": { - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Search input specific button background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Search input specific button border on sidebar navigation." - }, - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Search input specific button text on sidebar navigation." - } - } - }, - "footer": { - "username": { - "$type": "color", - "$value": "{text.1}", - "$description": "Username in the footer sidebar navigation menu." - }, - "data": { - "$type": "color", - "$value": "{text.3}", - "$description": "User data in the footer sidebar navigation menu." - } - } - }, - "scrollbar": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability." - } - }, - "selection": { - "unselected": { - "item": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected state in selection controls. Creates visual distinction from selected items." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "item": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Color for selected items in selection controls. Creates high contrast against selected background state." - }, - "background": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background color for selected state in selection controls. Creates strong visual indication of active selection." - }, - "border": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling." - } - } - }, - "separator": { - "background": { - "$type": "color", - "$value": "{border.3}", - "$description": "Background color for separator elements. Creates visual division between content sections with a subtle line or space." - } - }, - "skeleton": { - "background": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", - "$description": "Animation color that sweeps across skeleton elements. Creates a \"shimmer\" effect indicating content loading states." - } - }, - "slider": { - "track": { - "base": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for slider tracks. Represents the full range of available values in an unselected state." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Filled portion color for slider tracks. Visually represents the selected value or range within the track." - } - }, - "track-segments": { - "base": { - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.800}", - "$description": "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range." - } - }, - "handle": { - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for slider handles. Creates a distinct, interactive element for adjusting values." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Border color for slider handles. Provides definition and contrast for the interactive control." - } - } - }, - "status-indicator": { - "completed": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Color for success status indicators. Communicates completed or positive states." - }, - "cancelled": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Color for danger status indicators. Communicates error or critical warning states." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Color for warning status indicators. Communicates caution or potential issue states." - }, - "running": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Color for running status indicators. Communicates active or in-progress operations." - }, - "merged": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Color for merged status indicators. Communicates successful integration or completion in version control contexts." - }, - "action-required": { - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Color for action-required status indicators. Communicates that user attention or intervention is needed." - }, - "waiting": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Color for pending status indicators. Communicates in waiting states." - } - }, - "switch": { - "unselected": { - "thumb": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for the unselected state of switch controls. Creates visual distinction from the selected state." - } - }, - "selected": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track." - }, - "background": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background color for the selected state of switch controls. Creates strong visual indication of active state." - } - } - }, - "table": { - "header": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for table header cells. Ensures readability of column labels and titles." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for table header rows. Creates visual distinction between headers and data rows." - } - }, - "row": { - "alternate-background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for alternate table rows. Improves readability by differentiating adjacent rows." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for table rows. Provides subtle separation between data rows." - } - }, - "cell": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for table cell content. Ensures high readability of tabular data." - } - } - }, - "tabs": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for the tabs container. Creates a consistent foundation for tab elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tab containers and separators. Provides subtle definition for tab boundaries." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected tab items. Creates visual distinction from the active tab." - }, - "border": { - "$type": "color", - "$value": "{component.tabs.item.unselected.background}", - "$description": "Border color for unselected tab items. Maintains consistent styling with the tab background." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for the selected tab item. Increases contrast to highlight the active tab." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for the selected tab item. Creates strong visual indication of the active tab." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for the selected tab item. Reinforces the active state with defined boundaries." - } - } - } - }, - "tag": { - "blue": { - "text": { - "$type": "color", - "$value": "{colors.blue.100}", - "$description": "Text color for blue tags. Ensures readability while maintaining the blue color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.800}", - "$description": "Background color for blue tags. Creates a distinct surface with blue theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.950}", - "$description": "Subtle background variation for blue tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.blue.background}", - "$description": "Border color for blue tags." - } - }, - "brown": { - "text": { - "$type": "color", - "$value": "{colors.brown.100}", - "$description": "Text color for brown tags. Ensures readability while maintaining the brown color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.brown.800}", - "$description": "Background color for brown tags. Creates a distinct surface with brown theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.brown.950}", - "$description": "Subtle background variation for brown tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.brown.background}", - "$description": "Border color for brown tags." - } - }, - "cyan": { - "text": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Text color for cyan tags. Ensures readability while maintaining the cyan color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.800}", - "$description": "Background color for cyan tags. Creates a distinct surface with cyan theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.950}", - "$description": "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.cyan.background}", - "$description": "Border color for cyan tags." - } - }, - "green": { - "text": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Text color for green tags, replaced with cyan for deuteranopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.800}", - "$description": "Background color for green tags, replaced with cyan for deuteranopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.950}", - "$description": "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.green.background}", - "$description": "Border color for green tags, replaced with cyan." - } - }, - "indigo": { - "text": { - "$type": "color", - "$value": "{colors.indigo.100}", - "$description": "Text color for indigo tags. Ensures readability while maintaining the indigo color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.indigo.800}", - "$description": "Background color for indigo tags. Creates a distinct surface with indigo theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.indigo.950}", - "$description": "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.indigo.background}", - "$description": "Border color for indigo tags." - } - }, - "lime": { - "text": { - "$type": "color", - "$value": "{colors.lime.100}", - "$description": "Text color for lime tags. Ensures readability while maintaining the lime color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.lime.800}", - "$description": "Background color for lime tags. Creates a distinct surface with lime theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.lime.950}", - "$description": "Subtle background variation for lime tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.lime.background}", - "$description": "Border color for lime tags." - } - }, - "mint": { - "text": { - "$type": "color", - "$value": "{colors.mint.100}", - "$description": "Text color for mint tags. Ensures readability while maintaining the mint color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.mint.800}", - "$description": "Background color for mint tags. Creates a distinct surface with mint theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.mint.950}", - "$description": "Subtle background variation for mint tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.mint.background}", - "$description": "Border color for mint tags." - } - }, - "orange": { - "text": { - "$type": "color", - "$value": "{colors.orange.100}", - "$description": "Text color for orange tags. Ensures readability while maintaining the orange color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.800}", - "$description": "Background color for orange tags. Creates a distinct surface with orange theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.950}", - "$description": "Subtle background variation for orange tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.orange.background}", - "$description": "Border color for orange tags." - } - }, - "pink": { - "text": { - "$type": "color", - "$value": "{colors.pink.100}", - "$description": "Text color for pink tags. Ensures readability while maintaining the pink color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.pink.800}", - "$description": "Background color for pink tags. Creates a distinct surface with pink theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.pink.950}", - "$description": "Subtle background variation for pink tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.pink.background}", - "$description": "Border color for pink tags." - } - }, - "purple": { - "text": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Text color for purple tags, replaced with cyan for deuteranopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.800}", - "$description": "Background color for purple tags, replaced with cyan for deuteranopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.950}", - "$description": "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.purple.background}", - "$description": "Border color for purple tags, replaced with cyan." - } - }, - "red": { - "text": { - "$type": "color", - "$value": "{colors.orange.100}", - "$description": "Text color for red tags, replaced with orange for deuteranopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.800}", - "$description": "Background color for red tags, replaced with orange for deuteranopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.950}", - "$description": "Subtle background variation for red tags, replaced with orange for deuteranopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.red.background}", - "$description": "Border color for red tags, replaced with orange." - } - }, - "violet": { - "text": { - "$type": "color", - "$value": "{colors.blue.100}", - "$description": "Text color for violet tags, replaced with blue for deuteranopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.800}", - "$description": "Background color for violet tags, replaced with blue for deuteranopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.950}", - "$description": "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.violet.background}", - "$description": "Border color for violet tags, replaced with blue." - } - }, - "yellow": { - "text": { - "$type": "color", - "$value": "{colors.yellow.100}", - "$description": "Text color for yellow tags. Ensures readability while maintaining the yellow color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.yellow.800}", - "$description": "Background color for yellow tags. Creates a distinct surface with yellow theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.yellow.950}", - "$description": "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.yellow.background}", - "$description": "Border color for yellow tags." - } - }, - "gray": { - "text": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Text color for gray tags. Ensures readability while maintaining the gray color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for gray tags. Creates a distinct surface with gray theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Subtle background variation for gray tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.gray.background}", - "$description": "Border color for gray tags." - } - } - }, - "toast": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational toast notifications. Ensures high visibility for the notification headline." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational toast notifications. Provides readable contrast for notification content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational toast notifications. Creates visual distinction from UI content beneath." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational toast notifications. Subtly defines the notification's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Title text color for danger toast notifications. Provides maximum contrast against the error background." - }, - "description": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Description text color for danger toast notifications. Ensures readability of critical information." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.700}", - "$description": "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings." - }, - "border": { - "$type": "color", - "$value": "{component.toast.danger.background}", - "$description": "Border color for danger toast notifications. Reinforces the critical nature of the notification message." - } - } - }, - "tooltip": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for tooltip content. Ensures readability of helpful contextual information." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - } - } - }, - "shadow": { - "0": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "0", - "blur": "0", - "spread": "0", - "color": "{shadow-color.0}", - "type": "dropShadow" - }, - "$description": "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile." - }, - "1": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "1", - "blur": "2", - "spread": "0", - "color": "{shadow-color.1}", - "type": "dropShadow" - }, - "$description": "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements." - }, - "2": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "1", - "blur": "3", - "spread": "0", - "color": "{shadow-color.2}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "1", - "blur": "2", - "spread": "-1", - "color": "{shadow-color.2}", - "type": "dropShadow" - } - ], - "$description": "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state." - }, - "3": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-1", - "color": "{shadow-color.3}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "2", - "blur": "4", - "spread": "-2", - "color": "{shadow-color.3}", - "type": "dropShadow" - } - ], - "$description": "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover." - }, - "4": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "10", - "blur": "15", - "spread": "-3", - "color": "{shadow-color.4}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-4", - "color": "{shadow-color.4}", - "type": "dropShadow" - } - ], - "$description": "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns." - }, - "5": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "20", - "blur": "25", - "spread": "-5", - "color": "{shadow-color.5}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "8", - "blur": "10", - "spread": "-6", - "color": "{shadow-color.5}", - "type": "dropShadow" - } - ], - "$description": "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections." - }, - "6": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "25", - "blur": "50", - "spread": "-12", - "color": "{shadow-color.6}", - "type": "dropShadow" - }, - "$description": "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation." - }, - "inner": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "2", - "blur": "4", - "spread": "0", - "color": "{shadow-color.inner}", - "type": "innerShadow" - }, - "$description": "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields." - } - }, - "shadow-color": { - "0": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Transparent shadow color. Used when no shadow effect is desired." - }, - "1": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Light shadow color with 60% opacity. Creates subtle depth for small UI elements." - }, - "2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Medium shadow color with 60% opacity. Provides balanced depth for common UI components." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Medium shadow color with 50% opacity. Creates moderate depth for elevated components." - }, - "4": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Deep shadow color with 50% opacity. Provides significant depth for floating elements." - }, - "5": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content." - }, - "6": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements." - }, - "inner": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states." - } - }, - "ring": { - "focus": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "2", - "color": "{background.1}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "4", - "color": "{border.focus}", - "type": "dropShadow" - } - ], - "$description": "Focus ring effect with background offset and accent border." - } - }, - "gradient": { - "ai": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.yellow.100}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.orange.200}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.cyan.300}" - }, - "gradient-stop-4": { - "$type": "color", - "$value": "{colors.cyan.200}" - } - }, - "skeleton": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - }, - "pipeline": { - "running": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.orange.200}" - }, - "gradient-stop-2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.orange.200}" - } - }, - "arrows": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.blue.300}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{border.1}" - } - }, - "card": { - "background": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.900}" - } - }, - "border": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - } - }, - "widget": { - "number": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.200}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.600}" - } - }, - "blob": { - "big": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.950}" - } - }, - "small": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - } - } - } - } - }, - "iconStrokeWidth": { - "xxs": { - "$type": "borderWidth", - "$value": "1.1" - }, - "xs": { - "$type": "borderWidth", - "$value": "1" - }, - "sm": { - "$type": "borderWidth", - "$value": "1.1" - }, - "default": { - "$type": "borderWidth", - "$value": "1.1" - }, - "md": { - "$type": "borderWidth", - "$value": "1.4" - }, - "lg": { - "$type": "borderWidth", - "$value": "2" - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/mode/dark/high-contrast-protanopia.json b/packages/ui/design-tokens/mode/dark/high-contrast-protanopia.json deleted file mode 100644 index aa50f0f734..0000000000 --- a/packages/ui/design-tokens/mode/dark/high-contrast-protanopia.json +++ /dev/null @@ -1,2342 +0,0 @@ -{ - "background": { - "1": { - "$type": "color", - "$value": "{colors.chrome.1000}", - "$description": "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers." - } - }, - "text": { - "1": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders." - }, - "accent": { - "$type": "color", - "$value": "{brand.color.200}", - "$description": "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements." - }, - "success": { - "$type": "color", - "$value": "{colors.blue.200}", - "$description": "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.200}", - "$description": "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications." - } - }, - "border": { - "1": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.7", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows." - }, - "focus": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators." - }, - "success": { - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements." - } - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item." - }, - "disabled": { - "text": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries." - } - } - }, - "component": { - "accordion": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for accordion content. Applied to the expandable text within accordion panels." - }, - "chevron": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for accordion items. Provides visual separation between accordion panels." - } - }, - "alert": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational alerts. Ensures high visibility for the alert heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational alerts. Provides readable contrast for alert content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational alerts. Creates visual distinction from surrounding content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational alerts. Subtly defines the alert's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.red.100}", - "$description": "Text color for danger alerts. Communicates critical information through high-contrast red text." - }, - "description": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Description text color for danger alerts. Ensures readability while maintaining the error state styling." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger alerts. Creates subtle but recognizable error state styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger alerts. Provides definition for error state alerts." - } - } - }, - "avatar": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for avatar initials or text. Ensures visibility against the avatar background." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for avatar components. Provides contrast for text or image content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for avatars. Creates subtle definition around the avatar element." - } - }, - "badge": { - "default": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for secondary badges. Provides readable contrast on secondary badge styling." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for secondary badges. Creates less prominent badge styling for secondary information." - }, - "border": { - "$type": "color", - "$value": "{component.badge.default.background}", - "$description": "Border color for secondary badges. Matches background for clean, cohesive appearance." - } - }, - "neutral": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for outline badges. Ensures readability for badges with transparent backgrounds." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Border color for outline badges. Creates definition for badges without background fill." - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.blue.200}", - "$description": "Text color for success badges. Communicates positive status through readable blue text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Border color for success badges. Provides subtle definition for success state indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background color for success badges. Creates a subtle but recognizable success indicator." - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Text color for danger badges. Communicates error or warning status with high visibility." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger badges. Creates definition for error or warning indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger badges. Provides subtle visual indication of error states." - } - }, - "warning": { - "text": { - "$type": "color", - "$value": "{colors.yellow.200}", - "$description": "Text color for warning badges. Signals caution states with readable amber text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Border color for warning badges. Defines the boundary of caution status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.500}", - "$description": "Background color for warning badges. Creates subtle but recognizable caution indicators." - } - }, - "running": { - "text": { - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Text color for running state badges. Indicates active or in-progress operations." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for running state badges. Defines the boundary of active status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background color for running state badges. Creates subtle visual indication of in-progress states." - } - }, - "merged": { - "text": { - "$type": "color", - "$value": "{colors.purple.200}", - "$description": "Text color for merged state badges. Indicates completed merge actions in version control contexts." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.purple.300}", - "$description": "Border color for merged state badges. Defines the boundary of merge status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.purple.500}", - "$description": "Background color for merged state badges. Creates subtle but recognizable merge indicators." - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-related badges. Ensures high contrast against AI badge gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "breadcrumb": { - "item-inactive": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps." - }, - "item-current": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy." - }, - "separator": { - "$type": "color", - "$value": "{state.disabled.text}", - "$description": "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items." - } - }, - "btn": { - "primary": { - "text": { - "$type": "color", - "$value": "{brand.onColor.600}", - "$description": "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements." - }, - "background": { - "$type": "color", - "$value": "{brand.color.600}", - "$description": "Background color for primary action buttons. Creates emphasis for the most important action in a given context." - }, - "border": { - "$type": "color", - "$value": "{component.btn.primary.background}", - "$description": "Border color for primary action buttons. Matches background for clean, cohesive appearance." - } - }, - "secondary": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions." - }, - "border": { - "$type": "color", - "$value": "{component.btn.secondary.background}", - "$description": "Border color for secondary action buttons. Matches background for clean, cohesive appearance." - } - }, - "outline": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected outline buttons. Creates subtle emphasis for button icons." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for unselected outline buttons. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected outline buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected outline buttons. Increases visibility for active button states." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for selected outline buttons. Creates stronger visual indication of the active state." - } - } - }, - "ghost": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected ghost buttons. Provides readable contrast for minimal styling." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected ghost buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected ghost buttons. Increases visibility for active button states." - } - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.blue.200}", - "$description": "Text color for success buttons. Communicates positive actions through readable blue text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background color for success buttons. Creates subtle but recognizable positive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Border color for success buttons. Provides definition for positive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Hover state background color for success buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger buttons. Creates subtle but recognizable destructive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger buttons. Provides definition for destructive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Hover state background color for danger buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for AI-powered buttons." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for card components. Creates a distinct surface that appears elevated from the page background." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content." - } - }, - "dialog": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dialog content. Provides readable contrast for the modal's primary text content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dialog components." - }, - "backdrop": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." - } - }, - "dropdown": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for dropdown menus. Creates a distinct surface for selectable options." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dropdown menus container." - }, - "item": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dropdown menu items. Ensures readability of selectable options." - }, - "delete": { - "text": { - "$type": "color", - "$value": "{text.danger}", - "$description": "Text color for dropdown menu delete-item." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Specific hover state color for dropdown delete-item." - } - } - } - } - }, - "diff": { - "grey": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent." - }, - "add-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Blue background highlighting newly added code lines while maintaining readability." - }, - "add-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for line numbers of added code, providing visual connection to added content." - }, - "add-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Stronger emphasis color for specific character changes within added lines." - }, - "add-widget": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background for interactive UI elements related to added content." - }, - "add-widget-color": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text/icon color for add-related interactive elements, ensuring readability." - }, - "del-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Red background highlighting removed code lines without causing eye strain." - }, - "del-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background for line numbers of deleted code, connecting numbers to removed content." - }, - "del-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Stronger emphasis color for specific character changes within deleted lines." - }, - "plain-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral background for unchanged code that allows modified content to stand out." - }, - "plain-lineNumber": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for line numbers of unchanged code, maintaining visual rhythm." - }, - "plain-lineNumber-color": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unchanged line numbers, visually subdued compared to changed content." - }, - "empty-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for placeholder spaces and empty lines, maintaining visual continuity." - }, - "hunk-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for diff section headers ('hunks') that indicate which part of the file is displayed." - }, - "hunk-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for line numbers in section headers." - }, - "hunk-content-color": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for section header content showing file position information." - }, - "expand-content": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background for controls that expand/collapse code sections to show additional context." - } - }, - "input": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for input field content. Ensures readability of user-entered information." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for input fields. Creates a distinct surface for user interaction and data entry." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for input fields. Defines the input area with a visible boundary for improved usability." - } - }, - "label": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for form labels and field identifiers. Ensures high contrast for important contextual information." - } - }, - "link": { - "default": { - "$type": "color", - "$value": "{text.accent}", - "$description": "Default color for text links. Creates distinct visual identification of interactive text elements." - }, - "visited": { - "$type": "color", - "$value": "{colors.purple.300}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." - } - }, - "nav-tabs": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Unselected tab item text." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Selected tab item text." - }, - "border": { - "$type": "color", - "$value": "{border.focus}", - "$description": "Selected tab item border." - } - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Navigation container border." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Navigation tabs container background." - } - }, - "pipeline": { - "arrow": { - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for pipeline connection arrows. Defines the visual path between pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", - "$description": "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", - "$description": "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements." - }, - "border": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", - "$description": "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", - "$description": "Animated gradient border for running pipeline states. Provides visual indication of active processing." - } - }, - "error": { - "border": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution." - } - }, - "completed": { - "border": { - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Border color for completed pipeline states. Indicates successful pipeline execution." - } - } - }, - "card-canvas": { - "1": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container." - } - }, - "2": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization." - } - } - }, - "background": { - "dotes": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Refers to the dotted pattern visible in the background of the workspace." - } - } - }, - "sidebar": { - "background": { - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Background color for navigation components. Creates a consistent foundation for navigation elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for navigation components. Creates visual boundaries and separation from adjacent content." - }, - "separator": { - "$type": "color", - "$value": "{border.3}", - "$description": "Color for separators between navigation sections. Creates visual organization within the navigation structure." - }, - "hover": { - "$type": "color", - "$value": "{state.hover}", - "$description": "Hover state for navigation items." - }, - "selected": { - "$type": "color", - "$value": "{state.selected}", - "$description": "Selected state for navigation items." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected navigation items. Provides readable but less emphasized styling for available options." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected navigation items. Increases contrast to highlight the current location." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected navigation items. Creates stronger visual indication of the current selection." - } - } - }, - "logo": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for Logo in sidebar navigation." - }, - "icon": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Icon color for Logo in sidebar navigation." - } - }, - "search": { - "background": { - "$type": "color", - "$value": "{component.sidebar.background}", - "$description": "Search input specific background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Search input specific border on sidebar navigation." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Search input specific placeholder on sidebar navigation." - }, - "btn": { - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Search input specific button background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Search input specific button border on sidebar navigation." - }, - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Search input specific button text on sidebar navigation." - } - } - }, - "footer": { - "username": { - "$type": "color", - "$value": "{text.1}", - "$description": "Username in the footer sidebar navigation menu." - }, - "data": { - "$type": "color", - "$value": "{text.3}", - "$description": "User data in the footer sidebar navigation menu." - } - } - }, - "scrollbar": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability." - } - }, - "selection": { - "unselected": { - "item": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected state in selection controls. Creates visual distinction from selected items." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "item": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Color for selected items in selection controls. Creates high contrast against selected background state." - }, - "background": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background color for selected state in selection controls. Creates strong visual indication of active selection." - }, - "border": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling." - } - } - }, - "separator": { - "background": { - "$type": "color", - "$value": "{border.3}", - "$description": "Background color for separator elements. Creates visual division between content sections with a subtle line or space." - } - }, - "skeleton": { - "background": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", - "$description": "Animation color that sweeps across skeleton elements. Creates a \"shimmer\" effect indicating content loading states." - } - }, - "slider": { - "track": { - "base": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for slider tracks. Represents the full range of available values in an unselected state." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Filled portion color for slider tracks. Visually represents the selected value or range within the track." - } - }, - "track-segments": { - "base": { - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.800}", - "$description": "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range." - } - }, - "handle": { - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for slider handles. Creates a distinct, interactive element for adjusting values." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Border color for slider handles. Provides definition and contrast for the interactive control." - } - } - }, - "status-indicator": { - "completed": { - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Color for success status indicators. Communicates completed or positive states." - }, - "cancelled": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Color for danger status indicators. Communicates error or critical warning states." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Color for warning status indicators. Communicates caution or potential issue states." - }, - "running": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Color for running status indicators. Communicates active or in-progress operations." - }, - "merged": { - "$type": "color", - "$value": "{colors.purple.300}", - "$description": "Color for merged status indicators. Communicates successful integration or completion in version control contexts." - }, - "action-required": { - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Color for action-required status indicators. Communicates that user attention or intervention is needed." - }, - "waiting": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Color for pending status indicators. Communicates in waiting states." - } - }, - "switch": { - "unselected": { - "thumb": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for the unselected state of switch controls. Creates visual distinction from the selected state." - } - }, - "selected": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track." - }, - "background": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background color for the selected state of switch controls. Creates strong visual indication of active state." - } - } - }, - "table": { - "header": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for table header cells. Ensures readability of column labels and titles." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for table header rows. Creates visual distinction between headers and data rows." - } - }, - "row": { - "alternate-background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for alternate table rows. Improves readability by differentiating adjacent rows." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for table rows. Provides subtle separation between data rows." - } - }, - "cell": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for table cell content. Ensures high readability of tabular data." - } - } - }, - "tabs": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for the tabs container. Creates a consistent foundation for tab elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tab containers and separators. Provides subtle definition for tab boundaries." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected tab items. Creates visual distinction from the active tab." - }, - "border": { - "$type": "color", - "$value": "{component.tabs.item.unselected.background}", - "$description": "Border color for unselected tab items. Maintains consistent styling with the tab background." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for the selected tab item. Increases contrast to highlight the active tab." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for the selected tab item. Creates strong visual indication of the active tab." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for the selected tab item. Reinforces the active state with defined boundaries." - } - } - } - }, - "tag": { - "blue": { - "text": { - "$type": "color", - "$value": "{colors.blue.100}", - "$description": "Text color for blue tags. Ensures readability while maintaining the blue color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.800}", - "$description": "Background color for blue tags. Creates a distinct surface with blue theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.950}", - "$description": "Subtle background variation for blue tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.blue.background}", - "$description": "Border color for blue tags." - } - }, - "brown": { - "text": { - "$type": "color", - "$value": "{colors.brown.100}", - "$description": "Text color for brown tags. Ensures readability while maintaining the brown color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.brown.800}", - "$description": "Background color for brown tags. Creates a distinct surface with brown theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.brown.950}", - "$description": "Subtle background variation for brown tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.brown.background}", - "$description": "Border color for brown tags." - } - }, - "cyan": { - "text": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Text color for cyan tags. Ensures readability while maintaining the cyan color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.800}", - "$description": "Background color for cyan tags. Creates a distinct surface with cyan theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.950}", - "$description": "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.cyan.background}", - "$description": "Border color for cyan tags." - } - }, - "green": { - "text": { - "$type": "color", - "$value": "{colors.blue.100}", - "$description": "Text color for green tags. Adjusted for protanopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.800}", - "$description": "Background color for green tags. Adjusted for protanopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.950}", - "$description": "Subtle background variation for green tags. Adjusted for protanopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.green.background}", - "$description": "Border color for green tags." - } - }, - "indigo": { - "text": { - "$type": "color", - "$value": "{colors.indigo.100}", - "$description": "Text color for indigo tags. Ensures readability while maintaining the indigo color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.indigo.800}", - "$description": "Background color for indigo tags. Creates a distinct surface with indigo theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.indigo.950}", - "$description": "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.indigo.background}", - "$description": "Border color for indigo tags." - } - }, - "lime": { - "text": { - "$type": "color", - "$value": "{colors.lime.100}", - "$description": "Text color for lime tags. Ensures readability while maintaining the lime color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.lime.800}", - "$description": "Background color for lime tags. Creates a distinct surface with lime theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.lime.950}", - "$description": "Subtle background variation for lime tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.lime.background}", - "$description": "Border color for lime tags." - } - }, - "mint": { - "text": { - "$type": "color", - "$value": "{colors.mint.100}", - "$description": "Text color for mint tags. Ensures readability while maintaining the mint color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.mint.800}", - "$description": "Background color for mint tags. Creates a distinct surface with mint theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.mint.950}", - "$description": "Subtle background variation for mint tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.mint.background}", - "$description": "Border color for mint tags." - } - }, - "orange": { - "text": { - "$type": "color", - "$value": "{colors.orange.100}", - "$description": "Text color for orange tags. Ensures readability while maintaining the orange color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.800}", - "$description": "Background color for orange tags. Creates a distinct surface with orange theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.950}", - "$description": "Subtle background variation for orange tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.orange.background}", - "$description": "Border color for orange tags." - } - }, - "pink": { - "text": { - "$type": "color", - "$value": "{colors.pink.100}", - "$description": "Text color for pink tags. Ensures readability while maintaining the pink color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.pink.800}", - "$description": "Background color for pink tags. Creates a distinct surface with pink theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.pink.950}", - "$description": "Subtle background variation for pink tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.pink.background}", - "$description": "Border color for pink tags." - } - }, - "purple": { - "text": { - "$type": "color", - "$value": "{colors.purple.100}", - "$description": "Text color for purple tags. Ensures readability while maintaining the purple color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.purple.800}", - "$description": "Background color for purple tags. Creates a distinct surface with purple theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.purple.950}", - "$description": "Subtle background variation for purple tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.purple.background}", - "$description": "Border color for purple tags." - } - }, - "red": { - "text": { - "$type": "color", - "$value": "{colors.red.100}", - "$description": "Text color for red tags. Ensures readability while maintaining the red color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.red.800}", - "$description": "Background color for red tags. Creates a distinct surface with red theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.red.950}", - "$description": "Subtle background variation for red tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.red.background}", - "$description": "Border color for red tags." - } - }, - "violet": { - "text": { - "$type": "color", - "$value": "{colors.violet.100}", - "$description": "Text color for violet tags. Ensures readability while maintaining the violet color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.violet.800}", - "$description": "Background color for violet tags. Creates a distinct surface with violet theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.violet.950}", - "$description": "Subtle background variation for violet tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.violet.background}", - "$description": "Border color for violet tags." - } - }, - "yellow": { - "text": { - "$type": "color", - "$value": "{colors.yellow.100}", - "$description": "Text color for yellow tags. Ensures readability while maintaining the yellow color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.yellow.800}", - "$description": "Background color for yellow tags. Creates a distinct surface with yellow theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.yellow.950}", - "$description": "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.yellow.background}", - "$description": "Border color for yellow tags." - } - }, - "gray": { - "text": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Text color for gray tags. Ensures readability while maintaining the gray color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for gray tags. Creates a distinct surface with gray theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Subtle background variation for gray tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.gray.background}", - "$description": "Border color for gray tags." - } - } - }, - "toast": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational toast notifications. Ensures high visibility for the notification headline." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational toast notifications. Provides readable contrast for notification content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational toast notifications. Creates visual distinction from UI content beneath." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational toast notifications. Subtly defines the notification's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Title text color for danger toast notifications. Provides maximum contrast against the error background." - }, - "description": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Description text color for danger toast notifications. Ensures readability of critical information." - }, - "background": { - "$type": "color", - "$value": "{colors.red.700}", - "$description": "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings." - }, - "border": { - "$type": "color", - "$value": "{component.toast.danger.background}", - "$description": "Border color for danger toast notifications. Reinforces the critical nature of the notification message." - } - } - }, - "tooltip": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for tooltip content. Ensures readability of helpful contextual information." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - } - } - }, - "shadow": { - "0": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "0", - "blur": "0", - "spread": "0", - "color": "{shadow-color.0}", - "type": "dropShadow" - }, - "$description": "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile." - }, - "1": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "1", - "blur": "2", - "spread": "0", - "color": "{shadow-color.1}", - "type": "dropShadow" - }, - "$description": "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements." - }, - "2": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "1", - "blur": "3", - "spread": "0", - "color": "{shadow-color.2}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "1", - "blur": "2", - "spread": "-1", - "color": "{shadow-color.2}", - "type": "dropShadow" - } - ], - "$description": "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state." - }, - "3": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-1", - "color": "{shadow-color.3}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "2", - "blur": "4", - "spread": "-2", - "color": "{shadow-color.3}", - "type": "dropShadow" - } - ], - "$description": "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover." - }, - "4": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "10", - "blur": "15", - "spread": "-3", - "color": "{shadow-color.4}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-4", - "color": "{shadow-color.4}", - "type": "dropShadow" - } - ], - "$description": "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns." - }, - "5": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "20", - "blur": "25", - "spread": "-5", - "color": "{shadow-color.5}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "8", - "blur": "10", - "spread": "-6", - "color": "{shadow-color.5}", - "type": "dropShadow" - } - ], - "$description": "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections." - }, - "6": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "25", - "blur": "50", - "spread": "-12", - "color": "{shadow-color.6}", - "type": "dropShadow" - }, - "$description": "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation." - }, - "inner": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "2", - "blur": "4", - "spread": "0", - "color": "{shadow-color.inner}", - "type": "innerShadow" - }, - "$description": "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields." - } - }, - "shadow-color": { - "0": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Transparent shadow color. Used when no shadow effect is desired." - }, - "1": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Light shadow color with 60% opacity. Creates subtle depth for small UI elements." - }, - "2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Medium shadow color with 60% opacity. Provides balanced depth for common UI components." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Medium shadow color with 50% opacity. Creates moderate depth for elevated components." - }, - "4": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Deep shadow color with 50% opacity. Provides significant depth for floating elements." - }, - "5": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content." - }, - "6": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements." - }, - "inner": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states." - } - }, - "ring": { - "focus": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "2", - "color": "{background.1}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "4", - "color": "{border.focus}", - "type": "dropShadow" - } - ], - "$description": "Focus ring effect with background offset and accent border." - } - }, - "gradient": { - "ai": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.yellow.100}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pink.200}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.purple.300}" - }, - "gradient-stop-4": { - "$type": "color", - "$value": "{colors.cyan.200}" - } - }, - "skeleton": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - }, - "pipeline": { - "running": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.orange.200}" - }, - "gradient-stop-2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.orange.200}" - } - }, - "arrows": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.blue.300}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{border.1}" - } - }, - "card": { - "background": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.900}" - } - }, - "border": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - } - }, - "widget": { - "number": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.200}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.600}" - } - }, - "blob": { - "big": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.950}" - } - }, - "small": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - } - } - } - } - }, - "iconStrokeWidth": { - "xxs": { - "$type": "borderWidth", - "$value": "1.1" - }, - "xs": { - "$type": "borderWidth", - "$value": "1" - }, - "sm": { - "$type": "borderWidth", - "$value": "1.1" - }, - "default": { - "$type": "borderWidth", - "$value": "1.1" - }, - "md": { - "$type": "borderWidth", - "$value": "1.4" - }, - "lg": { - "$type": "borderWidth", - "$value": "2" - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/mode/dark/high-contrast-tritanopia.json b/packages/ui/design-tokens/mode/dark/high-contrast-tritanopia.json deleted file mode 100644 index b681f43ae9..0000000000 --- a/packages/ui/design-tokens/mode/dark/high-contrast-tritanopia.json +++ /dev/null @@ -1,2342 +0,0 @@ -{ - "background": { - "1": { - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.1000}", - "$description": "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers." - } - }, - "text": { - "1": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders." - }, - "accent": { - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements." - }, - "success": { - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels." - }, - "warning": { - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications." - } - }, - "border": { - "1": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.7", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows." - }, - "focus": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators." - }, - "success": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers." - }, - "warning": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements." - } - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item." - }, - "disabled": { - "text": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries." - } - } - }, - "component": { - "accordion": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for accordion content. Applied to the expandable text within accordion panels." - }, - "chevron": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for accordion items. Provides visual separation between accordion panels." - } - }, - "alert": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational alerts. Ensures high visibility for the alert heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational alerts. Provides readable contrast for alert content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational alerts. Creates visual distinction from surrounding content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational alerts. Subtly defines the alert's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.red.100}", - "$description": "Text color for danger alerts. Communicates critical information through high-contrast red text." - }, - "description": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Description text color for danger alerts. Ensures readability while maintaining the error state styling." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger alerts. Creates subtle but recognizable error state styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger alerts. Provides definition for error state alerts." - } - } - }, - "avatar": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for avatar initials or text. Ensures visibility against the avatar background." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for avatar components. Provides contrast for text or image content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for avatars. Creates subtle definition around the avatar element." - } - }, - "badge": { - "default": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for secondary badges. Provides readable contrast on secondary badge styling." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for secondary badges. Creates less prominent badge styling for secondary information." - }, - "border": { - "$type": "color", - "$value": "{component.badge.default.background}", - "$description": "Border color for secondary badges. Matches background for clean, cohesive appearance." - } - }, - "neutral": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for outline badges. Ensures readability for badges with transparent backgrounds." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Border color for outline badges. Creates definition for badges without background fill." - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Text color for success badges. Communicates positive status through readable cyan text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for success badges. Provides subtle definition for success state indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Background color for success badges. Creates a subtle but recognizable success indicator." - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Text color for danger badges. Communicates error or warning status with high visibility." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger badges. Creates definition for error or warning indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger badges. Provides subtle visual indication of error states." - } - }, - "warning": { - "text": { - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Text color for warning badges. Signals caution states with readable orange text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for warning badges. Defines the boundary of caution status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background color for warning badges. Creates subtle but recognizable caution indicators." - } - }, - "running": { - "text": { - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Text color for running state badges. Indicates active or in-progress operations." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for running state badges. Defines the boundary of active status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background color for running state badges. Creates subtle visual indication of in-progress states." - } - }, - "merged": { - "text": { - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Text color for merged state badges. Indicates completed merge actions in version control contexts." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for merged state badges. Defines the boundary of merge status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Background color for merged state badges. Creates subtle but recognizable merge indicators." - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-related badges. Ensures high contrast against AI badge gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "breadcrumb": { - "item-inactive": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps." - }, - "item-current": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy." - }, - "separator": { - "$type": "color", - "$value": "{state.disabled.text}", - "$description": "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items." - } - }, - "btn": { - "primary": { - "text": { - "$type": "color", - "$value": "{brand.onColor.600}", - "$description": "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements." - }, - "background": { - "$type": "color", - "$value": "{brand.color.600}", - "$description": "Background color for primary action buttons. Creates emphasis for the most important action in a given context." - }, - "border": { - "$type": "color", - "$value": "{component.btn.primary.background}", - "$description": "Border color for primary action buttons. Matches background for clean, cohesive appearance." - } - }, - "secondary": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions." - }, - "border": { - "$type": "color", - "$value": "{component.btn.secondary.background}", - "$description": "Border color for secondary action buttons. Matches background for clean, cohesive appearance." - } - }, - "outline": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected outline buttons. Creates subtle emphasis for button icons." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for unselected outline buttons. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected outline buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected outline buttons. Increases visibility for active button states." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for selected outline buttons. Creates stronger visual indication of the active state." - } - } - }, - "ghost": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected ghost buttons. Provides readable contrast for minimal styling." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected ghost buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected ghost buttons. Increases visibility for active button states." - } - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Text color for success buttons. Communicates positive actions through readable cyan text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Background color for success buttons. Creates subtle but recognizable positive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for success buttons. Provides definition for positive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Hover state background color for success buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger buttons. Creates subtle but recognizable destructive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger buttons. Provides definition for destructive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Hover state background color for danger buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for AI-powered buttons." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for card components. Creates a distinct surface that appears elevated from the page background." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content." - } - }, - "dialog": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dialog content. Provides readable contrast for the modal's primary text content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dialog components." - }, - "backdrop": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." - } - }, - "dropdown": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for dropdown menus. Creates a distinct surface for selectable options." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dropdown menus container." - }, - "item": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dropdown menu items. Ensures readability of selectable options." - }, - "delete": { - "text": { - "$type": "color", - "$value": "{text.danger}", - "$description": "Text color for dropdown menu delete-item." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Specific hover state color for dropdown delete-item." - } - } - } - } - }, - "diff": { - "grey": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent." - }, - "add-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Cyan background highlighting newly added code lines while maintaining readability." - }, - "add-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Background for line numbers of added code, providing visual connection to added content." - }, - "add-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Stronger emphasis color for specific character changes within added lines." - }, - "add-widget": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background for interactive UI elements related to added content." - }, - "add-widget-color": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text/icon color for add-related interactive elements, ensuring readability." - }, - "del-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Red background highlighting removed code lines without causing eye strain." - }, - "del-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background for line numbers of deleted code, connecting numbers to removed content." - }, - "del-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Stronger emphasis color for specific character changes within deleted lines." - }, - "plain-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral background for unchanged code that allows modified content to stand out." - }, - "plain-lineNumber": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for line numbers of unchanged code, maintaining visual rhythm." - }, - "plain-lineNumber-color": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unchanged line numbers, visually subdued compared to changed content." - }, - "empty-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for placeholder spaces and empty lines, maintaining visual continuity." - }, - "hunk-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for diff section headers ('hunks') that indicate which part of the file is displayed." - }, - "hunk-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for line numbers in section headers." - }, - "hunk-content-color": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for section header content showing file position information." - }, - "expand-content": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background for controls that expand/collapse code sections to show additional context." - } - }, - "input": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for input field content. Ensures readability of user-entered information." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for input fields. Creates a distinct surface for user interaction and data entry." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for input fields. Defines the input area with a visible boundary for improved usability." - } - }, - "label": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for form labels and field identifiers. Ensures high contrast for important contextual information." - } - }, - "link": { - "default": { - "$type": "color", - "$value": "{text.accent}", - "$description": "Default color for text links. Creates distinct visual identification of interactive text elements." - }, - "visited": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." - } - }, - "nav-tabs": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Unselected tab item text." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Selected tab item text." - }, - "border": { - "$type": "color", - "$value": "{border.focus}", - "$description": "Selected tab item border." - } - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Navigation container border." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Navigation tabs container background." - } - }, - "pipeline": { - "arrow": { - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for pipeline connection arrows. Defines the visual path between pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", - "$description": "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", - "$description": "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements." - }, - "border": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", - "$description": "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", - "$description": "Animated gradient border for running pipeline states. Provides visual indication of active processing." - } - }, - "error": { - "border": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution." - } - }, - "completed": { - "border": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for completed pipeline states. Indicates successful pipeline execution." - } - } - }, - "card-canvas": { - "1": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container." - } - }, - "2": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization." - } - } - }, - "background": { - "dotes": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Refers to the dotted pattern visible in the background of the workspace." - } - } - }, - "sidebar": { - "background": { - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Background color for navigation components. Creates a consistent foundation for navigation elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for navigation components. Creates visual boundaries and separation from adjacent content." - }, - "separator": { - "$type": "color", - "$value": "{border.3}", - "$description": "Color for separators between navigation sections. Creates visual organization within the navigation structure." - }, - "hover": { - "$type": "color", - "$value": "{state.hover}", - "$description": "Hover state for navigation items." - }, - "selected": { - "$type": "color", - "$value": "{state.selected}", - "$description": "Selected state for navigation items." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected navigation items. Provides readable but less emphasized styling for available options." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected navigation items. Increases contrast to highlight the current location." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected navigation items. Creates stronger visual indication of the current selection." - } - } - }, - "logo": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for Logo in sidebar navigation." - }, - "icon": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Icon color for Logo in sidebar navigation." - } - }, - "search": { - "background": { - "$type": "color", - "$value": "{component.sidebar.background}", - "$description": "Search input specific background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Search input specific border on sidebar navigation." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Search input specific placeholder on sidebar navigation." - }, - "btn": { - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Search input specific button background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Search input specific button border on sidebar navigation." - }, - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Search input specific button text on sidebar navigation." - } - } - }, - "footer": { - "username": { - "$type": "color", - "$value": "{text.1}", - "$description": "Username in the footer sidebar navigation menu." - }, - "data": { - "$type": "color", - "$value": "{text.3}", - "$description": "User data in the footer sidebar navigation menu." - } - } - }, - "scrollbar": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability." - } - }, - "selection": { - "unselected": { - "item": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected state in selection controls. Creates visual distinction from selected items." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "item": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Color for selected items in selection controls. Creates high contrast against selected background state." - }, - "background": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background color for selected state in selection controls. Creates strong visual indication of active selection." - }, - "border": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling." - } - } - }, - "separator": { - "background": { - "$type": "color", - "$value": "{border.3}", - "$description": "Background color for separator elements. Creates visual division between content sections with a subtle line or space." - } - }, - "skeleton": { - "background": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", - "$description": "Animation color that sweeps across skeleton elements. Creates a \"shimmer\" effect indicating content loading states." - } - }, - "slider": { - "track": { - "base": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for slider tracks. Represents the full range of available values in an unselected state." - }, - "progress": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Filled portion color for slider tracks. Visually represents the selected value or range within the track." - } - }, - "track-segments": { - "base": { - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals." - }, - "progress": { - "$type": "color", - "$value": "{colors.cyan.600}", - "$description": "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range." - } - }, - "handle": { - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for slider handles. Creates a distinct, interactive element for adjusting values." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Border color for slider handles. Provides definition and contrast for the interactive control." - } - } - }, - "status-indicator": { - "completed": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Color for success status indicators. Communicates completed or positive states." - }, - "cancelled": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Color for danger status indicators. Communicates error or critical warning states." - }, - "warning": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Color for warning status indicators. Communicates caution or potential issue states." - }, - "running": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Color for running status indicators. Communicates active or in-progress operations." - }, - "merged": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Color for merged status indicators. Communicates successful integration or completion in version control contexts." - }, - "action-required": { - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Color for action-required status indicators. Communicates that user attention or intervention is needed." - }, - "waiting": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Color for pending status indicators. Communicates in waiting states." - } - }, - "switch": { - "unselected": { - "thumb": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for the unselected state of switch controls. Creates visual distinction from the selected state." - } - }, - "selected": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track." - }, - "background": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background color for the selected state of switch controls. Creates strong visual indication of active state." - } - } - }, - "table": { - "header": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for table header cells. Ensures readability of column labels and titles." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for table header rows. Creates visual distinction between headers and data rows." - } - }, - "row": { - "alternate-background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for alternate table rows. Improves readability by differentiating adjacent rows." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for table rows. Provides subtle separation between data rows." - } - }, - "cell": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for table cell content. Ensures high readability of tabular data." - } - } - }, - "tabs": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for the tabs container. Creates a consistent foundation for tab elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tab containers and separators. Provides subtle definition for tab boundaries." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected tab items. Creates visual distinction from the active tab." - }, - "border": { - "$type": "color", - "$value": "{component.tabs.item.unselected.background}", - "$description": "Border color for unselected tab items. Maintains consistent styling with the tab background." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for the selected tab item. Increases contrast to highlight the active tab." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for the selected tab item. Creates strong visual indication of the active tab." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for the selected tab item. Reinforces the active state with defined boundaries." - } - } - } - }, - "tag": { - "blue": { - "text": { - "$type": "color", - "$value": "{colors.blue.100}", - "$description": "Text color for blue tags. Ensures readability while maintaining the blue color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.800}", - "$description": "Background color for blue tags. Creates a distinct surface with blue theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.950}", - "$description": "Subtle background variation for blue tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.blue.background}", - "$description": "Border color for blue tags." - } - }, - "brown": { - "text": { - "$type": "color", - "$value": "{colors.brown.100}", - "$description": "Text color for brown tags. Ensures readability while maintaining the brown color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.brown.800}", - "$description": "Background color for brown tags. Creates a distinct surface with brown theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.brown.950}", - "$description": "Subtle background variation for brown tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.brown.background}", - "$description": "Border color for brown tags." - } - }, - "cyan": { - "text": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Text color for cyan tags. Ensures readability while maintaining the cyan color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.800}", - "$description": "Background color for cyan tags. Creates a distinct surface with cyan theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.950}", - "$description": "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.cyan.background}", - "$description": "Border color for cyan tags." - } - }, - "green": { - "text": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Text color for green tags, replaced with cyan for tritanopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.800}", - "$description": "Background color for green tags, replaced with cyan for tritanopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.950}", - "$description": "Subtle background variation for green tags, replaced with cyan for tritanopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.green.background}", - "$description": "Border color for green tags, replaced with cyan." - } - }, - "indigo": { - "text": { - "$type": "color", - "$value": "{colors.indigo.100}", - "$description": "Text color for indigo tags. Ensures readability while maintaining the indigo color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.indigo.800}", - "$description": "Background color for indigo tags. Creates a distinct surface with indigo theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.indigo.950}", - "$description": "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.indigo.background}", - "$description": "Border color for indigo tags." - } - }, - "lime": { - "text": { - "$type": "color", - "$value": "{colors.lime.100}", - "$description": "Text color for lime tags. Ensures readability while maintaining the lime color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.lime.800}", - "$description": "Background color for lime tags. Creates a distinct surface with lime theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.lime.950}", - "$description": "Subtle background variation for lime tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.lime.background}", - "$description": "Border color for lime tags." - } - }, - "mint": { - "text": { - "$type": "color", - "$value": "{colors.mint.100}", - "$description": "Text color for mint tags. Ensures readability while maintaining the mint color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.mint.800}", - "$description": "Background color for mint tags. Creates a distinct surface with mint theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.mint.950}", - "$description": "Subtle background variation for mint tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.mint.background}", - "$description": "Border color for mint tags." - } - }, - "orange": { - "text": { - "$type": "color", - "$value": "{colors.orange.100}", - "$description": "Text color for orange tags. Ensures readability while maintaining the orange color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.800}", - "$description": "Background color for orange tags. Creates a distinct surface with orange theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.950}", - "$description": "Subtle background variation for orange tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.orange.background}", - "$description": "Border color for orange tags." - } - }, - "pink": { - "text": { - "$type": "color", - "$value": "{colors.pink.100}", - "$description": "Text color for pink tags. Ensures readability while maintaining the pink color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.pink.800}", - "$description": "Background color for pink tags. Creates a distinct surface with pink theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.pink.950}", - "$description": "Subtle background variation for pink tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.pink.background}", - "$description": "Border color for pink tags." - } - }, - "purple": { - "text": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Text color for purple tags, replaced with cyan for tritanopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.800}", - "$description": "Background color for purple tags, replaced with cyan for tritanopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.950}", - "$description": "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.purple.background}", - "$description": "Border color for purple tags, replaced with cyan." - } - }, - "red": { - "text": { - "$type": "color", - "$value": "{colors.red.100}", - "$description": "Text color for red tags. Ensures readability while maintaining the red color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.red.800}", - "$description": "Background color for red tags. Creates a distinct surface with red theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.red.950}", - "$description": "Subtle background variation for red tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.red.background}", - "$description": "Border color for red tags." - } - }, - "violet": { - "text": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Text color for violet tags, replaced with cyan for tritanopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.800}", - "$description": "Background color for violet tags, replaced with cyan for tritanopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.950}", - "$description": "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.violet.background}", - "$description": "Border color for violet tags, replaced with cyan." - } - }, - "yellow": { - "text": { - "$type": "color", - "$value": "{colors.orange.100}", - "$description": "Text color for yellow tags, replaced with orange for tritanopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.800}", - "$description": "Background color for yellow tags, replaced with orange for tritanopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.950}", - "$description": "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.yellow.background}", - "$description": "Border color for yellow tags, replaced with orange." - } - }, - "gray": { - "text": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Text color for gray tags. Ensures readability while maintaining the gray color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for gray tags. Creates a distinct surface with gray theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Subtle background variation for gray tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.gray.background}", - "$description": "Border color for gray tags." - } - } - }, - "toast": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational toast notifications. Ensures high visibility for the notification headline." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational toast notifications. Provides readable contrast for notification content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational toast notifications. Creates visual distinction from UI content beneath." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational toast notifications. Subtly defines the notification's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Title text color for danger toast notifications. Provides maximum contrast against the error background." - }, - "description": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Description text color for danger toast notifications. Ensures readability of critical information." - }, - "background": { - "$type": "color", - "$value": "{colors.red.700}", - "$description": "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings." - }, - "border": { - "$type": "color", - "$value": "{component.toast.danger.background}", - "$description": "Border color for danger toast notifications. Reinforces the critical nature of the notification message." - } - } - }, - "tooltip": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for tooltip content. Ensures readability of helpful contextual information." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - } - } - }, - "shadow": { - "0": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "0", - "blur": "0", - "spread": "0", - "color": "{shadow-color.0}", - "type": "dropShadow" - }, - "$description": "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile." - }, - "1": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "1", - "blur": "2", - "spread": "0", - "color": "{shadow-color.1}", - "type": "dropShadow" - }, - "$description": "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements." - }, - "2": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "1", - "blur": "3", - "spread": "0", - "color": "{shadow-color.2}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "1", - "blur": "2", - "spread": "-1", - "color": "{shadow-color.2}", - "type": "dropShadow" - } - ], - "$description": "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state." - }, - "3": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-1", - "color": "{shadow-color.3}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "2", - "blur": "4", - "spread": "-2", - "color": "{shadow-color.3}", - "type": "dropShadow" - } - ], - "$description": "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover." - }, - "4": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "10", - "blur": "15", - "spread": "-3", - "color": "{shadow-color.4}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-4", - "color": "{shadow-color.4}", - "type": "dropShadow" - } - ], - "$description": "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns." - }, - "5": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "20", - "blur": "25", - "spread": "-5", - "color": "{shadow-color.5}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "8", - "blur": "10", - "spread": "-6", - "color": "{shadow-color.5}", - "type": "dropShadow" - } - ], - "$description": "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections." - }, - "6": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "25", - "blur": "50", - "spread": "-12", - "color": "{shadow-color.6}", - "type": "dropShadow" - }, - "$description": "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation." - }, - "inner": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "2", - "blur": "4", - "spread": "0", - "color": "{shadow-color.inner}", - "type": "innerShadow" - }, - "$description": "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields." - } - }, - "shadow-color": { - "0": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Transparent shadow color. Used when no shadow effect is desired." - }, - "1": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Light shadow color with 60% opacity. Creates subtle depth for small UI elements." - }, - "2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Medium shadow color with 60% opacity. Provides balanced depth for common UI components." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Medium shadow color with 50% opacity. Creates moderate depth for elevated components." - }, - "4": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Deep shadow color with 50% opacity. Provides significant depth for floating elements." - }, - "5": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content." - }, - "6": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements." - }, - "inner": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states." - } - }, - "ring": { - "focus": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "2", - "color": "{background.1}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "4", - "color": "{border.focus}", - "type": "dropShadow" - } - ], - "$description": "Focus ring effect with background offset and accent border." - } - }, - "gradient": { - "ai": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.orange.100}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pink.200}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.cyan.300}" - }, - "gradient-stop-4": { - "$type": "color", - "$value": "{colors.cyan.200}" - } - }, - "skeleton": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - }, - "pipeline": { - "running": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.orange.200}" - }, - "gradient-stop-2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.orange.200}" - } - }, - "arrows": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.blue.300}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{border.1}" - } - }, - "card": { - "background": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.900}" - } - }, - "border": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - } - }, - "widget": { - "number": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.200}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.600}" - } - }, - "blob": { - "big": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.950}" - } - }, - "small": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - } - } - } - } - }, - "iconStrokeWidth": { - "xxs": { - "$type": "borderWidth", - "$value": "1.1" - }, - "xs": { - "$type": "borderWidth", - "$value": "1" - }, - "sm": { - "$type": "borderWidth", - "$value": "1.1" - }, - "default": { - "$type": "borderWidth", - "$value": "1.1" - }, - "md": { - "$type": "borderWidth", - "$value": "1.4" - }, - "lg": { - "$type": "borderWidth", - "$value": "2" - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/mode/dark/high-contrast.json b/packages/ui/design-tokens/mode/dark/high-contrast.json deleted file mode 100644 index 7ef2851fae..0000000000 --- a/packages/ui/design-tokens/mode/dark/high-contrast.json +++ /dev/null @@ -1,2342 +0,0 @@ -{ - "background": { - "1": { - "$type": "color", - "$value": "{colors.chrome.1000}", - "$description": "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers." - } - }, - "text": { - "1": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders." - }, - "accent": { - "$type": "color", - "$value": "{brand.color.200}", - "$description": "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements." - }, - "success": { - "$type": "color", - "$value": "{colors.green.200}", - "$description": "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.200}", - "$description": "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications." - } - }, - "border": { - "1": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.7", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows." - }, - "focus": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators." - }, - "success": { - "$type": "color", - "$value": "{colors.green.300}", - "$description": "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements." - } - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item." - }, - "disabled": { - "text": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries." - } - } - }, - "component": { - "accordion": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for accordion content. Applied to the expandable text within accordion panels." - }, - "chevron": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for accordion items. Provides visual separation between accordion panels." - } - }, - "alert": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational alerts. Ensures high visibility for the alert heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational alerts. Provides readable contrast for alert content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational alerts. Creates visual distinction from surrounding content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational alerts. Subtly defines the alert's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.red.100}", - "$description": "Text color for danger alerts. Communicates critical information through high-contrast red text." - }, - "description": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Description text color for danger alerts. Ensures readability while maintaining the error state styling." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger alerts. Creates subtle but recognizable error state styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger alerts. Provides definition for error state alerts." - } - } - }, - "avatar": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for avatar initials or text. Ensures visibility against the avatar background." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for avatar components. Provides contrast for text or image content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for avatars. Creates subtle definition around the avatar element." - } - }, - "badge": { - "default": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for secondary badges. Provides readable contrast on secondary badge styling." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for secondary badges. Creates less prominent badge styling for secondary information." - }, - "border": { - "$type": "color", - "$value": "{component.badge.default.background}", - "$description": "Border color for secondary badges. Matches background for clean, cohesive appearance." - } - }, - "neutral": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for outline badges. Ensures readability for badges with transparent backgrounds." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Border color for outline badges. Creates definition for badges without background fill." - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.green.200}", - "$description": "Text color for success badges. Communicates positive status through readable green text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.300}", - "$description": "Border color for success badges. Provides subtle definition for success state indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Background color for success badges. Creates a subtle but recognizable success indicator." - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Text color for danger badges. Communicates error or warning status with high visibility." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger badges. Creates definition for error or warning indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger badges. Provides subtle visual indication of error states." - } - }, - "warning": { - "text": { - "$type": "color", - "$value": "{colors.yellow.200}", - "$description": "Text color for warning badges. Signals caution states with readable amber text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Border color for warning badges. Defines the boundary of caution status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.500}", - "$description": "Background color for warning badges. Creates subtle but recognizable caution indicators." - } - }, - "running": { - "text": { - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Text color for running state badges. Indicates active or in-progress operations." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for running state badges. Defines the boundary of active status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background color for running state badges. Creates subtle visual indication of in-progress states." - } - }, - "merged": { - "text": { - "$type": "color", - "$value": "{colors.purple.200}", - "$description": "Text color for merged state badges. Indicates completed merge actions in version control contexts." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.purple.300}", - "$description": "Border color for merged state badges. Defines the boundary of merge status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.purple.500}", - "$description": "Background color for merged state badges. Creates subtle but recognizable merge indicators." - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-related badges. Ensures high contrast against AI badge gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "breadcrumb": { - "item-inactive": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps." - }, - "item-current": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy." - }, - "separator": { - "$type": "color", - "$value": "{state.disabled.text}", - "$description": "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items." - } - }, - "btn": { - "primary": { - "text": { - "$type": "color", - "$value": "{brand.onColor.600}", - "$description": "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements." - }, - "background": { - "$type": "color", - "$value": "{brand.color.600}", - "$description": "Background color for primary action buttons. Creates emphasis for the most important action in a given context." - }, - "border": { - "$type": "color", - "$value": "{component.btn.primary.background}", - "$description": "Border color for primary action buttons. Matches background for clean, cohesive appearance." - } - }, - "secondary": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions." - }, - "border": { - "$type": "color", - "$value": "{component.btn.secondary.background}", - "$description": "Border color for secondary action buttons. Matches background for clean, cohesive appearance." - } - }, - "outline": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected outline buttons. Creates subtle emphasis for button icons." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for unselected outline buttons. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected outline buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected outline buttons. Increases visibility for active button states." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for selected outline buttons. Creates stronger visual indication of the active state." - } - } - }, - "ghost": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected ghost buttons. Provides readable contrast for minimal styling." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected ghost buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected ghost buttons. Increases visibility for active button states." - } - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.green.200}", - "$description": "Text color for success buttons. Communicates positive actions through readable green text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Background color for success buttons. Creates subtle but recognizable positive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.300}", - "$description": "Border color for success buttons. Provides definition for positive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Hover state background color for success buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger buttons. Creates subtle but recognizable destructive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger buttons. Provides definition for destructive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Hover state background color for danger buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for AI-powered buttons." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for card components. Creates a distinct surface that appears elevated from the page background." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content." - } - }, - "dialog": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dialog content. Provides readable contrast for the modal's primary text content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dialog components." - }, - "backdrop": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." - } - }, - "dropdown": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for dropdown menus. Creates a distinct surface for selectable options." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dropdown menus container." - }, - "item": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dropdown menu items. Ensures readability of selectable options." - }, - "delete": { - "text": { - "$type": "color", - "$value": "{text.danger}", - "$description": "Text color for dropdown menu delete-item." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Specific hover state color for dropdown delete-item." - } - } - } - } - }, - "diff": { - "grey": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent." - }, - "add-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Green background highlighting newly added code lines while maintaining readability." - }, - "add-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Background for line numbers of added code, providing visual connection to added content." - }, - "add-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Stronger emphasis color for specific character changes within added lines." - }, - "add-widget": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background for interactive UI elements related to added content." - }, - "add-widget-color": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text/icon color for add-related interactive elements, ensuring readability." - }, - "del-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Red background highlighting removed code lines without causing eye strain." - }, - "del-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background for line numbers of deleted code, connecting numbers to removed content." - }, - "del-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Stronger emphasis color for specific character changes within deleted lines." - }, - "plain-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral background for unchanged code that allows modified content to stand out." - }, - "plain-lineNumber": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for line numbers of unchanged code, maintaining visual rhythm." - }, - "plain-lineNumber-color": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unchanged line numbers, visually subdued compared to changed content." - }, - "empty-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for placeholder spaces and empty lines, maintaining visual continuity." - }, - "hunk-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for diff section headers ('hunks') that indicate which part of the file is displayed." - }, - "hunk-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for line numbers in section headers." - }, - "hunk-content-color": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for section header content showing file position information." - }, - "expand-content": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background for controls that expand/collapse code sections to show additional context." - } - }, - "input": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for input field content. Ensures readability of user-entered information." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for input fields. Creates a distinct surface for user interaction and data entry." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for input fields. Defines the input area with a visible boundary for improved usability." - } - }, - "label": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for form labels and field identifiers. Ensures high contrast for important contextual information." - } - }, - "link": { - "default": { - "$type": "color", - "$value": "{text.accent}", - "$description": "Default color for text links. Creates distinct visual identification of interactive text elements." - }, - "visited": { - "$type": "color", - "$value": "{colors.purple.300}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." - } - }, - "nav-tabs": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Unselected tab item text." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Selected tab item text." - }, - "border": { - "$type": "color", - "$value": "{border.focus}", - "$description": "Selected tab item border." - } - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Navigation container border." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Navigation tabs container background." - } - }, - "pipeline": { - "arrow": { - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for pipeline connection arrows. Defines the visual path between pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", - "$description": "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", - "$description": "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements." - }, - "border": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", - "$description": "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", - "$description": "Animated gradient border for running pipeline states. Provides visual indication of active processing." - } - }, - "error": { - "border": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution." - } - }, - "completed": { - "border": { - "$type": "color", - "$value": "{colors.green.300}", - "$description": "Border color for completed pipeline states. Indicates successful pipeline execution." - } - } - }, - "card-canvas": { - "1": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container." - } - }, - "2": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization." - } - } - }, - "background": { - "dotes": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Refers to the dotted pattern visible in the background of the workspace." - } - } - }, - "sidebar": { - "background": { - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Background color for navigation components. Creates a consistent foundation for navigation elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for navigation components. Creates visual boundaries and separation from adjacent content." - }, - "separator": { - "$type": "color", - "$value": "{border.3}", - "$description": "Color for separators between navigation sections. Creates visual organization within the navigation structure." - }, - "hover": { - "$type": "color", - "$value": "{state.hover}", - "$description": "Hover state for navigation items." - }, - "selected": { - "$type": "color", - "$value": "{state.selected}", - "$description": "Selected state for navigation items." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected navigation items. Provides readable but less emphasized styling for available options." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected navigation items. Increases contrast to highlight the current location." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected navigation items. Creates stronger visual indication of the current selection." - } - } - }, - "logo": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for Logo in sidebar navigation." - }, - "icon": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Icon color for Logo in sidebar navigation." - } - }, - "search": { - "background": { - "$type": "color", - "$value": "{component.sidebar.background}", - "$description": "Search input specific background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Search input specific border on sidebar navigation." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Search input specific placeholder on sidebar navigation." - }, - "btn": { - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Search input specific button background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Search input specific button border on sidebar navigation." - }, - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Search input specific button text on sidebar navigation." - } - } - }, - "footer": { - "username": { - "$type": "color", - "$value": "{text.1}", - "$description": "Username in the footer sidebar navigation menu." - }, - "data": { - "$type": "color", - "$value": "{text.3}", - "$description": "User data in the footer sidebar navigation menu." - } - } - }, - "scrollbar": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability." - } - }, - "selection": { - "unselected": { - "item": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected state in selection controls. Creates visual distinction from selected items." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "item": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Color for selected items in selection controls. Creates high contrast against selected background state." - }, - "background": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background color for selected state in selection controls. Creates strong visual indication of active selection." - }, - "border": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling." - } - } - }, - "separator": { - "background": { - "$type": "color", - "$value": "{border.3}", - "$description": "Background color for separator elements. Creates visual division between content sections with a subtle line or space." - } - }, - "skeleton": { - "background": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", - "$description": "Animation color that sweeps across skeleton elements. Creates a \"shimmer\" effect indicating content loading states." - } - }, - "slider": { - "track": { - "base": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for slider tracks. Represents the full range of available values in an unselected state." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Filled portion color for slider tracks. Visually represents the selected value or range within the track." - } - }, - "track-segments": { - "base": { - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.800}", - "$description": "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range." - } - }, - "handle": { - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for slider handles. Creates a distinct, interactive element for adjusting values." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Border color for slider handles. Provides definition and contrast for the interactive control." - } - } - }, - "status-indicator": { - "completed": { - "$type": "color", - "$value": "{colors.green.300}", - "$description": "Color for success status indicators. Communicates completed or positive states." - }, - "cancelled": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Color for danger status indicators. Communicates error or critical warning states." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Color for warning status indicators. Communicates caution or potential issue states." - }, - "running": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Color for running status indicators. Communicates active or in-progress operations." - }, - "merged": { - "$type": "color", - "$value": "{colors.purple.300}", - "$description": "Color for merged status indicators. Communicates successful integration or completion in version control contexts." - }, - "action-required": { - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Color for action-required status indicators. Communicates that user attention or intervention is needed. " - }, - "waiting": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Color for pending status indicators. Communicates in waiting states." - } - }, - "switch": { - "unselected": { - "thumb": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for the unselected state of switch controls. Creates visual distinction from the selected state." - } - }, - "selected": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track." - }, - "background": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background color for the selected state of switch controls. Creates strong visual indication of active state." - } - } - }, - "table": { - "header": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for table header cells. Ensures readability of column labels and titles." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for table header rows. Creates visual distinction between headers and data rows." - } - }, - "row": { - "alternate-background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for alternate table rows. Improves readability by differentiating adjacent rows." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for table rows. Provides subtle separation between data rows." - } - }, - "cell": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for table cell content. Ensures high readability of tabular data." - } - } - }, - "tabs": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for the tabs container. Creates a consistent foundation for tab elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tab containers and separators. Provides subtle definition for tab boundaries." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected tab items. Creates visual distinction from the active tab." - }, - "border": { - "$type": "color", - "$value": "{component.tabs.item.unselected.background}", - "$description": "Border color for unselected tab items. Maintains consistent styling with the tab background." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for the selected tab item. Increases contrast to highlight the active tab." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for the selected tab item. Creates strong visual indication of the active tab." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for the selected tab item. Reinforces the active state with defined boundaries." - } - } - } - }, - "tag": { - "blue": { - "text": { - "$type": "color", - "$value": "{colors.blue.100}", - "$description": "Text color for blue tags. Ensures readability while maintaining the blue color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.800}", - "$description": "Background color for blue tags. Creates a distinct surface with blue theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.950}", - "$description": "Subtle background variation for blue tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.blue.background}", - "$description": "Border color for blue tags. " - } - }, - "brown": { - "text": { - "$type": "color", - "$value": "{colors.brown.100}", - "$description": "Text color for brown tags. Ensures readability while maintaining the brown color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.brown.800}", - "$description": "Background color for brown tags. Creates a distinct surface with brown theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.brown.950}", - "$description": "Subtle background variation for brown tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.brown.background}", - "$description": "Border color for brown tags. " - } - }, - "cyan": { - "text": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Text color for cyan tags. Ensures readability while maintaining the cyan color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.800}", - "$description": "Background color for cyan tags. Creates a distinct surface with cyan theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.950}", - "$description": "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.cyan.background}", - "$description": "Border color for cyan tags." - } - }, - "green": { - "text": { - "$type": "color", - "$value": "{colors.green.100}", - "$description": "Text color for green tags. Ensures readability while maintaining the green color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.green.800}", - "$description": "Background color for green tags. Creates a distinct surface with green theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.green.950}", - "$description": "Subtle background variation for green tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.green.background}", - "$description": "Border color for green tags." - } - }, - "indigo": { - "text": { - "$type": "color", - "$value": "{colors.indigo.100}", - "$description": "Text color for indigo tags. Ensures readability while maintaining the indigo color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.indigo.800}", - "$description": "Background color for indigo tags. Creates a distinct surface with indigo theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.indigo.950}", - "$description": "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.indigo.background}", - "$description": "Border color for indigo tags." - } - }, - "lime": { - "text": { - "$type": "color", - "$value": "{colors.lime.100}", - "$description": "Text color for lime tags. Ensures readability while maintaining the lime color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.lime.800}", - "$description": "Background color for lime tags. Creates a distinct surface with lime theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.lime.950}", - "$description": "Subtle background variation for lime tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.lime.background}", - "$description": "Border color for lime tags." - } - }, - "mint": { - "text": { - "$type": "color", - "$value": "{colors.mint.100}", - "$description": "Text color for mint tags. Ensures readability while maintaining the mint color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.mint.800}", - "$description": "Background color for mint tags. Creates a distinct surface with mint theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.mint.950}", - "$description": "Subtle background variation for mint tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.mint.background}", - "$description": "Border color for mint tags." - } - }, - "orange": { - "text": { - "$type": "color", - "$value": "{colors.orange.100}", - "$description": "Text color for orange tags. Ensures readability while maintaining the orange color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.800}", - "$description": "Background color for orange tags. Creates a distinct surface with orange theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.950}", - "$description": "Subtle background variation for orange tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.orange.background}", - "$description": "Border color for orange tags." - } - }, - "pink": { - "text": { - "$type": "color", - "$value": "{colors.pink.100}", - "$description": "Text color for pink tags. Ensures readability while maintaining the pink color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.pink.800}", - "$description": "Background color for pink tags. Creates a distinct surface with pink theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.pink.950}", - "$description": "Subtle background variation for pink tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.pink.background}", - "$description": "Border color for pink tags." - } - }, - "purple": { - "text": { - "$type": "color", - "$value": "{colors.purple.100}", - "$description": "Text color for purple tags. Ensures readability while maintaining the purple color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.purple.800}", - "$description": "Background color for purple tags. Creates a distinct surface with purple theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.purple.950}", - "$description": "Subtle background variation for purple tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.purple.background}", - "$description": "Border color for purple tags." - } - }, - "red": { - "text": { - "$type": "color", - "$value": "{colors.red.100}", - "$description": "Text color for red tags. Ensures readability while maintaining the red color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.red.800}", - "$description": "Background color for red tags. Creates a distinct surface with red theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.red.950}", - "$description": "Subtle background variation for red tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.red.background}", - "$description": "Border color for red tags." - } - }, - "violet": { - "text": { - "$type": "color", - "$value": "{colors.violet.100}", - "$description": "Text color for violet tags. Ensures readability while maintaining the violet color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.violet.800}", - "$description": "Background color for violet tags. Creates a distinct surface with violet theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.violet.950}", - "$description": "Subtle background variation for violet tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.violet.background}", - "$description": "Border color for violet tags." - } - }, - "yellow": { - "text": { - "$type": "color", - "$value": "{colors.yellow.100}", - "$description": "Text color for yellow tags. Ensures readability while maintaining the yellow color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.yellow.800}", - "$description": "Background color for yellow tags. Creates a distinct surface with yellow theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.yellow.950}", - "$description": "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.yellow.background}", - "$description": "Border color for yellow tags." - } - }, - "gray": { - "text": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Text color for gray tags. Ensures readability while maintaining the gray color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Background color for gray tags. Creates a distinct surface with gray theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Subtle background variation for gray tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.gray.background}", - "$description": "Border color for gray tags." - } - } - }, - "toast": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational toast notifications. Ensures high visibility for the notification headline." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational toast notifications. Provides readable contrast for notification content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational toast notifications. Creates visual distinction from UI content beneath." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational toast notifications. Subtly defines the notification's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Title text color for danger toast notifications. Provides maximum contrast against the error background." - }, - "description": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Description text color for danger toast notifications. Ensures readability of critical information." - }, - "background": { - "$type": "color", - "$value": "{colors.red.700}", - "$description": "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings." - }, - "border": { - "$type": "color", - "$value": "{component.toast.danger.background}", - "$description": "Border color for danger toast notifications. Reinforces the critical nature of the notification message." - } - } - }, - "tooltip": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for tooltip content. Ensures readability of helpful contextual information." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - } - } - }, - "shadow": { - "0": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "0", - "blur": "0", - "spread": "0", - "color": "{shadow-color.0}", - "type": "dropShadow" - }, - "$description": "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile." - }, - "1": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "1", - "blur": "2", - "spread": "0", - "color": "{shadow-color.1}", - "type": "dropShadow" - }, - "$description": "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements." - }, - "2": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "1", - "blur": "3", - "spread": "0", - "color": "{shadow-color.2}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "1", - "blur": "2", - "spread": "-1", - "color": "{shadow-color.2}", - "type": "dropShadow" - } - ], - "$description": "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state." - }, - "3": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-1", - "color": "{shadow-color.3}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "2", - "blur": "4", - "spread": "-2", - "color": "{shadow-color.3}", - "type": "dropShadow" - } - ], - "$description": "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover." - }, - "4": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "10", - "blur": "15", - "spread": "-3", - "color": "{shadow-color.4}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-4", - "color": "{shadow-color.4}", - "type": "dropShadow" - } - ], - "$description": "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns." - }, - "5": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "20", - "blur": "25", - "spread": "-5", - "color": "{shadow-color.5}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "8", - "blur": "10", - "spread": "-6", - "color": "{shadow-color.5}", - "type": "dropShadow" - } - ], - "$description": "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections." - }, - "6": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "25", - "blur": "50", - "spread": "-12", - "color": "{shadow-color.6}", - "type": "dropShadow" - }, - "$description": "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation." - }, - "inner": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "2", - "blur": "4", - "spread": "0", - "color": "{shadow-color.inner}", - "type": "innerShadow" - }, - "$description": "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields." - } - }, - "shadow-color": { - "0": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Transparent shadow color. Used when no shadow effect is desired." - }, - "1": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Light shadow color with 60% opacity. Creates subtle depth for small UI elements." - }, - "2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Medium shadow color with 60% opacity. Provides balanced depth for common UI components." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Medium shadow color with 50% opacity. Creates moderate depth for elevated components." - }, - "4": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Deep shadow color with 50% opacity. Provides significant depth for floating elements." - }, - "5": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content." - }, - "6": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.black}", - "$description": "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements." - }, - "inner": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states." - } - }, - "ring": { - "focus": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "2", - "color": "{background.1}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "4", - "color": "{border.focus}", - "type": "dropShadow" - } - ], - "$description": "Focus ring effect with background offset and accent border." - } - }, - "gradient": { - "ai": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.yellow.100}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pink.200}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.purple.300}" - }, - "gradient-stop-4": { - "$type": "color", - "$value": "{colors.cyan.200}" - } - }, - "skeleton": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - }, - "pipeline": { - "running": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.orange.200}" - }, - "gradient-stop-2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.orange.200}" - } - }, - "arrows": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.blue.300}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{border.1}" - } - }, - "card": { - "background": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.900}" - } - }, - "border": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - } - }, - "widget": { - "number": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.200}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.600}" - } - }, - "blob": { - "big": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.850}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.950}" - } - }, - "small": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.800}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.850}" - } - } - } - } - } - }, - "iconStrokeWidth": { - "xxs": { - "$type": "borderWidth", - "$value": "1.1" - }, - "xs": { - "$type": "borderWidth", - "$value": "1" - }, - "sm": { - "$type": "borderWidth", - "$value": "1.1" - }, - "default": { - "$type": "borderWidth", - "$value": "1.1" - }, - "md": { - "$type": "borderWidth", - "$value": "1.4" - }, - "lg": { - "$type": "borderWidth", - "$value": "2" - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/mode/light/default-deuteranopia.json b/packages/ui/design-tokens/mode/light/default-deuteranopia.json deleted file mode 100644 index 28c9bda93d..0000000000 --- a/packages/ui/design-tokens/mode/light/default-deuteranopia.json +++ /dev/null @@ -1,2355 +0,0 @@ -{ - "background": { - "1": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers." - }, - "2": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers." - } - }, - "text": { - "1": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders." - }, - "accent": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements." - }, - "success": { - "$type": "color", - "$value": "{colors.cyan.600}", - "$description": "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.orange.600}", - "$description": "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.500}", - "$description": "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications." - } - }, - "border": { - "1": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.8", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows." - }, - "focus": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators." - }, - "success": { - "$type": "color", - "$value": "{colors.cyan.400}", - "$description": "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.500}", - "$description": "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements." - } - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item." - }, - "disabled": { - "text": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries." - } - } - }, - "component": { - "accordion": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for accordion content. Applied to the expandable text within accordion panels." - }, - "chevron": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for accordion items. Provides visual separation between accordion panels." - } - }, - "alert": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational alerts. Ensures high visibility for the alert heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational alerts. Provides readable contrast for alert content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational alerts. Creates visual distinction from surrounding content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational alerts. Subtly defines the alert's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.orange.800}", - "$description": "Text color for danger alerts. Communicates critical information through high-contrast orange text." - }, - "description": { - "$type": "color", - "$value": "{colors.orange.600}", - "$description": "Description text color for danger alerts. Ensures readability while maintaining the error state styling." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background color for danger alerts. Creates subtle but recognizable error state styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Border color for danger alerts. Provides definition for error state alerts." - } - } - }, - "avatar": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for avatar initials or text. Ensures visibility against the avatar background." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for avatar components. Provides contrast for text or image content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for avatars. Creates subtle definition around the avatar element." - } - }, - "badge": { - "default": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for secondary badges. Provides readable contrast on secondary badge styling." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for secondary badges. Creates less prominent badge styling for secondary information." - }, - "border": { - "$type": "color", - "$value": "{component.badge.default.background}", - "$description": "Border color for secondary badges. Matches background for clean, cohesive appearance." - } - }, - "neutral": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for outline badges. Ensures readability for badges with transparent backgrounds." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Border color for outline badges. Creates definition for badges without background fill." - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.cyan.600}", - "$description": "Text color for success badges. Communicates positive status through readable cyan text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.400}", - "$description": "Border color for success badges. Provides subtle definition for success state indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Background color for success badges. Creates a subtle but recognizable success indicator." - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.orange.600}", - "$description": "Text color for danger badges. Communicates error or warning status with high visibility." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Border color for danger badges. Creates definition for error or warning indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Background color for danger badges. Provides subtle visual indication of error states." - } - }, - "warning": { - "text": { - "$type": "color", - "$value": "{colors.yellow.600}", - "$description": "Text color for warning badges. Signals caution states with readable amber text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.400}", - "$description": "Border color for warning badges. Defines the boundary of caution status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.200}", - "$description": "Background color for warning badges. Creates subtle but recognizable caution indicators." - } - }, - "running": { - "text": { - "$type": "color", - "$value": "{colors.orange.600}", - "$description": "Text color for running state badges. Indicates active or in-progress operations." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Border color for running state badges. Defines the boundary of active status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Background color for running state badges. Creates subtle visual indication of in-progress states." - } - }, - "merged": { - "text": { - "$type": "color", - "$value": "{colors.cyan.600}", - "$description": "Text color for merged state badges. Indicates completed merge actions in version control contexts." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.400}", - "$description": "Border color for merged state badges. Defines the boundary of merge status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Background color for merged state badges. Creates subtle but recognizable merge indicators." - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-related badges. Ensures high contrast against AI badge gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "breadcrumb": { - "item-inactive": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps." - }, - "item-current": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy." - }, - "separator": { - "$type": "color", - "$value": "{state.disabled.text}", - "$description": "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items." - } - }, - "btn": { - "primary": { - "text": { - "$type": "color", - "$value": "{brand.onColor.500}", - "$description": "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements." - }, - "background": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Background color for primary action buttons. Creates emphasis for the most important action in a given context." - }, - "border": { - "$type": "color", - "$value": "{component.btn.primary.background}", - "$description": "Border color for primary action buttons. Matches background for clean, cohesive appearance." - } - }, - "secondary": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions." - }, - "border": { - "$type": "color", - "$value": "{component.btn.secondary.background}", - "$description": "Border color for secondary action buttons. Matches background for clean, cohesive appearance." - } - }, - "outline": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected outline buttons. Creates subtle emphasis for button icons." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for unselected outline buttons. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected outline buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected outline buttons. Increases visibility for active button states." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for selected outline buttons. Creates stronger visual indication of the active state." - } - } - }, - "ghost": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected ghost buttons. Provides readable contrast for minimal styling." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected ghost buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected ghost buttons. Increases visibility for active button states." - } - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.cyan.600}", - "$description": "Text color for success buttons. Communicates positive actions through readable cyan text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Background color for success buttons. Creates subtle but recognizable positive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.400}", - "$description": "Border color for success buttons. Provides definition for positive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Hover state background color for success buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.orange.600}", - "$description": "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Background color for danger buttons. Creates subtle but recognizable destructive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Border color for danger buttons. Provides definition for destructive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Hover state background color for danger buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for AI-powered buttons." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for card components. Creates a distinct surface that appears elevated from the page background." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content." - } - }, - "dialog": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dialog content. Provides readable contrast for the modal's primary text content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dialog components." - }, - "backdrop": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." - } - }, - "dropdown": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for dropdown menus. Creates a distinct surface for selectable options." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dropdown menus container." - }, - "item": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dropdown menu items. Ensures readability of selectable options." - }, - "delete": { - "text": { - "$type": "color", - "$value": "{text.danger}", - "$description": "Text color for dropdown menu delete-item." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Specific hover state color for dropdown delete-item." - } - } - } - } - }, - "diff": { - "grey": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent." - }, - "add-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Cyan background highlighting newly added code lines while maintaining readability." - }, - "add-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Background for line numbers of added code, providing visual connection to added content." - }, - "add-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Stronger emphasis color for specific character changes within added lines." - }, - "add-widget": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background for interactive UI elements related to added content." - }, - "add-widget-color": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text/icon color for add-related interactive elements, ensuring readability." - }, - "del-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Orange background highlighting removed code lines without causing eye strain." - }, - "del-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background for line numbers of deleted code, connecting numbers to removed content." - }, - "del-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Stronger emphasis color for specific character changes within deleted lines." - }, - "plain-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral background for unchanged code that allows modified content to stand out." - }, - "plain-lineNumber": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for line numbers of unchanged code, maintaining visual rhythm." - }, - "plain-lineNumber-color": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unchanged line numbers, visually subdued compared to changed content." - }, - "empty-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for placeholder spaces and empty lines, maintaining visual continuity." - }, - "hunk-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for diff section headers ('hunks') that indicate which part of the file is displayed." - }, - "hunk-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for line numbers in section headers." - }, - "hunk-content-color": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for section header content showing file position information." - }, - "expand-content": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background for controls that expand/collapse code sections to show additional context." - } - }, - "input": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for input field content. Ensures readability of user-entered information." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for input fields. Creates a distinct surface for user interaction and data entry." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for input fields. Defines the input area with a visible boundary for improved usability." - } - }, - "label": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for form labels and field identifiers. Ensures high contrast for important contextual information." - } - }, - "link": { - "default": { - "$type": "color", - "$value": "{text.accent}", - "$description": "Default color for text links. Creates distinct visual identification of interactive text elements." - }, - "visited": { - "$type": "color", - "$value": "{colors.blue.600}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." - } - }, - "nav-tabs": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Unselected tab item text." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Selected tab item text." - }, - "border": { - "$type": "color", - "$value": "{border.focus}", - "$description": "Selected tab item border." - } - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Navigation container border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Navigation tabs container background." - } - }, - "pipeline": { - "arrow": { - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for pipeline connection arrows. Defines the visual path between pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", - "$description": "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", - "$description": "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements." - }, - "border": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", - "$description": "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", - "$description": "Animated gradient border for running pipeline states. Provides visual indication of active processing." - } - }, - "error": { - "border": { - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution." - } - }, - "completed": { - "border": { - "$type": "color", - "$value": "{colors.cyan.400}", - "$description": "Border color for completed pipeline states. Indicates successful pipeline execution." - } - } - }, - "card-canvas": { - "1": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container." - } - }, - "2": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization." - } - } - }, - "background": { - "dotes": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Refers to the dotted pattern visible in the background of the workspace." - } - } - }, - "sidebar": { - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background color for navigation components. Creates a consistent foundation for navigation elements." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Border color for navigation components. Creates visual boundaries and separation from adjacent content." - }, - "separator": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Color for separators between navigation sections. Creates visual organization within the navigation structure." - }, - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Hover state for navigation items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Selected state for navigation items." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Text color for unselected navigation items. Provides readable but less emphasized styling for available options." - }, - "icon": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Text color for selected navigation items. Increases contrast to highlight the current location." - }, - "icon": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Icon color for selected navigation items. Creates stronger visual indication of the current selection." - } - } - }, - "logo": { - "text": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Text color for Logo in sidebar navigation." - }, - "icon": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Icon color for Logo in sidebar navigation." - } - }, - "search": { - "background": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Search input specific background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Search input specific border on sidebar navigation." - }, - "placeholder": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Search input specific placeholder on sidebar navigation." - }, - "btn": { - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Search input specific button background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Search input specific button border on sidebar navigation." - }, - "text": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Search input specific button text on sidebar navigation." - } - } - }, - "footer": { - "username": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Username in the footer sidebar navigation menu." - }, - "data": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "User data in the footer sidebar navigation menu." - } - } - }, - "scrollbar": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability." - } - }, - "selection": { - "unselected": { - "item": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected state in selection controls. Creates visual distinction from selected items." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "item": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Color for selected items in selection controls. Creates high contrast against selected background state." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background color for selected state in selection controls. Creates strong visual indication of active selection." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling." - } - } - }, - "separator": { - "background": { - "$type": "color", - "$value": "{borderWidth.2}", - "$description": "Background color for separator elements. Creates visual division between content sections with a subtle line or space." - } - }, - "skeleton": { - "background": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", - "$description": "Animation color that sweeps across skeleton elements. Creates a \"shimmer\" effect indicating content loading states." - } - }, - "slider": { - "track": { - "base": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for slider tracks. Represents the full range of available values in an unselected state." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Filled portion color for slider tracks. Visually represents the selected value or range within the track." - } - }, - "track-segments": { - "base": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.700}", - "$description": "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range." - } - }, - "handle": { - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for slider handles. Creates a distinct, interactive element for adjusting values." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Border color for slider handles. Provides definition and contrast for the interactive control." - } - } - }, - "status-indicator": { - "completed": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Color for success status indicators. Communicates completed or positive states." - }, - "cancelled": { - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Color for danger status indicators. Communicates error or critical warning states." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Color for warning status indicators. Communicates caution or potential issue states." - }, - "running": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Color for running status indicators. Communicates active or in-progress operations." - }, - "merged": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Color for merged status indicators. Communicates successful integration or completion in version control contexts." - }, - "action-required": { - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Color for action-required status indicators. Communicates that user attention or intervention is needed." - }, - "waiting": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Color for pending status indicators. Communicates in waiting states." - } - }, - "switch": { - "unselected": { - "thumb": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for the unselected state of switch controls. Creates visual distinction from the selected state." - } - }, - "selected": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background color for the selected state of switch controls. Creates strong visual indication of active state." - } - } - }, - "table": { - "header": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for table header cells. Ensures readability of column labels and titles." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for table header rows. Creates visual distinction between headers and data rows." - } - }, - "row": { - "alternate-background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for alternate table rows. Improves readability by differentiating adjacent rows." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for table rows. Provides subtle separation between data rows." - } - }, - "cell": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for table cell content. Ensures high readability of tabular data." - } - } - }, - "tabs": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for the tabs container. Creates a consistent foundation for tab elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tab containers and separators. Provides subtle definition for tab boundaries." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected tab items. Creates visual distinction from the active tab." - }, - "border": { - "$type": "color", - "$value": "{component.tabs.item.unselected.background}", - "$description": "Border color for unselected tab items. Maintains consistent styling with the tab background." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for the selected tab item. Increases contrast to highlight the active tab." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for the selected tab item. Creates strong visual indication of the active tab." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for the selected tab item. Reinforces the active state with defined boundaries." - } - } - } - }, - "tag": { - "blue": { - "text": { - "$type": "color", - "$value": "{colors.blue.600}", - "$description": "Text color for blue tags. Ensures readability while maintaining the blue color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.100}", - "$description": "Background color for blue tags. Creates a distinct surface with blue theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.50}", - "$description": "Subtle background variation for blue tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.blue.background}", - "$description": "Border color for blue tags." - } - }, - "brown": { - "text": { - "$type": "color", - "$value": "{colors.brown.600}", - "$description": "Text color for brown tags. Ensures readability while maintaining the brown color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.brown.100}", - "$description": "Background color for brown tags. Creates a distinct surface with brown theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.brown.50}", - "$description": "Subtle background variation for brown tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.brown.background}", - "$description": "Border color for brown tags." - } - }, - "cyan": { - "text": { - "$type": "color", - "$value": "{colors.cyan.600}", - "$description": "Text color for cyan tags. Ensures readability while maintaining the cyan color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Background color for cyan tags. Creates a distinct surface with cyan theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.50}", - "$description": "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.cyan.background}", - "$description": "Border color for cyan tags." - } - }, - "green": { - "text": { - "$type": "color", - "$value": "{colors.cyan.600}", - "$description": "Text color for green tags, replaced with cyan for deuteranopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Background color for green tags, replaced with cyan for deuteranopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.50}", - "$description": "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.green.background}", - "$description": "Border color for green tags, replaced with cyan." - } - }, - "indigo": { - "text": { - "$type": "color", - "$value": "{colors.indigo.600}", - "$description": "Text color for indigo tags. Ensures readability while maintaining the indigo color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.indigo.100}", - "$description": "Background color for indigo tags. Creates a distinct surface with indigo theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.indigo.50}", - "$description": "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.indigo.background}", - "$description": "Border color for indigo tags." - } - }, - "lime": { - "text": { - "$type": "color", - "$value": "{colors.lime.600}", - "$description": "Text color for lime tags. Ensures readability while maintaining the lime color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.lime.100}", - "$description": "Background color for lime tags. Creates a distinct surface with lime theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.lime.50}", - "$description": "Subtle background variation for lime tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.lime.background}", - "$description": "Border color for lime tags." - } - }, - "mint": { - "text": { - "$type": "color", - "$value": "{colors.mint.600}", - "$description": "Text color for mint tags. Ensures readability while maintaining the mint color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.mint.100}", - "$description": "Background color for mint tags. Creates a distinct surface with mint theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.mint.50}", - "$description": "Subtle background variation for mint tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.mint.background}", - "$description": "Border color for mint tags." - } - }, - "orange": { - "text": { - "$type": "color", - "$value": "{colors.orange.600}", - "$description": "Text color for orange tags. Ensures readability while maintaining the orange color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.100}", - "$description": "Background color for orange tags. Creates a distinct surface with orange theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.50}", - "$description": "Subtle background variation for orange tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.orange.background}", - "$description": "Border color for orange tags." - } - }, - "pink": { - "text": { - "$type": "color", - "$value": "{colors.pink.600}", - "$description": "Text color for pink tags. Ensures readability while maintaining the pink color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.pink.100}", - "$description": "Background color for pink tags. Creates a distinct surface with pink theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.pink.50}", - "$description": "Subtle background variation for pink tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.pink.background}", - "$description": "Border color for pink tags." - } - }, - "purple": { - "text": { - "$type": "color", - "$value": "{colors.cyan.600}", - "$description": "Text color for purple tags, replaced with cyan for deuteranopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Background color for purple tags, replaced with cyan for deuteranopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.50}", - "$description": "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.purple.background}", - "$description": "Border color for purple tags, replaced with cyan." - } - }, - "red": { - "text": { - "$type": "color", - "$value": "{colors.orange.600}", - "$description": "Text color for red tags, replaced with orange for deuteranopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.100}", - "$description": "Background color for red tags, replaced with orange for deuteranopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.50}", - "$description": "Subtle background variation for red tags, replaced with orange for deuteranopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.red.background}", - "$description": "Border color for red tags, replaced with orange." - } - }, - "violet": { - "text": { - "$type": "color", - "$value": "{colors.blue.600}", - "$description": "Text color for violet tags, replaced with blue for deuteranopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.100}", - "$description": "Background color for violet tags, replaced with blue for deuteranopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.50}", - "$description": "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.violet.background}", - "$description": "Border color for violet tags, replaced with blue." - } - }, - "yellow": { - "text": { - "$type": "color", - "$value": "{colors.yellow.600}", - "$description": "Text color for yellow tags. Ensures readability while maintaining the yellow color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.yellow.100}", - "$description": "Background color for yellow tags. Creates a distinct surface with yellow theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.yellow.50}", - "$description": "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.yellow.background}", - "$description": "Border color for yellow tags." - } - }, - "gray": { - "text": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Text color for gray tags. Ensures readability while maintaining the gray color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for gray tags. Creates a distinct surface with gray theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Subtle background variation for gray tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.gray.background}", - "$description": "Border color for gray tags." - } - } - }, - "toast": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational toast notifications. Ensures high visibility for the notification headline." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational toast notifications. Provides readable contrast for notification content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational toast notifications. Creates visual distinction from UI content beneath." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational toast notifications. Subtly defines the notification's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for danger toast notifications. Provides maximum contrast against the error background." - }, - "description": { - "$type": "color", - "$value": "{text.1}", - "$description": "Description text color for danger toast notifications. Ensures readability of critical information." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings." - }, - "border": { - "$type": "color", - "$value": "{component.toast.danger.background}", - "$description": "Border color for danger toast notifications. Reinforces the critical nature of the notification message." - } - } - }, - "tooltip": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for tooltip content. Ensures readability of helpful contextual information." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - } - } - }, - "shadow": { - "0": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "0", - "blur": "0", - "spread": "0", - "color": "{shadow-color.0}", - "type": "dropShadow" - }, - "$description": "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile." - }, - "1": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "1", - "blur": "2", - "spread": "0", - "color": "{shadow-color.1}", - "type": "dropShadow" - }, - "$description": "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements." - }, - "2": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "1", - "blur": "3", - "spread": "0", - "color": "{shadow-color.2}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "1", - "blur": "2", - "spread": "-1", - "color": "{shadow-color.2}", - "type": "dropShadow" - } - ], - "$description": "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state." - }, - "3": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-1", - "color": "{shadow-color.3}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "2", - "blur": "4", - "spread": "-2", - "color": "{shadow-color.3}", - "type": "dropShadow" - } - ], - "$description": "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover." - }, - "4": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "10", - "blur": "15", - "spread": "-3", - "color": "{shadow-color.4}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-4", - "color": "{shadow-color.4}", - "type": "dropShadow" - } - ], - "$description": "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns." - }, - "5": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "20", - "blur": "25", - "spread": "-5", - "color": "{shadow-color.5}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "8", - "blur": "10", - "spread": "-6", - "color": "{shadow-color.5}", - "type": "dropShadow" - } - ], - "$description": "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections." - }, - "6": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "25", - "blur": "50", - "spread": "-12", - "color": "{shadow-color.6}", - "type": "dropShadow" - }, - "$description": "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation." - }, - "inner": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "2", - "blur": "4", - "spread": "0", - "color": "{shadow-color.inner}", - "type": "innerShadow" - }, - "$description": "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields." - } - }, - "shadow-color": { - "0": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Transparent shadow color. Used when no shadow effect is desired." - }, - "1": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Light shadow color with 60% opacity. Creates subtle depth for small UI elements." - }, - "2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Medium shadow color with 60% opacity. Provides balanced depth for common UI components." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Medium shadow color with 50% opacity. Creates moderate depth for elevated components." - }, - "4": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Deep shadow color with 50% opacity. Provides significant depth for floating elements." - }, - "5": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content." - }, - "6": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements." - }, - "inner": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states." - } - }, - "ring": { - "focus": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "2", - "color": "{background.1}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "4", - "color": "{border.focus}", - "type": "dropShadow" - } - ], - "$description": "Focus ring effect with background offset and accent border." - } - }, - "gradient": { - "ai": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.yellow.200}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pink.300}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.cyan.300}" - }, - "gradient-stop-4": { - "$type": "color", - "$value": "{colors.cyan.200}" - } - }, - "skeleton": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.chrome.100}" - } - }, - "pipeline": { - "running": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.orange.300}" - }, - "gradient-stop-2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.orange.300}" - } - }, - "arrows": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.blue.400}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{border.1}" - } - }, - "card": { - "background": { - "gradient-from": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.50}" - } - }, - "border": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.50}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.100}" - } - } - }, - "widget": { - "number": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.500}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.600}" - } - }, - "blob": { - "big": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.pure.white}" - } - }, - "small": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.150}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.pure.white}" - } - } - } - } - } - }, - "iconStrokeWidth": { - "xxs": { - "$type": "borderWidth", - "$value": "1.1" - }, - "xs": { - "$type": "borderWidth", - "$value": "1" - }, - "sm": { - "$type": "borderWidth", - "$value": "1.1" - }, - "default": { - "$type": "borderWidth", - "$value": "1.1" - }, - "md": { - "$type": "borderWidth", - "$value": "1.4" - }, - "lg": { - "$type": "borderWidth", - "$value": "2" - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/mode/light/default-protanopia.json b/packages/ui/design-tokens/mode/light/default-protanopia.json deleted file mode 100644 index 4d5527c13f..0000000000 --- a/packages/ui/design-tokens/mode/light/default-protanopia.json +++ /dev/null @@ -1,2355 +0,0 @@ -{ - "background": { - "1": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers." - }, - "2": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers." - } - }, - "text": { - "1": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders." - }, - "accent": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements." - }, - "success": { - "$type": "color", - "$value": "{colors.blue.600}", - "$description": "Primary color for text and icons in success content. Communicates positive outcomes and completion states. Using blue instead of green for protanopia visibility.\n\nCommon uses: Success message text, completion text, positive indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.600}", - "$description": "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.500}", - "$description": "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications." - } - }, - "border": { - "1": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.8", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows." - }, - "focus": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators." - }, - "success": { - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Border color for success containers. Reinforces positive status through visual framing. Using blue instead of green for protanopia visibility.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.500}", - "$description": "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements." - } - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item." - }, - "disabled": { - "text": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries." - } - } - }, - "component": { - "accordion": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for accordion content. Applied to the expandable text within accordion panels." - }, - "chevron": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for accordion items. Provides visual separation between accordion panels." - } - }, - "alert": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational alerts. Ensures high visibility for the alert heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational alerts. Provides readable contrast for alert content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational alerts. Creates visual distinction from surrounding content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational alerts. Subtly defines the alert's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.red.800}", - "$description": "Text color for danger alerts. Communicates critical information through high-contrast red text." - }, - "description": { - "$type": "color", - "$value": "{colors.red.600}", - "$description": "Description text color for danger alerts. Ensures readability while maintaining the error state styling." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger alerts. Creates subtle but recognizable error state styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Border color for danger alerts. Provides definition for error state alerts." - } - } - }, - "avatar": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for avatar initials or text. Ensures visibility against the avatar background." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for avatar components. Provides contrast for text or image content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for avatars. Creates subtle definition around the avatar element." - } - }, - "badge": { - "default": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for secondary badges. Provides readable contrast on secondary badge styling." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for secondary badges. Creates less prominent badge styling for secondary information." - }, - "border": { - "$type": "color", - "$value": "{component.badge.default.background}", - "$description": "Border color for secondary badges. Matches background for clean, cohesive appearance." - } - }, - "neutral": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for outline badges. Ensures readability for badges with transparent backgrounds." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Border color for outline badges. Creates definition for badges without background fill." - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.blue.600}", - "$description": "Text color for success badges. Communicates positive status through readable blue text. Adjusted for protanopia visibility." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Border color for success badges. Provides subtle definition for success state indicators. Adjusted for protanopia visibility." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Background color for success badges. Creates a subtle but recognizable success indicator. Adjusted for protanopia visibility." - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.600}", - "$description": "Text color for danger badges. Communicates error or warning status with high visibility." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Border color for danger badges. Creates definition for error or warning indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Background color for danger badges. Provides subtle visual indication of error states." - } - }, - "warning": { - "text": { - "$type": "color", - "$value": "{colors.yellow.600}", - "$description": "Text color for warning badges. Signals caution states with readable amber text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.400}", - "$description": "Border color for warning badges. Defines the boundary of caution status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.200}", - "$description": "Background color for warning badges. Creates subtle but recognizable caution indicators." - } - }, - "running": { - "text": { - "$type": "color", - "$value": "{colors.orange.600}", - "$description": "Text color for running state badges. Indicates active or in-progress operations." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Border color for running state badges. Defines the boundary of active status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Background color for running state badges. Creates subtle visual indication of in-progress states." - } - }, - "merged": { - "text": { - "$type": "color", - "$value": "{colors.purple.600}", - "$description": "Text color for merged state badges. Indicates completed merge actions in version control contexts." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.purple.400}", - "$description": "Border color for merged state badges. Defines the boundary of merge status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.purple.300}", - "$description": "Background color for merged state badges. Creates subtle but recognizable merge indicators." - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-related badges. Ensures high contrast against AI badge gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "breadcrumb": { - "item-inactive": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps." - }, - "item-current": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy." - }, - "separator": { - "$type": "color", - "$value": "{state.disabled.text}", - "$description": "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items." - } - }, - "btn": { - "primary": { - "text": { - "$type": "color", - "$value": "{brand.onColor.500}", - "$description": "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements." - }, - "background": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Background color for primary action buttons. Creates emphasis for the most important action in a given context." - }, - "border": { - "$type": "color", - "$value": "{component.btn.primary.background}", - "$description": "Border color for primary action buttons. Matches background for clean, cohesive appearance." - } - }, - "secondary": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions." - }, - "border": { - "$type": "color", - "$value": "{component.btn.secondary.background}", - "$description": "Border color for secondary action buttons. Matches background for clean, cohesive appearance." - } - }, - "outline": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected outline buttons. Creates subtle emphasis for button icons." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for unselected outline buttons. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected outline buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected outline buttons. Increases visibility for active button states." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for selected outline buttons. Creates stronger visual indication of the active state." - } - } - }, - "ghost": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected ghost buttons. Provides readable contrast for minimal styling." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected ghost buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected ghost buttons. Increases visibility for active button states." - } - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.blue.600}", - "$description": "Text color for success buttons. Communicates positive actions through readable blue text. Adjusted for protanopia visibility." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Background color for success buttons. Creates subtle but recognizable positive action styling. Adjusted for protanopia visibility." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Border color for success buttons. Provides definition for positive action buttons. Adjusted for protanopia visibility." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Hover state background color for success buttons. Creates subtle feedback for user interaction. Adjusted for protanopia visibility." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. Adjusted for protanopia visibility." - } - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.600}", - "$description": "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Background color for danger buttons. Creates subtle but recognizable destructive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Border color for danger buttons. Provides definition for destructive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Hover state background color for danger buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for AI-powered buttons." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for card components. Creates a distinct surface that appears elevated from the page background." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content." - } - }, - "dialog": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dialog content. Provides readable contrast for the modal's primary text content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dialog components." - }, - "backdrop": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." - } - }, - "dropdown": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for dropdown menus. Creates a distinct surface for selectable options." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dropdown menus container." - }, - "item": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dropdown menu items. Ensures readability of selectable options." - }, - "delete": { - "text": { - "$type": "color", - "$value": "{text.danger}", - "$description": "Text color for dropdown menu delete-item." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Specific hover state color for dropdown delete-item." - } - } - } - } - }, - "diff": { - "grey": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent." - }, - "add-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Blue background highlighting newly added code lines while maintaining readability. Using blue instead of green for protanopia visibility." - }, - "add-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for line numbers of added code, providing visual connection to added content. Using blue instead of green for protanopia visibility." - }, - "add-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Stronger emphasis color for specific character changes within added lines. Using blue instead of green for protanopia visibility." - }, - "add-widget": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background for interactive UI elements related to added content." - }, - "add-widget-color": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text/icon color for add-related interactive elements, ensuring readability." - }, - "del-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Red background highlighting removed code lines without causing eye strain." - }, - "del-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background for line numbers of deleted code, connecting numbers to removed content." - }, - "del-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Stronger emphasis color for specific character changes within deleted lines." - }, - "plain-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral background for unchanged code that allows modified content to stand out." - }, - "plain-lineNumber": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for line numbers of unchanged code, maintaining visual rhythm." - }, - "plain-lineNumber-color": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unchanged line numbers, visually subdued compared to changed content." - }, - "empty-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for placeholder spaces and empty lines, maintaining visual continuity." - }, - "hunk-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for diff section headers ('hunks') that indicate which part of the file is displayed." - }, - "hunk-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for line numbers in section headers." - }, - "hunk-content-color": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for section header content showing file position information." - }, - "expand-content": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background for controls that expand/collapse code sections to show additional context." - } - }, - "input": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for input field content. Ensures readability of user-entered information." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for input fields. Creates a distinct surface for user interaction and data entry." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for input fields. Defines the input area with a visible boundary for improved usability." - } - }, - "label": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for form labels and field identifiers. Ensures high contrast for important contextual information." - } - }, - "link": { - "default": { - "$type": "color", - "$value": "{text.accent}", - "$description": "Default color for text links. Creates distinct visual identification of interactive text elements." - }, - "visited": { - "$type": "color", - "$value": "{colors.purple.600}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." - } - }, - "nav-tabs": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Unselected tab item text." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Selected tab item text." - }, - "border": { - "$type": "color", - "$value": "{border.focus}", - "$description": "Selected tab item border." - } - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Navigation container border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Navigation tabs container background." - } - }, - "pipeline": { - "arrow": { - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for pipeline connection arrows. Defines the visual path between pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", - "$description": "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", - "$description": "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements." - }, - "border": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", - "$description": "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", - "$description": "Animated gradient border for running pipeline states. Provides visual indication of active processing." - } - }, - "error": { - "border": { - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution." - } - }, - "completed": { - "border": { - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Border color for completed pipeline states. Indicates successful pipeline execution. Using blue instead of green for protanopia visibility." - } - } - }, - "card-canvas": { - "1": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container." - } - }, - "2": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization." - } - } - }, - "background": { - "dotes": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Refers to the dotted pattern visible in the background of the workspace." - } - } - }, - "sidebar": { - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background color for navigation components. Creates a consistent foundation for navigation elements." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Border color for navigation components. Creates visual boundaries and separation from adjacent content." - }, - "separator": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Color for separators between navigation sections. Creates visual organization within the navigation structure." - }, - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Hover state for navigation items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Selected state for navigation items." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Text color for unselected navigation items. Provides readable but less emphasized styling for available options." - }, - "icon": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Text color for selected navigation items. Increases contrast to highlight the current location." - }, - "icon": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Icon color for selected navigation items. Creates stronger visual indication of the current selection." - } - } - }, - "logo": { - "text": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Text color for Logo in sidebar navigation." - }, - "icon": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Icon color for Logo in sidebar navigation." - } - }, - "search": { - "background": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Search input specific background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Search input specific border on sidebar navigation." - }, - "placeholder": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Search input specific placeholder on sidebar navigation." - }, - "btn": { - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Search input specific button background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Search input specific button border on sidebar navigation." - }, - "text": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Search input specific button text on sidebar navigation." - } - } - }, - "footer": { - "username": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Username in the footer sidebar navigation menu." - }, - "data": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "User data in the footer sidebar navigation menu." - } - } - }, - "scrollbar": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability." - } - }, - "selection": { - "unselected": { - "item": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected state in selection controls. Creates visual distinction from selected items." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "item": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Color for selected items in selection controls. Creates high contrast against selected background state." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background color for selected state in selection controls. Creates strong visual indication of active selection." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling." - } - } - }, - "separator": { - "background": { - "$type": "color", - "$value": "{borderWidth.2}", - "$description": "Background color for separator elements. Creates visual division between content sections with a subtle line or space." - } - }, - "skeleton": { - "background": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", - "$description": "Animation color that sweeps across skeleton elements. Creates a \"shimmer\" effect indicating content loading states." - } - }, - "slider": { - "track": { - "base": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for slider tracks. Represents the full range of available values in an unselected state." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Filled portion color for slider tracks. Visually represents the selected value or range within the track." - } - }, - "track-segments": { - "base": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.700}", - "$description": "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range." - } - }, - "handle": { - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for slider handles. Creates a distinct, interactive element for adjusting values." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Border color for slider handles. Provides definition and contrast for the interactive control." - } - } - }, - "status-indicator": { - "completed": { - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Color for success status indicators. Communicates completed or positive states. Using blue instead of green for protanopia visibility." - }, - "cancelled": { - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Color for danger status indicators. Communicates error or critical warning states." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Color for warning status indicators. Communicates caution or potential issue states." - }, - "running": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Color for running status indicators. Communicates active or in-progress operations." - }, - "merged": { - "$type": "color", - "$value": "{colors.purple.300}", - "$description": "Color for merged status indicators. Communicates successful integration or completion in version control contexts." - }, - "action-required": { - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Color for action-required status indicators. Communicates that user attention or intervention is needed." - }, - "waiting": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Color for pending status indicators. Communicates in waiting states." - } - }, - "switch": { - "unselected": { - "thumb": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for the unselected state of switch controls. Creates visual distinction from the selected state." - } - }, - "selected": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background color for the selected state of switch controls. Creates strong visual indication of active state." - } - } - }, - "table": { - "header": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for table header cells. Ensures readability of column labels and titles." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for table header rows. Creates visual distinction between headers and data rows." - } - }, - "row": { - "alternate-background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for alternate table rows. Improves readability by differentiating adjacent rows." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for table rows. Provides subtle separation between data rows." - } - }, - "cell": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for table cell content. Ensures high readability of tabular data." - } - } - }, - "tabs": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for the tabs container. Creates a consistent foundation for tab elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tab containers and separators. Provides subtle definition for tab boundaries." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected tab items. Creates visual distinction from the active tab." - }, - "border": { - "$type": "color", - "$value": "{component.tabs.item.unselected.background}", - "$description": "Border color for unselected tab items. Maintains consistent styling with the tab background." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for the selected tab item. Increases contrast to highlight the active tab." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for the selected tab item. Creates strong visual indication of the active tab." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for the selected tab item. Reinforces the active state with defined boundaries." - } - } - } - }, - "tag": { - "blue": { - "text": { - "$type": "color", - "$value": "{colors.blue.600}", - "$description": "Text color for blue tags. Ensures readability while maintaining the blue color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.100}", - "$description": "Background color for blue tags. Creates a distinct surface with blue theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.50}", - "$description": "Subtle background variation for blue tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.blue.background}", - "$description": "Border color for blue tags." - } - }, - "brown": { - "text": { - "$type": "color", - "$value": "{colors.brown.600}", - "$description": "Text color for brown tags. Ensures readability while maintaining the brown color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.brown.100}", - "$description": "Background color for brown tags. Creates a distinct surface with brown theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.brown.50}", - "$description": "Subtle background variation for brown tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.brown.background}", - "$description": "Border color for brown tags." - } - }, - "cyan": { - "text": { - "$type": "color", - "$value": "{colors.cyan.600}", - "$description": "Text color for cyan tags. Ensures readability while maintaining the cyan color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Background color for cyan tags. Creates a distinct surface with cyan theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.50}", - "$description": "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.cyan.background}", - "$description": "Border color for cyan tags." - } - }, - "green": { - "text": { - "$type": "color", - "$value": "{colors.blue.600}", - "$description": "Text color for green tags. Using blue instead of green for protanopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.100}", - "$description": "Background color for green tags. Using blue instead of green for protanopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.50}", - "$description": "Subtle background variation for green tags. Using blue instead of green for protanopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.green.background}", - "$description": "Border color for green tags. Using blue instead of green for protanopia visibility." - } - }, - "indigo": { - "text": { - "$type": "color", - "$value": "{colors.indigo.600}", - "$description": "Text color for indigo tags. Ensures readability while maintaining the indigo color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.indigo.100}", - "$description": "Background color for indigo tags. Creates a distinct surface with indigo theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.indigo.50}", - "$description": "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.indigo.background}", - "$description": "Border color for indigo tags." - } - }, - "lime": { - "text": { - "$type": "color", - "$value": "{colors.blue.600}", - "$description": "Text color for lime tags. Using blue instead of lime/green for protanopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.100}", - "$description": "Background color for lime tags. Using blue instead of lime/green for protanopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.50}", - "$description": "Subtle background variation for lime tags. Using blue instead of lime/green for protanopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.lime.background}", - "$description": "Border color for lime tags. Using blue instead of lime/green for protanopia visibility." - } - }, - "mint": { - "text": { - "$type": "color", - "$value": "{colors.blue.600}", - "$description": "Text color for mint tags. Using blue instead of mint/green for protanopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.100}", - "$description": "Background color for mint tags. Using blue instead of mint/green for protanopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.50}", - "$description": "Subtle background variation for mint tags. Using blue instead of mint/green for protanopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.mint.background}", - "$description": "Border color for mint tags. Using blue instead of mint/green for protanopia visibility." - } - }, - "orange": { - "text": { - "$type": "color", - "$value": "{colors.orange.600}", - "$description": "Text color for orange tags. Ensures readability while maintaining the orange color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.100}", - "$description": "Background color for orange tags. Creates a distinct surface with orange theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.50}", - "$description": "Subtle background variation for orange tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.orange.background}", - "$description": "Border color for orange tags." - } - }, - "pink": { - "text": { - "$type": "color", - "$value": "{colors.pink.600}", - "$description": "Text color for pink tags. Ensures readability while maintaining the pink color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.pink.100}", - "$description": "Background color for pink tags. Creates a distinct surface with pink theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.pink.50}", - "$description": "Subtle background variation for pink tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.pink.background}", - "$description": "Border color for pink tags." - } - }, - "purple": { - "text": { - "$type": "color", - "$value": "{colors.purple.600}", - "$description": "Text color for purple tags. Ensures readability while maintaining the purple color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.purple.100}", - "$description": "Background color for purple tags. Creates a distinct surface with purple theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.purple.50}", - "$description": "Subtle background variation for purple tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.purple.background}", - "$description": "Border color for purple tags." - } - }, - "red": { - "text": { - "$type": "color", - "$value": "{colors.red.600}", - "$description": "Text color for red tags. Ensures readability while maintaining the red color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.red.100}", - "$description": "Background color for red tags. Creates a distinct surface with red theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.red.50}", - "$description": "Subtle background variation for red tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.red.background}", - "$description": "Border color for red tags." - } - }, - "violet": { - "text": { - "$type": "color", - "$value": "{colors.violet.600}", - "$description": "Text color for violet tags. Ensures readability while maintaining the violet color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.violet.100}", - "$description": "Background color for violet tags. Creates a distinct surface with violet theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.violet.50}", - "$description": "Subtle background variation for violet tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.violet.background}", - "$description": "Border color for violet tags." - } - }, - "yellow": { - "text": { - "$type": "color", - "$value": "{colors.yellow.600}", - "$description": "Text color for yellow tags. Ensures readability while maintaining the yellow color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.yellow.100}", - "$description": "Background color for yellow tags. Creates a distinct surface with yellow theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.yellow.50}", - "$description": "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.yellow.background}", - "$description": "Border color for yellow tags." - } - }, - "gray": { - "text": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Text color for gray tags. Ensures readability while maintaining the gray color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for gray tags. Creates a distinct surface with gray theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Subtle background variation for gray tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.gray.background}", - "$description": "Border color for gray tags." - } - } - }, - "toast": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational toast notifications. Ensures high visibility for the notification headline." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational toast notifications. Provides readable contrast for notification content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational toast notifications. Creates visual distinction from UI content beneath." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational toast notifications. Subtly defines the notification's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for danger toast notifications. Provides maximum contrast against the error background." - }, - "description": { - "$type": "color", - "$value": "{text.1}", - "$description": "Description text color for danger toast notifications. Ensures readability of critical information." - }, - "background": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings." - }, - "border": { - "$type": "color", - "$value": "{component.toast.danger.background}", - "$description": "Border color for danger toast notifications. Reinforces the critical nature of the notification message." - } - } - }, - "tooltip": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for tooltip content. Ensures readability of helpful contextual information." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - } - } - }, - "shadow": { - "0": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "0", - "blur": "0", - "spread": "0", - "color": "{shadow-color.0}", - "type": "dropShadow" - }, - "$description": "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile." - }, - "1": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "1", - "blur": "2", - "spread": "0", - "color": "{shadow-color.1}", - "type": "dropShadow" - }, - "$description": "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements." - }, - "2": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "1", - "blur": "3", - "spread": "0", - "color": "{shadow-color.2}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "1", - "blur": "2", - "spread": "-1", - "color": "{shadow-color.2}", - "type": "dropShadow" - } - ], - "$description": "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state." - }, - "3": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-1", - "color": "{shadow-color.3}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "2", - "blur": "4", - "spread": "-2", - "color": "{shadow-color.3}", - "type": "dropShadow" - } - ], - "$description": "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover." - }, - "4": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "10", - "blur": "15", - "spread": "-3", - "color": "{shadow-color.4}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-4", - "color": "{shadow-color.4}", - "type": "dropShadow" - } - ], - "$description": "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns." - }, - "5": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "20", - "blur": "25", - "spread": "-5", - "color": "{shadow-color.5}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "8", - "blur": "10", - "spread": "-6", - "color": "{shadow-color.5}", - "type": "dropShadow" - } - ], - "$description": "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections." - }, - "6": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "25", - "blur": "50", - "spread": "-12", - "color": "{shadow-color.6}", - "type": "dropShadow" - }, - "$description": "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation." - }, - "inner": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "2", - "blur": "4", - "spread": "0", - "color": "{shadow-color.inner}", - "type": "innerShadow" - }, - "$description": "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields." - } - }, - "shadow-color": { - "0": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Transparent shadow color. Used when no shadow effect is desired." - }, - "1": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Light shadow color with 60% opacity. Creates subtle depth for small UI elements." - }, - "2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Medium shadow color with 60% opacity. Provides balanced depth for common UI components." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Medium shadow color with 50% opacity. Creates moderate depth for elevated components." - }, - "4": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Deep shadow color with 50% opacity. Provides significant depth for floating elements." - }, - "5": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content." - }, - "6": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements." - }, - "inner": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states." - } - }, - "ring": { - "focus": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "2", - "color": "{background.1}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "4", - "color": "{border.focus}", - "type": "dropShadow" - } - ], - "$description": "Focus ring effect with background offset and accent border." - } - }, - "gradient": { - "ai": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.yellow.200}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pink.300}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.purple.300}" - }, - "gradient-stop-4": { - "$type": "color", - "$value": "{colors.cyan.200}" - } - }, - "skeleton": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.chrome.100}" - } - }, - "pipeline": { - "running": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.orange.300}" - }, - "gradient-stop-2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.orange.300}" - } - }, - "arrows": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.blue.400}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{border.1}" - } - }, - "card": { - "background": { - "gradient-from": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.50}" - } - }, - "border": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.50}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.100}" - } - } - }, - "widget": { - "number": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.500}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.600}" - } - }, - "blob": { - "big": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.pure.white}" - } - }, - "small": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.150}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.pure.white}" - } - } - } - } - } - }, - "iconStrokeWidth": { - "xxs": { - "$type": "borderWidth", - "$value": "1.1" - }, - "xs": { - "$type": "borderWidth", - "$value": "1" - }, - "sm": { - "$type": "borderWidth", - "$value": "1.1" - }, - "default": { - "$type": "borderWidth", - "$value": "1.1" - }, - "md": { - "$type": "borderWidth", - "$value": "1.4" - }, - "lg": { - "$type": "borderWidth", - "$value": "2" - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/mode/light/default-tritanopia.json b/packages/ui/design-tokens/mode/light/default-tritanopia.json deleted file mode 100644 index 020c00bafe..0000000000 --- a/packages/ui/design-tokens/mode/light/default-tritanopia.json +++ /dev/null @@ -1,2355 +0,0 @@ -{ - "background": { - "1": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers." - }, - "2": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers." - } - }, - "text": { - "1": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders." - }, - "accent": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements." - }, - "success": { - "$type": "color", - "$value": "{colors.cyan.600}", - "$description": "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.600}", - "$description": "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels." - }, - "warning": { - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications." - } - }, - "border": { - "1": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.8", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows." - }, - "focus": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators." - }, - "success": { - "$type": "color", - "$value": "{colors.cyan.400}", - "$description": "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers." - }, - "warning": { - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements." - } - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item." - }, - "disabled": { - "text": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries." - } - } - }, - "component": { - "accordion": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for accordion content. Applied to the expandable text within accordion panels." - }, - "chevron": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for accordion items. Provides visual separation between accordion panels." - } - }, - "alert": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational alerts. Ensures high visibility for the alert heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational alerts. Provides readable contrast for alert content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational alerts. Creates visual distinction from surrounding content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational alerts. Subtly defines the alert's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.red.800}", - "$description": "Text color for danger alerts. Communicates critical information through high-contrast red text." - }, - "description": { - "$type": "color", - "$value": "{colors.red.600}", - "$description": "Description text color for danger alerts. Ensures readability while maintaining the error state styling." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger alerts. Creates subtle but recognizable error state styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Border color for danger alerts. Provides definition for error state alerts." - } - } - }, - "avatar": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for avatar initials or text. Ensures visibility against the avatar background." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for avatar components. Provides contrast for text or image content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for avatars. Creates subtle definition around the avatar element." - } - }, - "badge": { - "default": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for secondary badges. Provides readable contrast on secondary badge styling." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for secondary badges. Creates less prominent badge styling for secondary information." - }, - "border": { - "$type": "color", - "$value": "{component.badge.default.background}", - "$description": "Border color for secondary badges. Matches background for clean, cohesive appearance." - } - }, - "neutral": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for outline badges. Ensures readability for badges with transparent backgrounds." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Border color for outline badges. Creates definition for badges without background fill." - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.cyan.600}", - "$description": "Text color for success badges. Communicates positive status through readable cyan text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.400}", - "$description": "Border color for success badges. Provides subtle definition for success state indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Background color for success badges. Creates a subtle but recognizable success indicator." - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.600}", - "$description": "Text color for danger badges. Communicates error or warning status with high visibility." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Border color for danger badges. Creates definition for error or warning indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Background color for danger badges. Provides subtle visual indication of error states." - } - }, - "warning": { - "text": { - "$type": "color", - "$value": "{colors.orange.600}", - "$description": "Text color for warning badges. Signals caution states with readable orange text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Border color for warning badges. Defines the boundary of caution status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Background color for warning badges. Creates subtle but recognizable caution indicators." - } - }, - "running": { - "text": { - "$type": "color", - "$value": "{colors.orange.600}", - "$description": "Text color for running state badges. Indicates active or in-progress operations." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Border color for running state badges. Defines the boundary of active status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Background color for running state badges. Creates subtle visual indication of in-progress states." - } - }, - "merged": { - "text": { - "$type": "color", - "$value": "{colors.cyan.600}", - "$description": "Text color for merged state badges. Indicates completed merge actions in version control contexts." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.400}", - "$description": "Border color for merged state badges. Defines the boundary of merge status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Background color for merged state badges. Creates subtle but recognizable merge indicators." - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-related badges. Ensures high contrast against AI badge gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "breadcrumb": { - "item-inactive": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps." - }, - "item-current": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy." - }, - "separator": { - "$type": "color", - "$value": "{state.disabled.text}", - "$description": "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items." - } - }, - "btn": { - "primary": { - "text": { - "$type": "color", - "$value": "{brand.onColor.500}", - "$description": "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements." - }, - "background": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Background color for primary action buttons. Creates emphasis for the most important action in a given context." - }, - "border": { - "$type": "color", - "$value": "{component.btn.primary.background}", - "$description": "Border color for primary action buttons. Matches background for clean, cohesive appearance." - } - }, - "secondary": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions." - }, - "border": { - "$type": "color", - "$value": "{component.btn.secondary.background}", - "$description": "Border color for secondary action buttons. Matches background for clean, cohesive appearance." - } - }, - "outline": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected outline buttons. Creates subtle emphasis for button icons." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for unselected outline buttons. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected outline buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected outline buttons. Increases visibility for active button states." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for selected outline buttons. Creates stronger visual indication of the active state." - } - } - }, - "ghost": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected ghost buttons. Provides readable contrast for minimal styling." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected ghost buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected ghost buttons. Increases visibility for active button states." - } - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.cyan.600}", - "$description": "Text color for success buttons. Communicates positive actions through readable cyan text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Background color for success buttons. Creates subtle but recognizable positive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.400}", - "$description": "Border color for success buttons. Provides definition for positive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Hover state background color for success buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.600}", - "$description": "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Background color for danger buttons. Creates subtle but recognizable destructive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Border color for danger buttons. Provides definition for destructive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Hover state background color for danger buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for AI-powered buttons." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for card components. Creates a distinct surface that appears elevated from the page background." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content." - } - }, - "dialog": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dialog content. Provides readable contrast for the modal's primary text content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dialog components." - }, - "backdrop": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." - } - }, - "dropdown": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for dropdown menus. Creates a distinct surface for selectable options." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dropdown menus container." - }, - "item": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dropdown menu items. Ensures readability of selectable options." - }, - "delete": { - "text": { - "$type": "color", - "$value": "{text.danger}", - "$description": "Text color for dropdown menu delete-item." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Specific hover state color for dropdown delete-item." - } - } - } - } - }, - "diff": { - "grey": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent." - }, - "add-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Cyan background highlighting newly added code lines while maintaining readability." - }, - "add-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Background for line numbers of added code, providing visual connection to added content." - }, - "add-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Stronger emphasis color for specific character changes within added lines." - }, - "add-widget": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background for interactive UI elements related to added content." - }, - "add-widget-color": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text/icon color for add-related interactive elements, ensuring readability." - }, - "del-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Red background highlighting removed code lines without causing eye strain." - }, - "del-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background for line numbers of deleted code, connecting numbers to removed content." - }, - "del-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Stronger emphasis color for specific character changes within deleted lines." - }, - "plain-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral background for unchanged code that allows modified content to stand out." - }, - "plain-lineNumber": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for line numbers of unchanged code, maintaining visual rhythm." - }, - "plain-lineNumber-color": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unchanged line numbers, visually subdued compared to changed content." - }, - "empty-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for placeholder spaces and empty lines, maintaining visual continuity." - }, - "hunk-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for diff section headers ('hunks') that indicate which part of the file is displayed." - }, - "hunk-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for line numbers in section headers." - }, - "hunk-content-color": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for section header content showing file position information." - }, - "expand-content": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background for controls that expand/collapse code sections to show additional context." - } - }, - "input": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for input field content. Ensures readability of user-entered information." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for input fields. Creates a distinct surface for user interaction and data entry." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for input fields. Defines the input area with a visible boundary for improved usability." - } - }, - "label": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for form labels and field identifiers. Ensures high contrast for important contextual information." - } - }, - "link": { - "default": { - "$type": "color", - "$value": "{text.accent}", - "$description": "Default color for text links. Creates distinct visual identification of interactive text elements." - }, - "visited": { - "$type": "color", - "$value": "{colors.cyan.600}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." - } - }, - "nav-tabs": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Unselected tab item text." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Selected tab item text." - }, - "border": { - "$type": "color", - "$value": "{border.focus}", - "$description": "Selected tab item border." - } - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Navigation container border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Navigation tabs container background." - } - }, - "pipeline": { - "arrow": { - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for pipeline connection arrows. Defines the visual path between pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", - "$description": "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", - "$description": "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements." - }, - "border": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", - "$description": "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", - "$description": "Animated gradient border for running pipeline states. Provides visual indication of active processing." - } - }, - "error": { - "border": { - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution." - } - }, - "completed": { - "border": { - "$type": "color", - "$value": "{colors.cyan.400}", - "$description": "Border color for completed pipeline states. Indicates successful pipeline execution." - } - } - }, - "card-canvas": { - "1": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container." - } - }, - "2": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization." - } - } - }, - "background": { - "dotes": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Refers to the dotted pattern visible in the background of the workspace." - } - } - }, - "sidebar": { - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background color for navigation components. Creates a consistent foundation for navigation elements." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Border color for navigation components. Creates visual boundaries and separation from adjacent content." - }, - "separator": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Color for separators between navigation sections. Creates visual organization within the navigation structure." - }, - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Hover state for navigation items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Selected state for navigation items." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Text color for unselected navigation items. Provides readable but less emphasized styling for available options." - }, - "icon": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Text color for selected navigation items. Increases contrast to highlight the current location." - }, - "icon": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Icon color for selected navigation items. Creates stronger visual indication of the current selection." - } - } - }, - "logo": { - "text": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Text color for Logo in sidebar navigation." - }, - "icon": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Icon color for Logo in sidebar navigation." - } - }, - "search": { - "background": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Search input specific background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Search input specific border on sidebar navigation." - }, - "placeholder": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Search input specific placeholder on sidebar navigation." - }, - "btn": { - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Search input specific button background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Search input specific button border on sidebar navigation." - }, - "text": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Search input specific button text on sidebar navigation." - } - } - }, - "footer": { - "username": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Username in the footer sidebar navigation menu." - }, - "data": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "User data in the footer sidebar navigation menu." - } - } - }, - "scrollbar": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability." - } - }, - "selection": { - "unselected": { - "item": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected state in selection controls. Creates visual distinction from selected items." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "item": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Color for selected items in selection controls. Creates high contrast against selected background state." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background color for selected state in selection controls. Creates strong visual indication of active selection." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling." - } - } - }, - "separator": { - "background": { - "$type": "color", - "$value": "{borderWidth.2}", - "$description": "Background color for separator elements. Creates visual division between content sections with a subtle line or space." - } - }, - "skeleton": { - "background": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", - "$description": "Animation color that sweeps across skeleton elements. Creates a \"shimmer\" effect indicating content loading states." - } - }, - "slider": { - "track": { - "base": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for slider tracks. Represents the full range of available values in an unselected state." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Filled portion color for slider tracks. Visually represents the selected value or range within the track." - } - }, - "track-segments": { - "base": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.700}", - "$description": "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range." - } - }, - "handle": { - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for slider handles. Creates a distinct, interactive element for adjusting values." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Border color for slider handles. Provides definition and contrast for the interactive control." - } - } - }, - "status-indicator": { - "completed": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Color for success status indicators. Communicates completed or positive states." - }, - "cancelled": { - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Color for danger status indicators. Communicates error or critical warning states." - }, - "warning": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Color for warning status indicators. Communicates caution or potential issue states." - }, - "running": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Color for running status indicators. Communicates active or in-progress operations." - }, - "merged": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Color for merged status indicators. Communicates successful integration or completion in version control contexts." - }, - "action-required": { - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Color for action-required status indicators. Communicates that user attention or intervention is needed." - }, - "waiting": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Color for pending status indicators. Communicates in waiting states." - } - }, - "switch": { - "unselected": { - "thumb": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for the unselected state of switch controls. Creates visual distinction from the selected state." - } - }, - "selected": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background color for the selected state of switch controls. Creates strong visual indication of active state." - } - } - }, - "table": { - "header": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for table header cells. Ensures readability of column labels and titles." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for table header rows. Creates visual distinction between headers and data rows." - } - }, - "row": { - "alternate-background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for alternate table rows. Improves readability by differentiating adjacent rows." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for table rows. Provides subtle separation between data rows." - } - }, - "cell": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for table cell content. Ensures high readability of tabular data." - } - } - }, - "tabs": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for the tabs container. Creates a consistent foundation for tab elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tab containers and separators. Provides subtle definition for tab boundaries." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected tab items. Creates visual distinction from the active tab." - }, - "border": { - "$type": "color", - "$value": "{component.tabs.item.unselected.background}", - "$description": "Border color for unselected tab items. Maintains consistent styling with the tab background." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for the selected tab item. Increases contrast to highlight the active tab." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for the selected tab item. Creates strong visual indication of the active tab." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for the selected tab item. Reinforces the active state with defined boundaries." - } - } - } - }, - "tag": { - "blue": { - "text": { - "$type": "color", - "$value": "{colors.blue.600}", - "$description": "Text color for blue tags. Ensures readability while maintaining the blue color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.100}", - "$description": "Background color for blue tags. Creates a distinct surface with blue theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.50}", - "$description": "Subtle background variation for blue tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.blue.background}", - "$description": "Border color for blue tags." - } - }, - "brown": { - "text": { - "$type": "color", - "$value": "{colors.brown.600}", - "$description": "Text color for brown tags. Ensures readability while maintaining the brown color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.brown.100}", - "$description": "Background color for brown tags. Creates a distinct surface with brown theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.brown.50}", - "$description": "Subtle background variation for brown tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.brown.background}", - "$description": "Border color for brown tags." - } - }, - "cyan": { - "text": { - "$type": "color", - "$value": "{colors.cyan.600}", - "$description": "Text color for cyan tags. Ensures readability while maintaining the cyan color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Background color for cyan tags. Creates a distinct surface with cyan theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.50}", - "$description": "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.cyan.background}", - "$description": "Border color for cyan tags." - } - }, - "green": { - "text": { - "$type": "color", - "$value": "{colors.cyan.600}", - "$description": "Text color for green tags, replaced with cyan for tritanopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Background color for green tags, replaced with cyan for tritanopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.50}", - "$description": "Subtle background variation for green tags, replaced with cyan for tritanopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.green.background}", - "$description": "Border color for green tags, replaced with cyan." - } - }, - "indigo": { - "text": { - "$type": "color", - "$value": "{colors.indigo.600}", - "$description": "Text color for indigo tags. Ensures readability while maintaining the indigo color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.indigo.100}", - "$description": "Background color for indigo tags. Creates a distinct surface with indigo theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.indigo.50}", - "$description": "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.indigo.background}", - "$description": "Border color for indigo tags." - } - }, - "lime": { - "text": { - "$type": "color", - "$value": "{colors.lime.600}", - "$description": "Text color for lime tags. Ensures readability while maintaining the lime color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.lime.100}", - "$description": "Background color for lime tags. Creates a distinct surface with lime theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.lime.50}", - "$description": "Subtle background variation for lime tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.lime.background}", - "$description": "Border color for lime tags." - } - }, - "mint": { - "text": { - "$type": "color", - "$value": "{colors.mint.600}", - "$description": "Text color for mint tags. Ensures readability while maintaining the mint color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.mint.100}", - "$description": "Background color for mint tags. Creates a distinct surface with mint theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.mint.50}", - "$description": "Subtle background variation for mint tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.mint.background}", - "$description": "Border color for mint tags." - } - }, - "orange": { - "text": { - "$type": "color", - "$value": "{colors.orange.600}", - "$description": "Text color for orange tags. Ensures readability while maintaining the orange color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.100}", - "$description": "Background color for orange tags. Creates a distinct surface with orange theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.50}", - "$description": "Subtle background variation for orange tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.orange.background}", - "$description": "Border color for orange tags." - } - }, - "pink": { - "text": { - "$type": "color", - "$value": "{colors.pink.600}", - "$description": "Text color for pink tags. Ensures readability while maintaining the pink color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.pink.100}", - "$description": "Background color for pink tags. Creates a distinct surface with pink theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.pink.50}", - "$description": "Subtle background variation for pink tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.pink.background}", - "$description": "Border color for pink tags." - } - }, - "purple": { - "text": { - "$type": "color", - "$value": "{colors.cyan.600}", - "$description": "Text color for purple tags, replaced with cyan for tritanopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Background color for purple tags, replaced with cyan for tritanopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.50}", - "$description": "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.purple.background}", - "$description": "Border color for purple tags, replaced with cyan." - } - }, - "red": { - "text": { - "$type": "color", - "$value": "{colors.red.600}", - "$description": "Text color for red tags. Ensures readability while maintaining the red color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.red.100}", - "$description": "Background color for red tags. Creates a distinct surface with red theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.red.50}", - "$description": "Subtle background variation for red tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.red.background}", - "$description": "Border color for red tags." - } - }, - "violet": { - "text": { - "$type": "color", - "$value": "{colors.cyan.600}", - "$description": "Text color for violet tags, replaced with cyan for tritanopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Background color for violet tags, replaced with cyan for tritanopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.50}", - "$description": "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.violet.background}", - "$description": "Border color for violet tags, replaced with cyan." - } - }, - "yellow": { - "text": { - "$type": "color", - "$value": "{colors.orange.600}", - "$description": "Text color for yellow tags, replaced with orange for tritanopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.100}", - "$description": "Background color for yellow tags, replaced with orange for tritanopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.50}", - "$description": "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.yellow.background}", - "$description": "Border color for yellow tags, replaced with orange." - } - }, - "gray": { - "text": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Text color for gray tags. Ensures readability while maintaining the gray color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for gray tags. Creates a distinct surface with gray theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Subtle background variation for gray tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.gray.background}", - "$description": "Border color for gray tags." - } - } - }, - "toast": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational toast notifications. Ensures high visibility for the notification headline." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational toast notifications. Provides readable contrast for notification content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational toast notifications. Creates visual distinction from UI content beneath." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational toast notifications. Subtly defines the notification's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for danger toast notifications. Provides maximum contrast against the error background." - }, - "description": { - "$type": "color", - "$value": "{text.1}", - "$description": "Description text color for danger toast notifications. Ensures readability of critical information." - }, - "background": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings." - }, - "border": { - "$type": "color", - "$value": "{component.toast.danger.background}", - "$description": "Border color for danger toast notifications. Reinforces the critical nature of the notification message." - } - } - }, - "tooltip": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for tooltip content. Ensures readability of helpful contextual information." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - } - } - }, - "gradient": { - "ai": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.orange.200}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pink.300}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.cyan.300}" - }, - "gradient-stop-4": { - "$type": "color", - "$value": "{colors.cyan.200}" - } - }, - "skeleton": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.chrome.100}" - } - }, - "pipeline": { - "running": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.orange.300}" - }, - "gradient-stop-2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.orange.300}" - } - }, - "arrows": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.blue.400}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{border.1}" - } - }, - "card": { - "background": { - "gradient-from": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.50}" - } - }, - "border": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.50}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.100}" - } - } - }, - "widget": { - "number": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.500}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.600}" - } - }, - "blob": { - "big": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.pure.white}" - } - }, - "small": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.150}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.pure.white}" - } - } - } - } - } - }, - "shadow": { - "0": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "0", - "blur": "0", - "spread": "0", - "color": "{shadow-color.0}", - "type": "dropShadow" - }, - "$description": "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile." - }, - "1": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "1", - "blur": "2", - "spread": "0", - "color": "{shadow-color.1}", - "type": "dropShadow" - }, - "$description": "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements." - }, - "2": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "1", - "blur": "3", - "spread": "0", - "color": "{shadow-color.2}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "1", - "blur": "2", - "spread": "-1", - "color": "{shadow-color.2}", - "type": "dropShadow" - } - ], - "$description": "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state." - }, - "3": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-1", - "color": "{shadow-color.3}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "2", - "blur": "4", - "spread": "-2", - "color": "{shadow-color.3}", - "type": "dropShadow" - } - ], - "$description": "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover." - }, - "4": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "10", - "blur": "15", - "spread": "-3", - "color": "{shadow-color.4}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-4", - "color": "{shadow-color.4}", - "type": "dropShadow" - } - ], - "$description": "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns." - }, - "5": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "20", - "blur": "25", - "spread": "-5", - "color": "{shadow-color.5}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "8", - "blur": "10", - "spread": "-6", - "color": "{shadow-color.5}", - "type": "dropShadow" - } - ], - "$description": "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections." - }, - "6": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "25", - "blur": "50", - "spread": "-12", - "color": "{shadow-color.6}", - "type": "dropShadow" - }, - "$description": "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation." - }, - "inner": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "2", - "blur": "4", - "spread": "0", - "color": "{shadow-color.inner}", - "type": "innerShadow" - }, - "$description": "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields." - } - }, - "shadow-color": { - "0": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Transparent shadow color. Used when no shadow effect is desired." - }, - "1": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Light shadow color with 60% opacity. Creates subtle depth for small UI elements." - }, - "2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Medium shadow color with 60% opacity. Provides balanced depth for common UI components." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Medium shadow color with 50% opacity. Creates moderate depth for elevated components." - }, - "4": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Deep shadow color with 50% opacity. Provides significant depth for floating elements." - }, - "5": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content." - }, - "6": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements." - }, - "inner": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states." - } - }, - "ring": { - "focus": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "2", - "color": "{background.1}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "4", - "color": "{border.focus}", - "type": "dropShadow" - } - ], - "$description": "Focus ring effect with background offset and accent border." - } - }, - "iconStrokeWidth": { - "xxs": { - "$type": "borderWidth", - "$value": "1.1" - }, - "xs": { - "$type": "borderWidth", - "$value": "1" - }, - "sm": { - "$type": "borderWidth", - "$value": "1.1" - }, - "default": { - "$type": "borderWidth", - "$value": "1.1" - }, - "md": { - "$type": "borderWidth", - "$value": "1.4" - }, - "lg": { - "$type": "borderWidth", - "$value": "2" - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/mode/light/default.json b/packages/ui/design-tokens/mode/light/default.json deleted file mode 100644 index 20909fd6f9..0000000000 --- a/packages/ui/design-tokens/mode/light/default.json +++ /dev/null @@ -1,2355 +0,0 @@ -{ - "background": { - "1": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers." - }, - "2": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers." - } - }, - "text": { - "1": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders." - }, - "accent": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements." - }, - "success": { - "$type": "color", - "$value": "{colors.green.600}", - "$description": "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.600}", - "$description": "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.500}", - "$description": "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications." - } - }, - "border": { - "1": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.8", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows." - }, - "focus": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators." - }, - "success": { - "$type": "color", - "$value": "{colors.green.400}", - "$description": "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.500}", - "$description": "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements." - } - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item." - }, - "disabled": { - "text": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries." - } - } - }, - "component": { - "accordion": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for accordion content. Applied to the expandable text within accordion panels." - }, - "chevron": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for accordion items. Provides visual separation between accordion panels." - } - }, - "alert": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational alerts. Ensures high visibility for the alert heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational alerts. Provides readable contrast for alert content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational alerts. Creates visual distinction from surrounding content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational alerts. Subtly defines the alert's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.red.800}", - "$description": "Text color for danger alerts. Communicates critical information through high-contrast red text." - }, - "description": { - "$type": "color", - "$value": "{colors.red.600}", - "$description": "Description text color for danger alerts. Ensures readability while maintaining the error state styling." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger alerts. Creates subtle but recognizable error state styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Border color for danger alerts. Provides definition for error state alerts." - } - } - }, - "avatar": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for avatar initials or text. Ensures visibility against the avatar background." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for avatar components. Provides contrast for text or image content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for avatars. Creates subtle definition around the avatar element." - } - }, - "badge": { - "default": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for secondary badges. Provides readable contrast on secondary badge styling." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for secondary badges. Creates less prominent badge styling for secondary information." - }, - "border": { - "$type": "color", - "$value": "{component.badge.default.background}", - "$description": "Border color for secondary badges. Matches background for clean, cohesive appearance." - } - }, - "neutral": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for outline badges. Ensures readability for badges with transparent backgrounds." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Border color for outline badges. Creates definition for badges without background fill." - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.green.600}", - "$description": "Text color for success badges. Communicates positive status through readable green text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.400}", - "$description": "Border color for success badges. Provides subtle definition for success state indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.200}", - "$description": "Background color for success badges. Creates a subtle but recognizable success indicator." - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.600}", - "$description": "Text color for danger badges. Communicates error or warning status with high visibility." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Border color for danger badges. Creates definition for error or warning indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Background color for danger badges. Provides subtle visual indication of error states." - } - }, - "warning": { - "text": { - "$type": "color", - "$value": "{colors.yellow.600}", - "$description": "Text color for warning badges. Signals caution states with readable amber text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.400}", - "$description": "Border color for warning badges. Defines the boundary of caution status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.200}", - "$description": "Background color for warning badges. Creates subtle but recognizable caution indicators." - } - }, - "running": { - "text": { - "$type": "color", - "$value": "{colors.orange.600}", - "$description": "Text color for running state badges. Indicates active or in-progress operations." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Border color for running state badges. Defines the boundary of active status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Background color for running state badges. Creates subtle visual indication of in-progress states." - } - }, - "merged": { - "text": { - "$type": "color", - "$value": "{colors.purple.600}", - "$description": "Text color for merged state badges. Indicates completed merge actions in version control contexts." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.purple.400}", - "$description": "Border color for merged state badges. Defines the boundary of merge status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.purple.300}", - "$description": "Background color for merged state badges. Creates subtle but recognizable merge indicators." - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-related badges. Ensures high contrast against AI badge gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "breadcrumb": { - "item-inactive": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps." - }, - "item-current": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy." - }, - "separator": { - "$type": "color", - "$value": "{state.disabled.text}", - "$description": "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items." - } - }, - "btn": { - "primary": { - "text": { - "$type": "color", - "$value": "{brand.onColor.500}", - "$description": "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements." - }, - "background": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Background color for primary action buttons. Creates emphasis for the most important action in a given context." - }, - "border": { - "$type": "color", - "$value": "{component.btn.primary.background}", - "$description": "Border color for primary action buttons. Matches background for clean, cohesive appearance." - } - }, - "secondary": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions." - }, - "border": { - "$type": "color", - "$value": "{component.btn.secondary.background}", - "$description": "Border color for secondary action buttons. Matches background for clean, cohesive appearance." - } - }, - "outline": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected outline buttons. Creates subtle emphasis for button icons." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for unselected outline buttons. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected outline buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected outline buttons. Increases visibility for active button states." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for selected outline buttons. Creates stronger visual indication of the active state." - } - } - }, - "ghost": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected ghost buttons. Provides readable contrast for minimal styling." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected ghost buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected ghost buttons. Increases visibility for active button states." - } - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.green.600}", - "$description": "Text color for success buttons. Communicates positive actions through readable green text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.200}", - "$description": "Background color for success buttons. Creates subtle but recognizable positive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.400}", - "$description": "Border color for success buttons. Provides definition for positive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.200}", - "$description": "Hover state background color for success buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.200}", - "$description": "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.600}", - "$description": "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Background color for danger buttons. Creates subtle but recognizable destructive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Border color for danger buttons. Provides definition for destructive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Hover state background color for danger buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for AI-powered buttons." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for card components. Creates a distinct surface that appears elevated from the page background." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content." - } - }, - "dialog": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dialog content. Provides readable contrast for the modal's primary text content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dialog components." - }, - "backdrop": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." - } - }, - "dropdown": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for dropdown menus. Creates a distinct surface for selectable options." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dropdown menus container." - }, - "item": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dropdown menu items. Ensures readability of selectable options." - }, - "delete": { - "text": { - "$type": "color", - "$value": "{text.danger}", - "$description": "Text color for dropdown menu delete-item." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Specific hover state color for dropdown delete-item." - } - } - } - } - }, - "diff": { - "grey": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent." - }, - "add-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Green background highlighting newly added code lines while maintaining readability." - }, - "add-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Background for line numbers of added code, providing visual connection to added content." - }, - "add-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Stronger emphasis color for specific character changes within added lines." - }, - "add-widget": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background for interactive UI elements related to added content." - }, - "add-widget-color": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text/icon color for add-related interactive elements, ensuring readability." - }, - "del-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Red background highlighting removed code lines without causing eye strain." - }, - "del-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background for line numbers of deleted code, connecting numbers to removed content." - }, - "del-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Stronger emphasis color for specific character changes within deleted lines." - }, - "plain-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral background for unchanged code that allows modified content to stand out." - }, - "plain-lineNumber": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for line numbers of unchanged code, maintaining visual rhythm." - }, - "plain-lineNumber-color": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unchanged line numbers, visually subdued compared to changed content." - }, - "empty-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for placeholder spaces and empty lines, maintaining visual continuity." - }, - "hunk-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for diff section headers ('hunks') that indicate which part of the file is displayed." - }, - "hunk-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for line numbers in section headers." - }, - "hunk-content-color": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for section header content showing file position information." - }, - "expand-content": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background for controls that expand/collapse code sections to show additional context." - } - }, - "input": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for input field content. Ensures readability of user-entered information." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for input fields. Creates a distinct surface for user interaction and data entry." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for input fields. Defines the input area with a visible boundary for improved usability." - } - }, - "label": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for form labels and field identifiers. Ensures high contrast for important contextual information." - } - }, - "link": { - "default": { - "$type": "color", - "$value": "{text.accent}", - "$description": "Default color for text links. Creates distinct visual identification of interactive text elements." - }, - "visited": { - "$type": "color", - "$value": "{colors.purple.600}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." - } - }, - "nav-tabs": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Unselected tab item text." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Selected tab item text." - }, - "border": { - "$type": "color", - "$value": "{border.focus}", - "$description": "Selected tab item border." - } - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Navigation container border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Navigation tabs container background." - } - }, - "pipeline": { - "arrow": { - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for pipeline connection arrows. Defines the visual path between pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", - "$description": "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", - "$description": "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements." - }, - "border": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", - "$description": "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", - "$description": "Animated gradient border for running pipeline states. Provides visual indication of active processing." - } - }, - "error": { - "border": { - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution." - } - }, - "completed": { - "border": { - "$type": "color", - "$value": "{colors.green.400}", - "$description": "Border color for completed pipeline states. Indicates successful pipeline execution." - } - } - }, - "card-canvas": { - "1": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container." - } - }, - "2": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization." - } - } - }, - "background": { - "dotes": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Refers to the dotted pattern visible in the background of the workspace." - } - } - }, - "sidebar": { - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background color for navigation components. Creates a consistent foundation for navigation elements." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Border color for navigation components. Creates visual boundaries and separation from adjacent content." - }, - "separator": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Color for separators between navigation sections. Creates visual organization within the navigation structure." - }, - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Hover state for navigation items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Selected state for navigation items." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Text color for unselected navigation items. Provides readable but less emphasized styling for available options." - }, - "icon": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Text color for selected navigation items. Increases contrast to highlight the current location." - }, - "icon": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Icon color for selected navigation items. Creates stronger visual indication of the current selection." - } - } - }, - "logo": { - "text": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Text color for Logo in sidebar navigation." - }, - "icon": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Icon color for Logo in sidebar navigation." - } - }, - "search": { - "background": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Search input specific background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Search input specific border on sidebar navigation." - }, - "placeholder": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Search input specific placeholder on sidebar navigation." - }, - "btn": { - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Search input specific button background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Search input specific button border on sidebar navigation." - }, - "text": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Search input specific button text on sidebar navigation." - } - } - }, - "footer": { - "username": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Username in the footer sidebar navigation menu." - }, - "data": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "User data in the footer sidebar navigation menu." - } - } - }, - "scrollbar": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability." - } - }, - "selection": { - "unselected": { - "item": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected state in selection controls. Creates visual distinction from selected items." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "item": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Color for selected items in selection controls. Creates high contrast against selected background state." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background color for selected state in selection controls. Creates strong visual indication of active selection." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling." - } - } - }, - "separator": { - "background": { - "$type": "color", - "$value": "{borderWidth.2}", - "$description": "Background color for separator elements. Creates visual division between content sections with a subtle line or space." - } - }, - "skeleton": { - "background": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", - "$description": "Animation color that sweeps across skeleton elements. Creates a \"shimmer\" effect indicating content loading states." - } - }, - "slider": { - "track": { - "base": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for slider tracks. Represents the full range of available values in an unselected state." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Filled portion color for slider tracks. Visually represents the selected value or range within the track." - } - }, - "track-segments": { - "base": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.700}", - "$description": "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range." - } - }, - "handle": { - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for slider handles. Creates a distinct, interactive element for adjusting values." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Border color for slider handles. Provides definition and contrast for the interactive control." - } - } - }, - "status-indicator": { - "completed": { - "$type": "color", - "$value": "{colors.green.300}", - "$description": "Color for success status indicators. Communicates completed or positive states." - }, - "cancelled": { - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Color for danger status indicators. Communicates error or critical warning states." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Color for warning status indicators. Communicates caution or potential issue states." - }, - "running": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Color for running status indicators. Communicates active or in-progress operations." - }, - "merged": { - "$type": "color", - "$value": "{colors.purple.300}", - "$description": "Color for merged status indicators. Communicates successful integration or completion in version control contexts." - }, - "action-required": { - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Color for action-required status indicators. Communicates that user attention or intervention is needed. " - }, - "waiting": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Color for pending status indicators. Communicates in waiting states." - } - }, - "switch": { - "unselected": { - "thumb": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for the unselected state of switch controls. Creates visual distinction from the selected state." - } - }, - "selected": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background color for the selected state of switch controls. Creates strong visual indication of active state." - } - } - }, - "table": { - "header": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for table header cells. Ensures readability of column labels and titles." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for table header rows. Creates visual distinction between headers and data rows." - } - }, - "row": { - "alternate-background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for alternate table rows. Improves readability by differentiating adjacent rows." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for table rows. Provides subtle separation between data rows." - } - }, - "cell": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for table cell content. Ensures high readability of tabular data." - } - } - }, - "tabs": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for the tabs container. Creates a consistent foundation for tab elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tab containers and separators. Provides subtle definition for tab boundaries." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected tab items. Creates visual distinction from the active tab." - }, - "border": { - "$type": "color", - "$value": "{component.tabs.item.unselected.background}", - "$description": "Border color for unselected tab items. Maintains consistent styling with the tab background." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for the selected tab item. Increases contrast to highlight the active tab." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for the selected tab item. Creates strong visual indication of the active tab." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for the selected tab item. Reinforces the active state with defined boundaries." - } - } - } - }, - "tag": { - "blue": { - "text": { - "$type": "color", - "$value": "{colors.blue.600}", - "$description": "Text color for blue tags. Ensures readability while maintaining the blue color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.100}", - "$description": "Background color for blue tags. Creates a distinct surface with blue theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.50}", - "$description": "Subtle background variation for blue tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.blue.background}", - "$description": "Border color for blue tags. " - } - }, - "brown": { - "text": { - "$type": "color", - "$value": "{colors.brown.600}", - "$description": "Text color for brown tags. Ensures readability while maintaining the brown color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.brown.100}", - "$description": "Background color for brown tags. Creates a distinct surface with brown theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.brown.50}", - "$description": "Subtle background variation for brown tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.brown.background}", - "$description": "Border color for brown tags. " - } - }, - "cyan": { - "text": { - "$type": "color", - "$value": "{colors.cyan.600}", - "$description": "Text color for cyan tags. Ensures readability while maintaining the cyan color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Background color for cyan tags. Creates a distinct surface with cyan theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.50}", - "$description": "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.cyan.background}", - "$description": "Border color for cyan tags." - } - }, - "green": { - "text": { - "$type": "color", - "$value": "{colors.green.600}", - "$description": "Text color for green tags. Ensures readability while maintaining the green color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.green.100}", - "$description": "Background color for green tags. Creates a distinct surface with green theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.green.50}", - "$description": "Subtle background variation for green tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.green.background}", - "$description": "Border color for green tags." - } - }, - "indigo": { - "text": { - "$type": "color", - "$value": "{colors.indigo.600}", - "$description": "Text color for indigo tags. Ensures readability while maintaining the indigo color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.indigo.100}", - "$description": "Background color for indigo tags. Creates a distinct surface with indigo theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.indigo.50}", - "$description": "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.indigo.background}", - "$description": "Border color for indigo tags." - } - }, - "lime": { - "text": { - "$type": "color", - "$value": "{colors.lime.600}", - "$description": "Text color for lime tags. Ensures readability while maintaining the lime color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.lime.100}", - "$description": "Background color for lime tags. Creates a distinct surface with lime theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.lime.50}", - "$description": "Subtle background variation for lime tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.lime.background}", - "$description": "Border color for lime tags." - } - }, - "mint": { - "text": { - "$type": "color", - "$value": "{colors.mint.600}", - "$description": "Text color for mint tags. Ensures readability while maintaining the mint color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.mint.100}", - "$description": "Background color for mint tags. Creates a distinct surface with mint theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.mint.50}", - "$description": "Subtle background variation for mint tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.mint.background}", - "$description": "Border color for mint tags." - } - }, - "orange": { - "text": { - "$type": "color", - "$value": "{colors.orange.600}", - "$description": "Text color for orange tags. Ensures readability while maintaining the orange color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.100}", - "$description": "Background color for orange tags. Creates a distinct surface with orange theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.50}", - "$description": "Subtle background variation for orange tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.orange.background}", - "$description": "Border color for orange tags." - } - }, - "pink": { - "text": { - "$type": "color", - "$value": "{colors.pink.600}", - "$description": "Text color for pink tags. Ensures readability while maintaining the pink color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.pink.100}", - "$description": "Background color for pink tags. Creates a distinct surface with pink theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.pink.50}", - "$description": "Subtle background variation for pink tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.pink.background}", - "$description": "Border color for pink tags." - } - }, - "purple": { - "text": { - "$type": "color", - "$value": "{colors.purple.600}", - "$description": "Text color for purple tags. Ensures readability while maintaining the purple color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.purple.100}", - "$description": "Background color for purple tags. Creates a distinct surface with purple theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.purple.50}", - "$description": "Subtle background variation for purple tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.purple.background}", - "$description": "Border color for purple tags." - } - }, - "red": { - "text": { - "$type": "color", - "$value": "{colors.red.600}", - "$description": "Text color for red tags. Ensures readability while maintaining the red color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.red.100}", - "$description": "Background color for red tags. Creates a distinct surface with red theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.red.50}", - "$description": "Subtle background variation for red tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.red.background}", - "$description": "Border color for red tags." - } - }, - "violet": { - "text": { - "$type": "color", - "$value": "{colors.violet.600}", - "$description": "Text color for violet tags. Ensures readability while maintaining the violet color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.violet.100}", - "$description": "Background color for violet tags. Creates a distinct surface with violet theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.violet.50}", - "$description": "Subtle background variation for violet tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.violet.background}", - "$description": "Border color for violet tags." - } - }, - "yellow": { - "text": { - "$type": "color", - "$value": "{colors.yellow.600}", - "$description": "Text color for yellow tags. Ensures readability while maintaining the yellow color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.yellow.100}", - "$description": "Background color for yellow tags. Creates a distinct surface with yellow theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.yellow.50}", - "$description": "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.yellow.background}", - "$description": "Border color for yellow tags." - } - }, - "gray": { - "text": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Text color for gray tags. Ensures readability while maintaining the gray color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for gray tags. Creates a distinct surface with gray theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Subtle background variation for gray tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.gray.background}", - "$description": "Border color for gray tags." - } - } - }, - "toast": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational toast notifications. Ensures high visibility for the notification headline." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational toast notifications. Provides readable contrast for notification content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational toast notifications. Creates visual distinction from UI content beneath." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational toast notifications. Subtly defines the notification's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for danger toast notifications. Provides maximum contrast against the error background." - }, - "description": { - "$type": "color", - "$value": "{text.1}", - "$description": "Description text color for danger toast notifications. Ensures readability of critical information." - }, - "background": { - "$type": "color", - "$value": "{colors.red.200}", - "$description": "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings." - }, - "border": { - "$type": "color", - "$value": "{component.toast.danger.background}", - "$description": "Border color for danger toast notifications. Reinforces the critical nature of the notification message." - } - } - }, - "tooltip": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for tooltip content. Ensures readability of helpful contextual information." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - } - } - }, - "shadow": { - "0": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "0", - "blur": "0", - "spread": "0", - "color": "{shadow-color.0}", - "type": "dropShadow" - }, - "$description": "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile." - }, - "1": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "1", - "blur": "2", - "spread": "0", - "color": "{shadow-color.1}", - "type": "dropShadow" - }, - "$description": "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements." - }, - "2": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "1", - "blur": "3", - "spread": "0", - "color": "{shadow-color.2}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "1", - "blur": "2", - "spread": "-1", - "color": "{shadow-color.2}", - "type": "dropShadow" - } - ], - "$description": "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state." - }, - "3": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-1", - "color": "{shadow-color.3}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "2", - "blur": "4", - "spread": "-2", - "color": "{shadow-color.3}", - "type": "dropShadow" - } - ], - "$description": "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover." - }, - "4": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "10", - "blur": "15", - "spread": "-3", - "color": "{shadow-color.4}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-4", - "color": "{shadow-color.4}", - "type": "dropShadow" - } - ], - "$description": "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns." - }, - "5": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "20", - "blur": "25", - "spread": "-5", - "color": "{shadow-color.5}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "8", - "blur": "10", - "spread": "-6", - "color": "{shadow-color.5}", - "type": "dropShadow" - } - ], - "$description": "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections." - }, - "6": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "25", - "blur": "50", - "spread": "-12", - "color": "{shadow-color.6}", - "type": "dropShadow" - }, - "$description": "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation." - }, - "inner": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "2", - "blur": "4", - "spread": "0", - "color": "{shadow-color.inner}", - "type": "innerShadow" - }, - "$description": "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields." - } - }, - "shadow-color": { - "0": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Transparent shadow color. Used when no shadow effect is desired." - }, - "1": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Light shadow color with 60% opacity. Creates subtle depth for small UI elements." - }, - "2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Medium shadow color with 60% opacity. Provides balanced depth for common UI components." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Medium shadow color with 50% opacity. Creates moderate depth for elevated components." - }, - "4": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Deep shadow color with 50% opacity. Provides significant depth for floating elements." - }, - "5": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content." - }, - "6": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements." - }, - "inner": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states." - } - }, - "ring": { - "focus": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "2", - "color": "{background.1}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "4", - "color": "{border.focus}", - "type": "dropShadow" - } - ], - "$description": "Focus ring effect with background offset and accent border." - } - }, - "gradient": { - "ai": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.yellow.200}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pink.300}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.purple.300}" - }, - "gradient-stop-4": { - "$type": "color", - "$value": "{colors.cyan.200}" - } - }, - "skeleton": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.chrome.100}" - } - }, - "pipeline": { - "running": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.orange.300}" - }, - "gradient-stop-2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.orange.300}" - } - }, - "arrows": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.blue.400}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{border.1}" - } - }, - "card": { - "background": { - "gradient-from": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.50}" - } - }, - "border": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.50}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.100}" - } - } - }, - "widget": { - "number": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.500}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.600}" - } - }, - "blob": { - "big": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.pure.white}" - } - }, - "small": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.150}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.pure.white}" - } - } - } - } - } - }, - "iconStrokeWidth": { - "xxs": { - "$type": "borderWidth", - "$value": "1.1" - }, - "xs": { - "$type": "borderWidth", - "$value": "1" - }, - "sm": { - "$type": "borderWidth", - "$value": "1.1" - }, - "default": { - "$type": "borderWidth", - "$value": "1.1" - }, - "md": { - "$type": "borderWidth", - "$value": "1.4" - }, - "lg": { - "$type": "borderWidth", - "$value": "2" - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/mode/light/dimmer-deuteranopia.json b/packages/ui/design-tokens/mode/light/dimmer-deuteranopia.json deleted file mode 100644 index 68c07140c3..0000000000 --- a/packages/ui/design-tokens/mode/light/dimmer-deuteranopia.json +++ /dev/null @@ -1,2364 +0,0 @@ -{ - "background": { - "1": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers." - }, - "2": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers." - } - }, - "text": { - "1": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders." - }, - "accent": { - "$type": "color", - "$value": "{brand.color.400}", - "$description": "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements." - }, - "success": { - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.500}", - "$description": "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications." - } - }, - "border": { - "1": { - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers." - }, - "2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.8", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.8", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows." - }, - "focus": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators." - }, - "success": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.400}", - "$description": "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements." - } - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item." - }, - "disabled": { - "text": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries." - } - } - }, - "component": { - "accordion": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for accordion content. Applied to the expandable text within accordion panels." - }, - "chevron": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for accordion items. Provides visual separation between accordion panels." - } - }, - "alert": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational alerts. Ensures high visibility for the alert heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational alerts. Provides readable contrast for alert content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational alerts. Creates visual distinction from surrounding content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational alerts. Subtly defines the alert's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.orange.700}", - "$description": "Text color for danger alerts. Communicates critical information through high-contrast orange text." - }, - "description": { - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Description text color for danger alerts. Ensures readability while maintaining the error state styling." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.08", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background color for danger alerts. Creates subtle but recognizable error state styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Border color for danger alerts. Provides definition for error state alerts." - } - } - }, - "avatar": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for avatar initials or text. Ensures visibility against the avatar background." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for avatar components. Provides contrast for text or image content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for avatars. Creates subtle definition around the avatar element." - } - }, - "badge": { - "default": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for secondary badges. Provides readable contrast on secondary badge styling." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for secondary badges. Creates less prominent badge styling for secondary information." - }, - "border": { - "$type": "color", - "$value": "{component.badge.default.background}", - "$description": "Border color for secondary badges. Matches background for clean, cohesive appearance." - } - }, - "neutral": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for outline badges. Ensures readability for badges with transparent backgrounds." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Border color for outline badges. Creates definition for badges without background fill." - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Text color for success badges. Communicates positive status through readable cyan text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for success badges. Provides subtle definition for success state indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Background color for success badges. Creates a subtle but recognizable success indicator." - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Text color for danger badges. Communicates error or warning status with high visibility." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for danger badges. Creates definition for error or warning indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Background color for danger badges. Provides subtle visual indication of error states." - } - }, - "warning": { - "text": { - "$type": "color", - "$value": "{colors.yellow.500}", - "$description": "Text color for warning badges. Signals caution states with readable amber text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Border color for warning badges. Defines the boundary of caution status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.200}", - "$description": "Background color for warning badges. Creates subtle but recognizable caution indicators." - } - }, - "running": { - "text": { - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Text color for running state badges. Indicates active or in-progress operations." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for running state badges. Defines the boundary of active status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Background color for running state badges. Creates subtle visual indication of in-progress states." - } - }, - "merged": { - "text": { - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Text color for merged state badges. Indicates completed merge actions in version control contexts." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for merged state badges. Defines the boundary of merge status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Background color for merged state badges. Creates subtle but recognizable merge indicators." - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-related badges. Ensures high contrast against AI badge gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "breadcrumb": { - "item-inactive": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps." - }, - "item-current": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy." - }, - "separator": { - "$type": "color", - "$value": "{state.disabled.text}", - "$description": "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items." - } - }, - "btn": { - "primary": { - "text": { - "$type": "color", - "$value": "{brand.onColor.500}", - "$description": "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements." - }, - "background": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Background color for primary action buttons. Creates emphasis for the most important action in a given context." - }, - "border": { - "$type": "color", - "$value": "{component.btn.primary.background}", - "$description": "Border color for primary action buttons. Matches background for clean, cohesive appearance." - } - }, - "secondary": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions." - }, - "border": { - "$type": "color", - "$value": "{component.btn.secondary.background}", - "$description": "Border color for secondary action buttons. Matches background for clean, cohesive appearance." - } - }, - "outline": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected outline buttons. Creates subtle emphasis for button icons." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for unselected outline buttons. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected outline buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected outline buttons. Increases visibility for active button states." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for selected outline buttons. Creates stronger visual indication of the active state." - } - } - }, - "ghost": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected ghost buttons. Provides readable contrast for minimal styling." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected ghost buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected ghost buttons. Increases visibility for active button states." - } - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Text color for success buttons. Communicates positive actions through readable cyan text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.08", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Background color for success buttons. Creates subtle but recognizable positive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for success buttons. Provides definition for positive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Hover state background color for success buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.08", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Background color for danger buttons. Creates subtle but recognizable destructive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for danger buttons. Provides definition for destructive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Hover state background color for danger buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for AI-powered buttons." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for card components. Creates a distinct surface that appears elevated from the page background." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content." - } - }, - "dialog": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dialog content. Provides readable contrast for the modal's primary text content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dialog components." - }, - "backdrop": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." - } - }, - "dropdown": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for dropdown menus. Creates a distinct surface for selectable options." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dropdown menus container." - }, - "item": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dropdown menu items. Ensures readability of selectable options." - }, - "delete": { - "text": { - "$type": "color", - "$value": "{text.danger}", - "$description": "Text color for dropdown menu delete-item." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Specific hover state color for dropdown delete-item." - } - } - } - } - }, - "diff": { - "grey": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent." - }, - "add-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.08", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Cyan background highlighting newly added code lines while maintaining readability." - }, - "add-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Background for line numbers of added code, providing visual connection to added content." - }, - "add-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Stronger emphasis color for specific character changes within added lines." - }, - "add-widget": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background for interactive UI elements related to added content." - }, - "add-widget-color": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text/icon color for add-related interactive elements, ensuring readability." - }, - "del-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.08", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Orange background highlighting removed code lines without causing eye strain." - }, - "del-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Background for line numbers of deleted code, connecting numbers to removed content." - }, - "del-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Stronger emphasis color for specific character changes within deleted lines." - }, - "plain-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral background for unchanged code that allows modified content to stand out." - }, - "plain-lineNumber": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for line numbers of unchanged code, maintaining visual rhythm." - }, - "plain-lineNumber-color": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unchanged line numbers, visually subdued compared to changed content." - }, - "empty-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for placeholder spaces and empty lines, maintaining visual continuity." - }, - "hunk-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.08", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for diff section headers ('hunks') that indicate which part of the file is displayed." - }, - "hunk-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for line numbers in section headers." - }, - "hunk-content-color": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for section header content showing file position information." - }, - "expand-content": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background for controls that expand/collapse code sections to show additional context." - } - }, - "input": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for input field content. Ensures readability of user-entered information." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for input fields. Creates a distinct surface for user interaction and data entry." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for input fields. Defines the input area with a visible boundary for improved usability." - } - }, - "label": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for form labels and field identifiers. Ensures high contrast for important contextual information." - } - }, - "link": { - "default": { - "$type": "color", - "$value": "{text.accent}", - "$description": "Default color for text links. Creates distinct visual identification of interactive text elements." - }, - "visited": { - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Visited state color for text links, replaced with blue for deuteranopia visibility." - } - }, - "nav-tabs": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Unselected tab item text." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Selected tab item text." - }, - "border": { - "$type": "color", - "$value": "{border.focus}", - "$description": "Selected tab item border." - } - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Navigation container border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Navigation tabs container background." - } - }, - "pipeline": { - "arrow": { - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for pipeline connection arrows. Defines the visual path between pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", - "$description": "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", - "$description": "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements." - }, - "border": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", - "$description": "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", - "$description": "Animated gradient border for running pipeline states. Provides visual indication of active processing." - } - }, - "error": { - "border": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution." - } - }, - "completed": { - "border": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for completed pipeline states. Indicates successful pipeline execution." - } - } - }, - "card-canvas": { - "1": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container." - } - }, - "2": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization." - } - } - }, - "background": { - "dotes": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Refers to the dotted pattern visible in the background of the workspace." - } - } - }, - "sidebar": { - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background color for navigation components. Creates a consistent foundation for navigation elements." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Border color for navigation components. Creates visual boundaries and separation from adjacent content." - }, - "separator": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Color for separators between navigation sections. Creates visual organization within the navigation structure." - }, - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Hover state for navigation items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Selected state for navigation items." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Text color for unselected navigation items. Provides readable but less emphasized styling for available options." - }, - "icon": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Text color for selected navigation items. Increases contrast to highlight the current location." - }, - "icon": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Icon color for selected navigation items. Creates stronger visual indication of the current selection." - } - } - }, - "logo": { - "text": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Text color for Logo in sidebar navigation." - }, - "icon": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Icon color for Logo in sidebar navigation." - } - }, - "search": { - "background": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Search input specific background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Search input specific border on sidebar navigation." - }, - "placeholder": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Search input specific placeholder on sidebar navigation." - }, - "btn": { - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Search input specific button background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Search input specific button border on sidebar navigation." - }, - "text": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Search input specific button text on sidebar navigation." - } - } - }, - "footer": { - "username": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Username in the footer sidebar navigation menu." - }, - "data": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "User data in the footer sidebar navigation menu." - } - } - }, - "scrollbar": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability." - } - }, - "selection": { - "unselected": { - "item": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected state in selection controls. Creates visual distinction from selected items." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "item": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Color for selected items in selection controls. Creates high contrast against selected background state." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Background color for selected state in selection controls. Creates strong visual indication of active selection." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling." - } - } - }, - "separator": { - "background": { - "$type": "color", - "$value": "{border.2}", - "$description": "Background color for separator elements. Creates visual division between content sections with a subtle line or space." - } - }, - "skeleton": { - "background": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", - "$description": "Animation color that sweeps across skeleton elements. Creates a \"shimmer\" effect indicating content loading states." - } - }, - "slider": { - "track": { - "base": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for slider tracks. Represents the full range of available values in an unselected state." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.400}", - "$description": "Filled portion color for slider tracks. Visually represents the selected value or range within the track." - } - }, - "track-segments": { - "base": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.600}", - "$description": "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range." - } - }, - "handle": { - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for slider handles. Creates a distinct, interactive element for adjusting values." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Border color for slider handles. Provides definition and contrast for the interactive control." - } - } - }, - "status-indicator": { - "completed": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Color for success status indicators. Communicates completed or positive states." - }, - "cancelled": { - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Color for danger status indicators. Communicates error or critical warning states." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Color for warning status indicators. Communicates caution or potential issue states." - }, - "running": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Color for running status indicators. Communicates active or in-progress operations." - }, - "merged": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Color for merged status indicators. Communicates successful integration or completion in version control contexts." - }, - "action-required": { - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Color for action-required status indicators. Communicates that user attention or intervention is needed." - }, - "waiting": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Color for pending status indicators. Communicates in waiting states." - } - }, - "switch": { - "unselected": { - "thumb": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for the unselected state of switch controls. Creates visual distinction from the selected state." - } - }, - "selected": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Background color for the selected state of switch controls. Creates strong visual indication of active state." - } - } - }, - "table": { - "header": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for table header cells. Ensures readability of column labels and titles." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for table header rows. Creates visual distinction between headers and data rows." - } - }, - "row": { - "alternate-background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for alternate table rows. Improves readability by differentiating adjacent rows." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for table rows. Provides subtle separation between data rows." - } - }, - "cell": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for table cell content. Ensures high readability of tabular data." - } - } - }, - "tabs": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for the tabs container. Creates a consistent foundation for tab elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tab containers and separators. Provides subtle definition for tab boundaries." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected tab items. Creates visual distinction from the active tab." - }, - "border": { - "$type": "color", - "$value": "{component.tabs.item.unselected.background}", - "$description": "Border color for unselected tab items. Maintains consistent styling with the tab background." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for the selected tab item. Increases contrast to highlight the active tab." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for the selected tab item. Creates strong visual indication of the active tab." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for the selected tab item. Reinforces the active state with defined boundaries." - } - } - } - }, - "tag": { - "blue": { - "text": { - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Text color for blue tags. Ensures readability while maintaining the blue color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.100}", - "$description": "Background color for blue tags. Creates a distinct surface with blue theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.50}", - "$description": "Subtle background variation for blue tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.blue.background}", - "$description": "Border color for blue tags." - } - }, - "brown": { - "text": { - "$type": "color", - "$value": "{colors.brown.600}", - "$description": "Text color for brown tags. Ensures readability while maintaining the brown color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.brown.100}", - "$description": "Background color for brown tags. Creates a distinct surface with brown theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.brown.50}", - "$description": "Subtle background variation for brown tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.brown.background}", - "$description": "Border color for brown tags." - } - }, - "cyan": { - "text": { - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Text color for cyan tags. Ensures readability while maintaining the cyan color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Background color for cyan tags. Creates a distinct surface with cyan theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.50}", - "$description": "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.cyan.background}", - "$description": "Border color for cyan tags." - } - }, - "green": { - "text": { - "$type": "color", - "$value": "{colors.cyan.600}", - "$description": "Text color for green tags, replaced with cyan for deuteranopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Background color for green tags, replaced with cyan for deuteranopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.50}", - "$description": "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.green.background}", - "$description": "Border color for green tags, replaced with cyan." - } - }, - "indigo": { - "text": { - "$type": "color", - "$value": "{colors.indigo.500}", - "$description": "Text color for indigo tags. Ensures readability while maintaining the indigo color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.indigo.100}", - "$description": "Background color for indigo tags. Creates a distinct surface with indigo theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.indigo.50}", - "$description": "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.indigo.background}", - "$description": "Border color for indigo tags." - } - }, - "lime": { - "text": { - "$type": "color", - "$value": "{colors.lime.600}", - "$description": "Text color for lime tags. Ensures readability while maintaining the lime color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.lime.100}", - "$description": "Background color for lime tags. Creates a distinct surface with lime theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.lime.50}", - "$description": "Subtle background variation for lime tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.lime.background}", - "$description": "Border color for lime tags." - } - }, - "mint": { - "text": { - "$type": "color", - "$value": "{colors.mint.600}", - "$description": "Text color for mint tags. Ensures readability while maintaining the mint color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.mint.100}", - "$description": "Background color for mint tags. Creates a distinct surface with mint theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.mint.50}", - "$description": "Subtle background variation for mint tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.mint.background}", - "$description": "Border color for mint tags." - } - }, - "orange": { - "text": { - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Text color for orange tags. Ensures readability while maintaining the orange color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.100}", - "$description": "Background color for orange tags. Creates a distinct surface with orange theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.50}", - "$description": "Subtle background variation for orange tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.orange.background}", - "$description": "Border color for orange tags." - } - }, - "pink": { - "text": { - "$type": "color", - "$value": "{colors.pink.500}", - "$description": "Text color for pink tags. Ensures readability while maintaining the pink color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.pink.100}", - "$description": "Background color for pink tags. Creates a distinct surface with pink theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.pink.50}", - "$description": "Subtle background variation for pink tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.pink.background}", - "$description": "Border color for pink tags." - } - }, - "purple": { - "text": { - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Text color for purple tags, replaced with cyan for deuteranopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Background color for purple tags, replaced with cyan for deuteranopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.50}", - "$description": "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.purple.background}", - "$description": "Border color for purple tags, replaced with cyan." - } - }, - "red": { - "text": { - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Text color for red tags, replaced with orange for deuteranopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.100}", - "$description": "Background color for red tags, replaced with orange for deuteranopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.50}", - "$description": "Subtle background variation for red tags, replaced with orange for deuteranopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.red.background}", - "$description": "Border color for red tags, replaced with orange." - } - }, - "violet": { - "text": { - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Text color for violet tags, replaced with blue for deuteranopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.100}", - "$description": "Background color for violet tags, replaced with blue for deuteranopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.50}", - "$description": "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.violet.background}", - "$description": "Border color for violet tags, replaced with blue." - } - }, - "yellow": { - "text": { - "$type": "color", - "$value": "{colors.yellow.600}", - "$description": "Text color for yellow tags. Ensures readability while maintaining the yellow color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.yellow.100}", - "$description": "Background color for yellow tags. Creates a distinct surface with yellow theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.yellow.50}", - "$description": "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.yellow.background}", - "$description": "Border color for yellow tags." - } - }, - "gray": { - "text": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Text color for gray tags. Ensures readability while maintaining the gray color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for gray tags. Creates a distinct surface with gray theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Subtle background variation for gray tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.gray.background}", - "$description": "Border color for gray tags." - } - } - }, - "toast": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational toast notifications. Ensures high visibility for the notification headline." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational toast notifications. Provides readable contrast for notification content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational toast notifications. Creates visual distinction from UI content beneath." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational toast notifications. Subtly defines the notification's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for danger toast notifications. Provides maximum contrast against the error background." - }, - "description": { - "$type": "color", - "$value": "{text.1}", - "$description": "Description text color for danger toast notifications. Ensures readability of critical information." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.100}", - "$description": "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings." - }, - "border": { - "$type": "color", - "$value": "{component.toast.danger.background}", - "$description": "Border color for danger toast notifications. Reinforces the critical nature of the notification message." - } - } - }, - "tooltip": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for tooltip content. Ensures readability of helpful contextual information." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - } - } - }, - "shadow": { - "0": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "0", - "blur": "0", - "spread": "0", - "color": "{shadow-color.0}", - "type": "dropShadow" - }, - "$description": "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile." - }, - "1": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "1", - "blur": "2", - "spread": "0", - "color": "{shadow-color.1}", - "type": "dropShadow" - }, - "$description": "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements." - }, - "2": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "1", - "blur": "3", - "spread": "0", - "color": "{shadow-color.2}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "1", - "blur": "2", - "spread": "-1", - "color": "{shadow-color.2}", - "type": "dropShadow" - } - ], - "$description": "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state." - }, - "3": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-1", - "color": "{shadow-color.3}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "2", - "blur": "4", - "spread": "-2", - "color": "{shadow-color.3}", - "type": "dropShadow" - } - ], - "$description": "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover." - }, - "4": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "10", - "blur": "15", - "spread": "-3", - "color": "{shadow-color.4}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-4", - "color": "{shadow-color.4}", - "type": "dropShadow" - } - ], - "$description": "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns." - }, - "5": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "20", - "blur": "25", - "spread": "-5", - "color": "{shadow-color.5}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "8", - "blur": "10", - "spread": "-6", - "color": "{shadow-color.5}", - "type": "dropShadow" - } - ], - "$description": "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections." - }, - "6": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "25", - "blur": "50", - "spread": "-12", - "color": "{shadow-color.6}", - "type": "dropShadow" - }, - "$description": "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation." - }, - "inner": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "2", - "blur": "4", - "spread": "0", - "color": "{shadow-color.inner}", - "type": "innerShadow" - }, - "$description": "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields." - } - }, - "shadow-color": { - "0": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Transparent shadow color. Used when no shadow effect is desired." - }, - "1": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Light shadow color with 40% opacity. Creates subtle depth for small UI elements." - }, - "2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Medium shadow color with 40% opacity. Provides balanced depth for common UI components." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.35", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Medium shadow color with 35% opacity. Creates moderate depth for elevated components." - }, - "4": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.35", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Deep shadow color with 35% opacity. Provides significant depth for floating elements." - }, - "5": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.35", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content." - }, - "6": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements." - }, - "inner": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states." - } - }, - "ring": { - "focus": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "2", - "color": "{background.1}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "4", - "color": "{border.focus}", - "type": "dropShadow" - } - ], - "$description": "Focus ring effect with background offset and accent border." - } - }, - "gradient": { - "ai": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.yellow.200}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.orange.300}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.cyan.300}" - }, - "gradient-stop-4": { - "$type": "color", - "$value": "{colors.cyan.300}" - } - }, - "skeleton": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.chrome.100}" - } - }, - "pipeline": { - "running": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.orange.300}" - }, - "gradient-stop-2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.orange.300}" - } - }, - "arrows": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.blue.400}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{border.1}" - } - }, - "card": { - "background": { - "gradient-from": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.50}" - } - }, - "border": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.50}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.100}" - } - } - }, - "widget": { - "number": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.500}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.600}" - } - }, - "blob": { - "big": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.pure.white}" - } - }, - "small": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.150}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.pure.white}" - } - } - } - } - } - }, - "iconStrokeWidth": { - "xxs": { - "$type": "borderWidth", - "$value": "1.1" - }, - "xs": { - "$type": "borderWidth", - "$value": "1" - }, - "sm": { - "$type": "borderWidth", - "$value": "1.1" - }, - "default": { - "$type": "borderWidth", - "$value": "1.1" - }, - "md": { - "$type": "borderWidth", - "$value": "1.4" - }, - "lg": { - "$type": "borderWidth", - "$value": "2" - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/mode/light/dimmer-protanopia.json b/packages/ui/design-tokens/mode/light/dimmer-protanopia.json deleted file mode 100644 index 0879db658a..0000000000 --- a/packages/ui/design-tokens/mode/light/dimmer-protanopia.json +++ /dev/null @@ -1,2364 +0,0 @@ -{ - "background": { - "1": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers." - }, - "2": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers." - } - }, - "text": { - "1": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders." - }, - "accent": { - "$type": "color", - "$value": "{brand.color.400}", - "$description": "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements." - }, - "success": { - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Primary color for text and icons in success content. Communicates positive outcomes and completion states. Using blue instead of green for protanopia visibility.\n\nCommon uses: Success message text, completion text, positive indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.500}", - "$description": "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications." - } - }, - "border": { - "1": { - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers." - }, - "2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.8", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.8", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows." - }, - "focus": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators." - }, - "success": { - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Border color for success containers. Reinforces positive status through visual framing. Using blue instead of green for protanopia visibility.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.400}", - "$description": "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements." - } - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item." - }, - "disabled": { - "text": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries." - } - } - }, - "component": { - "accordion": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for accordion content. Applied to the expandable text within accordion panels." - }, - "chevron": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for accordion items. Provides visual separation between accordion panels." - } - }, - "alert": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational alerts. Ensures high visibility for the alert heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational alerts. Provides readable contrast for alert content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational alerts. Creates visual distinction from surrounding content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational alerts. Subtly defines the alert's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.red.700}", - "$description": "Text color for danger alerts. Communicates critical information through high-contrast red text." - }, - "description": { - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Description text color for danger alerts. Ensures readability while maintaining the error state styling." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.08", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger alerts. Creates subtle but recognizable error state styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Border color for danger alerts. Provides definition for error state alerts." - } - } - }, - "avatar": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for avatar initials or text. Ensures visibility against the avatar background." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for avatar components. Provides contrast for text or image content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for avatars. Creates subtle definition around the avatar element." - } - }, - "badge": { - "default": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for secondary badges. Provides readable contrast on secondary badge styling." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for secondary badges. Creates less prominent badge styling for secondary information." - }, - "border": { - "$type": "color", - "$value": "{component.badge.default.background}", - "$description": "Border color for secondary badges. Matches background for clean, cohesive appearance." - } - }, - "neutral": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for outline badges. Ensures readability for badges with transparent backgrounds." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Border color for outline badges. Creates definition for badges without background fill." - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Text color for success badges. Communicates positive status through readable blue text. Using blue instead of green for protanopia visibility." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Border color for success badges. Provides subtle definition for success state indicators. Using blue instead of green for protanopia visibility." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.200}", - "$description": "Background color for success badges. Creates a subtle but recognizable success indicator. Using blue instead of green for protanopia visibility." - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Text color for danger badges. Communicates error or warning status with high visibility." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger badges. Creates definition for error or warning indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Background color for danger badges. Provides subtle visual indication of error states." - } - }, - "warning": { - "text": { - "$type": "color", - "$value": "{colors.yellow.500}", - "$description": "Text color for warning badges. Signals caution states with readable amber text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Border color for warning badges. Defines the boundary of caution status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.200}", - "$description": "Background color for warning badges. Creates subtle but recognizable caution indicators." - } - }, - "running": { - "text": { - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Text color for running state badges. Indicates active or in-progress operations." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for running state badges. Defines the boundary of active status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Background color for running state badges. Creates subtle visual indication of in-progress states." - } - }, - "merged": { - "text": { - "$type": "color", - "$value": "{colors.purple.500}", - "$description": "Text color for merged state badges. Indicates completed merge actions in version control contexts." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.purple.300}", - "$description": "Border color for merged state badges. Defines the boundary of merge status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.purple.300}", - "$description": "Background color for merged state badges. Creates subtle but recognizable merge indicators." - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-related badges. Ensures high contrast against AI badge gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "breadcrumb": { - "item-inactive": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps." - }, - "item-current": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy." - }, - "separator": { - "$type": "color", - "$value": "{state.disabled.text}", - "$description": "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items." - } - }, - "btn": { - "primary": { - "text": { - "$type": "color", - "$value": "{brand.onColor.500}", - "$description": "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements." - }, - "background": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Background color for primary action buttons. Creates emphasis for the most important action in a given context." - }, - "border": { - "$type": "color", - "$value": "{component.btn.primary.background}", - "$description": "Border color for primary action buttons. Matches background for clean, cohesive appearance." - } - }, - "secondary": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions." - }, - "border": { - "$type": "color", - "$value": "{component.btn.secondary.background}", - "$description": "Border color for secondary action buttons. Matches background for clean, cohesive appearance." - } - }, - "outline": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected outline buttons. Creates subtle emphasis for button icons." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for unselected outline buttons. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected outline buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected outline buttons. Increases visibility for active button states." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for selected outline buttons. Creates stronger visual indication of the active state." - } - } - }, - "ghost": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected ghost buttons. Provides readable contrast for minimal styling." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected ghost buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected ghost buttons. Increases visibility for active button states." - } - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Text color for success buttons. Communicates positive actions through readable blue text. Using blue instead of green for protanopia visibility." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.08", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.200}", - "$description": "Background color for success buttons. Creates subtle but recognizable positive action styling. Using blue instead of green for protanopia visibility." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Border color for success buttons. Provides definition for positive action buttons. Using blue instead of green for protanopia visibility." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.200}", - "$description": "Hover state background color for success buttons. Creates subtle feedback for user interaction. Using blue instead of green for protanopia visibility." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.200}", - "$description": "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. Using blue instead of green for protanopia visibility." - } - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.08", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Background color for danger buttons. Creates subtle but recognizable destructive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger buttons. Provides definition for destructive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Hover state background color for danger buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for AI-powered buttons." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for card components. Creates a distinct surface that appears elevated from the page background." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content." - } - }, - "dialog": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dialog content. Provides readable contrast for the modal's primary text content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dialog components." - }, - "backdrop": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." - } - }, - "dropdown": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for dropdown menus. Creates a distinct surface for selectable options." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dropdown menus container." - }, - "item": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dropdown menu items. Ensures readability of selectable options." - }, - "delete": { - "text": { - "$type": "color", - "$value": "{text.danger}", - "$description": "Text color for dropdown menu delete-item." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Specific hover state color for dropdown delete-item." - } - } - } - } - }, - "diff": { - "grey": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent." - }, - "add-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.08", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Blue background highlighting newly added code lines while maintaining readability. Using blue instead of green for protanopia visibility." - }, - "add-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for line numbers of added code, providing visual connection to added content. Using blue instead of green for protanopia visibility." - }, - "add-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Stronger emphasis color for specific character changes within added lines. Using blue instead of green for protanopia visibility." - }, - "add-widget": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background for interactive UI elements related to added content." - }, - "add-widget-color": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text/icon color for add-related interactive elements, ensuring readability." - }, - "del-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.08", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Red background highlighting removed code lines without causing eye strain." - }, - "del-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background for line numbers of deleted code, connecting numbers to removed content." - }, - "del-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Stronger emphasis color for specific character changes within deleted lines." - }, - "plain-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral background for unchanged code that allows modified content to stand out." - }, - "plain-lineNumber": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for line numbers of unchanged code, maintaining visual rhythm." - }, - "plain-lineNumber-color": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unchanged line numbers, visually subdued compared to changed content." - }, - "empty-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for placeholder spaces and empty lines, maintaining visual continuity." - }, - "hunk-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.08", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for diff section headers ('hunks') that indicate which part of the file is displayed." - }, - "hunk-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for line numbers in section headers." - }, - "hunk-content-color": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for section header content showing file position information." - }, - "expand-content": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background for controls that expand/collapse code sections to show additional context." - } - }, - "input": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for input field content. Ensures readability of user-entered information." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for input fields. Creates a distinct surface for user interaction and data entry." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for input fields. Defines the input area with a visible boundary for improved usability." - } - }, - "label": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for form labels and field identifiers. Ensures high contrast for important contextual information." - } - }, - "link": { - "default": { - "$type": "color", - "$value": "{text.accent}", - "$description": "Default color for text links. Creates distinct visual identification of interactive text elements." - }, - "visited": { - "$type": "color", - "$value": "{colors.purple.500}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." - } - }, - "nav-tabs": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Unselected tab item text." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Selected tab item text." - }, - "border": { - "$type": "color", - "$value": "{border.focus}", - "$description": "Selected tab item border." - } - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Navigation container border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Navigation tabs container background." - } - }, - "pipeline": { - "arrow": { - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for pipeline connection arrows. Defines the visual path between pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", - "$description": "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", - "$description": "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements." - }, - "border": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", - "$description": "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", - "$description": "Animated gradient border for running pipeline states. Provides visual indication of active processing." - } - }, - "error": { - "border": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution." - } - }, - "completed": { - "border": { - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Border color for completed pipeline states. Indicates successful pipeline execution. Using blue instead of green for protanopia visibility." - } - } - }, - "card-canvas": { - "1": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container." - } - }, - "2": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization." - } - } - }, - "background": { - "dotes": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Refers to the dotted pattern visible in the background of the workspace." - } - } - }, - "sidebar": { - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background color for navigation components. Creates a consistent foundation for navigation elements." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Border color for navigation components. Creates visual boundaries and separation from adjacent content." - }, - "separator": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Color for separators between navigation sections. Creates visual organization within the navigation structure." - }, - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Hover state for navigation items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Selected state for navigation items." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Text color for unselected navigation items. Provides readable but less emphasized styling for available options." - }, - "icon": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Text color for selected navigation items. Increases contrast to highlight the current location." - }, - "icon": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Icon color for selected navigation items. Creates stronger visual indication of the current selection." - } - } - }, - "logo": { - "text": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Text color for Logo in sidebar navigation." - }, - "icon": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Icon color for Logo in sidebar navigation." - } - }, - "search": { - "background": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Search input specific background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Search input specific border on sidebar navigation." - }, - "placeholder": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Search input specific placeholder on sidebar navigation." - }, - "btn": { - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Search input specific button background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Search input specific button border on sidebar navigation." - }, - "text": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Search input specific button text on sidebar navigation." - } - } - }, - "footer": { - "username": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Username in the footer sidebar navigation menu." - }, - "data": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "User data in the footer sidebar navigation menu." - } - } - }, - "scrollbar": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability." - } - }, - "selection": { - "unselected": { - "item": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected state in selection controls. Creates visual distinction from selected items." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "item": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Color for selected items in selection controls. Creates high contrast against selected background state." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Background color for selected state in selection controls. Creates strong visual indication of active selection." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling." - } - } - }, - "separator": { - "background": { - "$type": "color", - "$value": "{border.2}", - "$description": "Background color for separator elements. Creates visual division between content sections with a subtle line or space." - } - }, - "skeleton": { - "background": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", - "$description": "Animation color that sweeps across skeleton elements. Creates a \"shimmer\" effect indicating content loading states." - } - }, - "slider": { - "track": { - "base": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for slider tracks. Represents the full range of available values in an unselected state." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.400}", - "$description": "Filled portion color for slider tracks. Visually represents the selected value or range within the track." - } - }, - "track-segments": { - "base": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.600}", - "$description": "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range." - } - }, - "handle": { - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for slider handles. Creates a distinct, interactive element for adjusting values." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Border color for slider handles. Provides definition and contrast for the interactive control." - } - } - }, - "status-indicator": { - "completed": { - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Color for success status indicators. Communicates completed or positive states. Using blue instead of green for protanopia visibility." - }, - "cancelled": { - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Color for danger status indicators. Communicates error or critical warning states." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Color for warning status indicators. Communicates caution or potential issue states." - }, - "running": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Color for running status indicators. Communicates active or in-progress operations." - }, - "merged": { - "$type": "color", - "$value": "{colors.purple.300}", - "$description": "Color for merged status indicators. Communicates successful integration or completion in version control contexts." - }, - "action-required": { - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Color for action-required status indicators. Communicates that user attention or intervention is needed." - }, - "waiting": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Color for pending status indicators. Communicates in waiting states." - } - }, - "switch": { - "unselected": { - "thumb": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for the unselected state of switch controls. Creates visual distinction from the selected state." - } - }, - "selected": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Background color for the selected state of switch controls. Creates strong visual indication of active state." - } - } - }, - "table": { - "header": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for table header cells. Ensures readability of column labels and titles." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for table header rows. Creates visual distinction between headers and data rows." - } - }, - "row": { - "alternate-background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for alternate table rows. Improves readability by differentiating adjacent rows." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for table rows. Provides subtle separation between data rows." - } - }, - "cell": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for table cell content. Ensures high readability of tabular data." - } - } - }, - "tabs": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for the tabs container. Creates a consistent foundation for tab elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tab containers and separators. Provides subtle definition for tab boundaries." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected tab items. Creates visual distinction from the active tab." - }, - "border": { - "$type": "color", - "$value": "{component.tabs.item.unselected.background}", - "$description": "Border color for unselected tab items. Maintains consistent styling with the tab background." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for the selected tab item. Increases contrast to highlight the active tab." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for the selected tab item. Creates strong visual indication of the active tab." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for the selected tab item. Reinforces the active state with defined boundaries." - } - } - } - }, - "tag": { - "blue": { - "text": { - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Text color for blue tags. Ensures readability while maintaining the blue color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.100}", - "$description": "Background color for blue tags. Creates a distinct surface with blue theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.50}", - "$description": "Subtle background variation for blue tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.blue.background}", - "$description": "Border color for blue tags." - } - }, - "brown": { - "text": { - "$type": "color", - "$value": "{colors.brown.600}", - "$description": "Text color for brown tags. Ensures readability while maintaining the brown color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.brown.100}", - "$description": "Background color for brown tags. Creates a distinct surface with brown theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.brown.50}", - "$description": "Subtle background variation for brown tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.brown.background}", - "$description": "Border color for brown tags." - } - }, - "cyan": { - "text": { - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Text color for cyan tags. Ensures readability while maintaining the cyan color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Background color for cyan tags. Creates a distinct surface with cyan theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.50}", - "$description": "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.cyan.background}", - "$description": "Border color for cyan tags." - } - }, - "green": { - "text": { - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Text color for green tags. Using blue instead of green for protanopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.100}", - "$description": "Background color for green tags. Using blue instead of green for protanopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.50}", - "$description": "Subtle background variation for green tags. Using blue instead of green for protanopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.green.background}", - "$description": "Border color for green tags. Using blue instead of green for protanopia visibility." - } - }, - "indigo": { - "text": { - "$type": "color", - "$value": "{colors.indigo.500}", - "$description": "Text color for indigo tags. Ensures readability while maintaining the indigo color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.indigo.100}", - "$description": "Background color for indigo tags. Creates a distinct surface with indigo theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.indigo.50}", - "$description": "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.indigo.background}", - "$description": "Border color for indigo tags." - } - }, - "lime": { - "text": { - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Text color for lime tags. Using blue instead of lime/green for protanopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.100}", - "$description": "Background color for lime tags. Using blue instead of lime/green for protanopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.50}", - "$description": "Subtle background variation for lime tags. Using blue instead of lime/green for protanopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.lime.background}", - "$description": "Border color for lime tags. Using blue instead of lime/green for protanopia visibility." - } - }, - "mint": { - "text": { - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Text color for mint tags. Using blue instead of mint/green for protanopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.100}", - "$description": "Background color for mint tags. Using blue instead of mint/green for protanopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.50}", - "$description": "Subtle background variation for mint tags. Using blue instead of mint/green for protanopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.mint.background}", - "$description": "Border color for mint tags. Using blue instead of mint/green for protanopia visibility." - } - }, - "orange": { - "text": { - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Text color for orange tags. Ensures readability while maintaining the orange color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.100}", - "$description": "Background color for orange tags. Creates a distinct surface with orange theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.50}", - "$description": "Subtle background variation for orange tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.orange.background}", - "$description": "Border color for orange tags." - } - }, - "pink": { - "text": { - "$type": "color", - "$value": "{colors.pink.500}", - "$description": "Text color for pink tags. Ensures readability while maintaining the pink color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.pink.100}", - "$description": "Background color for pink tags. Creates a distinct surface with pink theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.pink.50}", - "$description": "Subtle background variation for pink tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.pink.background}", - "$description": "Border color for pink tags." - } - }, - "purple": { - "text": { - "$type": "color", - "$value": "{colors.purple.500}", - "$description": "Text color for purple tags. Ensures readability while maintaining the purple color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.purple.100}", - "$description": "Background color for purple tags. Creates a distinct surface with purple theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.purple.50}", - "$description": "Subtle background variation for purple tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.purple.background}", - "$description": "Border color for purple tags." - } - }, - "red": { - "text": { - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Text color for red tags. Ensures readability while maintaining the red color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.red.100}", - "$description": "Background color for red tags. Creates a distinct surface with red theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.red.50}", - "$description": "Subtle background variation for red tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.red.background}", - "$description": "Border color for red tags." - } - }, - "violet": { - "text": { - "$type": "color", - "$value": "{colors.violet.500}", - "$description": "Text color for violet tags. Ensures readability while maintaining the violet color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.violet.100}", - "$description": "Background color for violet tags. Creates a distinct surface with violet theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.violet.50}", - "$description": "Subtle background variation for violet tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.violet.background}", - "$description": "Border color for violet tags." - } - }, - "yellow": { - "text": { - "$type": "color", - "$value": "{colors.yellow.600}", - "$description": "Text color for yellow tags. Ensures readability while maintaining the yellow color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.yellow.100}", - "$description": "Background color for yellow tags. Creates a distinct surface with yellow theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.yellow.50}", - "$description": "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.yellow.background}", - "$description": "Border color for yellow tags." - } - }, - "gray": { - "text": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Text color for gray tags. Ensures readability while maintaining the gray color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for gray tags. Creates a distinct surface with gray theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Subtle background variation for gray tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.gray.background}", - "$description": "Border color for gray tags." - } - } - }, - "toast": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational toast notifications. Ensures high visibility for the notification headline." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational toast notifications. Provides readable contrast for notification content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational toast notifications. Creates visual distinction from UI content beneath." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational toast notifications. Subtly defines the notification's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for danger toast notifications. Provides maximum contrast against the error background." - }, - "description": { - "$type": "color", - "$value": "{text.1}", - "$description": "Description text color for danger toast notifications. Ensures readability of critical information." - }, - "background": { - "$type": "color", - "$value": "{colors.red.100}", - "$description": "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings." - }, - "border": { - "$type": "color", - "$value": "{component.toast.danger.background}", - "$description": "Border color for danger toast notifications. Reinforces the critical nature of the notification message." - } - } - }, - "tooltip": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for tooltip content. Ensures readability of helpful contextual information." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - } - } - }, - "shadow": { - "0": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "0", - "blur": "0", - "spread": "0", - "color": "{shadow-color.0}", - "type": "dropShadow" - }, - "$description": "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile." - }, - "1": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "1", - "blur": "2", - "spread": "0", - "color": "{shadow-color.1}", - "type": "dropShadow" - }, - "$description": "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements." - }, - "2": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "1", - "blur": "3", - "spread": "0", - "color": "{shadow-color.2}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "1", - "blur": "2", - "spread": "-1", - "color": "{shadow-color.2}", - "type": "dropShadow" - } - ], - "$description": "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state." - }, - "3": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-1", - "color": "{shadow-color.3}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "2", - "blur": "4", - "spread": "-2", - "color": "{shadow-color.3}", - "type": "dropShadow" - } - ], - "$description": "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover." - }, - "4": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "10", - "blur": "15", - "spread": "-3", - "color": "{shadow-color.4}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-4", - "color": "{shadow-color.4}", - "type": "dropShadow" - } - ], - "$description": "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns." - }, - "5": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "20", - "blur": "25", - "spread": "-5", - "color": "{shadow-color.5}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "8", - "blur": "10", - "spread": "-6", - "color": "{shadow-color.5}", - "type": "dropShadow" - } - ], - "$description": "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections." - }, - "6": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "25", - "blur": "50", - "spread": "-12", - "color": "{shadow-color.6}", - "type": "dropShadow" - }, - "$description": "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation." - }, - "inner": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "2", - "blur": "4", - "spread": "0", - "color": "{shadow-color.inner}", - "type": "innerShadow" - }, - "$description": "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields." - } - }, - "shadow-color": { - "0": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Transparent shadow color. Used when no shadow effect is desired." - }, - "1": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Light shadow color with 40% opacity. Creates subtle depth for small UI elements." - }, - "2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Medium shadow color with 40% opacity. Provides balanced depth for common UI components." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.35", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Medium shadow color with 35% opacity. Creates moderate depth for elevated components." - }, - "4": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.35", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Deep shadow color with 35% opacity. Provides significant depth for floating elements." - }, - "5": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.35", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content." - }, - "6": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements." - }, - "inner": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states." - } - }, - "ring": { - "focus": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "2", - "color": "{background.1}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "4", - "color": "{border.focus}", - "type": "dropShadow" - } - ], - "$description": "Focus ring effect with background offset and accent border." - } - }, - "gradient": { - "ai": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.yellow.200}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pink.300}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.purple.300}" - }, - "gradient-stop-4": { - "$type": "color", - "$value": "{colors.cyan.300}" - } - }, - "skeleton": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.chrome.100}" - } - }, - "pipeline": { - "running": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.orange.300}" - }, - "gradient-stop-2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.orange.300}" - } - }, - "arrows": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.blue.400}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{border.1}" - } - }, - "card": { - "background": { - "gradient-from": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.50}" - } - }, - "border": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.50}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.100}" - } - } - }, - "widget": { - "number": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.500}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.600}" - } - }, - "blob": { - "big": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.pure.white}" - } - }, - "small": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.150}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.pure.white}" - } - } - } - } - } - }, - "iconStrokeWidth": { - "xxs": { - "$type": "borderWidth", - "$value": "1.1" - }, - "xs": { - "$type": "borderWidth", - "$value": "1" - }, - "sm": { - "$type": "borderWidth", - "$value": "1.1" - }, - "default": { - "$type": "borderWidth", - "$value": "1.1" - }, - "md": { - "$type": "borderWidth", - "$value": "1.4" - }, - "lg": { - "$type": "borderWidth", - "$value": "2" - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/mode/light/dimmer-tritanopia.json b/packages/ui/design-tokens/mode/light/dimmer-tritanopia.json deleted file mode 100644 index fcb4aa76f1..0000000000 --- a/packages/ui/design-tokens/mode/light/dimmer-tritanopia.json +++ /dev/null @@ -1,2364 +0,0 @@ -{ - "background": { - "1": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers." - }, - "2": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers." - } - }, - "text": { - "1": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders." - }, - "accent": { - "$type": "color", - "$value": "{brand.color.400}", - "$description": "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements." - }, - "success": { - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels." - }, - "warning": { - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications." - } - }, - "border": { - "1": { - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers." - }, - "2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.8", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.8", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows." - }, - "focus": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators." - }, - "success": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers." - }, - "warning": { - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements." - } - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item." - }, - "disabled": { - "text": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries." - } - } - }, - "component": { - "accordion": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for accordion content. Applied to the expandable text within accordion panels." - }, - "chevron": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for accordion items. Provides visual separation between accordion panels." - } - }, - "alert": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational alerts. Ensures high visibility for the alert heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational alerts. Provides readable contrast for alert content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational alerts. Creates visual distinction from surrounding content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational alerts. Subtly defines the alert's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.red.700}", - "$description": "Text color for danger alerts. Communicates critical information through high-contrast red text." - }, - "description": { - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Description text color for danger alerts. Ensures readability while maintaining the error state styling." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.08", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger alerts. Creates subtle but recognizable error state styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Border color for danger alerts. Provides definition for error state alerts." - } - } - }, - "avatar": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for avatar initials or text. Ensures visibility against the avatar background." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for avatar components. Provides contrast for text or image content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for avatars. Creates subtle definition around the avatar element." - } - }, - "badge": { - "default": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for secondary badges. Provides readable contrast on secondary badge styling." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for secondary badges. Creates less prominent badge styling for secondary information." - }, - "border": { - "$type": "color", - "$value": "{component.badge.default.background}", - "$description": "Border color for secondary badges. Matches background for clean, cohesive appearance." - } - }, - "neutral": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for outline badges. Ensures readability for badges with transparent backgrounds." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Border color for outline badges. Creates definition for badges without background fill." - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Text color for success badges. Communicates positive status through readable cyan text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for success badges. Provides subtle definition for success state indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Background color for success badges. Creates a subtle but recognizable success indicator." - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Text color for danger badges. Communicates error or warning status with high visibility." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger badges. Creates definition for error or warning indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Background color for danger badges. Provides subtle visual indication of error states." - } - }, - "warning": { - "text": { - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Text color for warning badges. Signals caution states with readable orange text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for warning badges. Defines the boundary of caution status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Background color for warning badges. Creates subtle but recognizable caution indicators." - } - }, - "running": { - "text": { - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Text color for running state badges. Indicates active or in-progress operations." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for running state badges. Defines the boundary of active status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Background color for running state badges. Creates subtle visual indication of in-progress states." - } - }, - "merged": { - "text": { - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Text color for merged state badges. Indicates completed merge actions in version control contexts." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for merged state badges. Defines the boundary of merge status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Background color for merged state badges. Creates subtle but recognizable merge indicators." - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-related badges. Ensures high contrast against AI badge gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "breadcrumb": { - "item-inactive": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps." - }, - "item-current": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy." - }, - "separator": { - "$type": "color", - "$value": "{state.disabled.text}", - "$description": "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items." - } - }, - "btn": { - "primary": { - "text": { - "$type": "color", - "$value": "{brand.onColor.500}", - "$description": "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements." - }, - "background": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Background color for primary action buttons. Creates emphasis for the most important action in a given context." - }, - "border": { - "$type": "color", - "$value": "{component.btn.primary.background}", - "$description": "Border color for primary action buttons. Matches background for clean, cohesive appearance." - } - }, - "secondary": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions." - }, - "border": { - "$type": "color", - "$value": "{component.btn.secondary.background}", - "$description": "Border color for secondary action buttons. Matches background for clean, cohesive appearance." - } - }, - "outline": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected outline buttons. Creates subtle emphasis for button icons." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for unselected outline buttons. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected outline buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected outline buttons. Increases visibility for active button states." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for selected outline buttons. Creates stronger visual indication of the active state." - } - } - }, - "ghost": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected ghost buttons. Provides readable contrast for minimal styling." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected ghost buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected ghost buttons. Increases visibility for active button states." - } - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Text color for success buttons. Communicates positive actions through readable cyan text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.08", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Background color for success buttons. Creates subtle but recognizable positive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for success buttons. Provides definition for positive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Hover state background color for success buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.200}", - "$description": "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.08", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Background color for danger buttons. Creates subtle but recognizable destructive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger buttons. Provides definition for destructive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Hover state background color for danger buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for AI-powered buttons." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for card components. Creates a distinct surface that appears elevated from the page background." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content." - } - }, - "dialog": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dialog content. Provides readable contrast for the modal's primary text content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dialog components." - }, - "backdrop": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." - } - }, - "dropdown": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for dropdown menus. Creates a distinct surface for selectable options." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dropdown menus container." - }, - "item": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dropdown menu items. Ensures readability of selectable options." - }, - "delete": { - "text": { - "$type": "color", - "$value": "{text.danger}", - "$description": "Text color for dropdown menu delete-item." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Specific hover state color for dropdown delete-item." - } - } - } - } - }, - "diff": { - "grey": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent." - }, - "add-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.08", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Cyan background highlighting newly added code lines while maintaining readability." - }, - "add-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Background for line numbers of added code, providing visual connection to added content." - }, - "add-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Stronger emphasis color for specific character changes within added lines." - }, - "add-widget": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background for interactive UI elements related to added content." - }, - "add-widget-color": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text/icon color for add-related interactive elements, ensuring readability." - }, - "del-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.08", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Red background highlighting removed code lines without causing eye strain." - }, - "del-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background for line numbers of deleted code, connecting numbers to removed content." - }, - "del-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Stronger emphasis color for specific character changes within deleted lines." - }, - "plain-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral background for unchanged code that allows modified content to stand out." - }, - "plain-lineNumber": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for line numbers of unchanged code, maintaining visual rhythm." - }, - "plain-lineNumber-color": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unchanged line numbers, visually subdued compared to changed content." - }, - "empty-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for placeholder spaces and empty lines, maintaining visual continuity." - }, - "hunk-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.08", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for diff section headers ('hunks') that indicate which part of the file is displayed." - }, - "hunk-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for line numbers in section headers." - }, - "hunk-content-color": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for section header content showing file position information." - }, - "expand-content": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background for controls that expand/collapse code sections to show additional context." - } - }, - "input": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for input field content. Ensures readability of user-entered information." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for input fields. Creates a distinct surface for user interaction and data entry." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for input fields. Defines the input area with a visible boundary for improved usability." - } - }, - "label": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for form labels and field identifiers. Ensures high contrast for important contextual information." - } - }, - "link": { - "default": { - "$type": "color", - "$value": "{text.accent}", - "$description": "Default color for text links. Creates distinct visual identification of interactive text elements." - }, - "visited": { - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." - } - }, - "nav-tabs": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Unselected tab item text." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Selected tab item text." - }, - "border": { - "$type": "color", - "$value": "{border.focus}", - "$description": "Selected tab item border." - } - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Navigation container border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Navigation tabs container background." - } - }, - "pipeline": { - "arrow": { - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for pipeline connection arrows. Defines the visual path between pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", - "$description": "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", - "$description": "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements." - }, - "border": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", - "$description": "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", - "$description": "Animated gradient border for running pipeline states. Provides visual indication of active processing." - } - }, - "error": { - "border": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution." - } - }, - "completed": { - "border": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Border color for completed pipeline states. Indicates successful pipeline execution." - } - } - }, - "card-canvas": { - "1": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container." - } - }, - "2": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization." - } - } - }, - "background": { - "dotes": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Refers to the dotted pattern visible in the background of the workspace." - } - } - }, - "sidebar": { - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background color for navigation components. Creates a consistent foundation for navigation elements." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Border color for navigation components. Creates visual boundaries and separation from adjacent content." - }, - "separator": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Color for separators between navigation sections. Creates visual organization within the navigation structure." - }, - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Hover state for navigation items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Selected state for navigation items." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Text color for unselected navigation items. Provides readable but less emphasized styling for available options." - }, - "icon": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Text color for selected navigation items. Increases contrast to highlight the current location." - }, - "icon": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Icon color for selected navigation items. Creates stronger visual indication of the current selection." - } - } - }, - "logo": { - "text": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Text color for Logo in sidebar navigation." - }, - "icon": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Icon color for Logo in sidebar navigation." - } - }, - "search": { - "background": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Search input specific background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Search input specific border on sidebar navigation." - }, - "placeholder": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Search input specific placeholder on sidebar navigation." - }, - "btn": { - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Search input specific button background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Search input specific button border on sidebar navigation." - }, - "text": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Search input specific button text on sidebar navigation." - } - } - }, - "footer": { - "username": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Username in the footer sidebar navigation menu." - }, - "data": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "User data in the footer sidebar navigation menu." - } - } - }, - "scrollbar": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability." - } - }, - "selection": { - "unselected": { - "item": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected state in selection controls. Creates visual distinction from selected items." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "item": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Color for selected items in selection controls. Creates high contrast against selected background state." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Background color for selected state in selection controls. Creates strong visual indication of active selection." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling." - } - } - }, - "separator": { - "background": { - "$type": "color", - "$value": "{border.2}", - "$description": "Background color for separator elements. Creates visual division between content sections with a subtle line or space." - } - }, - "skeleton": { - "background": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", - "$description": "Animation color that sweeps across skeleton elements. Creates a \"shimmer\" effect indicating content loading states." - } - }, - "slider": { - "track": { - "base": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for slider tracks. Represents the full range of available values in an unselected state." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.400}", - "$description": "Filled portion color for slider tracks. Visually represents the selected value or range within the track." - } - }, - "track-segments": { - "base": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.600}", - "$description": "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range." - } - }, - "handle": { - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for slider handles. Creates a distinct, interactive element for adjusting values." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Border color for slider handles. Provides definition and contrast for the interactive control." - } - } - }, - "status-indicator": { - "completed": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Color for success status indicators. Communicates completed or positive states." - }, - "cancelled": { - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Color for danger status indicators. Communicates error or critical warning states." - }, - "warning": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Color for warning status indicators. Communicates caution or potential issue states." - }, - "running": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Color for running status indicators. Communicates active or in-progress operations." - }, - "merged": { - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Color for merged status indicators. Communicates successful integration or completion in version control contexts." - }, - "action-required": { - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Color for action-required status indicators. Communicates that user attention or intervention is needed. " - }, - "waiting": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Color for pending status indicators. Communicates in waiting states." - } - }, - "switch": { - "unselected": { - "thumb": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for the unselected state of switch controls. Creates visual distinction from the selected state." - } - }, - "selected": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Background color for the selected state of switch controls. Creates strong visual indication of active state." - } - } - }, - "table": { - "header": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for table header cells. Ensures readability of column labels and titles." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for table header rows. Creates visual distinction between headers and data rows." - } - }, - "row": { - "alternate-background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for alternate table rows. Improves readability by differentiating adjacent rows." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for table rows. Provides subtle separation between data rows." - } - }, - "cell": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for table cell content. Ensures high readability of tabular data." - } - } - }, - "tabs": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for the tabs container. Creates a consistent foundation for tab elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tab containers and separators. Provides subtle definition for tab boundaries." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected tab items. Creates visual distinction from the active tab." - }, - "border": { - "$type": "color", - "$value": "{component.tabs.item.unselected.background}", - "$description": "Border color for unselected tab items. Maintains consistent styling with the tab background." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for the selected tab item. Increases contrast to highlight the active tab." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for the selected tab item. Creates strong visual indication of the active tab." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for the selected tab item. Reinforces the active state with defined boundaries." - } - } - } - }, - "tag": { - "blue": { - "text": { - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Text color for blue tags. Ensures readability while maintaining the blue color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.100}", - "$description": "Background color for blue tags. Creates a distinct surface with blue theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.50}", - "$description": "Subtle background variation for blue tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.blue.background}", - "$description": "Border color for blue tags. " - } - }, - "brown": { - "text": { - "$type": "color", - "$value": "{colors.brown.600}", - "$description": "Text color for brown tags. Ensures readability while maintaining the brown color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.brown.100}", - "$description": "Background color for brown tags. Creates a distinct surface with brown theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.brown.50}", - "$description": "Subtle background variation for brown tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.brown.background}", - "$description": "Border color for brown tags. " - } - }, - "cyan": { - "text": { - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Text color for cyan tags. Ensures readability while maintaining the cyan color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Background color for cyan tags. Creates a distinct surface with cyan theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.50}", - "$description": "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.cyan.background}", - "$description": "Border color for cyan tags." - } - }, - "green": { - "text": { - "$type": "color", - "$value": "{colors.cyan.600}", - "$description": "Text color for green tags, replaced with cyan for tritanopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Background color for green tags, replaced with cyan for tritanopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.50}", - "$description": "Subtle background variation for green tags, replaced with cyan for tritanopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.green.background}", - "$description": "Border color for green tags, replaced with cyan." - } - }, - "indigo": { - "text": { - "$type": "color", - "$value": "{colors.indigo.500}", - "$description": "Text color for indigo tags. Ensures readability while maintaining the indigo color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.indigo.100}", - "$description": "Background color for indigo tags. Creates a distinct surface with indigo theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.indigo.50}", - "$description": "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.indigo.background}", - "$description": "Border color for indigo tags." - } - }, - "lime": { - "text": { - "$type": "color", - "$value": "{colors.lime.600}", - "$description": "Text color for lime tags. Ensures readability while maintaining the lime color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.lime.100}", - "$description": "Background color for lime tags. Creates a distinct surface with lime theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.lime.50}", - "$description": "Subtle background variation for lime tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.lime.background}", - "$description": "Border color for lime tags." - } - }, - "mint": { - "text": { - "$type": "color", - "$value": "{colors.mint.600}", - "$description": "Text color for mint tags. Ensures readability while maintaining the mint color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.mint.100}", - "$description": "Background color for mint tags. Creates a distinct surface with mint theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.mint.50}", - "$description": "Subtle background variation for mint tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.mint.background}", - "$description": "Border color for mint tags." - } - }, - "orange": { - "text": { - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Text color for orange tags. Ensures readability while maintaining the orange color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.100}", - "$description": "Background color for orange tags. Creates a distinct surface with orange theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.50}", - "$description": "Subtle background variation for orange tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.orange.background}", - "$description": "Border color for orange tags." - } - }, - "pink": { - "text": { - "$type": "color", - "$value": "{colors.pink.500}", - "$description": "Text color for pink tags. Ensures readability while maintaining the pink color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.pink.100}", - "$description": "Background color for pink tags. Creates a distinct surface with pink theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.pink.50}", - "$description": "Subtle background variation for pink tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.pink.background}", - "$description": "Border color for pink tags." - } - }, - "purple": { - "text": { - "$type": "color", - "$value": "{colors.cyan.600}", - "$description": "Text color for purple tags, replaced with cyan for tritanopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Background color for purple tags, replaced with cyan for tritanopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.50}", - "$description": "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.purple.background}", - "$description": "Border color for purple tags, replaced with cyan." - } - }, - "red": { - "text": { - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Text color for red tags. Ensures readability while maintaining the red color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.red.100}", - "$description": "Background color for red tags. Creates a distinct surface with red theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.red.50}", - "$description": "Subtle background variation for red tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.red.background}", - "$description": "Border color for red tags." - } - }, - "violet": { - "text": { - "$type": "color", - "$value": "{colors.cyan.600}", - "$description": "Text color for violet tags, replaced with cyan for tritanopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Background color for violet tags, replaced with cyan for tritanopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.50}", - "$description": "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.violet.background}", - "$description": "Border color for violet tags, replaced with cyan." - } - }, - "yellow": { - "text": { - "$type": "color", - "$value": "{colors.orange.600}", - "$description": "Text color for yellow tags, replaced with orange for tritanopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.100}", - "$description": "Background color for yellow tags, replaced with orange for tritanopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.50}", - "$description": "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.yellow.background}", - "$description": "Border color for yellow tags, replaced with orange." - } - }, - "gray": { - "text": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Text color for gray tags. Ensures readability while maintaining the gray color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for gray tags. Creates a distinct surface with gray theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Subtle background variation for gray tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.gray.background}", - "$description": "Border color for gray tags." - } - } - }, - "toast": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational toast notifications. Ensures high visibility for the notification headline." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational toast notifications. Provides readable contrast for notification content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational toast notifications. Creates visual distinction from UI content beneath." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational toast notifications. Subtly defines the notification's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for danger toast notifications. Provides maximum contrast against the error background." - }, - "description": { - "$type": "color", - "$value": "{text.1}", - "$description": "Description text color for danger toast notifications. Ensures readability of critical information." - }, - "background": { - "$type": "color", - "$value": "{colors.red.100}", - "$description": "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings." - }, - "border": { - "$type": "color", - "$value": "{component.toast.danger.background}", - "$description": "Border color for danger toast notifications. Reinforces the critical nature of the notification message." - } - } - }, - "tooltip": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for tooltip content. Ensures readability of helpful contextual information." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - } - } - }, - "shadow": { - "0": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "0", - "blur": "0", - "spread": "0", - "color": "{shadow-color.0}", - "type": "dropShadow" - }, - "$description": "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile." - }, - "1": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "1", - "blur": "2", - "spread": "0", - "color": "{shadow-color.1}", - "type": "dropShadow" - }, - "$description": "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements." - }, - "2": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "1", - "blur": "3", - "spread": "0", - "color": "{shadow-color.2}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "1", - "blur": "2", - "spread": "-1", - "color": "{shadow-color.2}", - "type": "dropShadow" - } - ], - "$description": "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state." - }, - "3": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-1", - "color": "{shadow-color.3}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "2", - "blur": "4", - "spread": "-2", - "color": "{shadow-color.3}", - "type": "dropShadow" - } - ], - "$description": "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover." - }, - "4": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "10", - "blur": "15", - "spread": "-3", - "color": "{shadow-color.4}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-4", - "color": "{shadow-color.4}", - "type": "dropShadow" - } - ], - "$description": "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns." - }, - "5": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "20", - "blur": "25", - "spread": "-5", - "color": "{shadow-color.5}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "8", - "blur": "10", - "spread": "-6", - "color": "{shadow-color.5}", - "type": "dropShadow" - } - ], - "$description": "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections." - }, - "6": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "25", - "blur": "50", - "spread": "-12", - "color": "{shadow-color.6}", - "type": "dropShadow" - }, - "$description": "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation." - }, - "inner": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "2", - "blur": "4", - "spread": "0", - "color": "{shadow-color.inner}", - "type": "innerShadow" - }, - "$description": "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields." - } - }, - "shadow-color": { - "0": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Transparent shadow color. Used when no shadow effect is desired." - }, - "1": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Light shadow color with 40% opacity. Creates subtle depth for small UI elements." - }, - "2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Medium shadow color with 40% opacity. Provides balanced depth for common UI components." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.35", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Medium shadow color with 35% opacity. Creates moderate depth for elevated components." - }, - "4": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.35", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Deep shadow color with 35% opacity. Provides significant depth for floating elements." - }, - "5": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.35", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content." - }, - "6": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements." - }, - "inner": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states." - } - }, - "ring": { - "focus": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "2", - "color": "{background.1}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "4", - "color": "{border.focus}", - "type": "dropShadow" - } - ], - "$description": "Focus ring effect with background offset and accent border." - } - }, - "gradient": { - "ai": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.orange.200}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pink.300}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.cyan.300}" - }, - "gradient-stop-4": { - "$type": "color", - "$value": "{colors.cyan.200}" - } - }, - "skeleton": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.chrome.100}" - } - }, - "pipeline": { - "running": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.orange.300}" - }, - "gradient-stop-2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.orange.300}" - } - }, - "arrows": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.blue.400}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{border.1}" - } - }, - "card": { - "background": { - "gradient-from": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.50}" - } - }, - "border": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.50}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.100}" - } - } - }, - "widget": { - "number": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.500}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.600}" - } - }, - "blob": { - "big": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.pure.white}" - } - }, - "small": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.150}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.pure.white}" - } - } - } - } - } - }, - "iconStrokeWidth": { - "xxs": { - "$type": "borderWidth", - "$value": "1.1" - }, - "xs": { - "$type": "borderWidth", - "$value": "1" - }, - "sm": { - "$type": "borderWidth", - "$value": "1.1" - }, - "default": { - "$type": "borderWidth", - "$value": "1.1" - }, - "md": { - "$type": "borderWidth", - "$value": "1.4" - }, - "lg": { - "$type": "borderWidth", - "$value": "2" - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/mode/light/dimmer.json b/packages/ui/design-tokens/mode/light/dimmer.json deleted file mode 100644 index 4e97f4f76d..0000000000 --- a/packages/ui/design-tokens/mode/light/dimmer.json +++ /dev/null @@ -1,2364 +0,0 @@ -{ - "background": { - "1": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers." - }, - "2": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers." - } - }, - "text": { - "1": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders." - }, - "accent": { - "$type": "color", - "$value": "{brand.color.400}", - "$description": "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements." - }, - "success": { - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.500}", - "$description": "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications." - } - }, - "border": { - "1": { - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers." - }, - "2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.8", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.8", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows." - }, - "focus": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators." - }, - "success": { - "$type": "color", - "$value": "{colors.green.300}", - "$description": "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.400}", - "$description": "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements." - } - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item." - }, - "disabled": { - "text": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries." - } - } - }, - "component": { - "accordion": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for accordion content. Applied to the expandable text within accordion panels." - }, - "chevron": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for accordion items. Provides visual separation between accordion panels." - } - }, - "alert": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational alerts. Ensures high visibility for the alert heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational alerts. Provides readable contrast for alert content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational alerts. Creates visual distinction from surrounding content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational alerts. Subtly defines the alert's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.red.700}", - "$description": "Text color for danger alerts. Communicates critical information through high-contrast red text." - }, - "description": { - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Description text color for danger alerts. Ensures readability while maintaining the error state styling." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.08", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background color for danger alerts. Creates subtle but recognizable error state styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Border color for danger alerts. Provides definition for error state alerts." - } - } - }, - "avatar": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for avatar initials or text. Ensures visibility against the avatar background." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for avatar components. Provides contrast for text or image content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for avatars. Creates subtle definition around the avatar element." - } - }, - "badge": { - "default": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for secondary badges. Provides readable contrast on secondary badge styling." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for secondary badges. Creates less prominent badge styling for secondary information." - }, - "border": { - "$type": "color", - "$value": "{component.badge.default.background}", - "$description": "Border color for secondary badges. Matches background for clean, cohesive appearance." - } - }, - "neutral": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for outline badges. Ensures readability for badges with transparent backgrounds." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Border color for outline badges. Creates definition for badges without background fill." - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Text color for success badges. Communicates positive status through readable green text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.300}", - "$description": "Border color for success badges. Provides subtle definition for success state indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.200}", - "$description": "Background color for success badges. Creates a subtle but recognizable success indicator." - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Text color for danger badges. Communicates error or warning status with high visibility." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger badges. Creates definition for error or warning indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Background color for danger badges. Provides subtle visual indication of error states." - } - }, - "warning": { - "text": { - "$type": "color", - "$value": "{colors.yellow.500}", - "$description": "Text color for warning badges. Signals caution states with readable amber text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Border color for warning badges. Defines the boundary of caution status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.200}", - "$description": "Background color for warning badges. Creates subtle but recognizable caution indicators." - } - }, - "running": { - "text": { - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Text color for running state badges. Indicates active or in-progress operations." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Border color for running state badges. Defines the boundary of active status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Background color for running state badges. Creates subtle visual indication of in-progress states." - } - }, - "merged": { - "text": { - "$type": "color", - "$value": "{colors.purple.500}", - "$description": "Text color for merged state badges. Indicates completed merge actions in version control contexts." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.purple.300}", - "$description": "Border color for merged state badges. Defines the boundary of merge status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.purple.300}", - "$description": "Background color for merged state badges. Creates subtle but recognizable merge indicators." - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-related badges. Ensures high contrast against AI badge gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "breadcrumb": { - "item-inactive": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps." - }, - "item-current": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy." - }, - "separator": { - "$type": "color", - "$value": "{state.disabled.text}", - "$description": "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items." - } - }, - "btn": { - "primary": { - "text": { - "$type": "color", - "$value": "{brand.onColor.500}", - "$description": "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements." - }, - "background": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Background color for primary action buttons. Creates emphasis for the most important action in a given context." - }, - "border": { - "$type": "color", - "$value": "{component.btn.primary.background}", - "$description": "Border color for primary action buttons. Matches background for clean, cohesive appearance." - } - }, - "secondary": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions." - }, - "border": { - "$type": "color", - "$value": "{component.btn.secondary.background}", - "$description": "Border color for secondary action buttons. Matches background for clean, cohesive appearance." - } - }, - "outline": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected outline buttons. Creates subtle emphasis for button icons." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for unselected outline buttons. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected outline buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected outline buttons. Increases visibility for active button states." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for selected outline buttons. Creates stronger visual indication of the active state." - } - } - }, - "ghost": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected ghost buttons. Provides readable contrast for minimal styling." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected ghost buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected ghost buttons. Increases visibility for active button states." - } - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Text color for success buttons. Communicates positive actions through readable green text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.08", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.200}", - "$description": "Background color for success buttons. Creates subtle but recognizable positive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.300}", - "$description": "Border color for success buttons. Provides definition for positive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.200}", - "$description": "Hover state background color for success buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.200}", - "$description": "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.08", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Background color for danger buttons. Creates subtle but recognizable destructive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for danger buttons. Provides definition for destructive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Hover state background color for danger buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for AI-powered buttons." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for card components. Creates a distinct surface that appears elevated from the page background." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content." - } - }, - "dialog": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dialog content. Provides readable contrast for the modal's primary text content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dialog components." - }, - "backdrop": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." - } - }, - "dropdown": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for dropdown menus. Creates a distinct surface for selectable options." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dropdown menus container." - }, - "item": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dropdown menu items. Ensures readability of selectable options." - }, - "delete": { - "text": { - "$type": "color", - "$value": "{text.danger}", - "$description": "Text color for dropdown menu delete-item." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Specific hover state color for dropdown delete-item." - } - } - } - } - }, - "diff": { - "grey": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent." - }, - "add-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.08", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Green background highlighting newly added code lines while maintaining readability." - }, - "add-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Background for line numbers of added code, providing visual connection to added content." - }, - "add-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Stronger emphasis color for specific character changes within added lines." - }, - "add-widget": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background for interactive UI elements related to added content." - }, - "add-widget-color": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text/icon color for add-related interactive elements, ensuring readability." - }, - "del-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.08", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Red background highlighting removed code lines without causing eye strain." - }, - "del-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Background for line numbers of deleted code, connecting numbers to removed content." - }, - "del-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Stronger emphasis color for specific character changes within deleted lines." - }, - "plain-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral background for unchanged code that allows modified content to stand out." - }, - "plain-lineNumber": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for line numbers of unchanged code, maintaining visual rhythm." - }, - "plain-lineNumber-color": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unchanged line numbers, visually subdued compared to changed content." - }, - "empty-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for placeholder spaces and empty lines, maintaining visual continuity." - }, - "hunk-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.08", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for diff section headers ('hunks') that indicate which part of the file is displayed." - }, - "hunk-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Background for line numbers in section headers." - }, - "hunk-content-color": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for section header content showing file position information." - }, - "expand-content": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background for controls that expand/collapse code sections to show additional context." - } - }, - "input": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for input field content. Ensures readability of user-entered information." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for input fields. Creates a distinct surface for user interaction and data entry." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for input fields. Defines the input area with a visible boundary for improved usability." - } - }, - "label": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for form labels and field identifiers. Ensures high contrast for important contextual information." - } - }, - "link": { - "default": { - "$type": "color", - "$value": "{text.accent}", - "$description": "Default color for text links. Creates distinct visual identification of interactive text elements." - }, - "visited": { - "$type": "color", - "$value": "{colors.purple.500}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." - } - }, - "nav-tabs": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Unselected tab item text." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Selected tab item text." - }, - "border": { - "$type": "color", - "$value": "{border.focus}", - "$description": "Selected tab item border." - } - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Navigation container border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Navigation tabs container background." - } - }, - "pipeline": { - "arrow": { - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for pipeline connection arrows. Defines the visual path between pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", - "$description": "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", - "$description": "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements." - }, - "border": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", - "$description": "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", - "$description": "Animated gradient border for running pipeline states. Provides visual indication of active processing." - } - }, - "error": { - "border": { - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution." - } - }, - "completed": { - "border": { - "$type": "color", - "$value": "{colors.green.300}", - "$description": "Border color for completed pipeline states. Indicates successful pipeline execution." - } - } - }, - "card-canvas": { - "1": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container." - } - }, - "2": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization." - } - } - }, - "background": { - "dotes": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Refers to the dotted pattern visible in the background of the workspace." - } - } - }, - "sidebar": { - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background color for navigation components. Creates a consistent foundation for navigation elements." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Border color for navigation components. Creates visual boundaries and separation from adjacent content." - }, - "separator": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Color for separators between navigation sections. Creates visual organization within the navigation structure." - }, - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Hover state for navigation items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Selected state for navigation items." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Text color for unselected navigation items. Provides readable but less emphasized styling for available options." - }, - "icon": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Text color for selected navigation items. Increases contrast to highlight the current location." - }, - "icon": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Icon color for selected navigation items. Creates stronger visual indication of the current selection." - } - } - }, - "logo": { - "text": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Text color for Logo in sidebar navigation." - }, - "icon": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Icon color for Logo in sidebar navigation." - } - }, - "search": { - "background": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Search input specific background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Search input specific border on sidebar navigation." - }, - "placeholder": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Search input specific placeholder on sidebar navigation." - }, - "btn": { - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Search input specific button background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Search input specific button border on sidebar navigation." - }, - "text": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Search input specific button text on sidebar navigation." - } - } - }, - "footer": { - "username": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Username in the footer sidebar navigation menu." - }, - "data": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "User data in the footer sidebar navigation menu." - } - } - }, - "scrollbar": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability." - } - }, - "selection": { - "unselected": { - "item": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected state in selection controls. Creates visual distinction from selected items." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "item": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Color for selected items in selection controls. Creates high contrast against selected background state." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Background color for selected state in selection controls. Creates strong visual indication of active selection." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling." - } - } - }, - "separator": { - "background": { - "$type": "color", - "$value": "{border.2}", - "$description": "Background color for separator elements. Creates visual division between content sections with a subtle line or space." - } - }, - "skeleton": { - "background": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", - "$description": "Animation color that sweeps across skeleton elements. Creates a \"shimmer\" effect indicating content loading states." - } - }, - "slider": { - "track": { - "base": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for slider tracks. Represents the full range of available values in an unselected state." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.400}", - "$description": "Filled portion color for slider tracks. Visually represents the selected value or range within the track." - } - }, - "track-segments": { - "base": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals." - }, - "progress": { - "$type": "color", - "$value": "{brand.color.600}", - "$description": "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range." - } - }, - "handle": { - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for slider handles. Creates a distinct, interactive element for adjusting values." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Border color for slider handles. Provides definition and contrast for the interactive control." - } - } - }, - "status-indicator": { - "completed": { - "$type": "color", - "$value": "{colors.green.300}", - "$description": "Color for success status indicators. Communicates completed or positive states." - }, - "cancelled": { - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Color for danger status indicators. Communicates error or critical warning states." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.300}", - "$description": "Color for warning status indicators. Communicates caution or potential issue states." - }, - "running": { - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Color for running status indicators. Communicates active or in-progress operations." - }, - "merged": { - "$type": "color", - "$value": "{colors.purple.300}", - "$description": "Color for merged status indicators. Communicates successful integration or completion in version control contexts." - }, - "action-required": { - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Color for action-required status indicators. Communicates that user attention or intervention is needed. " - }, - "waiting": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Color for pending status indicators. Communicates in waiting states." - } - }, - "switch": { - "unselected": { - "thumb": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for the unselected state of switch controls. Creates visual distinction from the selected state." - } - }, - "selected": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Background color for the selected state of switch controls. Creates strong visual indication of active state." - } - } - }, - "table": { - "header": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for table header cells. Ensures readability of column labels and titles." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for table header rows. Creates visual distinction between headers and data rows." - } - }, - "row": { - "alternate-background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for alternate table rows. Improves readability by differentiating adjacent rows." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for table rows. Provides subtle separation between data rows." - } - }, - "cell": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for table cell content. Ensures high readability of tabular data." - } - } - }, - "tabs": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for the tabs container. Creates a consistent foundation for tab elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tab containers and separators. Provides subtle definition for tab boundaries." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected tab items. Creates visual distinction from the active tab." - }, - "border": { - "$type": "color", - "$value": "{component.tabs.item.unselected.background}", - "$description": "Border color for unselected tab items. Maintains consistent styling with the tab background." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for the selected tab item. Increases contrast to highlight the active tab." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for the selected tab item. Creates strong visual indication of the active tab." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for the selected tab item. Reinforces the active state with defined boundaries." - } - } - } - }, - "tag": { - "blue": { - "text": { - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Text color for blue tags. Ensures readability while maintaining the blue color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.100}", - "$description": "Background color for blue tags. Creates a distinct surface with blue theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.50}", - "$description": "Subtle background variation for blue tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.blue.background}", - "$description": "Border color for blue tags. " - } - }, - "brown": { - "text": { - "$type": "color", - "$value": "{colors.brown.600}", - "$description": "Text color for brown tags. Ensures readability while maintaining the brown color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.brown.100}", - "$description": "Background color for brown tags. Creates a distinct surface with brown theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.brown.50}", - "$description": "Subtle background variation for brown tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.brown.background}", - "$description": "Border color for brown tags. " - } - }, - "cyan": { - "text": { - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Text color for cyan tags. Ensures readability while maintaining the cyan color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Background color for cyan tags. Creates a distinct surface with cyan theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.50}", - "$description": "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.cyan.background}", - "$description": "Border color for cyan tags." - } - }, - "green": { - "text": { - "$type": "color", - "$value": "{colors.green.600}", - "$description": "Text color for green tags. Ensures readability while maintaining the green color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.green.100}", - "$description": "Background color for green tags. Creates a distinct surface with green theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.green.50}", - "$description": "Subtle background variation for green tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.green.background}", - "$description": "Border color for green tags." - } - }, - "indigo": { - "text": { - "$type": "color", - "$value": "{colors.indigo.500}", - "$description": "Text color for indigo tags. Ensures readability while maintaining the indigo color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.indigo.100}", - "$description": "Background color for indigo tags. Creates a distinct surface with indigo theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.indigo.50}", - "$description": "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.indigo.background}", - "$description": "Border color for indigo tags." - } - }, - "lime": { - "text": { - "$type": "color", - "$value": "{colors.lime.600}", - "$description": "Text color for lime tags. Ensures readability while maintaining the lime color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.lime.100}", - "$description": "Background color for lime tags. Creates a distinct surface with lime theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.lime.50}", - "$description": "Subtle background variation for lime tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.lime.background}", - "$description": "Border color for lime tags." - } - }, - "mint": { - "text": { - "$type": "color", - "$value": "{colors.mint.600}", - "$description": "Text color for mint tags. Ensures readability while maintaining the mint color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.mint.100}", - "$description": "Background color for mint tags. Creates a distinct surface with mint theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.mint.50}", - "$description": "Subtle background variation for mint tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.mint.background}", - "$description": "Border color for mint tags." - } - }, - "orange": { - "text": { - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Text color for orange tags. Ensures readability while maintaining the orange color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.100}", - "$description": "Background color for orange tags. Creates a distinct surface with orange theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.50}", - "$description": "Subtle background variation for orange tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.orange.background}", - "$description": "Border color for orange tags." - } - }, - "pink": { - "text": { - "$type": "color", - "$value": "{colors.pink.500}", - "$description": "Text color for pink tags. Ensures readability while maintaining the pink color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.pink.100}", - "$description": "Background color for pink tags. Creates a distinct surface with pink theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.pink.50}", - "$description": "Subtle background variation for pink tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.pink.background}", - "$description": "Border color for pink tags." - } - }, - "purple": { - "text": { - "$type": "color", - "$value": "{colors.purple.500}", - "$description": "Text color for purple tags. Ensures readability while maintaining the purple color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.purple.100}", - "$description": "Background color for purple tags. Creates a distinct surface with purple theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.purple.50}", - "$description": "Subtle background variation for purple tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.purple.background}", - "$description": "Border color for purple tags." - } - }, - "red": { - "text": { - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Text color for red tags. Ensures readability while maintaining the red color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.red.100}", - "$description": "Background color for red tags. Creates a distinct surface with red theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.red.50}", - "$description": "Subtle background variation for red tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.red.background}", - "$description": "Border color for red tags." - } - }, - "violet": { - "text": { - "$type": "color", - "$value": "{colors.violet.500}", - "$description": "Text color for violet tags. Ensures readability while maintaining the violet color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.violet.100}", - "$description": "Background color for violet tags. Creates a distinct surface with violet theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.violet.50}", - "$description": "Subtle background variation for violet tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.violet.background}", - "$description": "Border color for violet tags." - } - }, - "yellow": { - "text": { - "$type": "color", - "$value": "{colors.yellow.600}", - "$description": "Text color for yellow tags. Ensures readability while maintaining the yellow color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.yellow.100}", - "$description": "Background color for yellow tags. Creates a distinct surface with yellow theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.yellow.50}", - "$description": "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.yellow.background}", - "$description": "Border color for yellow tags." - } - }, - "gray": { - "text": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Text color for gray tags. Ensures readability while maintaining the gray color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for gray tags. Creates a distinct surface with gray theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Subtle background variation for gray tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.gray.background}", - "$description": "Border color for gray tags." - } - } - }, - "toast": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational toast notifications. Ensures high visibility for the notification headline." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational toast notifications. Provides readable contrast for notification content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational toast notifications. Creates visual distinction from UI content beneath." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational toast notifications. Subtly defines the notification's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for danger toast notifications. Provides maximum contrast against the error background." - }, - "description": { - "$type": "color", - "$value": "{text.1}", - "$description": "Description text color for danger toast notifications. Ensures readability of critical information." - }, - "background": { - "$type": "color", - "$value": "{colors.red.100}", - "$description": "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings." - }, - "border": { - "$type": "color", - "$value": "{component.toast.danger.background}", - "$description": "Border color for danger toast notifications. Reinforces the critical nature of the notification message." - } - } - }, - "tooltip": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for tooltip content. Ensures readability of helpful contextual information." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - } - } - }, - "shadow": { - "0": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "0", - "blur": "0", - "spread": "0", - "color": "{shadow-color.0}", - "type": "dropShadow" - }, - "$description": "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile." - }, - "1": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "1", - "blur": "2", - "spread": "0", - "color": "{shadow-color.1}", - "type": "dropShadow" - }, - "$description": "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements." - }, - "2": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "1", - "blur": "3", - "spread": "0", - "color": "{shadow-color.2}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "1", - "blur": "2", - "spread": "-1", - "color": "{shadow-color.2}", - "type": "dropShadow" - } - ], - "$description": "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state." - }, - "3": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-1", - "color": "{shadow-color.3}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "2", - "blur": "4", - "spread": "-2", - "color": "{shadow-color.3}", - "type": "dropShadow" - } - ], - "$description": "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover." - }, - "4": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "10", - "blur": "15", - "spread": "-3", - "color": "{shadow-color.4}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-4", - "color": "{shadow-color.4}", - "type": "dropShadow" - } - ], - "$description": "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns." - }, - "5": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "20", - "blur": "25", - "spread": "-5", - "color": "{shadow-color.5}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "8", - "blur": "10", - "spread": "-6", - "color": "{shadow-color.5}", - "type": "dropShadow" - } - ], - "$description": "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections." - }, - "6": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "25", - "blur": "50", - "spread": "-12", - "color": "{shadow-color.6}", - "type": "dropShadow" - }, - "$description": "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation." - }, - "inner": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "2", - "blur": "4", - "spread": "0", - "color": "{shadow-color.inner}", - "type": "innerShadow" - }, - "$description": "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields." - } - }, - "shadow-color": { - "0": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Transparent shadow color. Used when no shadow effect is desired." - }, - "1": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Light shadow color with 40% opacity. Creates subtle depth for small UI elements." - }, - "2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Medium shadow color with 40% opacity. Provides balanced depth for common UI components." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.35", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Medium shadow color with 35% opacity. Creates moderate depth for elevated components." - }, - "4": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.35", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Deep shadow color with 35% opacity. Provides significant depth for floating elements." - }, - "5": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.35", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content." - }, - "6": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements." - }, - "inner": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.07", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states." - } - }, - "ring": { - "focus": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "2", - "color": "{background.1}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "4", - "color": "{border.focus}", - "type": "dropShadow" - } - ], - "$description": "Focus ring effect with background offset and accent border." - } - }, - "gradient": { - "ai": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.yellow.200}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pink.300}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.purple.300}" - }, - "gradient-stop-4": { - "$type": "color", - "$value": "{colors.cyan.300}" - } - }, - "skeleton": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.chrome.100}" - } - }, - "pipeline": { - "running": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.orange.300}" - }, - "gradient-stop-2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.orange.300}" - } - }, - "arrows": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.blue.400}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{border.1}" - } - }, - "card": { - "background": { - "gradient-from": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.50}" - } - }, - "border": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.50}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.100}" - } - } - }, - "widget": { - "number": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.500}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.600}" - } - }, - "blob": { - "big": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.pure.white}" - } - }, - "small": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.150}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.pure.white}" - } - } - } - } - } - }, - "iconStrokeWidth": { - "xxs": { - "$type": "borderWidth", - "$value": "1.1" - }, - "xs": { - "$type": "borderWidth", - "$value": "1" - }, - "sm": { - "$type": "borderWidth", - "$value": "1.1" - }, - "default": { - "$type": "borderWidth", - "$value": "1.1" - }, - "md": { - "$type": "borderWidth", - "$value": "1.4" - }, - "lg": { - "$type": "borderWidth", - "$value": "2" - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/mode/light/high-contrast-deuteranopia.json b/packages/ui/design-tokens/mode/light/high-contrast-deuteranopia.json deleted file mode 100644 index 2522219679..0000000000 --- a/packages/ui/design-tokens/mode/light/high-contrast-deuteranopia.json +++ /dev/null @@ -1,2355 +0,0 @@ -{ - "background": { - "1": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers." - } - }, - "text": { - "1": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders." - }, - "accent": { - "$type": "color", - "$value": "{brand.color.700}", - "$description": "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements." - }, - "success": { - "$type": "color", - "$value": "{colors.cyan.600}", - "$description": "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.orange.600}", - "$description": "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.600}", - "$description": "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications." - } - }, - "border": { - "1": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.7", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows." - }, - "focus": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators." - }, - "success": { - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.500}", - "$description": "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements." - } - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item." - }, - "disabled": { - "text": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries." - } - } - }, - "component": { - "accordion": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for accordion content. Applied to the expandable text within accordion panels." - }, - "chevron": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for accordion items. Provides visual separation between accordion panels." - } - }, - "alert": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational alerts. Ensures high visibility for the alert heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational alerts. Provides readable contrast for alert content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational alerts. Creates visual distinction from surrounding content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational alerts. Subtly defines the alert's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.orange.700}", - "$description": "Text color for danger alerts. Communicates critical information through high-contrast orange text." - }, - "description": { - "$type": "color", - "$value": "{colors.orange.600}", - "$description": "Description text color for danger alerts. Ensures readability while maintaining the error state styling." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Background color for danger alerts. Creates subtle but recognizable error state styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Border color for danger alerts. Provides definition for error state alerts." - } - } - }, - "avatar": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for avatar initials or text. Ensures visibility against the avatar background." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for avatar components. Provides contrast for text or image content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for avatars. Creates subtle definition around the avatar element." - } - }, - "badge": { - "default": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for secondary badges. Provides readable contrast on secondary badge styling." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for secondary badges. Creates less prominent badge styling for secondary information." - }, - "border": { - "$type": "color", - "$value": "{component.badge.default.background}", - "$description": "Border color for secondary badges. Matches background for clean, cohesive appearance." - } - }, - "neutral": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for outline badges. Ensures readability for badges with transparent backgrounds." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Border color for outline badges. Creates definition for badges without background fill." - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.cyan.700}", - "$description": "Text color for success badges. Communicates positive status through readable cyan text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.400}", - "$description": "Border color for success badges. Provides subtle definition for success state indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Background color for success badges. Creates a subtle but recognizable success indicator." - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.orange.700}", - "$description": "Text color for danger badges. Communicates error or warning status with high visibility." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Border color for danger badges. Creates definition for error or warning indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Background color for danger badges. Provides subtle visual indication of error states." - } - }, - "warning": { - "text": { - "$type": "color", - "$value": "{colors.yellow.700}", - "$description": "Text color for warning badges. Signals caution states with readable amber text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.400}", - "$description": "Border color for warning badges. Defines the boundary of caution status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.200}", - "$description": "Background color for warning badges. Creates subtle but recognizable caution indicators." - } - }, - "running": { - "text": { - "$type": "color", - "$value": "{colors.orange.700}", - "$description": "Text color for running state badges. Indicates active or in-progress operations." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Border color for running state badges. Defines the boundary of active status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Background color for running state badges. Creates subtle visual indication of in-progress states." - } - }, - "merged": { - "text": { - "$type": "color", - "$value": "{colors.cyan.700}", - "$description": "Text color for merged state badges. Indicates completed merge actions in version control contexts." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.400}", - "$description": "Border color for merged state badges. Defines the boundary of merge status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Background color for merged state badges. Creates subtle but recognizable merge indicators." - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-related badges. Ensures high contrast against AI badge gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "breadcrumb": { - "item-inactive": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps." - }, - "item-current": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy." - }, - "separator": { - "$type": "color", - "$value": "{state.disabled.text}", - "$description": "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items." - } - }, - "btn": { - "primary": { - "text": { - "$type": "color", - "$value": "{brand.onColor.500}", - "$description": "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements." - }, - "background": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Background color for primary action buttons. Creates emphasis for the most important action in a given context." - }, - "border": { - "$type": "color", - "$value": "{component.btn.primary.background}", - "$description": "Border color for primary action buttons. Matches background for clean, cohesive appearance." - } - }, - "secondary": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions." - }, - "border": { - "$type": "color", - "$value": "{component.btn.secondary.background}", - "$description": "Border color for secondary action buttons. Matches background for clean, cohesive appearance." - } - }, - "outline": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected outline buttons. Creates subtle emphasis for button icons." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for unselected outline buttons. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected outline buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected outline buttons. Increases visibility for active button states." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for selected outline buttons. Creates stronger visual indication of the active state." - } - } - }, - "ghost": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected ghost buttons. Provides readable contrast for minimal styling." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected ghost buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected ghost buttons. Increases visibility for active button states." - } - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.cyan.700}", - "$description": "Text color for success buttons. Communicates positive actions through readable cyan text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Background color for success buttons. Creates subtle but recognizable positive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.400}", - "$description": "Border color for success buttons. Provides definition for positive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Hover state background color for success buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.orange.700}", - "$description": "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Background color for danger buttons. Creates subtle but recognizable destructive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Border color for danger buttons. Provides definition for destructive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Hover state background color for danger buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for AI-powered buttons." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for card components. Creates a distinct surface that appears elevated from the page background." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content." - } - }, - "dialog": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dialog content. Provides readable contrast for the modal's primary text content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dialog components." - }, - "backdrop": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." - } - }, - "dropdown": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for dropdown menus. Creates a distinct surface for selectable options." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dropdown menus container." - }, - "item": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dropdown menu items. Ensures readability of selectable options." - }, - "delete": { - "text": { - "$type": "color", - "$value": "{text.danger}", - "$description": "Text color for dropdown menu delete-item." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Specific hover state color for dropdown delete-item." - } - } - } - } - }, - "diff": { - "grey": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent." - }, - "add-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.400}", - "$description": "Cyan background highlighting newly added code lines while maintaining readability." - }, - "add-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.400}", - "$description": "Background for line numbers of added code, providing visual connection to added content." - }, - "add-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.400}", - "$description": "Stronger emphasis color for specific character changes within added lines." - }, - "add-widget": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background for interactive UI elements related to added content." - }, - "add-widget-color": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text/icon color for add-related interactive elements, ensuring readability." - }, - "del-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Orange background highlighting removed code lines without causing eye strain." - }, - "del-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Background for line numbers of deleted code, connecting numbers to removed content." - }, - "del-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Stronger emphasis color for specific character changes within deleted lines." - }, - "plain-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral background for unchanged code that allows modified content to stand out." - }, - "plain-lineNumber": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for line numbers of unchanged code, maintaining visual rhythm." - }, - "plain-lineNumber-color": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unchanged line numbers, visually subdued compared to changed content." - }, - "empty-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for placeholder spaces and empty lines, maintaining visual continuity." - }, - "hunk-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Background for diff section headers ('hunks') that indicate which part of the file is displayed." - }, - "hunk-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Background for line numbers in section headers." - }, - "hunk-content-color": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for section header content showing file position information." - }, - "expand-content": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background for controls that expand/collapse code sections to show additional context." - } - }, - "input": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for input field content. Ensures readability of user-entered information." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for input fields. Creates a distinct surface for user interaction and data entry." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for input fields. Defines the input area with a visible boundary for improved usability." - } - }, - "label": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for form labels and field identifiers. Ensures high contrast for important contextual information." - } - }, - "link": { - "default": { - "$type": "color", - "$value": "{text.accent}", - "$description": "Default color for text links. Creates distinct visual identification of interactive text elements." - }, - "visited": { - "$type": "color", - "$value": "{colors.blue.600}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." - } - }, - "nav-tabs": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Unselected tab item text." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Selected tab item text." - }, - "border": { - "$type": "color", - "$value": "{border.focus}", - "$description": "Selected tab item border." - } - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Navigation container border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Navigation tabs container background." - } - }, - "pipeline": { - "arrow": { - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for pipeline connection arrows. Defines the visual path between pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", - "$description": "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", - "$description": "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements." - }, - "border": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", - "$description": "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", - "$description": "Animated gradient border for running pipeline states. Provides visual indication of active processing." - } - }, - "error": { - "border": { - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution." - } - }, - "completed": { - "border": { - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Border color for completed pipeline states. Indicates successful pipeline execution." - } - } - }, - "card-canvas": { - "1": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container." - } - }, - "2": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization." - } - } - }, - "background": { - "dotes": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Refers to the dotted pattern visible in the background of the workspace." - } - } - }, - "sidebar": { - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background color for navigation components. Creates a consistent foundation for navigation elements." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Border color for navigation components. Creates visual boundaries and separation from adjacent content." - }, - "separator": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Color for separators between navigation sections. Creates visual organization within the navigation structure." - }, - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Hover state for navigation items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Selected state for navigation items." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Text color for unselected navigation items. Provides readable but less emphasized styling for available options." - }, - "icon": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Text color for selected navigation items. Increases contrast to highlight the current location." - }, - "icon": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Icon color for selected navigation items. Creates stronger visual indication of the current selection." - } - } - }, - "logo": { - "text": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Text color for Logo in sidebar navigation." - }, - "icon": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Icon color for Logo in sidebar navigation." - } - }, - "search": { - "background": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Search input specific background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Search input specific border on sidebar navigation." - }, - "placeholder": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Search input specific placeholder on sidebar navigation." - }, - "btn": { - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Search input specific button background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Search input specific button border on sidebar navigation." - }, - "text": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Search input specific button text on sidebar navigation." - } - } - }, - "footer": { - "username": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Username in the footer sidebar navigation menu." - }, - "data": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "User data in the footer sidebar navigation menu." - } - } - }, - "scrollbar": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability." - } - }, - "selection": { - "unselected": { - "item": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected state in selection controls. Creates visual distinction from selected items." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "item": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Color for selected items in selection controls. Creates high contrast against selected background state." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background color for selected state in selection controls. Creates strong visual indication of active selection." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling." - } - } - }, - "separator": { - "background": { - "$type": "color", - "$value": "{border.3}", - "$description": "Background color for separator elements. Creates visual division between content sections with a subtle line or space." - } - }, - "skeleton": { - "background": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", - "$description": "Animation color that sweeps across skeleton elements. Creates a \"shimmer\" effect indicating content loading states." - } - }, - "slider": { - "track": { - "base": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for slider tracks. Represents the full range of available values in an unselected state." - }, - "progress": { - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Filled portion color for slider tracks. Visually represents the selected value or range within the track." - } - }, - "track-segments": { - "base": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals." - }, - "progress": { - "$type": "color", - "$value": "{colors.blue.700}", - "$description": "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range." - } - }, - "handle": { - "background": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background color for slider handles. Creates a distinct, interactive element for adjusting values." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Border color for slider handles. Provides definition and contrast for the interactive control." - } - } - }, - "status-indicator": { - "completed": { - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Color for success status indicators. Communicates completed or positive states." - }, - "cancelled": { - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Color for danger status indicators. Communicates error or critical warning states." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.400}", - "$description": "Color for warning status indicators. Communicates caution or potential issue states." - }, - "running": { - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Color for running status indicators. Communicates active or in-progress operations." - }, - "merged": { - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Color for merged status indicators. Communicates successful integration or completion in version control contexts." - }, - "action-required": { - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Color for action-required status indicators. Communicates that user attention or intervention is needed." - }, - "waiting": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Color for pending status indicators. Communicates in waiting states." - } - }, - "switch": { - "unselected": { - "thumb": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Background color for the unselected state of switch controls. Creates visual distinction from the selected state." - } - }, - "selected": { - "thumb": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.600}", - "$description": "Background color for the selected state of switch controls. Creates strong visual indication of active state." - } - } - }, - "table": { - "header": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for table header cells. Ensures readability of column labels and titles." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for table header rows. Creates visual distinction between headers and data rows." - } - }, - "row": { - "alternate-background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for alternate table rows. Improves readability by differentiating adjacent rows." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for table rows. Provides subtle separation between data rows." - } - }, - "cell": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for table cell content. Ensures high readability of tabular data." - } - } - }, - "tabs": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for the tabs container. Creates a consistent foundation for tab elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tab containers and separators. Provides subtle definition for tab boundaries." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected tab items. Creates visual distinction from the active tab." - }, - "border": { - "$type": "color", - "$value": "{component.tabs.item.unselected.background}", - "$description": "Border color for unselected tab items. Maintains consistent styling with the tab background." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for the selected tab item. Increases contrast to highlight the active tab." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for the selected tab item. Creates strong visual indication of the active tab." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for the selected tab item. Reinforces the active state with defined boundaries." - } - } - } - }, - "tag": { - "blue": { - "text": { - "$type": "color", - "$value": "{colors.blue.700}", - "$description": "Text color for blue tags. Ensures readability while maintaining the blue color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.100}", - "$description": "Background color for blue tags. Creates a distinct surface with blue theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.50}", - "$description": "Subtle background variation for blue tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.blue.background}", - "$description": "Border color for blue tags." - } - }, - "brown": { - "text": { - "$type": "color", - "$value": "{colors.brown.700}", - "$description": "Text color for brown tags. Ensures readability while maintaining the brown color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.brown.100}", - "$description": "Background color for brown tags. Creates a distinct surface with brown theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.brown.50}", - "$description": "Subtle background variation for brown tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.brown.background}", - "$description": "Border color for brown tags." - } - }, - "cyan": { - "text": { - "$type": "color", - "$value": "{colors.cyan.700}", - "$description": "Text color for cyan tags. Ensures readability while maintaining the cyan color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Background color for cyan tags. Creates a distinct surface with cyan theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.50}", - "$description": "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.cyan.background}", - "$description": "Border color for cyan tags." - } - }, - "green": { - "text": { - "$type": "color", - "$value": "{colors.cyan.700}", - "$description": "Text color for green tags, replaced with cyan for deuteranopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Background color for green tags, replaced with cyan for deuteranopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.50}", - "$description": "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.green.background}", - "$description": "Border color for green tags, replaced with cyan." - } - }, - "indigo": { - "text": { - "$type": "color", - "$value": "{colors.indigo.700}", - "$description": "Text color for indigo tags. Ensures readability while maintaining the indigo color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.indigo.100}", - "$description": "Background color for indigo tags. Creates a distinct surface with indigo theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.indigo.50}", - "$description": "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.indigo.background}", - "$description": "Border color for indigo tags." - } - }, - "lime": { - "text": { - "$type": "color", - "$value": "{colors.lime.700}", - "$description": "Text color for lime tags. Ensures readability while maintaining the lime color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.lime.100}", - "$description": "Background color for lime tags. Creates a distinct surface with lime theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.lime.50}", - "$description": "Subtle background variation for lime tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.lime.background}", - "$description": "Border color for lime tags." - } - }, - "mint": { - "text": { - "$type": "color", - "$value": "{colors.mint.700}", - "$description": "Text color for mint tags. Ensures readability while maintaining the mint color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.mint.100}", - "$description": "Background color for mint tags. Creates a distinct surface with mint theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.mint.50}", - "$description": "Subtle background variation for mint tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.mint.background}", - "$description": "Border color for mint tags." - } - }, - "orange": { - "text": { - "$type": "color", - "$value": "{colors.orange.700}", - "$description": "Text color for orange tags. Ensures readability while maintaining the orange color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.100}", - "$description": "Background color for orange tags. Creates a distinct surface with orange theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.50}", - "$description": "Subtle background variation for orange tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.orange.background}", - "$description": "Border color for orange tags." - } - }, - "pink": { - "text": { - "$type": "color", - "$value": "{colors.pink.700}", - "$description": "Text color for pink tags. Ensures readability while maintaining the pink color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.pink.100}", - "$description": "Background color for pink tags. Creates a distinct surface with pink theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.pink.50}", - "$description": "Subtle background variation for pink tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.pink.background}", - "$description": "Border color for pink tags." - } - }, - "purple": { - "text": { - "$type": "color", - "$value": "{colors.cyan.700}", - "$description": "Text color for purple tags, replaced with cyan for deuteranopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Background color for purple tags, replaced with cyan for deuteranopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.50}", - "$description": "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.purple.background}", - "$description": "Border color for purple tags, replaced with cyan." - } - }, - "red": { - "text": { - "$type": "color", - "$value": "{colors.orange.700}", - "$description": "Text color for red tags, replaced with orange for deuteranopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.100}", - "$description": "Background color for red tags, replaced with orange for deuteranopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.50}", - "$description": "Subtle background variation for red tags, replaced with orange for deuteranopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.red.background}", - "$description": "Border color for red tags, replaced with orange." - } - }, - "violet": { - "text": { - "$type": "color", - "$value": "{colors.blue.700}", - "$description": "Text color for violet tags, replaced with blue for deuteranopia visibility." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.100}", - "$description": "Background color for violet tags, replaced with blue for deuteranopia visibility." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.50}", - "$description": "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility." - }, - "border": { - "$type": "color", - "$value": "{component.tag.violet.background}", - "$description": "Border color for violet tags, replaced with blue." - } - }, - "yellow": { - "text": { - "$type": "color", - "$value": "{colors.yellow.700}", - "$description": "Text color for yellow tags. Ensures readability while maintaining the yellow color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.yellow.100}", - "$description": "Background color for yellow tags. Creates a distinct surface with yellow theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.yellow.50}", - "$description": "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.yellow.background}", - "$description": "Border color for yellow tags." - } - }, - "gray": { - "text": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Text color for gray tags. Ensures readability while maintaining the gray color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for gray tags. Creates a distinct surface with gray theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Subtle background variation for gray tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.gray.background}", - "$description": "Border color for gray tags." - } - } - }, - "toast": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational toast notifications. Ensures high visibility for the notification headline." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational toast notifications. Provides readable contrast for notification content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational toast notifications. Creates visual distinction from UI content beneath." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational toast notifications. Subtly defines the notification's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Title text color for danger toast notifications. Provides maximum contrast against the error background." - }, - "description": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Description text color for danger toast notifications. Ensures readability of critical information." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.600}", - "$description": "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings." - }, - "border": { - "$type": "color", - "$value": "{component.toast.danger.background}", - "$description": "Border color for danger toast notifications. Reinforces the critical nature of the notification message." - } - } - }, - "tooltip": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for tooltip content. Ensures readability of helpful contextual information." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - } - } - }, - "shadow": { - "0": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "0", - "blur": "0", - "spread": "0", - "color": "{shadow-color.0}", - "type": "dropShadow" - }, - "$description": "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile." - }, - "1": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "1", - "blur": "2", - "spread": "0", - "color": "{shadow-color.1}", - "type": "dropShadow" - }, - "$description": "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements." - }, - "2": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "1", - "blur": "3", - "spread": "0", - "color": "{shadow-color.2}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "1", - "blur": "2", - "spread": "-1", - "color": "{shadow-color.2}", - "type": "dropShadow" - } - ], - "$description": "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state." - }, - "3": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-1", - "color": "{shadow-color.3}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "2", - "blur": "4", - "spread": "-2", - "color": "{shadow-color.3}", - "type": "dropShadow" - } - ], - "$description": "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover." - }, - "4": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "10", - "blur": "15", - "spread": "-3", - "color": "{shadow-color.4}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-4", - "color": "{shadow-color.4}", - "type": "dropShadow" - } - ], - "$description": "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns." - }, - "5": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "20", - "blur": "25", - "spread": "-5", - "color": "{shadow-color.5}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "8", - "blur": "10", - "spread": "-6", - "color": "{shadow-color.5}", - "type": "dropShadow" - } - ], - "$description": "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections." - }, - "6": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "25", - "blur": "50", - "spread": "-12", - "color": "{shadow-color.6}", - "type": "dropShadow" - }, - "$description": "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation." - }, - "inner": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "2", - "blur": "4", - "spread": "0", - "color": "{shadow-color.inner}", - "type": "innerShadow" - }, - "$description": "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields." - } - }, - "shadow-color": { - "0": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Transparent shadow color. Used when no shadow effect is desired." - }, - "1": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Light shadow color with 60% opacity. Creates subtle depth for small UI elements." - }, - "2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Medium shadow color with 60% opacity. Provides balanced depth for common UI components." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Medium shadow color with 50% opacity. Creates moderate depth for elevated components." - }, - "4": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Deep shadow color with 50% opacity. Provides significant depth for floating elements." - }, - "5": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content." - }, - "6": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements." - }, - "inner": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states." - } - }, - "ring": { - "focus": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "2", - "color": "{background.1}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "4", - "color": "{border.focus}", - "type": "dropShadow" - } - ], - "$description": "Focus ring effect with background offset and accent border." - } - }, - "gradient": { - "ai": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.yellow.200}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.orange.400}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.cyan.400}" - }, - "gradient-stop-4": { - "$type": "color", - "$value": "{colors.cyan.300}" - } - }, - "skeleton": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.150}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.chrome.150}" - } - }, - "pipeline": { - "running": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.orange.400}" - }, - "gradient-stop-2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.orange.400}" - } - }, - "arrows": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.300}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.blue.500}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{border.1}" - } - }, - "card": { - "background": { - "gradient-from": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.50}" - } - }, - "border": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.200}" - } - } - }, - "widget": { - "number": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.600}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.700}" - } - }, - "blob": { - "big": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.pure.white}" - } - }, - "small": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.150}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.pure.white}" - } - } - } - } - } - }, - "iconStrokeWidth": { - "xxs": { - "$type": "borderWidth", - "$value": "1.1" - }, - "xs": { - "$type": "borderWidth", - "$value": "1" - }, - "sm": { - "$type": "borderWidth", - "$value": "1.1" - }, - "default": { - "$type": "borderWidth", - "$value": "1.1" - }, - "md": { - "$type": "borderWidth", - "$value": "1.4" - }, - "lg": { - "$type": "borderWidth", - "$value": "2" - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/mode/light/high-contrast-protanopia.json b/packages/ui/design-tokens/mode/light/high-contrast-protanopia.json deleted file mode 100644 index 21c116ac7f..0000000000 --- a/packages/ui/design-tokens/mode/light/high-contrast-protanopia.json +++ /dev/null @@ -1,2355 +0,0 @@ -{ - "background": { - "1": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers." - } - }, - "text": { - "1": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders." - }, - "accent": { - "$type": "color", - "$value": "{brand.color.700}", - "$description": "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements." - }, - "success": { - "$type": "color", - "$value": "{colors.blue.600}", - "$description": "Primary color for text and icons in success content. Adjusted for protanopia using blue instead of green.\n\nCommon uses: Success message text, completion text, positive indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.600}", - "$description": "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.600}", - "$description": "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications." - } - }, - "border": { - "1": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.7", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows." - }, - "focus": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators." - }, - "success": { - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Border color for success containers. Adjusted for protanopia using blue instead of green.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.500}", - "$description": "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements." - } - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item." - }, - "disabled": { - "text": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries." - } - } - }, - "component": { - "accordion": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for accordion content. Applied to the expandable text within accordion panels." - }, - "chevron": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for accordion items. Provides visual separation between accordion panels." - } - }, - "alert": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational alerts. Ensures high visibility for the alert heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational alerts. Provides readable contrast for alert content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational alerts. Creates visual distinction from surrounding content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational alerts. Subtly defines the alert's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.red.700}", - "$description": "Text color for danger alerts. Communicates critical information through high-contrast red text." - }, - "description": { - "$type": "color", - "$value": "{colors.red.600}", - "$description": "Description text color for danger alerts. Ensures readability while maintaining the error state styling." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Background color for danger alerts. Creates subtle but recognizable error state styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Border color for danger alerts. Provides definition for error state alerts." - } - } - }, - "avatar": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for avatar initials or text. Ensures visibility against the avatar background." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for avatar components. Provides contrast for text or image content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for avatars. Creates subtle definition around the avatar element." - } - }, - "badge": { - "default": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for secondary badges. Provides readable contrast on secondary badge styling." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for secondary badges. Creates less prominent badge styling for secondary information." - }, - "border": { - "$type": "color", - "$value": "{component.badge.default.background}", - "$description": "Border color for secondary badges. Matches background for clean, cohesive appearance." - } - }, - "neutral": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for outline badges. Ensures readability for badges with transparent backgrounds." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Border color for outline badges. Creates definition for badges without background fill." - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.blue.700}", - "$description": "Text color for success badges. Adjusted for protanopia using blue instead of green." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Border color for success badges. Adjusted for protanopia using blue instead of green." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Background color for success badges. Adjusted for protanopia using blue instead of green." - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.700}", - "$description": "Text color for danger badges. Communicates error or warning status with high visibility." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Border color for danger badges. Creates definition for error or warning indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Background color for danger badges. Provides subtle visual indication of error states." - } - }, - "warning": { - "text": { - "$type": "color", - "$value": "{colors.yellow.700}", - "$description": "Text color for warning badges. Signals caution states with readable amber text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.400}", - "$description": "Border color for warning badges. Defines the boundary of caution status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.200}", - "$description": "Background color for warning badges. Creates subtle but recognizable caution indicators." - } - }, - "running": { - "text": { - "$type": "color", - "$value": "{colors.orange.700}", - "$description": "Text color for running state badges. Indicates active or in-progress operations." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Border color for running state badges. Defines the boundary of active status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Background color for running state badges. Creates subtle visual indication of in-progress states." - } - }, - "merged": { - "text": { - "$type": "color", - "$value": "{colors.purple.700}", - "$description": "Text color for merged state badges. Indicates completed merge actions in version control contexts." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.purple.400}", - "$description": "Border color for merged state badges. Defines the boundary of merge status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.purple.300}", - "$description": "Background color for merged state badges. Creates subtle but recognizable merge indicators." - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-related badges. Ensures high contrast against AI badge gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "breadcrumb": { - "item-inactive": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps." - }, - "item-current": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy." - }, - "separator": { - "$type": "color", - "$value": "{state.disabled.text}", - "$description": "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items." - } - }, - "btn": { - "primary": { - "text": { - "$type": "color", - "$value": "{brand.onColor.500}", - "$description": "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements." - }, - "background": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Background color for primary action buttons. Creates emphasis for the most important action in a given context." - }, - "border": { - "$type": "color", - "$value": "{component.btn.primary.background}", - "$description": "Border color for primary action buttons. Matches background for clean, cohesive appearance." - } - }, - "secondary": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions." - }, - "border": { - "$type": "color", - "$value": "{component.btn.secondary.background}", - "$description": "Border color for secondary action buttons. Matches background for clean, cohesive appearance." - } - }, - "outline": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected outline buttons. Creates subtle emphasis for button icons." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for unselected outline buttons. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected outline buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected outline buttons. Increases visibility for active button states." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for selected outline buttons. Creates stronger visual indication of the active state." - } - } - }, - "ghost": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected ghost buttons. Provides readable contrast for minimal styling." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected ghost buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected ghost buttons. Increases visibility for active button states." - } - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.blue.700}", - "$description": "Text color for success buttons. Adjusted for protanopia using blue instead of green." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Background color for success buttons. Adjusted for protanopia using blue instead of green." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Border color for success buttons. Adjusted for protanopia using blue instead of green." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Hover state background color for success buttons. Adjusted for protanopia using blue instead of green." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.300}", - "$description": "Active state background color for success buttons. Adjusted for protanopia using blue instead of green." - } - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.700}", - "$description": "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Background color for danger buttons. Creates subtle but recognizable destructive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Border color for danger buttons. Provides definition for destructive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Hover state background color for danger buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for AI-powered buttons." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for card components. Creates a distinct surface that appears elevated from the page background." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content." - } - }, - "dialog": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dialog content. Provides readable contrast for the modal's primary text content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dialog components." - }, - "backdrop": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." - } - }, - "dropdown": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for dropdown menus. Creates a distinct surface for selectable options." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dropdown menus container." - }, - "item": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dropdown menu items. Ensures readability of selectable options." - }, - "delete": { - "text": { - "$type": "color", - "$value": "{text.danger}", - "$description": "Text color for dropdown menu delete-item." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Specific hover state color for dropdown delete-item." - } - } - } - } - }, - "diff": { - "grey": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent." - }, - "add-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Blue background highlighting newly added code lines. Adjusted for protanopia using blue instead of green." - }, - "add-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Background for line numbers of added code. Adjusted for protanopia using blue instead of green." - }, - "add-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Stronger emphasis color for specific character changes within added lines. Adjusted for protanopia using blue instead of green." - }, - "add-widget": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background for interactive UI elements related to added content." - }, - "add-widget-color": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text/icon color for add-related interactive elements, ensuring readability." - }, - "del-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Red background highlighting removed code lines without causing eye strain." - }, - "del-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Background for line numbers of deleted code, connecting numbers to removed content." - }, - "del-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Stronger emphasis color for specific character changes within deleted lines." - }, - "plain-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral background for unchanged code that allows modified content to stand out." - }, - "plain-lineNumber": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for line numbers of unchanged code, maintaining visual rhythm." - }, - "plain-lineNumber-color": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unchanged line numbers, visually subdued compared to changed content." - }, - "empty-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for placeholder spaces and empty lines, maintaining visual continuity." - }, - "hunk-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Background for diff section headers ('hunks') that indicate which part of the file is displayed." - }, - "hunk-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Background for line numbers in section headers." - }, - "hunk-content-color": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for section header content showing file position information." - }, - "expand-content": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background for controls that expand/collapse code sections to show additional context." - } - }, - "input": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for input field content. Ensures readability of user-entered information." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for input fields. Creates a distinct surface for user interaction and data entry." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for input fields. Defines the input area with a visible boundary for improved usability." - } - }, - "label": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for form labels and field identifiers. Ensures high contrast for important contextual information." - } - }, - "link": { - "default": { - "$type": "color", - "$value": "{text.accent}", - "$description": "Default color for text links. Creates distinct visual identification of interactive text elements." - }, - "visited": { - "$type": "color", - "$value": "{colors.purple.600}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." - } - }, - "nav-tabs": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Unselected tab item text." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Selected tab item text." - }, - "border": { - "$type": "color", - "$value": "{border.focus}", - "$description": "Selected tab item border." - } - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Navigation container border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Navigation tabs container background." - } - }, - "pipeline": { - "arrow": { - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for pipeline connection arrows. Defines the visual path between pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", - "$description": "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", - "$description": "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements." - }, - "border": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", - "$description": "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", - "$description": "Animated gradient border for running pipeline states. Provides visual indication of active processing." - } - }, - "error": { - "border": { - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution." - } - }, - "completed": { - "border": { - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Border color for completed pipeline states. Adjusted for protanopia using blue instead of green." - } - } - }, - "card-canvas": { - "1": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container." - } - }, - "2": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization." - } - } - }, - "background": { - "dotes": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Refers to the dotted pattern visible in the background of the workspace." - } - } - }, - "sidebar": { - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background color for navigation components. Creates a consistent foundation for navigation elements." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Border color for navigation components. Creates visual boundaries and separation from adjacent content." - }, - "separator": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Color for separators between navigation sections. Creates visual organization within the navigation structure." - }, - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Hover state for navigation items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Selected state for navigation items." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Text color for unselected navigation items. Provides readable but less emphasized styling for available options." - }, - "icon": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Text color for selected navigation items. Increases contrast to highlight the current location." - }, - "icon": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Icon color for selected navigation items. Creates stronger visual indication of the current selection." - } - } - }, - "logo": { - "text": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Text color for Logo in sidebar navigation." - }, - "icon": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Icon color for Logo in sidebar navigation. Adjusted for protanopia using blue instead of green." - } - }, - "search": { - "background": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Search input specific background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Search input specific border on sidebar navigation." - }, - "placeholder": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Search input specific placeholder on sidebar navigation." - }, - "btn": { - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Search input specific button background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Search input specific button border on sidebar navigation." - }, - "text": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Search input specific button text on sidebar navigation." - } - } - }, - "footer": { - "username": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Username in the footer sidebar navigation menu." - }, - "data": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "User data in the footer sidebar navigation menu." - } - } - }, - "scrollbar": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability." - } - }, - "selection": { - "unselected": { - "item": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected state in selection controls. Creates visual distinction from selected items." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "item": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Color for selected items in selection controls. Creates high contrast against selected background state." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background color for selected state in selection controls. Creates strong visual indication of active selection." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling." - } - } - }, - "separator": { - "background": { - "$type": "color", - "$value": "{border.3}", - "$description": "Background color for separator elements. Creates visual division between content sections with a subtle line or space." - } - }, - "skeleton": { - "background": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", - "$description": "Animation color that sweeps across skeleton elements. Creates a \"shimmer\" effect indicating content loading states." - } - }, - "slider": { - "track": { - "base": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for slider tracks. Represents the full range of available values in an unselected state." - }, - "progress": { - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Filled portion color for slider tracks. Adjusted for protanopia using blue instead of green." - } - }, - "track-segments": { - "base": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals." - }, - "progress": { - "$type": "color", - "$value": "{colors.blue.700}", - "$description": "Color for segment markers on the filled track portion. Adjusted for protanopia using blue instead of green." - } - }, - "handle": { - "background": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background color for slider handles. Creates a distinct, interactive element for adjusting values." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Border color for slider handles. Provides definition and contrast for the interactive control." - } - } - }, - "status-indicator": { - "completed": { - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Color for success status indicators. Adjusted for protanopia using blue instead of green." - }, - "cancelled": { - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Color for danger status indicators. Communicates error or critical warning states." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.400}", - "$description": "Color for warning status indicators. Communicates caution or potential issue states." - }, - "running": { - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Color for running status indicators. Communicates active or in-progress operations." - }, - "merged": { - "$type": "color", - "$value": "{colors.purple.500}", - "$description": "Color for merged status indicators. Communicates successful integration or completion in version control contexts." - }, - "action-required": { - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Color for action-required status indicators. Communicates that user attention or intervention is needed. " - }, - "waiting": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Color for pending status indicators. Communicates in waiting states." - } - }, - "switch": { - "unselected": { - "thumb": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Background color for the unselected state of switch controls. Creates visual distinction from the selected state." - } - }, - "selected": { - "thumb": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.600}", - "$description": "Background color for the selected state of switch controls. Adjusted for protanopia using blue instead of green." - } - } - }, - "table": { - "header": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for table header cells. Ensures readability of column labels and titles." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for table header rows. Creates visual distinction between headers and data rows." - } - }, - "row": { - "alternate-background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for alternate table rows. Improves readability by differentiating adjacent rows." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for table rows. Provides subtle separation between data rows." - } - }, - "cell": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for table cell content. Ensures high readability of tabular data." - } - } - }, - "tabs": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for the tabs container. Creates a consistent foundation for tab elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tab containers and separators. Provides subtle definition for tab boundaries." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected tab items. Creates visual distinction from the active tab." - }, - "border": { - "$type": "color", - "$value": "{component.tabs.item.unselected.background}", - "$description": "Border color for unselected tab items. Maintains consistent styling with the tab background." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for the selected tab item. Increases contrast to highlight the active tab." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for the selected tab item. Creates strong visual indication of the active tab." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for the selected tab item. Reinforces the active state with defined boundaries." - } - } - } - }, - "tag": { - "blue": { - "text": { - "$type": "color", - "$value": "{colors.blue.700}", - "$description": "Text color for blue tags. Ensures readability while maintaining the blue color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.100}", - "$description": "Background color for blue tags. Creates a distinct surface with blue theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.50}", - "$description": "Subtle background variation for blue tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.blue.background}", - "$description": "Border color for blue tags. " - } - }, - "brown": { - "text": { - "$type": "color", - "$value": "{colors.brown.700}", - "$description": "Text color for brown tags. Ensures readability while maintaining the brown color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.brown.100}", - "$description": "Background color for brown tags. Creates a distinct surface with brown theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.brown.50}", - "$description": "Subtle background variation for brown tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.brown.background}", - "$description": "Border color for brown tags. " - } - }, - "cyan": { - "text": { - "$type": "color", - "$value": "{colors.cyan.700}", - "$description": "Text color for cyan tags. Ensures readability while maintaining the cyan color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Background color for cyan tags. Creates a distinct surface with cyan theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.50}", - "$description": "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.cyan.background}", - "$description": "Border color for cyan tags." - } - }, - "green": { - "text": { - "$type": "color", - "$value": "{colors.blue.700}", - "$description": "Text color for green tags. Adjusted for protanopia using blue instead of green." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.100}", - "$description": "Background color for green tags. Adjusted for protanopia using blue instead of green." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.50}", - "$description": "Subtle background variation for green tags. Adjusted for protanopia using blue instead of green." - }, - "border": { - "$type": "color", - "$value": "{component.tag.green.background}", - "$description": "Border color for green tags. Adjusted for protanopia using blue instead of green." - } - }, - "indigo": { - "text": { - "$type": "color", - "$value": "{colors.indigo.700}", - "$description": "Text color for indigo tags. Ensures readability while maintaining the indigo color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.indigo.100}", - "$description": "Background color for indigo tags. Creates a distinct surface with indigo theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.indigo.50}", - "$description": "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.indigo.background}", - "$description": "Border color for indigo tags." - } - }, - "lime": { - "text": { - "$type": "color", - "$value": "{colors.blue.700}", - "$description": "Text color for lime tags. Adjusted for protanopia using blue instead of green." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.100}", - "$description": "Background color for lime tags. Adjusted for protanopia using blue instead of green." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.50}", - "$description": "Subtle background variation for lime tags. Adjusted for protanopia using blue instead of green." - }, - "border": { - "$type": "color", - "$value": "{component.tag.lime.background}", - "$description": "Border color for lime tags. Adjusted for protanopia using blue instead of green." - } - }, - "mint": { - "text": { - "$type": "color", - "$value": "{colors.blue.700}", - "$description": "Text color for mint tags. Adjusted for protanopia using blue instead of green." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.100}", - "$description": "Background color for mint tags. Adjusted for protanopia using blue instead of green." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.50}", - "$description": "Subtle background variation for mint tags. Adjusted for protanopia using blue instead of green." - }, - "border": { - "$type": "color", - "$value": "{component.tag.mint.background}", - "$description": "Border color for mint tags. Adjusted for protanopia using blue instead of green." - } - }, - "orange": { - "text": { - "$type": "color", - "$value": "{colors.orange.700}", - "$description": "Text color for orange tags. Ensures readability while maintaining the orange color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.100}", - "$description": "Background color for orange tags. Creates a distinct surface with orange theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.50}", - "$description": "Subtle background variation for orange tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.orange.background}", - "$description": "Border color for orange tags." - } - }, - "pink": { - "text": { - "$type": "color", - "$value": "{colors.pink.700}", - "$description": "Text color for pink tags. Ensures readability while maintaining the pink color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.pink.100}", - "$description": "Background color for pink tags. Creates a distinct surface with pink theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.pink.50}", - "$description": "Subtle background variation for pink tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.pink.background}", - "$description": "Border color for pink tags." - } - }, - "purple": { - "text": { - "$type": "color", - "$value": "{colors.purple.700}", - "$description": "Text color for purple tags. Ensures readability while maintaining the purple color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.purple.100}", - "$description": "Background color for purple tags. Creates a distinct surface with purple theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.purple.50}", - "$description": "Subtle background variation for purple tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.purple.background}", - "$description": "Border color for purple tags." - } - }, - "red": { - "text": { - "$type": "color", - "$value": "{colors.red.700}", - "$description": "Text color for red tags. Ensures readability while maintaining the red color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.red.100}", - "$description": "Background color for red tags. Creates a distinct surface with red theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.red.50}", - "$description": "Subtle background variation for red tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.red.background}", - "$description": "Border color for red tags." - } - }, - "violet": { - "text": { - "$type": "color", - "$value": "{colors.violet.700}", - "$description": "Text color for violet tags. Ensures readability while maintaining the violet color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.violet.100}", - "$description": "Background color for violet tags. Creates a distinct surface with violet theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.violet.50}", - "$description": "Subtle background variation for violet tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.violet.background}", - "$description": "Border color for violet tags." - } - }, - "yellow": { - "text": { - "$type": "color", - "$value": "{colors.yellow.700}", - "$description": "Text color for yellow tags. Ensures readability while maintaining the yellow color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.yellow.100}", - "$description": "Background color for yellow tags. Creates a distinct surface with yellow theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.yellow.50}", - "$description": "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.yellow.background}", - "$description": "Border color for yellow tags." - } - }, - "gray": { - "text": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Text color for gray tags. Ensures readability while maintaining the gray color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for gray tags. Creates a distinct surface with gray theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Subtle background variation for gray tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.gray.background}", - "$description": "Border color for gray tags." - } - } - }, - "toast": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational toast notifications. Ensures high visibility for the notification headline." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational toast notifications. Provides readable contrast for notification content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational toast notifications. Creates visual distinction from UI content beneath." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational toast notifications. Subtly defines the notification's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Title text color for danger toast notifications. Provides maximum contrast against the error background." - }, - "description": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Description text color for danger toast notifications. Ensures readability of critical information." - }, - "background": { - "$type": "color", - "$value": "{colors.red.600}", - "$description": "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings." - }, - "border": { - "$type": "color", - "$value": "{component.toast.danger.background}", - "$description": "Border color for danger toast notifications. Reinforces the critical nature of the notification message." - } - } - }, - "tooltip": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for tooltip content. Ensures readability of helpful contextual information." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - } - } - }, - "shadow": { - "0": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "0", - "blur": "0", - "spread": "0", - "color": "{shadow-color.0}", - "type": "dropShadow" - }, - "$description": "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile." - }, - "1": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "1", - "blur": "2", - "spread": "0", - "color": "{shadow-color.1}", - "type": "dropShadow" - }, - "$description": "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements." - }, - "2": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "1", - "blur": "3", - "spread": "0", - "color": "{shadow-color.2}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "1", - "blur": "2", - "spread": "-1", - "color": "{shadow-color.2}", - "type": "dropShadow" - } - ], - "$description": "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state." - }, - "3": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-1", - "color": "{shadow-color.3}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "2", - "blur": "4", - "spread": "-2", - "color": "{shadow-color.3}", - "type": "dropShadow" - } - ], - "$description": "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover." - }, - "4": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "10", - "blur": "15", - "spread": "-3", - "color": "{shadow-color.4}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-4", - "color": "{shadow-color.4}", - "type": "dropShadow" - } - ], - "$description": "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns." - }, - "5": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "20", - "blur": "25", - "spread": "-5", - "color": "{shadow-color.5}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "8", - "blur": "10", - "spread": "-6", - "color": "{shadow-color.5}", - "type": "dropShadow" - } - ], - "$description": "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections." - }, - "6": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "25", - "blur": "50", - "spread": "-12", - "color": "{shadow-color.6}", - "type": "dropShadow" - }, - "$description": "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation." - }, - "inner": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "2", - "blur": "4", - "spread": "0", - "color": "{shadow-color.inner}", - "type": "innerShadow" - }, - "$description": "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields." - } - }, - "shadow-color": { - "0": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Transparent shadow color. Used when no shadow effect is desired." - }, - "1": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Light shadow color with 60% opacity. Creates subtle depth for small UI elements." - }, - "2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Medium shadow color with 60% opacity. Provides balanced depth for common UI components." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Medium shadow color with 50% opacity. Creates moderate depth for elevated components." - }, - "4": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Deep shadow color with 50% opacity. Provides significant depth for floating elements." - }, - "5": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content." - }, - "6": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements." - }, - "inner": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states." - } - }, - "ring": { - "focus": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "2", - "color": "{background.1}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "4", - "color": "{border.focus}", - "type": "dropShadow" - } - ], - "$description": "Focus ring effect with background offset and accent border." - } - }, - "gradient": { - "ai": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.yellow.200}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pink.400}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.purple.400}" - }, - "gradient-stop-4": { - "$type": "color", - "$value": "{colors.cyan.300}" - } - }, - "skeleton": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.150}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.chrome.150}" - } - }, - "pipeline": { - "running": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.orange.400}" - }, - "gradient-stop-2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.orange.400}" - } - }, - "arrows": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.300}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.blue.500}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{border.1}" - } - }, - "card": { - "background": { - "gradient-from": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.50}" - } - }, - "border": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.200}" - } - } - }, - "widget": { - "number": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.600}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.700}" - } - }, - "blob": { - "big": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.pure.white}" - } - }, - "small": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.150}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.pure.white}" - } - } - } - } - } - }, - "iconStrokeWidth": { - "xxs": { - "$type": "borderWidth", - "$value": "1.1" - }, - "xs": { - "$type": "borderWidth", - "$value": "1" - }, - "sm": { - "$type": "borderWidth", - "$value": "1.1" - }, - "default": { - "$type": "borderWidth", - "$value": "1.1" - }, - "md": { - "$type": "borderWidth", - "$value": "1.4" - }, - "lg": { - "$type": "borderWidth", - "$value": "2" - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/mode/light/high-contrast-tritanopia.json b/packages/ui/design-tokens/mode/light/high-contrast-tritanopia.json deleted file mode 100644 index 238afd84a5..0000000000 --- a/packages/ui/design-tokens/mode/light/high-contrast-tritanopia.json +++ /dev/null @@ -1,2355 +0,0 @@ -{ - "background": { - "1": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers." - } - }, - "text": { - "1": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders." - }, - "accent": { - "$type": "color", - "$value": "{brand.color.700}", - "$description": "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements." - }, - "success": { - "$type": "color", - "$value": "{colors.cyan.600}", - "$description": "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.600}", - "$description": "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels." - }, - "warning": { - "$type": "color", - "$value": "{colors.orange.600}", - "$description": "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications." - } - }, - "border": { - "1": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.7", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows." - }, - "focus": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators." - }, - "success": { - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers." - }, - "warning": { - "$type": "color", - "$value": "{colors.orange.500}", - "$description": "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements." - } - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item." - }, - "disabled": { - "text": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries." - } - } - }, - "component": { - "accordion": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for accordion content. Applied to the expandable text within accordion panels." - }, - "chevron": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for accordion items. Provides visual separation between accordion panels." - } - }, - "alert": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational alerts. Ensures high visibility for the alert heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational alerts. Provides readable contrast for alert content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational alerts. Creates visual distinction from surrounding content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational alerts. Subtly defines the alert's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.red.700}", - "$description": "Text color for danger alerts. Communicates critical information through high-contrast red text." - }, - "description": { - "$type": "color", - "$value": "{colors.red.600}", - "$description": "Description text color for danger alerts. Ensures readability while maintaining the error state styling." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Background color for danger alerts. Creates subtle but recognizable error state styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Border color for danger alerts. Provides definition for error state alerts." - } - } - }, - "avatar": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for avatar initials or text. Ensures visibility against the avatar background." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for avatar components. Provides contrast for text or image content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for avatars. Creates subtle definition around the avatar element." - } - }, - "badge": { - "default": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for secondary badges. Provides readable contrast on secondary badge styling." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for secondary badges. Creates less prominent badge styling for secondary information." - }, - "border": { - "$type": "color", - "$value": "{component.badge.default.background}", - "$description": "Border color for secondary badges. Matches background for clean, cohesive appearance." - } - }, - "neutral": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for outline badges. Ensures readability for badges with transparent backgrounds." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Border color for outline badges. Creates definition for badges without background fill." - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.cyan.700}", - "$description": "Text color for success badges. Communicates positive status through readable green text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.400}", - "$description": "Border color for success badges. Provides subtle definition for success state indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Background color for success badges. Creates a subtle but recognizable success indicator." - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.700}", - "$description": "Text color for danger badges. Communicates error or warning status with high visibility." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Border color for danger badges. Creates definition for error or warning indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Background color for danger badges. Provides subtle visual indication of error states." - } - }, - "warning": { - "text": { - "$type": "color", - "$value": "{colors.orange.700}", - "$description": "Text color for warning badges. Signals caution states with readable amber text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Border color for warning badges. Defines the boundary of caution status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.200}", - "$description": "Background color for warning badges. Creates subtle but recognizable caution indicators." - } - }, - "running": { - "text": { - "$type": "color", - "$value": "{colors.orange.700}", - "$description": "Text color for running state badges. Indicates active or in-progress operations." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Border color for running state badges. Defines the boundary of active status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Background color for running state badges. Creates subtle visual indication of in-progress states." - } - }, - "merged": { - "text": { - "$type": "color", - "$value": "{colors.cyan.700}", - "$description": "Text color for merged state badges. Indicates completed merge actions in version control contexts." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.400}", - "$description": "Border color for merged state badges. Defines the boundary of merge status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Background color for merged state badges. Creates subtle but recognizable merge indicators." - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-related badges. Ensures high contrast against AI badge gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "breadcrumb": { - "item-inactive": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps." - }, - "item-current": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy." - }, - "separator": { - "$type": "color", - "$value": "{state.disabled.text}", - "$description": "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items." - } - }, - "btn": { - "primary": { - "text": { - "$type": "color", - "$value": "{brand.onColor.500}", - "$description": "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements." - }, - "background": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Background color for primary action buttons. Creates emphasis for the most important action in a given context." - }, - "border": { - "$type": "color", - "$value": "{component.btn.primary.background}", - "$description": "Border color for primary action buttons. Matches background for clean, cohesive appearance." - } - }, - "secondary": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions." - }, - "border": { - "$type": "color", - "$value": "{component.btn.secondary.background}", - "$description": "Border color for secondary action buttons. Matches background for clean, cohesive appearance." - } - }, - "outline": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected outline buttons. Creates subtle emphasis for button icons." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for unselected outline buttons. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected outline buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected outline buttons. Increases visibility for active button states." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for selected outline buttons. Creates stronger visual indication of the active state." - } - } - }, - "ghost": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected ghost buttons. Provides readable contrast for minimal styling." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected ghost buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected ghost buttons. Increases visibility for active button states." - } - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.cyan.700}", - "$description": "Text color for success buttons. Communicates positive actions through readable green text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Background color for success buttons. Creates subtle but recognizable positive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.400}", - "$description": "Border color for success buttons. Provides definition for positive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Hover state background color for success buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.300}", - "$description": "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.700}", - "$description": "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Background color for danger buttons. Creates subtle but recognizable destructive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Border color for danger buttons. Provides definition for destructive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Hover state background color for danger buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for AI-powered buttons." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for card components. Creates a distinct surface that appears elevated from the page background." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content." - } - }, - "dialog": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dialog content. Provides readable contrast for the modal's primary text content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dialog components." - }, - "backdrop": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." - } - }, - "dropdown": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for dropdown menus. Creates a distinct surface for selectable options." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dropdown menus container." - }, - "item": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dropdown menu items. Ensures readability of selectable options." - }, - "delete": { - "text": { - "$type": "color", - "$value": "{text.danger}", - "$description": "Text color for dropdown menu delete-item." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Specific hover state color for dropdown delete-item." - } - } - } - } - }, - "diff": { - "grey": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent." - }, - "add-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.400}", - "$description": "Green background highlighting newly added code lines while maintaining readability." - }, - "add-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.400}", - "$description": "Background for line numbers of added code, providing visual connection to added content." - }, - "add-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.cyan.400}", - "$description": "Stronger emphasis color for specific character changes within added lines." - }, - "add-widget": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background for interactive UI elements related to added content." - }, - "add-widget-color": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text/icon color for add-related interactive elements, ensuring readability." - }, - "del-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Red background highlighting removed code lines without causing eye strain." - }, - "del-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Background for line numbers of deleted code, connecting numbers to removed content." - }, - "del-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Stronger emphasis color for specific character changes within deleted lines." - }, - "plain-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral background for unchanged code that allows modified content to stand out." - }, - "plain-lineNumber": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for line numbers of unchanged code, maintaining visual rhythm." - }, - "plain-lineNumber-color": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unchanged line numbers, visually subdued compared to changed content." - }, - "empty-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for placeholder spaces and empty lines, maintaining visual continuity." - }, - "hunk-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Background for diff section headers ('hunks') that indicate which part of the file is displayed." - }, - "hunk-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Background for line numbers in section headers." - }, - "hunk-content-color": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for section header content showing file position information." - }, - "expand-content": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background for controls that expand/collapse code sections to show additional context." - } - }, - "input": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for input field content. Ensures readability of user-entered information." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for input fields. Creates a distinct surface for user interaction and data entry." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for input fields. Defines the input area with a visible boundary for improved usability." - } - }, - "label": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for form labels and field identifiers. Ensures high contrast for important contextual information." - } - }, - "link": { - "default": { - "$type": "color", - "$value": "{text.accent}", - "$description": "Default color for text links. Creates distinct visual identification of interactive text elements." - }, - "visited": { - "$type": "color", - "$value": "{colors.cyan.600}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." - } - }, - "nav-tabs": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Unselected tab item text." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Selected tab item text." - }, - "border": { - "$type": "color", - "$value": "{border.focus}", - "$description": "Selected tab item border." - } - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Navigation container border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Navigation tabs container background." - } - }, - "pipeline": { - "arrow": { - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for pipeline connection arrows. Defines the visual path between pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", - "$description": "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", - "$description": "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements." - }, - "border": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", - "$description": "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", - "$description": "Animated gradient border for running pipeline states. Provides visual indication of active processing." - } - }, - "error": { - "border": { - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution." - } - }, - "completed": { - "border": { - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Border color for completed pipeline states. Indicates successful pipeline execution." - } - } - }, - "card-canvas": { - "1": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container." - } - }, - "2": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization." - } - } - }, - "background": { - "dotes": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Refers to the dotted pattern visible in the background of the workspace." - } - } - }, - "sidebar": { - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background color for navigation components. Creates a consistent foundation for navigation elements." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Border color for navigation components. Creates visual boundaries and separation from adjacent content." - }, - "separator": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Color for separators between navigation sections. Creates visual organization within the navigation structure." - }, - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Hover state for navigation items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Selected state for navigation items." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Text color for unselected navigation items. Provides readable but less emphasized styling for available options." - }, - "icon": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Text color for selected navigation items. Increases contrast to highlight the current location." - }, - "icon": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Icon color for selected navigation items. Creates stronger visual indication of the current selection." - } - } - }, - "logo": { - "text": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Text color for Logo in sidebar navigation." - }, - "icon": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Icon color for Logo in sidebar navigation." - } - }, - "search": { - "background": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Search input specific background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Search input specific border on sidebar navigation." - }, - "placeholder": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Search input specific placeholder on sidebar navigation." - }, - "btn": { - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Search input specific button background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Search input specific button border on sidebar navigation." - }, - "text": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Search input specific button text on sidebar navigation." - } - } - }, - "footer": { - "username": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Username in the footer sidebar navigation menu." - }, - "data": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "User data in the footer sidebar navigation menu." - } - } - }, - "scrollbar": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability." - } - }, - "selection": { - "unselected": { - "item": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected state in selection controls. Creates visual distinction from selected items." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "item": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Color for selected items in selection controls. Creates high contrast against selected background state." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background color for selected state in selection controls. Creates strong visual indication of active selection." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling." - } - } - }, - "separator": { - "background": { - "$type": "color", - "$value": "{border.3}", - "$description": "Background color for separator elements. Creates visual division between content sections with a subtle line or space." - } - }, - "skeleton": { - "background": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", - "$description": "Animation color that sweeps across skeleton elements. Creates a \"shimmer\" effect indicating content loading states." - } - }, - "slider": { - "track": { - "base": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for slider tracks. Represents the full range of available values in an unselected state." - }, - "progress": { - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Filled portion color for slider tracks. Visually represents the selected value or range within the track." - } - }, - "track-segments": { - "base": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals." - }, - "progress": { - "$type": "color", - "$value": "{colors.cyan.700}", - "$description": "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range." - } - }, - "handle": { - "background": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background color for slider handles. Creates a distinct, interactive element for adjusting values." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Border color for slider handles. Provides definition and contrast for the interactive control." - } - } - }, - "status-indicator": { - "completed": { - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Color for success status indicators. Communicates completed or positive states." - }, - "cancelled": { - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Color for danger status indicators. Communicates error or critical warning states." - }, - "warning": { - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Color for warning status indicators. Communicates caution or potential issue states." - }, - "running": { - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Color for running status indicators. Communicates active or in-progress operations." - }, - "merged": { - "$type": "color", - "$value": "{colors.cyan.500}", - "$description": "Color for merged status indicators. Communicates successful integration or completion in version control contexts." - }, - "action-required": { - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Color for action-required status indicators. Communicates that user attention or intervention is needed." - }, - "waiting": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Color for pending status indicators. Communicates in waiting states." - } - }, - "switch": { - "unselected": { - "thumb": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Background color for the unselected state of switch controls. Creates visual distinction from the selected state." - } - }, - "selected": { - "thumb": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.600}", - "$description": "Background color for the selected state of switch controls. Creates strong visual indication of active state." - } - } - }, - "table": { - "header": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for table header cells. Ensures readability of column labels and titles." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for table header rows. Creates visual distinction between headers and data rows." - } - }, - "row": { - "alternate-background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for alternate table rows. Improves readability by differentiating adjacent rows." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for table rows. Provides subtle separation between data rows." - } - }, - "cell": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for table cell content. Ensures high readability of tabular data." - } - } - }, - "tabs": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for the tabs container. Creates a consistent foundation for tab elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tab containers and separators. Provides subtle definition for tab boundaries." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected tab items. Creates visual distinction from the active tab." - }, - "border": { - "$type": "color", - "$value": "{component.tabs.item.unselected.background}", - "$description": "Border color for unselected tab items. Maintains consistent styling with the tab background." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for the selected tab item. Increases contrast to highlight the active tab." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for the selected tab item. Creates strong visual indication of the active tab." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for the selected tab item. Reinforces the active state with defined boundaries." - } - } - } - }, - "tag": { - "blue": { - "text": { - "$type": "color", - "$value": "{colors.blue.700}", - "$description": "Text color for blue tags. Ensures readability while maintaining the blue color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.100}", - "$description": "Background color for blue tags. Creates a distinct surface with blue theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.50}", - "$description": "Subtle background variation for blue tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.blue.background}", - "$description": "Border color for blue tags." - } - }, - "brown": { - "text": { - "$type": "color", - "$value": "{colors.brown.700}", - "$description": "Text color for brown tags. Ensures readability while maintaining the brown color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.brown.100}", - "$description": "Background color for brown tags. Creates a distinct surface with brown theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.brown.50}", - "$description": "Subtle background variation for brown tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.brown.background}", - "$description": "Border color for brown tags." - } - }, - "cyan": { - "text": { - "$type": "color", - "$value": "{colors.cyan.700}", - "$description": "Text color for cyan tags. Ensures readability while maintaining the cyan color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Background color for cyan tags. Creates a distinct surface with cyan theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.50}", - "$description": "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.cyan.background}", - "$description": "Border color for cyan tags." - } - }, - "green": { - "text": { - "$type": "color", - "$value": "{colors.cyan.700}", - "$description": "Text color for green tags. Ensures readability while maintaining the green color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Background color for green tags. Creates a distinct surface with green theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.50}", - "$description": "Subtle background variation for green tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.green.background}", - "$description": "Border color for green tags." - } - }, - "indigo": { - "text": { - "$type": "color", - "$value": "{colors.indigo.700}", - "$description": "Text color for indigo tags. Ensures readability while maintaining the indigo color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.indigo.100}", - "$description": "Background color for indigo tags. Creates a distinct surface with indigo theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.indigo.50}", - "$description": "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.indigo.background}", - "$description": "Border color for indigo tags." - } - }, - "lime": { - "text": { - "$type": "color", - "$value": "{colors.lime.700}", - "$description": "Text color for lime tags. Ensures readability while maintaining the lime color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.lime.100}", - "$description": "Background color for lime tags. Creates a distinct surface with lime theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.lime.50}", - "$description": "Subtle background variation for lime tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.lime.background}", - "$description": "Border color for lime tags." - } - }, - "mint": { - "text": { - "$type": "color", - "$value": "{colors.mint.700}", - "$description": "Text color for mint tags. Ensures readability while maintaining the mint color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.mint.100}", - "$description": "Background color for mint tags. Creates a distinct surface with mint theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.mint.50}", - "$description": "Subtle background variation for mint tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.mint.background}", - "$description": "Border color for mint tags." - } - }, - "orange": { - "text": { - "$type": "color", - "$value": "{colors.orange.700}", - "$description": "Text color for orange tags. Ensures readability while maintaining the orange color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.100}", - "$description": "Background color for orange tags. Creates a distinct surface with orange theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.50}", - "$description": "Subtle background variation for orange tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.orange.background}", - "$description": "Border color for orange tags." - } - }, - "pink": { - "text": { - "$type": "color", - "$value": "{colors.pink.700}", - "$description": "Text color for pink tags. Ensures readability while maintaining the pink color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.pink.100}", - "$description": "Background color for pink tags. Creates a distinct surface with pink theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.pink.50}", - "$description": "Subtle background variation for pink tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.pink.background}", - "$description": "Border color for pink tags." - } - }, - "purple": { - "text": { - "$type": "color", - "$value": "{colors.cyan.700}", - "$description": "Text color for purple tags. Ensures readability while maintaining the purple color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Background color for purple tags. Creates a distinct surface with purple theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.50}", - "$description": "Subtle background variation for purple tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.purple.background}", - "$description": "Border color for purple tags." - } - }, - "red": { - "text": { - "$type": "color", - "$value": "{colors.red.700}", - "$description": "Text color for red tags. Ensures readability while maintaining the red color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.red.100}", - "$description": "Background color for red tags. Creates a distinct surface with red theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.red.50}", - "$description": "Subtle background variation for red tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.red.background}", - "$description": "Border color for red tags." - } - }, - "violet": { - "text": { - "$type": "color", - "$value": "{colors.cyan.700}", - "$description": "Text color for violet tags. Ensures readability while maintaining the violet color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Background color for violet tags. Creates a distinct surface with violet theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.50}", - "$description": "Subtle background variation for violet tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.violet.background}", - "$description": "Border color for violet tags." - } - }, - "yellow": { - "text": { - "$type": "color", - "$value": "{colors.orange.700}", - "$description": "Text color for yellow tags. Signals caution states with readable amber text." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.100}", - "$description": "Background color for yellow tags. Creates a distinct surface with yellow theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.50}", - "$description": "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.yellow.background}", - "$description": "Border color for yellow tags." - } - }, - "gray": { - "text": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Text color for gray tags. Ensures readability while maintaining the gray color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for gray tags. Creates a distinct surface with gray theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Subtle background variation for gray tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.gray.background}", - "$description": "Border color for gray tags." - } - } - }, - "toast": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational toast notifications. Ensures high visibility for the notification headline." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational toast notifications. Provides readable contrast for notification content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational toast notifications. Creates visual distinction from UI content beneath." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational toast notifications. Subtly defines the notification's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Title text color for danger toast notifications. Provides maximum contrast against the error background." - }, - "description": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Description text color for danger toast notifications. Ensures readability of critical information." - }, - "background": { - "$type": "color", - "$value": "{colors.red.600}", - "$description": "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings." - }, - "border": { - "$type": "color", - "$value": "{component.toast.danger.background}", - "$description": "Border color for danger toast notifications. Reinforces the critical nature of the notification message." - } - } - }, - "tooltip": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for tooltip content. Ensures readability of helpful contextual information." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - } - } - }, - "shadow": { - "0": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "0", - "blur": "0", - "spread": "0", - "color": "{shadow-color.0}", - "type": "dropShadow" - }, - "$description": "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile." - }, - "1": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "1", - "blur": "2", - "spread": "0", - "color": "{shadow-color.1}", - "type": "dropShadow" - }, - "$description": "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements." - }, - "2": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "1", - "blur": "3", - "spread": "0", - "color": "{shadow-color.2}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "1", - "blur": "2", - "spread": "-1", - "color": "{shadow-color.2}", - "type": "dropShadow" - } - ], - "$description": "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state." - }, - "3": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-1", - "color": "{shadow-color.3}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "2", - "blur": "4", - "spread": "-2", - "color": "{shadow-color.3}", - "type": "dropShadow" - } - ], - "$description": "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover." - }, - "4": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "10", - "blur": "15", - "spread": "-3", - "color": "{shadow-color.4}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-4", - "color": "{shadow-color.4}", - "type": "dropShadow" - } - ], - "$description": "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns." - }, - "5": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "20", - "blur": "25", - "spread": "-5", - "color": "{shadow-color.5}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "8", - "blur": "10", - "spread": "-6", - "color": "{shadow-color.5}", - "type": "dropShadow" - } - ], - "$description": "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections." - }, - "6": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "25", - "blur": "50", - "spread": "-12", - "color": "{shadow-color.6}", - "type": "dropShadow" - }, - "$description": "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation." - }, - "inner": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "2", - "blur": "4", - "spread": "0", - "color": "{shadow-color.inner}", - "type": "innerShadow" - }, - "$description": "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields." - } - }, - "shadow-color": { - "0": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Transparent shadow color. Used when no shadow effect is desired." - }, - "1": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Light shadow color with 60% opacity. Creates subtle depth for small UI elements." - }, - "2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Medium shadow color with 60% opacity. Provides balanced depth for common UI components." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Medium shadow color with 50% opacity. Creates moderate depth for elevated components." - }, - "4": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Deep shadow color with 50% opacity. Provides significant depth for floating elements." - }, - "5": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content." - }, - "6": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements." - }, - "inner": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states." - } - }, - "ring": { - "focus": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "2", - "color": "{background.1}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "4", - "color": "{border.focus}", - "type": "dropShadow" - } - ], - "$description": "Focus ring effect with background offset and accent border." - } - }, - "gradient": { - "ai": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.orange.200}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pink.400}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.cyan.400}" - }, - "gradient-stop-4": { - "$type": "color", - "$value": "{colors.cyan.300}" - } - }, - "skeleton": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.150}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.chrome.150}" - } - }, - "pipeline": { - "running": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.orange.400}" - }, - "gradient-stop-2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.orange.400}" - } - }, - "arrows": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.300}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.blue.500}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{border.1}" - } - }, - "card": { - "background": { - "gradient-from": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.50}" - } - }, - "border": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.200}" - } - } - }, - "widget": { - "number": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.600}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.700}" - } - }, - "blob": { - "big": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.pure.white}" - } - }, - "small": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.150}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.pure.white}" - } - } - } - } - } - }, - "iconStrokeWidth": { - "xxs": { - "$type": "borderWidth", - "$value": "1.1" - }, - "xs": { - "$type": "borderWidth", - "$value": "1.4" - }, - "sm": { - "$type": "borderWidth", - "$value": "1.1" - }, - "default": { - "$type": "borderWidth", - "$value": "1.1" - }, - "md": { - "$type": "borderWidth", - "$value": "1.4" - }, - "lg": { - "$type": "borderWidth", - "$value": "2" - } - } -} \ No newline at end of file diff --git a/packages/ui/design-tokens/mode/light/high-contrast.json b/packages/ui/design-tokens/mode/light/high-contrast.json deleted file mode 100644 index eadcedd8c6..0000000000 --- a/packages/ui/design-tokens/mode/light/high-contrast.json +++ /dev/null @@ -1,2355 +0,0 @@ -{ - "background": { - "1": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers." - } - }, - "text": { - "1": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs." - }, - "3": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders." - }, - "accent": { - "$type": "color", - "$value": "{brand.color.700}", - "$description": "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements." - }, - "success": { - "$type": "color", - "$value": "{colors.green.600}", - "$description": "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.600}", - "$description": "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.600}", - "$description": "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications." - } - }, - "border": { - "1": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers." - }, - "2": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.7", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows." - }, - "focus": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators." - }, - "success": { - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators." - }, - "danger": { - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.500}", - "$description": "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements." - } - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item." - }, - "disabled": { - "text": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries." - } - } - }, - "component": { - "accordion": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for accordion content. Applied to the expandable text within accordion panels." - }, - "chevron": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for accordion items. Provides visual separation between accordion panels." - } - }, - "alert": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational alerts. Ensures high visibility for the alert heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational alerts. Provides readable contrast for alert content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational alerts. Creates visual distinction from surrounding content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational alerts. Subtly defines the alert's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.red.700}", - "$description": "Text color for danger alerts. Communicates critical information through high-contrast red text." - }, - "description": { - "$type": "color", - "$value": "{colors.red.600}", - "$description": "Description text color for danger alerts. Ensures readability while maintaining the error state styling." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Background color for danger alerts. Creates subtle but recognizable error state styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Border color for danger alerts. Provides definition for error state alerts." - } - } - }, - "avatar": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for avatar initials or text. Ensures visibility against the avatar background." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for avatar components. Provides contrast for text or image content." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for avatars. Creates subtle definition around the avatar element." - } - }, - "badge": { - "default": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for secondary badges. Provides readable contrast on secondary badge styling." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for secondary badges. Creates less prominent badge styling for secondary information." - }, - "border": { - "$type": "color", - "$value": "{component.badge.default.background}", - "$description": "Border color for secondary badges. Matches background for clean, cohesive appearance." - } - }, - "neutral": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for outline badges. Ensures readability for badges with transparent backgrounds." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.600}", - "$description": "Border color for outline badges. Creates definition for badges without background fill." - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.green.700}", - "$description": "Text color for success badges. Communicates positive status through readable green text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.400}", - "$description": "Border color for success badges. Provides subtle definition for success state indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.300}", - "$description": "Background color for success badges. Creates a subtle but recognizable success indicator." - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.700}", - "$description": "Text color for danger badges. Communicates error or warning status with high visibility." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Border color for danger badges. Creates definition for error or warning indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Background color for danger badges. Provides subtle visual indication of error states." - } - }, - "warning": { - "text": { - "$type": "color", - "$value": "{colors.yellow.700}", - "$description": "Text color for warning badges. Signals caution states with readable amber text." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.400}", - "$description": "Border color for warning badges. Defines the boundary of caution status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.yellow.200}", - "$description": "Background color for warning badges. Creates subtle but recognizable caution indicators." - } - }, - "running": { - "text": { - "$type": "color", - "$value": "{colors.orange.700}", - "$description": "Text color for running state badges. Indicates active or in-progress operations." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Border color for running state badges. Defines the boundary of active status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.orange.300}", - "$description": "Background color for running state badges. Creates subtle visual indication of in-progress states." - } - }, - "merged": { - "text": { - "$type": "color", - "$value": "{colors.purple.700}", - "$description": "Text color for merged state badges. Indicates completed merge actions in version control contexts." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.purple.400}", - "$description": "Border color for merged state badges. Defines the boundary of merge status indicators." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.purple.300}", - "$description": "Background color for merged state badges. Creates subtle but recognizable merge indicators." - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-related badges. Ensures high contrast against AI badge gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "breadcrumb": { - "item-inactive": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps." - }, - "item-current": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy." - }, - "separator": { - "$type": "color", - "$value": "{state.disabled.text}", - "$description": "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items." - } - }, - "btn": { - "primary": { - "text": { - "$type": "color", - "$value": "{brand.onColor.500}", - "$description": "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements." - }, - "background": { - "$type": "color", - "$value": "{brand.color.500}", - "$description": "Background color for primary action buttons. Creates emphasis for the most important action in a given context." - }, - "border": { - "$type": "color", - "$value": "{component.btn.primary.background}", - "$description": "Border color for primary action buttons. Matches background for clean, cohesive appearance." - } - }, - "secondary": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.150}", - "$description": "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions." - }, - "border": { - "$type": "color", - "$value": "{component.btn.secondary.background}", - "$description": "Border color for secondary action buttons. Matches background for clean, cohesive appearance." - } - }, - "outline": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected outline buttons. Creates subtle emphasis for button icons." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for unselected outline buttons. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected outline buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected outline buttons. Increases visibility for active button states." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for selected outline buttons. Creates stronger visual indication of the active state." - } - } - }, - "ghost": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for unselected ghost buttons. Provides readable contrast for minimal styling." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for selected ghost buttons. Increases contrast for active button states." - }, - "icon": { - "$type": "color", - "$value": "{text.1}", - "$description": "Icon color for selected ghost buttons. Increases visibility for active button states." - } - } - }, - "success": { - "text": { - "$type": "color", - "$value": "{colors.green.700}", - "$description": "Text color for success buttons. Communicates positive actions through readable green text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.300}", - "$description": "Background color for success buttons. Creates subtle but recognizable positive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.400}", - "$description": "Border color for success buttons. Provides definition for positive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.300}", - "$description": "Hover state background color for success buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.300}", - "$description": "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "danger": { - "text": { - "$type": "color", - "$value": "{colors.red.700}", - "$description": "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text." - }, - "background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Background color for danger buttons. Creates subtle but recognizable destructive action styling." - }, - "border": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Border color for danger buttons. Provides definition for destructive action buttons." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Hover state background color for danger buttons. Creates subtle feedback for user interaction." - }, - "active": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses." - } - } - }, - "ai": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for AI-powered buttons." - }, - "border": { - "$type": "color", - "$value": "linear-gradient(94deg, {gradient.ai.gradient-stop-1} 0%, {gradient.ai.gradient-stop-2} 35%, {gradient.ai.gradient-stop-3} 65%, {gradient.ai.gradient-stop-4} 100%)", - "$description": "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for card components. Creates a distinct surface that appears elevated from the page background." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content." - } - }, - "dialog": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dialog content. Provides readable contrast for the modal's primary text content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dialog components." - }, - "backdrop": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath." - } - }, - "dropdown": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for dropdown menus. Creates a distinct surface for selectable options." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for dropdown menus container." - }, - "item": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for dropdown menu items. Ensures readability of selectable options." - }, - "delete": { - "text": { - "$type": "color", - "$value": "{text.danger}", - "$description": "Text color for dropdown menu delete-item." - }, - "state": { - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.300}", - "$description": "Specific hover state color for dropdown delete-item." - } - } - } - } - }, - "diff": { - "grey": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent." - }, - "add-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.400}", - "$description": "Green background highlighting newly added code lines while maintaining readability." - }, - "add-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.400}", - "$description": "Background for line numbers of added code, providing visual connection to added content." - }, - "add-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.green.400}", - "$description": "Stronger emphasis color for specific character changes within added lines." - }, - "add-widget": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background for interactive UI elements related to added content." - }, - "add-widget-color": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text/icon color for add-related interactive elements, ensuring readability." - }, - "del-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Red background highlighting removed code lines without causing eye strain." - }, - "del-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Background for line numbers of deleted code, connecting numbers to removed content." - }, - "del-content-highlight": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.25", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.red.400}", - "$description": "Stronger emphasis color for specific character changes within deleted lines." - }, - "plain-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Neutral background for unchanged code that allows modified content to stand out." - }, - "plain-lineNumber": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for line numbers of unchanged code, maintaining visual rhythm." - }, - "plain-lineNumber-color": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unchanged line numbers, visually subdued compared to changed content." - }, - "empty-content": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background for placeholder spaces and empty lines, maintaining visual continuity." - }, - "hunk-content": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.12", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Background for diff section headers ('hunks') that indicate which part of the file is displayed." - }, - "hunk-lineNumber": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Background for line numbers in section headers." - }, - "hunk-content-color": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for section header content showing file position information." - }, - "expand-content": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background for controls that expand/collapse code sections to show additional context." - } - }, - "input": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for input field content. Ensures readability of user-entered information." - }, - "placeholder": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content." - }, - "icon": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for input fields. Creates a distinct surface for user interaction and data entry." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for input fields. Defines the input area with a visible boundary for improved usability." - } - }, - "label": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for form labels and field identifiers. Ensures high contrast for important contextual information." - } - }, - "link": { - "default": { - "$type": "color", - "$value": "{text.accent}", - "$description": "Default color for text links. Creates distinct visual identification of interactive text elements." - }, - "visited": { - "$type": "color", - "$value": "{colors.purple.600}", - "$description": "Visited state color for text links. Differentiates links the user has already activated." - } - }, - "nav-tabs": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Unselected tab item text." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Selected tab item text." - }, - "border": { - "$type": "color", - "$value": "{border.focus}", - "$description": "Selected tab item border." - } - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Navigation container border." - }, - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Navigation tabs container background." - } - }, - "pipeline": { - "arrow": { - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for pipeline connection arrows. Defines the visual path between pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.pipeline.arrows.gradient-stop-1} 0%, {gradient.pipeline.arrows.gradient-stop-2} 50%, {gradient.pipeline.arrows.gradient-stop-3} 100%)", - "$description": "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components." - } - } - }, - "card": { - "background": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.background.gradient-from} 10%, {gradient.pipeline.card.background.gradient-to} 75%)", - "$description": "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements." - }, - "border": { - "$type": "color", - "$value": "radial-gradient(90% 100% at 15% 0%,{gradient.pipeline.card.border.gradient-from} 10%, {gradient.pipeline.card.border.gradient-to} 75%)", - "$description": "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components." - }, - "running": { - "border": { - "$type": "color", - "$value": "radial-gradient(604% 142% at 0% 0%, {gradient.pipeline.running.gradient-stop-1} 0%, {gradient.pipeline.running.gradient-stop-2} 30%, {gradient.pipeline.running.gradient-stop-3} 100%)", - "$description": "Animated gradient border for running pipeline states. Provides visual indication of active processing." - } - }, - "error": { - "border": { - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution." - } - }, - "completed": { - "border": { - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Border color for completed pipeline states. Indicates successful pipeline execution." - } - } - }, - "card-canvas": { - "1": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container." - } - }, - "2": { - "background": { - "$type": "color", - "$value": "{background.2}", - "$description": "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization." - } - } - }, - "background": { - "dotes": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Refers to the dotted pattern visible in the background of the workspace." - } - } - }, - "sidebar": { - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background color for navigation components. Creates a consistent foundation for navigation elements." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Border color for navigation components. Creates visual boundaries and separation from adjacent content." - }, - "separator": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Color for separators between navigation sections. Creates visual organization within the navigation structure." - }, - "hover": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.15", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Hover state for navigation items." - }, - "selected": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.2", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Selected state for navigation items." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Text color for unselected navigation items. Provides readable but less emphasized styling for available options." - }, - "icon": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Text color for selected navigation items. Increases contrast to highlight the current location." - }, - "icon": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Icon color for selected navigation items. Creates stronger visual indication of the current selection." - } - } - }, - "logo": { - "text": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Text color for Logo in sidebar navigation." - }, - "icon": { - "$type": "color", - "$value": "{brand.color.300}", - "$description": "Icon color for Logo in sidebar navigation." - } - }, - "search": { - "background": { - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Search input specific background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Search input specific border on sidebar navigation." - }, - "placeholder": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Search input specific placeholder on sidebar navigation." - }, - "btn": { - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Search input specific button background on sidebar navigation." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.800}", - "$description": "Search input specific button border on sidebar navigation." - }, - "text": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Search input specific button text on sidebar navigation." - } - } - }, - "footer": { - "username": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Username in the footer sidebar navigation menu." - }, - "data": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "User data in the footer sidebar navigation menu." - } - } - }, - "scrollbar": { - "thumb": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability." - } - }, - "selection": { - "unselected": { - "item": { - "$type": "color", - "$value": "{text.3}", - "$description": "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected state in selection controls. Creates visual distinction from selected items." - }, - "border": { - "$type": "color", - "$value": "{border.1}", - "$description": "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary." - } - }, - "selected": { - "item": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Color for selected items in selection controls. Creates high contrast against selected background state." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Background color for selected state in selection controls. Creates strong visual indication of active selection." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.900}", - "$description": "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling." - } - } - }, - "separator": { - "background": { - "$type": "color", - "$value": "{border.3}", - "$description": "Background color for separator elements. Creates visual division between content sections with a subtle line or space." - } - }, - "skeleton": { - "background": { - "$type": "color", - "$value": "linear-gradient(90deg, {gradient.skeleton.gradient-stop-1} 0%, {gradient.skeleton.gradient-stop-2} 50%, {gradient.skeleton.gradient-stop-3} 100%)", - "$description": "Animation color that sweeps across skeleton elements. Creates a \"shimmer\" effect indicating content loading states." - } - }, - "slider": { - "track": { - "base": { - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for slider tracks. Represents the full range of available values in an unselected state." - }, - "progress": { - "$type": "color", - "$value": "{colors.blue.500}", - "$description": "Filled portion color for slider tracks. Visually represents the selected value or range within the track." - } - }, - "track-segments": { - "base": { - "$type": "color", - "$value": "{colors.chrome.400}", - "$description": "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals." - }, - "progress": { - "$type": "color", - "$value": "{colors.blue.700}", - "$description": "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range." - } - }, - "handle": { - "background": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Background color for slider handles. Creates a distinct, interactive element for adjusting values." - }, - "border": { - "$type": "color", - "$value": "{colors.chrome.700}", - "$description": "Border color for slider handles. Provides definition and contrast for the interactive control." - } - } - }, - "status-indicator": { - "completed": { - "$type": "color", - "$value": "{colors.green.500}", - "$description": "Color for success status indicators. Communicates completed or positive states." - }, - "cancelled": { - "$type": "color", - "$value": "{colors.red.500}", - "$description": "Color for danger status indicators. Communicates error or critical warning states." - }, - "warning": { - "$type": "color", - "$value": "{colors.yellow.400}", - "$description": "Color for warning status indicators. Communicates caution or potential issue states." - }, - "running": { - "$type": "color", - "$value": "{colors.orange.400}", - "$description": "Color for running status indicators. Communicates active or in-progress operations." - }, - "merged": { - "$type": "color", - "$value": "{colors.purple.500}", - "$description": "Color for merged status indicators. Communicates successful integration or completion in version control contexts." - }, - "action-required": { - "$type": "color", - "$value": "{colors.blue.400}", - "$description": "Color for action-required status indicators. Communicates that user attention or intervention is needed. " - }, - "waiting": { - "$type": "color", - "$value": "{colors.chrome.500}", - "$description": "Color for pending status indicators. Communicates in waiting states." - } - }, - "switch": { - "unselected": { - "thumb": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.300}", - "$description": "Background color for the unselected state of switch controls. Creates visual distinction from the selected state." - } - }, - "selected": { - "thumb": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.600}", - "$description": "Background color for the selected state of switch controls. Creates strong visual indication of active state." - } - } - }, - "table": { - "header": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for table header cells. Ensures readability of column labels and titles." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for table header rows. Creates visual distinction between headers and data rows." - } - }, - "row": { - "alternate-background": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.200}", - "$description": "Background color for alternate table rows. Improves readability by differentiating adjacent rows." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for table rows. Provides subtle separation between data rows." - } - }, - "cell": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for table cell content. Ensures high readability of tabular data." - } - } - }, - "tabs": { - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for the tabs container. Creates a consistent foundation for tab elements." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for tab containers and separators. Provides subtle definition for tab boundaries." - }, - "item": { - "unselected": { - "text": { - "$type": "color", - "$value": "{text.3}", - "$description": "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs." - }, - "background": { - "$type": "color", - "$value": "{background.1}", - "$description": "Background color for unselected tab items. Creates visual distinction from the active tab." - }, - "border": { - "$type": "color", - "$value": "{component.tabs.item.unselected.background}", - "$description": "Border color for unselected tab items. Maintains consistent styling with the tab background." - } - }, - "selected": { - "text": { - "$type": "color", - "$value": "{text.1}", - "$description": "Text color for the selected tab item. Increases contrast to highlight the active tab." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for the selected tab item. Creates strong visual indication of the active tab." - }, - "border": { - "$type": "color", - "$value": "{border.2}", - "$description": "Border color for the selected tab item. Reinforces the active state with defined boundaries." - } - } - } - }, - "tag": { - "blue": { - "text": { - "$type": "color", - "$value": "{colors.blue.700}", - "$description": "Text color for blue tags. Ensures readability while maintaining the blue color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.blue.100}", - "$description": "Background color for blue tags. Creates a distinct surface with blue theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.blue.50}", - "$description": "Subtle background variation for blue tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.blue.background}", - "$description": "Border color for blue tags. " - } - }, - "brown": { - "text": { - "$type": "color", - "$value": "{colors.brown.700}", - "$description": "Text color for brown tags. Ensures readability while maintaining the brown color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.brown.100}", - "$description": "Background color for brown tags. Creates a distinct surface with brown theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.brown.50}", - "$description": "Subtle background variation for brown tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.brown.background}", - "$description": "Border color for brown tags. " - } - }, - "cyan": { - "text": { - "$type": "color", - "$value": "{colors.cyan.700}", - "$description": "Text color for cyan tags. Ensures readability while maintaining the cyan color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.cyan.100}", - "$description": "Background color for cyan tags. Creates a distinct surface with cyan theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.cyan.50}", - "$description": "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.cyan.background}", - "$description": "Border color for cyan tags." - } - }, - "green": { - "text": { - "$type": "color", - "$value": "{colors.green.700}", - "$description": "Text color for green tags. Ensures readability while maintaining the green color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.green.100}", - "$description": "Background color for green tags. Creates a distinct surface with green theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.green.50}", - "$description": "Subtle background variation for green tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.green.background}", - "$description": "Border color for green tags." - } - }, - "indigo": { - "text": { - "$type": "color", - "$value": "{colors.indigo.700}", - "$description": "Text color for indigo tags. Ensures readability while maintaining the indigo color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.indigo.100}", - "$description": "Background color for indigo tags. Creates a distinct surface with indigo theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.indigo.50}", - "$description": "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.indigo.background}", - "$description": "Border color for indigo tags." - } - }, - "lime": { - "text": { - "$type": "color", - "$value": "{colors.lime.700}", - "$description": "Text color for lime tags. Ensures readability while maintaining the lime color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.lime.100}", - "$description": "Background color for lime tags. Creates a distinct surface with lime theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.lime.50}", - "$description": "Subtle background variation for lime tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.lime.background}", - "$description": "Border color for lime tags." - } - }, - "mint": { - "text": { - "$type": "color", - "$value": "{colors.mint.700}", - "$description": "Text color for mint tags. Ensures readability while maintaining the mint color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.mint.100}", - "$description": "Background color for mint tags. Creates a distinct surface with mint theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.mint.50}", - "$description": "Subtle background variation for mint tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.mint.background}", - "$description": "Border color for mint tags." - } - }, - "orange": { - "text": { - "$type": "color", - "$value": "{colors.orange.700}", - "$description": "Text color for orange tags. Ensures readability while maintaining the orange color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.orange.100}", - "$description": "Background color for orange tags. Creates a distinct surface with orange theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.orange.50}", - "$description": "Subtle background variation for orange tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.orange.background}", - "$description": "Border color for orange tags." - } - }, - "pink": { - "text": { - "$type": "color", - "$value": "{colors.pink.700}", - "$description": "Text color for pink tags. Ensures readability while maintaining the pink color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.pink.100}", - "$description": "Background color for pink tags. Creates a distinct surface with pink theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.pink.50}", - "$description": "Subtle background variation for pink tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.pink.background}", - "$description": "Border color for pink tags." - } - }, - "purple": { - "text": { - "$type": "color", - "$value": "{colors.purple.700}", - "$description": "Text color for purple tags. Ensures readability while maintaining the purple color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.purple.100}", - "$description": "Background color for purple tags. Creates a distinct surface with purple theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.purple.50}", - "$description": "Subtle background variation for purple tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.purple.background}", - "$description": "Border color for purple tags." - } - }, - "red": { - "text": { - "$type": "color", - "$value": "{colors.red.700}", - "$description": "Text color for red tags. Ensures readability while maintaining the red color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.red.100}", - "$description": "Background color for red tags. Creates a distinct surface with red theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.red.50}", - "$description": "Subtle background variation for red tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.red.background}", - "$description": "Border color for red tags." - } - }, - "violet": { - "text": { - "$type": "color", - "$value": "{colors.violet.700}", - "$description": "Text color for violet tags. Ensures readability while maintaining the violet color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.violet.100}", - "$description": "Background color for violet tags. Creates a distinct surface with violet theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.violet.50}", - "$description": "Subtle background variation for violet tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.violet.background}", - "$description": "Border color for violet tags." - } - }, - "yellow": { - "text": { - "$type": "color", - "$value": "{colors.yellow.700}", - "$description": "Text color for yellow tags. Ensures readability while maintaining the yellow color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.yellow.100}", - "$description": "Background color for yellow tags. Creates a distinct surface with yellow theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.yellow.50}", - "$description": "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.yellow.background}", - "$description": "Border color for yellow tags." - } - }, - "gray": { - "text": { - "$type": "color", - "$value": "{colors.chrome.850}", - "$description": "Text color for gray tags. Ensures readability while maintaining the gray color theme." - }, - "background": { - "$type": "color", - "$value": "{colors.chrome.100}", - "$description": "Background color for gray tags. Creates a distinct surface with gray theme styling." - }, - "background-subtle": { - "$type": "color", - "$value": "{colors.chrome.50}", - "$description": "Subtle background variation for gray tags. Provides a softer alternative for less emphasis." - }, - "border": { - "$type": "color", - "$value": "{component.tag.gray.background}", - "$description": "Border color for gray tags." - } - } - }, - "toast": { - "default": { - "title": { - "$type": "color", - "$value": "{text.1}", - "$description": "Title text color for informational toast notifications. Ensures high visibility for the notification headline." - }, - "description": { - "$type": "color", - "$value": "{text.2}", - "$description": "Description text color for informational toast notifications. Provides readable contrast for notification content." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for informational toast notifications. Creates visual distinction from UI content beneath." - }, - "border": { - "$type": "color", - "$value": "{border.3}", - "$description": "Border color for informational toast notifications. Subtly defines the notification's boundaries." - } - }, - "danger": { - "title": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Title text color for danger toast notifications. Provides maximum contrast against the error background." - }, - "description": { - "$type": "color", - "$value": "{colors.pure.white}", - "$description": "Description text color for danger toast notifications. Ensures readability of critical information." - }, - "background": { - "$type": "color", - "$value": "{colors.red.600}", - "$description": "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings." - }, - "border": { - "$type": "color", - "$value": "{component.toast.danger.background}", - "$description": "Border color for danger toast notifications. Reinforces the critical nature of the notification message." - } - } - }, - "tooltip": { - "text": { - "$type": "color", - "$value": "{text.2}", - "$description": "Text color for tooltip content. Ensures readability of helpful contextual information." - }, - "background": { - "$type": "color", - "$value": "{background.3}", - "$description": "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements." - } - } - }, - "shadow": { - "0": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "0", - "blur": "0", - "spread": "0", - "color": "{shadow-color.0}", - "type": "dropShadow" - }, - "$description": "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile." - }, - "1": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "1", - "blur": "2", - "spread": "0", - "color": "{shadow-color.1}", - "type": "dropShadow" - }, - "$description": "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements." - }, - "2": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "1", - "blur": "3", - "spread": "0", - "color": "{shadow-color.2}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "1", - "blur": "2", - "spread": "-1", - "color": "{shadow-color.2}", - "type": "dropShadow" - } - ], - "$description": "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state." - }, - "3": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-1", - "color": "{shadow-color.3}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "2", - "blur": "4", - "spread": "-2", - "color": "{shadow-color.3}", - "type": "dropShadow" - } - ], - "$description": "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover." - }, - "4": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "10", - "blur": "15", - "spread": "-3", - "color": "{shadow-color.4}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "-4", - "color": "{shadow-color.4}", - "type": "dropShadow" - } - ], - "$description": "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns." - }, - "5": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "20", - "blur": "25", - "spread": "-5", - "color": "{shadow-color.5}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "8", - "blur": "10", - "spread": "-6", - "color": "{shadow-color.5}", - "type": "dropShadow" - } - ], - "$description": "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections." - }, - "6": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "25", - "blur": "50", - "spread": "-12", - "color": "{shadow-color.6}", - "type": "dropShadow" - }, - "$description": "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation." - }, - "inner": { - "$type": "boxShadow", - "$value": { - "x": "0", - "y": "2", - "blur": "4", - "spread": "0", - "color": "{shadow-color.inner}", - "type": "innerShadow" - }, - "$description": "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields." - } - }, - "shadow-color": { - "0": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Transparent shadow color. Used when no shadow effect is desired." - }, - "1": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Light shadow color with 60% opacity. Creates subtle depth for small UI elements." - }, - "2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Medium shadow color with 60% opacity. Provides balanced depth for common UI components." - }, - "3": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Medium shadow color with 50% opacity. Creates moderate depth for elevated components." - }, - "4": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Deep shadow color with 50% opacity. Provides significant depth for floating elements." - }, - "5": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.5", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content." - }, - "6": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.6", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements." - }, - "inner": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.1", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.950}", - "$description": "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states." - } - }, - "ring": { - "focus": { - "$type": "boxShadow", - "$value": [ - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "2", - "color": "{background.1}", - "type": "dropShadow" - }, - { - "x": "0", - "y": "0", - "blur": "0", - "spread": "4", - "color": "{border.focus}", - "type": "dropShadow" - } - ], - "$description": "Focus ring effect with background offset and accent border." - } - }, - "gradient": { - "ai": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.yellow.200}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pink.400}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.purple.400}" - }, - "gradient-stop-4": { - "$type": "color", - "$value": "{colors.cyan.300}" - } - }, - "skeleton": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.150}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.chrome.150}" - } - }, - "pipeline": { - "running": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.orange.400}" - }, - "gradient-stop-2": { - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.4", - "space": "lch" - } - } - }, - "$type": "color", - "$value": "{colors.chrome.300}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{colors.orange.400}" - } - }, - "arrows": { - "gradient-stop-1": { - "$type": "color", - "$value": "{colors.chrome.300}" - }, - "gradient-stop-2": { - "$type": "color", - "$value": "{colors.blue.500}" - }, - "gradient-stop-3": { - "$type": "color", - "$value": "{border.1}" - } - }, - "card": { - "background": { - "gradient-from": { - "$type": "color", - "$value": "{colors.pure.white}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.50}" - } - }, - "border": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.200}" - } - } - }, - "widget": { - "number": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.600}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.chrome.700}" - } - }, - "blob": { - "big": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.100}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.pure.white}" - } - }, - "small": { - "gradient-from": { - "$type": "color", - "$value": "{colors.chrome.150}" - }, - "gradient-to": { - "$type": "color", - "$value": "{colors.pure.white}" - } - } - } - } - } - }, - "iconStrokeWidth": { - "xxs": { - "$type": "borderWidth", - "$value": "1.1" - }, - "xs": { - "$type": "borderWidth", - "$value": "1" - }, - "sm": { - "$type": "borderWidth", - "$value": "1.1" - }, - "default": { - "$type": "borderWidth", - "$value": "1.1" - }, - "md": { - "$type": "borderWidth", - "$value": "1.4" - }, - "lg": { - "$type": "borderWidth", - "$value": "2" - } - } -} \ No newline at end of file diff --git a/packages/ui/src/components/badge/badge.tsx b/packages/ui/src/components/badge/badge.tsx index 7ff37592c4..d2828eede9 100644 --- a/packages/ui/src/components/badge/badge.tsx +++ b/packages/ui/src/components/badge/badge.tsx @@ -14,86 +14,83 @@ enum BadgesHoverStates { DISABLED_MUTED_THEME = 'disabled-muted-theme' } -const badgeVariants = cva( - 'inline-flex items-center border transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', - { - variants: { - variant: { - // default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80', - secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80', - tertiary: 'border-transparent bg-background-8 text-foreground-8', - quaternary: 'border-borders-1 bg-background-2 text-foreground-5', - destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80', - outline: 'text-foreground', +const badgeVariants = cva('inline-flex items-center transition-colors badge', { + variants: { + variant: { + // default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80', + secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80', + tertiary: 'border-transparent bg-background-8 text-foreground-8', + quaternary: 'border-borders-1 bg-background-2 text-foreground-5', + destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80', + outline: 'text-foreground', - /** - * New variants - */ - default: 'badge', - neutral: 'badge badge-neutral', - success: 'badge badge-success', - warning: 'badge badge-warning', - danger: 'badge badge-danger', - running: 'badge badge-running', - merged: 'badge badge-merged', - ai: 'badge badge-ai' - }, - size: { - default: 'px-2.5 py-0.5 text-xs font-semibold', - xl: 'h-[18px] px-2 text-12', - lg: 'px-3 py-1 text-xs font-normal', - md: 'h-6 px-2.5', - sm: 'h-5 px-1.5 text-12', - xs: 'h-[18px] px-1.5 text-11 font-light' - }, - borderRadius: { - default: 'rounded-md', - base: 'rounded', - full: 'rounded-full' - }, - hover: { - [BadgesHoverStates.ENABLED]: '', - // variant - [BadgesHoverStates.DISABLED_DEFAULT]: 'hover:!bg-primary', - [BadgesHoverStates.DISABLED_SECONDARY]: 'hover:!bg-secondary', - [BadgesHoverStates.DISABLED_DESTRUCTIVE]: 'hover:!bg-destructive', - [BadgesHoverStates.DISABLED_OUTLINE]: '', - // theme - [BadgesHoverStates.DISABLED_DESTRUCTIVE_THEME]: 'hover:!bg-tag-background-red-1', - [BadgesHoverStates.DISABLED_WARNING_THEME]: 'hover:!bg-tag-background-amber-1', - [BadgesHoverStates.DISABLED_SUCCESS_THEME]: 'hover:!bg-tag-background-mint-1', - [BadgesHoverStates.DISABLED_EMPHASIS_THEME]: 'hover:!bg-tag-background-purple-1', - [BadgesHoverStates.DISABLED_MUTED_THEME]: 'hover:!bg-tag-background-gray-1' - }, - theme: { - default: '', - destructive: - 'border-tag-border-red-1 bg-tag-background-red-1 text-tag-foreground-red-1 hover:bg-tag-background-red-2', - warning: - 'border-tag-border-amber-1 bg-tag-background-amber-1 text-tag-foreground-amber-1 hover:bg-tag-background-amber-2', - success: - 'border-tag-border-mint-1 bg-tag-background-mint-1 text-tag-foreground-mint-1 hover:bg-tag-background-mint-2', - emphasis: - 'border-tag-border-purple-1 bg-tag-background-purple-1 text-tag-foreground-purple-1 hover:bg-tag-background-purple-2', - muted: - 'border-tag-border-gray-1 bg-tag-background-gray-1 text-tag-foreground-gray-1 hover:bg-tag-background-gray-2' - } + /** + * New variants + */ + default: '', + neutral: 'badge-neutral', + success: 'badge-success', + warning: 'badge-warning', + danger: 'badge-danger', + running: 'badge-running', + merged: 'badge-merged', + ai: 'badge-ai' }, - compoundVariants: [ - { - size: 'sm', - borderRadius: 'full', - className: 'px-2' - } - ], - defaultVariants: { - variant: 'default', - size: 'default', - hover: BadgesHoverStates.ENABLED, - theme: 'default' + /** + * CDS: How to take it forward? + * + * In new CDS we have -default and -sm sizes alone. + */ + size: { + default: '', + sm: 'badge-sm', + xl: 'h-[18px] px-2 text-12', + lg: 'px-3 py-1 text-xs font-normal', + md: 'h-6 px-2.5', + xs: 'h-[18px] px-1.5 text-11 font-light' + }, + /** + * CDS: How to take it forward? + * + * Delete -base and have -base and -full? + */ + borderRadius: { + default: 'badge-rounded-default', + base: 'badge-rounded-default', + full: 'badge-rounded-full' + }, + /** + * CDS: How to take it forward? + * Delete -theme? + */ + theme: { + default: '', + destructive: + 'border-tag-border-red-1 bg-tag-background-red-1 text-tag-foreground-red-1 hover:bg-tag-background-red-2', + warning: + 'border-tag-border-amber-1 bg-tag-background-amber-1 text-tag-foreground-amber-1 hover:bg-tag-background-amber-2', + success: + 'border-tag-border-mint-1 bg-tag-background-mint-1 text-tag-foreground-mint-1 hover:bg-tag-background-mint-2', + emphasis: + 'border-tag-border-purple-1 bg-tag-background-purple-1 text-tag-foreground-purple-1 hover:bg-tag-background-purple-2', + muted: + 'border-tag-border-gray-1 bg-tag-background-gray-1 text-tag-foreground-gray-1 hover:bg-tag-background-gray-2' + } + }, + compoundVariants: [ + { + size: 'sm', + borderRadius: 'full', + className: 'px-2' } + ], + defaultVariants: { + variant: 'default', + size: 'default', + // hover: BadgesHoverStates.ENABLED, + theme: 'default' } -) +}) export interface BadgeProps extends React.HTMLAttributes, VariantProps { disableHover?: boolean @@ -120,8 +117,7 @@ function Badge({ variant, size, borderRadius, - theme, - hover + theme }), className )} diff --git a/packages/ui/src/styles.css b/packages/ui/src/styles.css index 8c11131f33..fe4e690feb 100644 --- a/packages/ui/src/styles.css +++ b/packages/ui/src/styles.css @@ -1,5 +1,4 @@ -/* @import url('./shared-style-variables.css'); - */ +/* @import url('./shared-style-variables.css'); */ @import url('@harnessio/core-design-system/styles'); diff --git a/packages/ui/tailwind-design-system.ts b/packages/ui/tailwind-design-system.ts index b293953b99..b1683f8a9e 100644 --- a/packages/ui/tailwind-design-system.ts +++ b/packages/ui/tailwind-design-system.ts @@ -3,6 +3,9 @@ import tailwindcssAnimate from 'tailwindcss-animate' import plugin from 'tailwindcss/plugin' import type { PluginAPI, Config as TailwindConfig } from 'tailwindcss/types/config' +import { badgeStyles } from './tailwind-utils-config/components' +import { typography as typographyStyles } from './tailwind-utils-config/utilities' + export default { darkMode: ['class'], content: ['./src/**/*.{ts,tsx,css}'], @@ -127,31 +130,6 @@ export default { letterSpacing: { tight: '-0.02em' }, - // boxShadow: { - // 1: '0px 8px 16px hsl(var(--canary-box-shadow-1))', - // 2: '0px 8px 8px hsl(var(--canary-box-shadow-2))', - // 'pagination-1': '0px 2px 4px hsl(var(--canary-box-shadow-pagination))', - // 'as-border': 'inset 0 0 0 1px', - // 'commit-list-bullet': - // '0px 0px 3px 0.5px hsla(var(--canary-background-05) / 0.2), 0px 0px 8px 1px hsla(var(--canary-background-05) / 0.3)' - // }, - // borderColor: { - // 'borders-1': 'hsl(var(--canary-border-01))', - // 'borders-2': 'hsl(var(--canary-border-02))', - // 'borders-3': 'hsl(var(--canary-border-03))', - // 'borders-4': 'hsl(var(--canary-border-04))', - // 'borders-5': 'hsl(var(--canary-border-05))', - // 'borders-6': 'hsl(var(--canary-border-06))', - // 'borders-7': 'hsl(var(--canary-border-07))', - // 'borders-8': 'hsl(var(--canary-border-08))', - // 'borders-9': 'hsl(var(--canary-border-09))', - // 'borders-10': 'hsl(var(--canary-border-10))', - // 'borders-danger': 'hsl(var(--canary-border-danger))', - // 'borders-success': 'hsl(var(--canary-border-success))', - // 'borders-accent': 'hsl(var(--canary-border-accent))', - // 'borders-risk': 'hsl(var(--canary-icon-risk))', - // 'borders-alert': 'hsl(var(--canary-border-alert))' - // }, borderRadius: { 10: '0.625rem' }, @@ -222,126 +200,12 @@ export default { } } }, - - // .badge { - // --badge-color: var(--canary-component-badge-default-text); - // --badge-bg-color: var(--canary-component-badge-default-background); - // --badge-border-color: var(--canary-component-badge-default-border); - - // border: var(--canary-border-width-1) solid var(--badge-border-color); - // color: var(--badge-color); - // background-color: var(--badge-bg-color); - // } - // .badge-neutral { - // --badge-color: var(--canary-component-badge-neutral-text); - // --badge-bg-color: var(--canary-component-badge-neutral-background); - // --badge-border-color: var(--canary-component-badge-neutral-border); - // } - // .badge-success { - // --badge-color: var(--canary-component-badge-success-text); - // --badge-bg-color: var(--canary-component-badge-success-background); - // --badge-border-color: var(--canary-component-badge-success-border); - // } - // .badge-warning { - // --badge-color: var(--canary-component-badge-warning-text); - // --badge-bg-color: var(--canary-component-badge-warning-background); - // --badge-border-color: var(--canary-component-badge-warning-border); - // } - // .badge-danger { - // --badge-color: var(--canary-component-badge-danger-text); - // --badge-bg-color: var(--canary-component-badge-danger-background); - // --badge-border-color: var(--canary-component-badge-danger-border); - // } - // .badge-running { - // --badge-color: var(--canary-component-badge-running-text); - // --badge-bg-color: var(--canary-component-badge-running-background); - // --badge-border-color: var(--canary-component-badge-running-border); - // } - // .badge-merged { - // --badge-color: var(--canary-component-badge-merged-text); - // --badge-bg-color: var(--canary-component-badge-merged-background); - // --badge-border-color: var(--canary-component-badge-merged-border); - // } - // .badge-ai { - // --badge-color: var(--canary-component-badge-ai-text); - // --badge-bg-color: var(--canary-component-badge-ai-background); - // border: 1px solid transparent; - // background-image: - // linear-gradient(to right, var(--badge-bg-color), var(--badge-bg-color)), var(--canary-component-badge-ai-border); - // background-origin: border-box; - // background-clip: padding-box, border-box; - // } - plugins: [ - plugin(({ addComponents }) => { - addComponents({ - '.badge': { - border: 'var(--canary-border-width-1) solid var(--canary-component-badge-default-border)', - color: 'var(--canary-component-badge-default-text)', - backgroundColor: 'var(--canary-component-badge-default-background)', - - '&-neutral': { - color: 'var(--canary-component-badge-neutral-text)', - backgroundColor: 'var(--canary-component-badge-neutral-background)', - borderColor: 'var(--canary-component-badge-neutral-border)' - }, - '&-success': { - color: 'var(--canary-component-badge-success-text)', - backgroundColor: 'var(--canary-component-badge-success-background)', - borderColor: 'var(--canary-component-badge-success-border)' - }, - '&-warning': { - color: 'var(--canary-component-badge-warning-text)', - backgroundColor: 'var(--canary-component-badge-warning-background)', - borderColor: 'var(--canary-component-badge-warning-border)' - }, - '&-danger': { - color: 'var(--canary-component-badge-danger-text)', - backgroundColor: 'var(--canary-component-badge-danger-background)', - borderColor: 'var(--canary-component-badge-danger-border)' - }, - '&-running': { - color: 'var(--canary-component-badge-running-text)', - backgroundColor: 'var(--canary-component-badge-running-background)', - borderColor: 'var(--canary-component-badge-running-border)' - }, - '&-harness': { - color: 'var(--canary-component-badge-running-text)', - backgroundColor: 'var(--canary-component-badge-running-background)', - borderColor: 'var(--canary-component-badge-running-border)' - }, - '&-merged': { - color: 'var(--canary-component-badge-merged-text)', - backgroundColor: 'var(--canary-component-badge-merged-background)', - borderColor: 'var(--canary-component-badge-merged-border)' - }, - '&-ai': { - color: 'var(--canary-component-badge-ai-text)', - backgroundImage: `linear-gradient(to right, var(--canary-component-badge-ai-background), var(--canary-component-badge-ai-background)), var(--canary-component-badge-ai-border)`, - backgroundOrigin: 'border-box', - backgroundClip: 'padding-box, border-box', - border: '1px solid transparent' - }, - - // Size - '&-sm': { - padding: 'var(--badge-sm-padding, 0.125rem 0.375rem)', - fontSize: 'var(--badge-sm-font-size, 0.625rem)', - background: 'rebeccapurple', - color: 'white' - } - } - // '.badge-primary': { - // backgroundColor: 'var(--badge-primary-background-color, #3b82f6)', - // color: 'var(--badge-primary-color, white)', - // borderColor: 'var(--badge-primary-border-color, transparent)' - // }, - // '.badge-warning': { - // backgroundColor: 'var(--badge-warning-background-color, #f59e0b)', - // color: 'var(--badge-warning-color, white)', - // borderColor: 'var(--badge-warning-border-color, transparent)' - // } - }) + plugin(({ addUtilities }) => { + addUtilities(typographyStyles) + }), + plugin(({ addComponents, theme }) => { + addComponents(badgeStyles) }), tailwindcssAnimate, typography, diff --git a/packages/ui/tailwind-utils-config/components/badge.ts b/packages/ui/tailwind-utils-config/components/badge.ts new file mode 100644 index 0000000000..3619d18de0 --- /dev/null +++ b/packages/ui/tailwind-utils-config/components/badge.ts @@ -0,0 +1,79 @@ +import { PluginAPI } from 'tailwindcss/types/config' + +export default { + '.badge': { + border: 'var(--canary-badge-border) solid var(--canary-component-badge-default-border)', + color: 'var(--canary-component-badge-default-text)', + backgroundColor: 'var(--canary-component-badge-default-background)', + padding: 'var(--canary-badge-default-py) var(--canary-badge-default-px)', + gap: 'var(--canary-badge-default-gap)', + height: 'var(--canary-badge-size-default)', + // font: theme!('font.caption.soft'), + + /** + * Variants + */ + '&-neutral': { + color: 'var(--canary-component-badge-neutral-text)', + backgroundColor: 'var(--canary-component-badge-neutral-background)', + borderColor: 'var(--canary-component-badge-neutral-border)' + }, + '&-success': { + color: 'var(--canary-component-badge-success-text)', + backgroundColor: 'var(--canary-component-badge-success-background)', + borderColor: 'var(--canary-component-badge-success-border)' + }, + '&-warning': { + color: 'var(--canary-component-badge-warning-text)', + backgroundColor: 'var(--canary-component-badge-warning-background)', + borderColor: 'var(--canary-component-badge-warning-border)' + }, + '&-danger': { + color: 'var(--canary-component-badge-danger-text)', + backgroundColor: 'var(--canary-component-badge-danger-background)', + borderColor: 'var(--canary-component-badge-danger-border)' + }, + '&-running': { + color: 'var(--canary-component-badge-running-text)', + backgroundColor: 'var(--canary-component-badge-running-background)', + borderColor: 'var(--canary-component-badge-running-border)' + }, + '&-merged': { + color: 'var(--canary-component-badge-merged-text)', + backgroundColor: 'var(--canary-component-badge-merged-background)', + borderColor: 'var(--canary-component-badge-merged-border)' + }, + '&-ai': { + color: 'var(--canary-component-badge-ai-text)', + backgroundImage: `linear-gradient(to right, var(--canary-component-badge-ai-background), var(--canary-component-badge-ai-background)), var(--canary-component-badge-ai-border)`, + backgroundOrigin: 'border-box', + backgroundClip: 'padding-box, border-box', + border: '1px solid transparent' + }, + + /** + * Rounded + */ + + '&-rounded': { + '&-default': { + borderRadius: 'var(--canary-badge-default-radius)' + }, + + '&-full': { + padding: 'var(--canary-badge-default-py) var(--canary-badge-rounded-px)', + borderRadius: 'var(--canary-badge-rounded-radius)' + } + }, + + /** + * Size + */ + + '&-sm': { + height: 'var(--canary-badge-size-sm)', + // font: 'var(--canary-caption-soft)' + '@apply font-caption-soft': '' + } + } +} diff --git a/packages/ui/tailwind-utils-config/components/index.ts b/packages/ui/tailwind-utils-config/components/index.ts new file mode 100644 index 0000000000..789367661f --- /dev/null +++ b/packages/ui/tailwind-utils-config/components/index.ts @@ -0,0 +1 @@ +export { default as badgeStyles } from './badge' diff --git a/packages/ui/tailwind-utils-config/utilities/index.ts b/packages/ui/tailwind-utils-config/utilities/index.ts new file mode 100644 index 0000000000..00761f4b49 --- /dev/null +++ b/packages/ui/tailwind-utils-config/utilities/index.ts @@ -0,0 +1 @@ +export { default as typography } from './typography' diff --git a/packages/ui/tailwind-utils-config/utilities/typography.ts b/packages/ui/tailwind-utils-config/utilities/typography.ts new file mode 100644 index 0000000000..0fa84af4af --- /dev/null +++ b/packages/ui/tailwind-utils-config/utilities/typography.ts @@ -0,0 +1,10 @@ +export default { + '.font': { + '&-caption-soft': { + font: 'var(--canary-caption-soft)' + }, + '&-caption-normal': { + font: 'var(--canary-caption-normal)' + } + } +} From ac3fc52fe1feff3ce471dbba4669d1e6fa0b15be Mon Sep 17 00:00:00 2001 From: Pranesh Date: Tue, 18 Mar 2025 12:16:49 +0530 Subject: [PATCH 4/5] Refactor styles and directory structure --- .../export-tokens-js/build.js | 202 ----- .../export-tokens-js/complete-log.js | 24 - .../export-tokens-js/constants.js | 12 - .../export-tokens-js/sd-file-generators.js | 79 -- .../export-tokens-uni/sd-filters.js | 30 - .../core-design-system/export-tokens/build.js | 175 ---- .../export-tokens/complete-log.js | 24 - .../export-tokens/constants.js | 12 - .../export-tokens/sd-file-generators.js | 79 -- .../export-tokens/sd-filters.js | 30 - packages/core-design-system/package.json | 4 +- .../{export-tokens-uni => scripts}/build.js | 12 +- .../complete-log.js | 0 .../constants.js | 2 +- .../sd-file-generators.js | 6 +- .../sd-filters.js | 0 .../src/styles-esm/breakpoint.ts | 56 +- .../src/styles-esm/colors.ts | 342 +++---- .../src/styles-esm/components.ts | 124 +-- .../core-design-system/src/styles-esm/core.ts | 502 +++++------ ...itness.ts => dark-deuteranopia-gitness.ts} | 823 +++++++++-------- ...arness.ts => dark-deuteranopia-harness.ts} | 823 +++++++++-------- ...ts => dark-dimmer-deuteranopia-gitness.ts} | 797 +++++++++-------- ...ts => dark-dimmer-deuteranopia-harness.ts} | 797 +++++++++-------- ...ktop-gitness.ts => dark-dimmer-gitness.ts} | 797 +++++++++-------- ...ktop-harness.ts => dark-dimmer-harness.ts} | 797 +++++++++-------- ...s.ts => dark-dimmer-protanopia-gitness.ts} | 797 +++++++++-------- ...s.ts => dark-dimmer-protanopia-harness.ts} | 797 +++++++++-------- ...s.ts => dark-dimmer-tritanopia-gitness.ts} | 797 +++++++++-------- ...s.ts => dark-dimmer-tritanopia-harness.ts} | 797 +++++++++-------- ...ark-desktop-gitness.ts => dark-gitness.ts} | 825 +++++++++-------- ...ark-desktop-harness.ts => dark-harness.ts} | 825 +++++++++-------- ...ark-high-contrast-deuteranopia-gitness.ts} | 823 +++++++++-------- ...ark-high-contrast-deuteranopia-harness.ts} | 823 +++++++++-------- ...tness.ts => dark-high-contrast-gitness.ts} | 823 +++++++++-------- ...rness.ts => dark-high-contrast-harness.ts} | 823 +++++++++-------- ... dark-high-contrast-protanopia-gitness.ts} | 823 +++++++++-------- ... dark-high-contrast-protanopia-harness.ts} | 823 +++++++++-------- ... dark-high-contrast-tritanopia-gitness.ts} | 823 +++++++++-------- ... dark-high-contrast-tritanopia-harness.ts} | 823 +++++++++-------- ...-gitness.ts => dark-protanopia-gitness.ts} | 823 +++++++++-------- ...-harness.ts => dark-protanopia-harness.ts} | 823 +++++++++-------- ...-gitness.ts => dark-tritanopia-gitness.ts} | 823 +++++++++-------- ...-harness.ts => dark-tritanopia-harness.ts} | 823 +++++++++-------- .../src/styles-esm/index.ts | 194 ++-- ...tness.ts => light-deuteranopia-gitness.ts} | 813 +++++++++-------- ...rness.ts => light-deuteranopia-harness.ts} | 813 +++++++++-------- ...s => light-dimmer-deuteranopia-gitness.ts} | 833 +++++++++--------- ...s => light-dimmer-deuteranopia-harness.ts} | 833 +++++++++--------- ...top-gitness.ts => light-dimmer-gitness.ts} | 833 +++++++++--------- ...top-harness.ts => light-dimmer-harness.ts} | 833 +++++++++--------- ....ts => light-dimmer-protanopia-gitness.ts} | 833 +++++++++--------- ....ts => light-dimmer-protanopia-harness.ts} | 833 +++++++++--------- ....ts => light-dimmer-tritanopia-gitness.ts} | 833 +++++++++--------- ....ts => light-dimmer-tritanopia-harness.ts} | 833 +++++++++--------- ...ht-desktop-gitness.ts => light-gitness.ts} | 813 +++++++++-------- ...ht-desktop-harness.ts => light-harness.ts} | 813 +++++++++-------- ...ght-high-contrast-deuteranopia-gitness.ts} | 815 +++++++++-------- ...ght-high-contrast-deuteranopia-harness.ts} | 815 +++++++++-------- ...ness.ts => light-high-contrast-gitness.ts} | 815 +++++++++-------- ...ness.ts => light-high-contrast-harness.ts} | 815 +++++++++-------- ...light-high-contrast-protanopia-gitness.ts} | 815 +++++++++-------- ...light-high-contrast-protanopia-harness.ts} | 815 +++++++++-------- ...light-high-contrast-tritanopia-gitness.ts} | 815 +++++++++-------- ...light-high-contrast-tritanopia-harness.ts} | 815 +++++++++-------- ...gitness.ts => light-protanopia-gitness.ts} | 813 +++++++++-------- ...harness.ts => light-protanopia-harness.ts} | 813 +++++++++-------- ...gitness.ts => light-tritanopia-gitness.ts} | 813 +++++++++-------- ...harness.ts => light-tritanopia-harness.ts} | 813 +++++++++-------- .../src/styles/breakpoint.css | 56 +- .../core-design-system/src/styles/colors.css | 342 +++---- .../src/styles/components.css | 124 +-- .../core-design-system/src/styles/core.css | 502 +++++------ .../src/styles/dark-deuteranopia-gitness.css | 492 +++++++++++ .../src/styles/dark-deuteranopia-harness.css | 492 +++++++++++ .../dark-dimmer-deuteranopia-gitness.css | 492 +++++++++++ .../dark-dimmer-deuteranopia-harness.css | 492 +++++++++++ .../src/styles/dark-dimmer-gitness.css | 492 +++++++++++ .../src/styles/dark-dimmer-harness.css | 492 +++++++++++ .../styles/dark-dimmer-protanopia-gitness.css | 492 +++++++++++ .../styles/dark-dimmer-protanopia-harness.css | 492 +++++++++++ .../styles/dark-dimmer-tritanopia-gitness.css | 492 +++++++++++ .../styles/dark-dimmer-tritanopia-harness.css | 492 +++++++++++ .../src/styles/dark-gitness.css | 493 +++++++++++ .../src/styles/dark-harness.css | 493 +++++++++++ ...ark-high-contrast-deuteranopia-gitness.css | 492 +++++++++++ ...ark-high-contrast-deuteranopia-harness.css | 492 +++++++++++ .../src/styles/dark-high-contrast-gitness.css | 492 +++++++++++ .../src/styles/dark-high-contrast-harness.css | 492 +++++++++++ .../dark-high-contrast-protanopia-gitness.css | 492 +++++++++++ .../dark-high-contrast-protanopia-harness.css | 492 +++++++++++ .../dark-high-contrast-tritanopia-gitness.css | 492 +++++++++++ .../dark-high-contrast-tritanopia-harness.css | 492 +++++++++++ .../src/styles/dark-protanopia-gitness.css | 492 +++++++++++ .../src/styles/dark-protanopia-harness.css | 492 +++++++++++ .../src/styles/dark-tritanopia-gitness.css | 492 +++++++++++ .../src/styles/dark-tritanopia-harness.css | 492 +++++++++++ .../core-design-system/src/styles/index.css | 98 +-- .../src/styles/light-deuteranopia-gitness.css | 491 +++++++++++ .../src/styles/light-deuteranopia-harness.css | 491 +++++++++++ .../light-dimmer-deuteranopia-gitness.css | 491 +++++++++++ .../light-dimmer-deuteranopia-harness.css | 491 +++++++++++ .../src/styles/light-dimmer-gitness.css | 491 +++++++++++ .../src/styles/light-dimmer-harness.css | 491 +++++++++++ .../light-dimmer-protanopia-gitness.css | 491 +++++++++++ .../light-dimmer-protanopia-harness.css | 491 +++++++++++ .../light-dimmer-tritanopia-gitness.css | 491 +++++++++++ .../light-dimmer-tritanopia-harness.css | 491 +++++++++++ .../src/styles/light-gitness.css | 491 +++++++++++ .../src/styles/light-harness.css | 491 +++++++++++ ...ght-high-contrast-deuteranopia-gitness.css | 491 +++++++++++ ...ght-high-contrast-deuteranopia-harness.css | 491 +++++++++++ .../styles/light-high-contrast-gitness.css | 491 +++++++++++ .../styles/light-high-contrast-harness.css | 491 +++++++++++ ...light-high-contrast-protanopia-gitness.css | 491 +++++++++++ ...light-high-contrast-protanopia-harness.css | 491 +++++++++++ ...light-high-contrast-tritanopia-gitness.css | 491 +++++++++++ ...light-high-contrast-tritanopia-harness.css | 491 +++++++++++ .../src/styles/light-protanopia-gitness.css | 491 +++++++++++ .../src/styles/light-protanopia-harness.css | 491 +++++++++++ .../src/styles/light-tritanopia-gitness.css | 491 +++++++++++ .../src/styles/light-tritanopia-harness.css | 491 +++++++++++ .../styles/source-dark-desktop-gitness.css | 493 ----------- .../styles/source-dark-desktop-harness.css | 493 ----------- ...urce-dark-deuteranopia-desktop-gitness.css | 492 ----------- ...urce-dark-deuteranopia-desktop-harness.css | 492 ----------- .../source-dark-dimmer-desktop-gitness.css | 492 ----------- .../source-dark-dimmer-desktop-harness.css | 492 ----------- ...rk-dimmer-deuteranopia-desktop-gitness.css | 492 ----------- ...rk-dimmer-deuteranopia-desktop-harness.css | 492 ----------- ...dark-dimmer-protanopia-desktop-gitness.css | 492 ----------- ...dark-dimmer-protanopia-desktop-harness.css | 492 ----------- ...dark-dimmer-tritanopia-desktop-gitness.css | 492 ----------- ...dark-dimmer-tritanopia-desktop-harness.css | 492 ----------- ...rce-dark-high-contrast-desktop-gitness.css | 492 ----------- ...rce-dark-high-contrast-desktop-harness.css | 492 ----------- ...-contrast-deuteranopia-desktop-gitness.css | 492 ----------- ...-contrast-deuteranopia-desktop-harness.css | 492 ----------- ...gh-contrast-protanopia-desktop-gitness.css | 492 ----------- ...gh-contrast-protanopia-desktop-harness.css | 492 ----------- ...gh-contrast-tritanopia-desktop-gitness.css | 492 ----------- ...gh-contrast-tritanopia-desktop-harness.css | 492 ----------- ...source-dark-protanopia-desktop-gitness.css | 492 ----------- ...source-dark-protanopia-desktop-harness.css | 492 ----------- ...source-dark-tritanopia-desktop-gitness.css | 492 ----------- ...source-dark-tritanopia-desktop-harness.css | 492 ----------- .../styles/source-light-desktop-gitness.css | 491 ----------- .../styles/source-light-desktop-harness.css | 491 ----------- ...rce-light-deuteranopia-desktop-gitness.css | 491 ----------- ...rce-light-deuteranopia-desktop-harness.css | 491 ----------- .../source-light-dimmer-desktop-gitness.css | 491 ----------- .../source-light-dimmer-desktop-harness.css | 491 ----------- ...ht-dimmer-deuteranopia-desktop-gitness.css | 491 ----------- ...ht-dimmer-deuteranopia-desktop-harness.css | 491 ----------- ...ight-dimmer-protanopia-desktop-gitness.css | 491 ----------- ...ight-dimmer-protanopia-desktop-harness.css | 491 ----------- ...ight-dimmer-tritanopia-desktop-gitness.css | 491 ----------- ...ight-dimmer-tritanopia-desktop-harness.css | 491 ----------- ...ce-light-high-contrast-desktop-gitness.css | 491 ----------- ...ce-light-high-contrast-desktop-harness.css | 491 ----------- ...-contrast-deuteranopia-desktop-gitness.css | 491 ----------- ...-contrast-deuteranopia-desktop-harness.css | 491 ----------- ...gh-contrast-protanopia-desktop-gitness.css | 491 ----------- ...gh-contrast-protanopia-desktop-harness.css | 491 ----------- ...gh-contrast-tritanopia-desktop-gitness.css | 491 ----------- ...gh-contrast-tritanopia-desktop-harness.css | 491 ----------- ...ource-light-protanopia-desktop-gitness.css | 491 ----------- ...ource-light-protanopia-desktop-harness.css | 491 ----------- ...ource-light-tritanopia-desktop-gitness.css | 491 ----------- ...ource-light-tritanopia-desktop-harness.css | 491 ----------- 170 files changed, 44371 insertions(+), 45084 deletions(-) delete mode 100644 packages/core-design-system/export-tokens-js/build.js delete mode 100644 packages/core-design-system/export-tokens-js/complete-log.js delete mode 100644 packages/core-design-system/export-tokens-js/constants.js delete mode 100644 packages/core-design-system/export-tokens-js/sd-file-generators.js delete mode 100644 packages/core-design-system/export-tokens-uni/sd-filters.js delete mode 100644 packages/core-design-system/export-tokens/build.js delete mode 100644 packages/core-design-system/export-tokens/complete-log.js delete mode 100644 packages/core-design-system/export-tokens/constants.js delete mode 100644 packages/core-design-system/export-tokens/sd-file-generators.js delete mode 100644 packages/core-design-system/export-tokens/sd-filters.js rename packages/core-design-system/{export-tokens-uni => scripts}/build.js (94%) rename packages/core-design-system/{export-tokens-uni => scripts}/complete-log.js (100%) rename packages/core-design-system/{export-tokens-uni => scripts}/constants.js (94%) rename packages/core-design-system/{export-tokens-uni => scripts}/sd-file-generators.js (91%) rename packages/core-design-system/{export-tokens-js => scripts}/sd-filters.js (100%) rename packages/core-design-system/src/styles-esm/{source-dark-deuteranopia-desktop-gitness.ts => dark-deuteranopia-gitness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-dark-deuteranopia-desktop-harness.ts => dark-deuteranopia-harness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-dark-dimmer-deuteranopia-desktop-gitness.ts => dark-dimmer-deuteranopia-gitness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-dark-dimmer-deuteranopia-desktop-harness.ts => dark-dimmer-deuteranopia-harness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-dark-dimmer-desktop-gitness.ts => dark-dimmer-gitness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-dark-dimmer-desktop-harness.ts => dark-dimmer-harness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-dark-dimmer-protanopia-desktop-gitness.ts => dark-dimmer-protanopia-gitness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-dark-dimmer-protanopia-desktop-harness.ts => dark-dimmer-protanopia-harness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-dark-dimmer-tritanopia-desktop-gitness.ts => dark-dimmer-tritanopia-gitness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-dark-dimmer-tritanopia-desktop-harness.ts => dark-dimmer-tritanopia-harness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-dark-desktop-gitness.ts => dark-gitness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-dark-desktop-harness.ts => dark-harness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-dark-high-contrast-deuteranopia-desktop-gitness.ts => dark-high-contrast-deuteranopia-gitness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-dark-high-contrast-deuteranopia-desktop-harness.ts => dark-high-contrast-deuteranopia-harness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-dark-high-contrast-desktop-gitness.ts => dark-high-contrast-gitness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-dark-high-contrast-desktop-harness.ts => dark-high-contrast-harness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-dark-high-contrast-protanopia-desktop-gitness.ts => dark-high-contrast-protanopia-gitness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-dark-high-contrast-protanopia-desktop-harness.ts => dark-high-contrast-protanopia-harness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-dark-high-contrast-tritanopia-desktop-gitness.ts => dark-high-contrast-tritanopia-gitness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-dark-high-contrast-tritanopia-desktop-harness.ts => dark-high-contrast-tritanopia-harness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-dark-protanopia-desktop-gitness.ts => dark-protanopia-gitness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-dark-protanopia-desktop-harness.ts => dark-protanopia-harness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-dark-tritanopia-desktop-gitness.ts => dark-tritanopia-gitness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-dark-tritanopia-desktop-harness.ts => dark-tritanopia-harness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-light-deuteranopia-desktop-gitness.ts => light-deuteranopia-gitness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-light-deuteranopia-desktop-harness.ts => light-deuteranopia-harness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-light-dimmer-deuteranopia-desktop-gitness.ts => light-dimmer-deuteranopia-gitness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-light-dimmer-deuteranopia-desktop-harness.ts => light-dimmer-deuteranopia-harness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-light-dimmer-desktop-gitness.ts => light-dimmer-gitness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-light-dimmer-desktop-harness.ts => light-dimmer-harness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-light-dimmer-protanopia-desktop-gitness.ts => light-dimmer-protanopia-gitness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-light-dimmer-protanopia-desktop-harness.ts => light-dimmer-protanopia-harness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-light-dimmer-tritanopia-desktop-gitness.ts => light-dimmer-tritanopia-gitness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-light-dimmer-tritanopia-desktop-harness.ts => light-dimmer-tritanopia-harness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-light-desktop-gitness.ts => light-gitness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-light-desktop-harness.ts => light-harness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-light-high-contrast-deuteranopia-desktop-gitness.ts => light-high-contrast-deuteranopia-gitness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-light-high-contrast-deuteranopia-desktop-harness.ts => light-high-contrast-deuteranopia-harness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-light-high-contrast-desktop-gitness.ts => light-high-contrast-gitness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-light-high-contrast-desktop-harness.ts => light-high-contrast-harness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-light-high-contrast-protanopia-desktop-gitness.ts => light-high-contrast-protanopia-gitness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-light-high-contrast-protanopia-desktop-harness.ts => light-high-contrast-protanopia-harness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-light-high-contrast-tritanopia-desktop-gitness.ts => light-high-contrast-tritanopia-gitness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-light-high-contrast-tritanopia-desktop-harness.ts => light-high-contrast-tritanopia-harness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-light-protanopia-desktop-gitness.ts => light-protanopia-gitness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-light-protanopia-desktop-harness.ts => light-protanopia-harness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-light-tritanopia-desktop-gitness.ts => light-tritanopia-gitness.ts} (92%) rename packages/core-design-system/src/styles-esm/{source-light-tritanopia-desktop-harness.ts => light-tritanopia-harness.ts} (92%) create mode 100644 packages/core-design-system/src/styles/dark-deuteranopia-gitness.css create mode 100644 packages/core-design-system/src/styles/dark-deuteranopia-harness.css create mode 100644 packages/core-design-system/src/styles/dark-dimmer-deuteranopia-gitness.css create mode 100644 packages/core-design-system/src/styles/dark-dimmer-deuteranopia-harness.css create mode 100644 packages/core-design-system/src/styles/dark-dimmer-gitness.css create mode 100644 packages/core-design-system/src/styles/dark-dimmer-harness.css create mode 100644 packages/core-design-system/src/styles/dark-dimmer-protanopia-gitness.css create mode 100644 packages/core-design-system/src/styles/dark-dimmer-protanopia-harness.css create mode 100644 packages/core-design-system/src/styles/dark-dimmer-tritanopia-gitness.css create mode 100644 packages/core-design-system/src/styles/dark-dimmer-tritanopia-harness.css create mode 100644 packages/core-design-system/src/styles/dark-gitness.css create mode 100644 packages/core-design-system/src/styles/dark-harness.css create mode 100644 packages/core-design-system/src/styles/dark-high-contrast-deuteranopia-gitness.css create mode 100644 packages/core-design-system/src/styles/dark-high-contrast-deuteranopia-harness.css create mode 100644 packages/core-design-system/src/styles/dark-high-contrast-gitness.css create mode 100644 packages/core-design-system/src/styles/dark-high-contrast-harness.css create mode 100644 packages/core-design-system/src/styles/dark-high-contrast-protanopia-gitness.css create mode 100644 packages/core-design-system/src/styles/dark-high-contrast-protanopia-harness.css create mode 100644 packages/core-design-system/src/styles/dark-high-contrast-tritanopia-gitness.css create mode 100644 packages/core-design-system/src/styles/dark-high-contrast-tritanopia-harness.css create mode 100644 packages/core-design-system/src/styles/dark-protanopia-gitness.css create mode 100644 packages/core-design-system/src/styles/dark-protanopia-harness.css create mode 100644 packages/core-design-system/src/styles/dark-tritanopia-gitness.css create mode 100644 packages/core-design-system/src/styles/dark-tritanopia-harness.css create mode 100644 packages/core-design-system/src/styles/light-deuteranopia-gitness.css create mode 100644 packages/core-design-system/src/styles/light-deuteranopia-harness.css create mode 100644 packages/core-design-system/src/styles/light-dimmer-deuteranopia-gitness.css create mode 100644 packages/core-design-system/src/styles/light-dimmer-deuteranopia-harness.css create mode 100644 packages/core-design-system/src/styles/light-dimmer-gitness.css create mode 100644 packages/core-design-system/src/styles/light-dimmer-harness.css create mode 100644 packages/core-design-system/src/styles/light-dimmer-protanopia-gitness.css create mode 100644 packages/core-design-system/src/styles/light-dimmer-protanopia-harness.css create mode 100644 packages/core-design-system/src/styles/light-dimmer-tritanopia-gitness.css create mode 100644 packages/core-design-system/src/styles/light-dimmer-tritanopia-harness.css create mode 100644 packages/core-design-system/src/styles/light-gitness.css create mode 100644 packages/core-design-system/src/styles/light-harness.css create mode 100644 packages/core-design-system/src/styles/light-high-contrast-deuteranopia-gitness.css create mode 100644 packages/core-design-system/src/styles/light-high-contrast-deuteranopia-harness.css create mode 100644 packages/core-design-system/src/styles/light-high-contrast-gitness.css create mode 100644 packages/core-design-system/src/styles/light-high-contrast-harness.css create mode 100644 packages/core-design-system/src/styles/light-high-contrast-protanopia-gitness.css create mode 100644 packages/core-design-system/src/styles/light-high-contrast-protanopia-harness.css create mode 100644 packages/core-design-system/src/styles/light-high-contrast-tritanopia-gitness.css create mode 100644 packages/core-design-system/src/styles/light-high-contrast-tritanopia-harness.css create mode 100644 packages/core-design-system/src/styles/light-protanopia-gitness.css create mode 100644 packages/core-design-system/src/styles/light-protanopia-harness.css create mode 100644 packages/core-design-system/src/styles/light-tritanopia-gitness.css create mode 100644 packages/core-design-system/src/styles/light-tritanopia-harness.css delete mode 100644 packages/core-design-system/src/styles/source-dark-desktop-gitness.css delete mode 100644 packages/core-design-system/src/styles/source-dark-desktop-harness.css delete mode 100644 packages/core-design-system/src/styles/source-dark-deuteranopia-desktop-gitness.css delete mode 100644 packages/core-design-system/src/styles/source-dark-deuteranopia-desktop-harness.css delete mode 100644 packages/core-design-system/src/styles/source-dark-dimmer-desktop-gitness.css delete mode 100644 packages/core-design-system/src/styles/source-dark-dimmer-desktop-harness.css delete mode 100644 packages/core-design-system/src/styles/source-dark-dimmer-deuteranopia-desktop-gitness.css delete mode 100644 packages/core-design-system/src/styles/source-dark-dimmer-deuteranopia-desktop-harness.css delete mode 100644 packages/core-design-system/src/styles/source-dark-dimmer-protanopia-desktop-gitness.css delete mode 100644 packages/core-design-system/src/styles/source-dark-dimmer-protanopia-desktop-harness.css delete mode 100644 packages/core-design-system/src/styles/source-dark-dimmer-tritanopia-desktop-gitness.css delete mode 100644 packages/core-design-system/src/styles/source-dark-dimmer-tritanopia-desktop-harness.css delete mode 100644 packages/core-design-system/src/styles/source-dark-high-contrast-desktop-gitness.css delete mode 100644 packages/core-design-system/src/styles/source-dark-high-contrast-desktop-harness.css delete mode 100644 packages/core-design-system/src/styles/source-dark-high-contrast-deuteranopia-desktop-gitness.css delete mode 100644 packages/core-design-system/src/styles/source-dark-high-contrast-deuteranopia-desktop-harness.css delete mode 100644 packages/core-design-system/src/styles/source-dark-high-contrast-protanopia-desktop-gitness.css delete mode 100644 packages/core-design-system/src/styles/source-dark-high-contrast-protanopia-desktop-harness.css delete mode 100644 packages/core-design-system/src/styles/source-dark-high-contrast-tritanopia-desktop-gitness.css delete mode 100644 packages/core-design-system/src/styles/source-dark-high-contrast-tritanopia-desktop-harness.css delete mode 100644 packages/core-design-system/src/styles/source-dark-protanopia-desktop-gitness.css delete mode 100644 packages/core-design-system/src/styles/source-dark-protanopia-desktop-harness.css delete mode 100644 packages/core-design-system/src/styles/source-dark-tritanopia-desktop-gitness.css delete mode 100644 packages/core-design-system/src/styles/source-dark-tritanopia-desktop-harness.css delete mode 100644 packages/core-design-system/src/styles/source-light-desktop-gitness.css delete mode 100644 packages/core-design-system/src/styles/source-light-desktop-harness.css delete mode 100644 packages/core-design-system/src/styles/source-light-deuteranopia-desktop-gitness.css delete mode 100644 packages/core-design-system/src/styles/source-light-deuteranopia-desktop-harness.css delete mode 100644 packages/core-design-system/src/styles/source-light-dimmer-desktop-gitness.css delete mode 100644 packages/core-design-system/src/styles/source-light-dimmer-desktop-harness.css delete mode 100644 packages/core-design-system/src/styles/source-light-dimmer-deuteranopia-desktop-gitness.css delete mode 100644 packages/core-design-system/src/styles/source-light-dimmer-deuteranopia-desktop-harness.css delete mode 100644 packages/core-design-system/src/styles/source-light-dimmer-protanopia-desktop-gitness.css delete mode 100644 packages/core-design-system/src/styles/source-light-dimmer-protanopia-desktop-harness.css delete mode 100644 packages/core-design-system/src/styles/source-light-dimmer-tritanopia-desktop-gitness.css delete mode 100644 packages/core-design-system/src/styles/source-light-dimmer-tritanopia-desktop-harness.css delete mode 100644 packages/core-design-system/src/styles/source-light-high-contrast-desktop-gitness.css delete mode 100644 packages/core-design-system/src/styles/source-light-high-contrast-desktop-harness.css delete mode 100644 packages/core-design-system/src/styles/source-light-high-contrast-deuteranopia-desktop-gitness.css delete mode 100644 packages/core-design-system/src/styles/source-light-high-contrast-deuteranopia-desktop-harness.css delete mode 100644 packages/core-design-system/src/styles/source-light-high-contrast-protanopia-desktop-gitness.css delete mode 100644 packages/core-design-system/src/styles/source-light-high-contrast-protanopia-desktop-harness.css delete mode 100644 packages/core-design-system/src/styles/source-light-high-contrast-tritanopia-desktop-gitness.css delete mode 100644 packages/core-design-system/src/styles/source-light-high-contrast-tritanopia-desktop-harness.css delete mode 100644 packages/core-design-system/src/styles/source-light-protanopia-desktop-gitness.css delete mode 100644 packages/core-design-system/src/styles/source-light-protanopia-desktop-harness.css delete mode 100644 packages/core-design-system/src/styles/source-light-tritanopia-desktop-gitness.css delete mode 100644 packages/core-design-system/src/styles/source-light-tritanopia-desktop-harness.css diff --git a/packages/core-design-system/export-tokens-js/build.js b/packages/core-design-system/export-tokens-js/build.js deleted file mode 100644 index fdd4a5422f..0000000000 --- a/packages/core-design-system/export-tokens-js/build.js +++ /dev/null @@ -1,202 +0,0 @@ -import fs from 'node:fs/promises' - -import { permutateThemes, register } from '@tokens-studio/sd-transforms' -import StyleDictionary from 'style-dictionary' -import { getReferences, usesReferences } from 'style-dictionary/utils' - -import { harnessLog } from './complete-log.js' -import { DESIGN_SYSTEM_PREFIX, STYLE_FILE_PATH } from './constants.js' -import { generateCoreFiles, generateThemeFiles } from './sd-file-generators.js' - -register(StyleDictionary) - -async function run() { - const $themes = JSON.parse(await fs.readFile('design-tokens/$themes.json')) - const themes = permutateThemes($themes) - // collect all tokensets for all themes and dedupe - const tokensets = [...new Set(Object.values(themes).reduce((acc, sets) => [...acc, ...sets], []))] - - // figure out which tokensets are theme-specific - // this is determined by checking if a certain tokenset is used for EVERY theme dimension variant - // if it is, then it is not theme-specific - const themeableSets = tokensets.filter(set => { - return !Object.values(themes).every(sets => sets.includes(set)) - }) - - const configs = Object.entries(themes).map(([theme, sets]) => { - return { - source: sets.map(tokenset => `design-tokens/${tokenset}.json`), - preprocessors: ['tokens-studio'], - platforms: { - js: { - transformGroup: 'tokens-studio', - prefix: DESIGN_SYSTEM_PREFIX, - options: { - fileHeader: () => { - return [ - 'Harness Design System', - 'Generated style tokens - DO NOT EDIT DIRECTLY', - `Generated on ${new Date().toUTCString()}`, - 'Copyright (c) Harness.' - ] - } - }, - transforms: ['name/kebab', 'attribute/themeable', 'ts/transform/alpha'], - files: [ - // core tokens (colors, typography, dimensions, components) - ...generateCoreFiles(), - // semantic tokens, e.g. for application developer - ...generateThemeFiles(theme) - ] - } - } - } - }) - - for (const cfg of configs) { - const sd = new StyleDictionary(cfg, { - // verbosity: 'verbose' - }) - - /** - * This transform checks for each token whether that token's value could change - * due to Tokens Studio theming. - * Any tokenset from Tokens Studio marked as "enabled" in the $themes.json is considered - * a set in which any token could change if the theme changes. - * Any token that is inside such a set or is a reference with a token in that reference chain - * that is inside such a set, is considered "themeable", - * which means it could change by theme switching. - * - * This metadata is applied to the token so we can use it as a way of filtering outputs - * later in the "format" stage. - */ - sd.registerTransform({ - name: 'attribute/themeable', - type: 'attribute', - transform: token => { - function isPartOfEnabledSet(token) { - const set = token.filePath.replace(/^design-tokens\//g, '').replace(/.json$/g, '') - return themeableSets.includes(set) - } - - // Set token to themeable if it's part of an enabled set - if (isPartOfEnabledSet(token)) { - return { - themeable: true - } - } - - // Set token to themeable if it's using a reference and inside the reference chain - // any one of them is from a themeable set - if (usesReferences(token.original.$value)) { - const refs = getReferences(token.original.$value, sd.tokens) - - if (refs.some(ref => isPartOfEnabledSet(ref))) { - return { - themeable: true - } - } - } - } - }) - - sd.registerTransform({ - name: 'ts/transform/alpha', - type: 'value', - filter: prop => { - return ( - prop.$extensions?.['studio.tokens']?.modify?.type === 'alpha' && - prop.$extensions?.['studio.tokens']?.modify?.space === 'lch' - ) - }, - transitive: true, - transform: prop => { - const baseColor = prop.original.$value.replace(/[{}]/g, '').replace(/\./g, '-') - const alphaValue = prop.$extensions['studio.tokens'].modify.value - return `lch(from var(--${DESIGN_SYSTEM_PREFIX}-${baseColor}) l c h / ${alphaValue})` - } - }) - - await sd.cleanAllPlatforms() - await sd.buildAllPlatforms() - } - - console.log('\n\x1b[1m\x1b[32m%s\x1b[0m', '✔︎ Generated style tokens successfully!') - - // Create index.ts that imports all generated files - await createIndexFile() -} - -async function createIndexFile() { - console.log('\n\x1b[34mCreating styles/index.css import file...\x1b[0m') - - // Get list of all JS files - const styleValueFiles = (await fs.readdir(STYLE_FILE_PATH.DESIGN_SYSTEM)) - .filter(file => file.endsWith('.ts') && file !== 'index.ts') - .sort() - - // Organize files by type - const coreFiles = styleValueFiles.filter(file => !file.startsWith('source-')) - const darkFiles = styleValueFiles.filter(file => file.includes('-dark-')) - const lightFiles = styleValueFiles.filter(file => file.includes('-light-')) - - console.log('\n=== Theme File Summary ===') - console.table({ - 'Dark Theme Files': { count: darkFiles.length }, - 'Light Theme Files': { count: lightFiles.length } - }) - console.log('\n') - - // Generate content - const content = `/** - * Harness Design System - * DO NOT UPDATE IT MANUALLY - * Generated on ${new Date().toUTCString()} - */ - - /* Theme files - Combined */ -export const designSystemThemeMap = { -${[...darkFiles, ...lightFiles] - .map(file => { - const name = file.replace('.ts', '') - return `'${name}': '${name}',` - }) - .join('\n')} -} - -/* Core tokens */ -${coreFiles - .map(file => { - const fileName = file.replace('.ts', '') - const name = fileName.replace(/-./g, x => x[1].toUpperCase()) - return `export { default as ${name} } from './${fileName}';` - }) - .join('\n')} - -/* Theme files - Dark */ -${darkFiles - .map(file => { - const fileName = file.replace('.ts', '') - const name = fileName.replace(/-./g, x => x[1].toUpperCase()) - return `export { default as ${name} } from './${fileName}';` - }) - .join('\n')} - -/* Theme files - Light */ -${lightFiles - .map(file => { - const fileName = file.replace('.ts', '') - const name = fileName.replace(/-./g, x => x[1].toUpperCase()) - return `export { default as ${name} } from './${fileName}';` - }) - .join('\n')}; -` - - // Write file - await fs.writeFile(STYLE_FILE_PATH.INDEX, content) - - console.log('\n\x1b[1m\x1b[32m%s\x1b[0m', `✔︎ Created ${STYLE_FILE_PATH.INDEX} with imports to all token files`) - harnessLog() -} - -run() diff --git a/packages/core-design-system/export-tokens-js/complete-log.js b/packages/core-design-system/export-tokens-js/complete-log.js deleted file mode 100644 index 7710379e40..0000000000 --- a/packages/core-design-system/export-tokens-js/complete-log.js +++ /dev/null @@ -1,24 +0,0 @@ -import figlet from 'figlet' -import { summer } from 'gradient-string' - -export function harnessLog() { - console.log('\n') - figlet( - 'Harness Design Values!!', - { - font: 'Big', - horizontalLayout: 'default', - verticalLayout: 'default', - width: 120, - whitespaceBreak: true - }, - function (err, data) { - if (err) { - console.log('Something went wrong...') - console.dir(err) - return - } - console.log(summer(data)) - } - ) -} diff --git a/packages/core-design-system/export-tokens-js/constants.js b/packages/core-design-system/export-tokens-js/constants.js deleted file mode 100644 index c81254c10b..0000000000 --- a/packages/core-design-system/export-tokens-js/constants.js +++ /dev/null @@ -1,12 +0,0 @@ -const DESIGN_SYSTEM_ROOT = 'src/styles-esm' - -export const STYLE_FILE_PATH = { - DESIGN_SYSTEM: DESIGN_SYSTEM_ROOT, - INDEX: `${DESIGN_SYSTEM_ROOT}/index.ts`, - CORE: `${DESIGN_SYSTEM_ROOT}/core.ts`, - COLORS: `${DESIGN_SYSTEM_ROOT}/colors.ts`, - BREAKPOINT: `${DESIGN_SYSTEM_ROOT}/breakpoint.ts`, - COMPONENTS: `${DESIGN_SYSTEM_ROOT}/components.ts` -} - -export const DESIGN_SYSTEM_PREFIX = 'canary' diff --git a/packages/core-design-system/export-tokens-js/sd-file-generators.js b/packages/core-design-system/export-tokens-js/sd-file-generators.js deleted file mode 100644 index 732dc5992a..0000000000 --- a/packages/core-design-system/export-tokens-js/sd-file-generators.js +++ /dev/null @@ -1,79 +0,0 @@ -import { STYLE_FILE_PATH } from './constants.js' -import { breakpointFilter, componentsFilter, coreFilter, lchColorsFilter, semanticFilter } from './sd-filters.js' - -const format = 'javascript/esm' - -// ✨ Building core tokens -export const generateCoreFiles = () => [ - { - destination: STYLE_FILE_PATH.CORE, - format, - filter: coreFilter, - options: { - outputReferences: true - } - }, - { - destination: STYLE_FILE_PATH.COLORS, - format, - filter: lchColorsFilter, - options: { - outputReferences: true - } - }, - { - destination: STYLE_FILE_PATH.BREAKPOINT, - format, - filter: breakpointFilter, - options: { - outputReferences: true - } - }, - { - destination: STYLE_FILE_PATH.COMPONENTS, - format, - filter: componentsFilter, - options: { - outputReferences: true - } - } -] - -// ✨ Building theme-specific tokens -export const generateThemeFiles = theme => { - const filesArr = [] - // theme-specific outputs - filesArr.push({ - format, - filter: semanticFilter(true), - destination: `${STYLE_FILE_PATH.DESIGN_SYSTEM}/${theme.toLowerCase()}.ts`, - options: { - outputReferences: token => { - // ADD REFERENCE ONLY TO NON-ALPHA TOKENS, ALPHA TOKENS ARE TRANSFORMED AND REFERENCED MANUALLY - return token?.$extensions?.['studio.tokens']?.modify?.type !== 'alpha' - }, - selector: `.${theme.toLowerCase()}` - } - }) - return filesArr -} - -// for each component (currently only button), filter those specific component tokens and output them -// to the component folder where the component source code will live -// export const generateComponentFiles = components => { -// const filesArr = [] - -// for (const comp of components) { -// filesArr.push({ -// format, -// filter: componentFilter(comp, true), -// options: { -// // since these will be used in ShadowDOM -// selector: ':host', -// outputReferences: outputReferencesTransformed -// }, -// destination: `components/${comp}/${comp}.css` -// }) -// } -// return filesArr -// } diff --git a/packages/core-design-system/export-tokens-uni/sd-filters.js b/packages/core-design-system/export-tokens-uni/sd-filters.js deleted file mode 100644 index b0f2b3635f..0000000000 --- a/packages/core-design-system/export-tokens-uni/sd-filters.js +++ /dev/null @@ -1,30 +0,0 @@ -/** - * filters only tokens originating from core folder, except colors.json - * All the colors will be updated manually. - * 🚨 TODO: UPDATE THE COLORS FILE NAME HERE 🚨 - * */ -// && !token.filePath.startsWith('design-tokens/core/colors.json') -export const coreFilter = token => - token.filePath.startsWith('design-tokens/core/') && !token.filePath.startsWith('design-tokens/core/colors_') - -export const lchColorsFilter = token => - token.filePath.startsWith('design-tokens/core/') && token.filePath.startsWith('design-tokens/core/colors_lch') - -// filters only tokens originating from breakpoint folder -export const breakpointFilter = token => token.filePath.startsWith('design-tokens/breakpoint/') - -// filters only tokens originating from components folder -export const componentsFilter = token => token.filePath.startsWith('design-tokens/components/') - -// filters only tokens originating from semantic sets (not core, not components) and also check themeable or not -export const semanticFilter = - (themeable = false) => - token => { - const themeDimensions = ['mode', 'brand'] - const tokenThemable = Boolean(token.attributes.themeable) - // return true; - return ( - themeable === tokenThemable && - [...themeDimensions].some(cat => token.filePath.startsWith(`design-tokens/${cat}/`)) - ) - } diff --git a/packages/core-design-system/export-tokens/build.js b/packages/core-design-system/export-tokens/build.js deleted file mode 100644 index 76b566a9a2..0000000000 --- a/packages/core-design-system/export-tokens/build.js +++ /dev/null @@ -1,175 +0,0 @@ -import fs from 'node:fs/promises' - -import { permutateThemes, register } from '@tokens-studio/sd-transforms' -import StyleDictionary from 'style-dictionary' -import { getReferences, usesReferences } from 'style-dictionary/utils' - -import { harnessLog } from './complete-log.js' -import { DESIGN_SYSTEM_PREFIX, STYLE_FILE_PATH } from './constants.js' -import { generateCoreFiles, generateThemeFiles } from './sd-file-generators.js' - -register(StyleDictionary) - -async function run() { - const $themes = JSON.parse(await fs.readFile('design-tokens/$themes.json')) - const themes = permutateThemes($themes) - // collect all tokensets for all themes and dedupe - const tokensets = [...new Set(Object.values(themes).reduce((acc, sets) => [...acc, ...sets], []))] - - // figure out which tokensets are theme-specific - // this is determined by checking if a certain tokenset is used for EVERY theme dimension variant - // if it is, then it is not theme-specific - const themeableSets = tokensets.filter(set => { - return !Object.values(themes).every(sets => sets.includes(set)) - }) - - const configs = Object.entries(themes).map(([theme, sets]) => { - return { - source: sets.map(tokenset => `design-tokens/${tokenset}.json`), - preprocessors: ['tokens-studio'], - platforms: { - css: { - transformGroup: 'tokens-studio', - prefix: DESIGN_SYSTEM_PREFIX, - options: { - fileHeader: () => { - return [ - 'Harness Design System', - 'Generated style tokens - DO NOT EDIT DIRECTLY', - `Generated on ${new Date().toUTCString()}`, - 'Copyright (c) Harness.' - ] - } - }, - transforms: ['name/kebab', 'attribute/themeable', 'ts/transform/alpha'], - files: [ - // core tokens (colors, typography, dimensions, components) - ...generateCoreFiles(), - // semantic tokens, e.g. for application developer - ...generateThemeFiles(theme) - ] - } - } - } - }) - - for (const cfg of configs) { - const sd = new StyleDictionary(cfg, { - // verbosity: 'verbose' - }) - - /** - * This transform checks for each token whether that token's value could change - * due to Tokens Studio theming. - * Any tokenset from Tokens Studio marked as "enabled" in the $themes.json is considered - * a set in which any token could change if the theme changes. - * Any token that is inside such a set or is a reference with a token in that reference chain - * that is inside such a set, is considered "themeable", - * which means it could change by theme switching. - * - * This metadata is applied to the token so we can use it as a way of filtering outputs - * later in the "format" stage. - */ - sd.registerTransform({ - name: 'attribute/themeable', - type: 'attribute', - transform: token => { - function isPartOfEnabledSet(token) { - const set = token.filePath.replace(/^design-tokens\//g, '').replace(/.json$/g, '') - return themeableSets.includes(set) - } - - // Set token to themeable if it's part of an enabled set - if (isPartOfEnabledSet(token)) { - return { - themeable: true - } - } - - // Set token to themeable if it's using a reference and inside the reference chain - // any one of them is from a themeable set - if (usesReferences(token.original.$value)) { - const refs = getReferences(token.original.$value, sd.tokens) - - if (refs.some(ref => isPartOfEnabledSet(ref))) { - return { - themeable: true - } - } - } - } - }) - - sd.registerTransform({ - name: 'ts/transform/alpha', - type: 'value', - filter: prop => { - return ( - prop.$extensions?.['studio.tokens']?.modify?.type === 'alpha' && - prop.$extensions?.['studio.tokens']?.modify?.space === 'lch' - ) - }, - transitive: true, - transform: prop => { - const baseColor = prop.original.$value.replace(/[{}]/g, '').replace(/\./g, '-') - const alphaValue = prop.$extensions['studio.tokens'].modify.value - return `lch(from var(--${DESIGN_SYSTEM_PREFIX}-${baseColor}) l c h / ${alphaValue})` - } - }) - - await sd.cleanAllPlatforms() - await sd.buildAllPlatforms() - } - - console.log('\n\x1b[1m\x1b[32m%s\x1b[0m', '✔︎ Generated style tokens successfully!') - - // Create index.css that imports all generated files - await createIndexFile() -} - -async function createIndexFile() { - console.log('\n\x1b[34mCreating styles/index.css import file...\x1b[0m') - - // Get list of all CSS files - const cssFiles = (await fs.readdir(STYLE_FILE_PATH.DESIGN_SYSTEM)) - .filter(file => file.endsWith('.css') && file !== 'index.css') - .sort() - - // Organize files by type - const coreFiles = cssFiles.filter(file => !file.startsWith('source-')) - const darkFiles = cssFiles.filter(file => file.includes('-dark-')) - const lightFiles = cssFiles.filter(file => file.includes('-light-')) - - console.log('\n=== Theme File Summary ===') - console.table({ - 'Dark Theme Files': { count: darkFiles.length }, - 'Light Theme Files': { count: lightFiles.length } - }) - console.log('\n') - - // Generate content - const content = `/** - * Harness Design System - * Main stylesheet importing all token files - * DO NOT UPDATE IT MANUALLY - * Generated on ${new Date().toUTCString()} - */ - -/* Core tokens */ -${coreFiles.map(file => `@import './${file}';`).join('\n')} - -/* Theme files - Dark */ -${darkFiles.map(file => `@import './${file}';`).join('\n')} - -/* Theme files - Light */ -${lightFiles.map(file => `@import './${file}';`).join('\n')}; -` - - // Write file - await fs.writeFile(STYLE_FILE_PATH.INDEX, content) - - console.log('\n\x1b[1m\x1b[32m%s\x1b[0m', `✔︎ Created ${STYLE_FILE_PATH.INDEX} with imports to all token files`) - harnessLog() -} - -run() diff --git a/packages/core-design-system/export-tokens/complete-log.js b/packages/core-design-system/export-tokens/complete-log.js deleted file mode 100644 index ebb1f5a346..0000000000 --- a/packages/core-design-system/export-tokens/complete-log.js +++ /dev/null @@ -1,24 +0,0 @@ -import figlet from 'figlet' -import { summer } from 'gradient-string' - -export function harnessLog() { - console.log('\n') - figlet( - 'Harness Design System!!', - { - font: 'Big', - horizontalLayout: 'default', - verticalLayout: 'default', - width: 120, - whitespaceBreak: true - }, - function (err, data) { - if (err) { - console.log('Something went wrong...') - console.dir(err) - return - } - console.log(summer(data)) - } - ) -} diff --git a/packages/core-design-system/export-tokens/constants.js b/packages/core-design-system/export-tokens/constants.js deleted file mode 100644 index 3aae965a3b..0000000000 --- a/packages/core-design-system/export-tokens/constants.js +++ /dev/null @@ -1,12 +0,0 @@ -const DESIGN_SYSTEM_ROOT = 'src/styles' - -export const STYLE_FILE_PATH = { - DESIGN_SYSTEM: DESIGN_SYSTEM_ROOT, - INDEX: `${DESIGN_SYSTEM_ROOT}/index.css`, - CORE: `${DESIGN_SYSTEM_ROOT}/core.css`, - COLORS: `${DESIGN_SYSTEM_ROOT}/colors.css`, - BREAKPOINT: `${DESIGN_SYSTEM_ROOT}/breakpoint.css`, - COMPONENTS: `${DESIGN_SYSTEM_ROOT}/components.css` -} - -export const DESIGN_SYSTEM_PREFIX = 'canary' diff --git a/packages/core-design-system/export-tokens/sd-file-generators.js b/packages/core-design-system/export-tokens/sd-file-generators.js deleted file mode 100644 index 2ad2b24131..0000000000 --- a/packages/core-design-system/export-tokens/sd-file-generators.js +++ /dev/null @@ -1,79 +0,0 @@ -import { STYLE_FILE_PATH } from './constants.js' -import { breakpointFilter, componentsFilter, coreFilter, lchColorsFilter, semanticFilter } from './sd-filters.js' - -const format = 'css/variables' - -// ✨ Building core tokens -export const generateCoreFiles = () => [ - { - destination: STYLE_FILE_PATH.CORE, - format, - filter: coreFilter, - options: { - outputReferences: true - } - }, - { - destination: STYLE_FILE_PATH.COLORS, - format, - filter: lchColorsFilter, - options: { - outputReferences: true - } - }, - { - destination: STYLE_FILE_PATH.BREAKPOINT, - format, - filter: breakpointFilter, - options: { - outputReferences: true - } - }, - { - destination: STYLE_FILE_PATH.COMPONENTS, - format, - filter: componentsFilter, - options: { - outputReferences: true - } - } -] - -// ✨ Building theme-specific tokens -export const generateThemeFiles = theme => { - const filesArr = [] - // theme-specific outputs - filesArr.push({ - format, - filter: semanticFilter(true), - destination: `${STYLE_FILE_PATH.DESIGN_SYSTEM}/${theme.toLowerCase()}.css`, - options: { - outputReferences: token => { - // ADD REFERENCE ONLY TO NON-ALPHA TOKENS, ALPHA TOKENS ARE TRANSFORMED AND REFERENCED MANUALLY - return token?.$extensions?.['studio.tokens']?.modify?.type !== 'alpha' - }, - selector: `.${theme.toLowerCase()}` - } - }) - return filesArr -} - -// for each component (currently only button), filter those specific component tokens and output them -// to the component folder where the component source code will live -// export const generateComponentFiles = components => { -// const filesArr = [] - -// for (const comp of components) { -// filesArr.push({ -// format, -// filter: componentFilter(comp, true), -// options: { -// // since these will be used in ShadowDOM -// selector: ':host', -// outputReferences: outputReferencesTransformed -// }, -// destination: `components/${comp}/${comp}.css` -// }) -// } -// return filesArr -// } diff --git a/packages/core-design-system/export-tokens/sd-filters.js b/packages/core-design-system/export-tokens/sd-filters.js deleted file mode 100644 index b0f2b3635f..0000000000 --- a/packages/core-design-system/export-tokens/sd-filters.js +++ /dev/null @@ -1,30 +0,0 @@ -/** - * filters only tokens originating from core folder, except colors.json - * All the colors will be updated manually. - * 🚨 TODO: UPDATE THE COLORS FILE NAME HERE 🚨 - * */ -// && !token.filePath.startsWith('design-tokens/core/colors.json') -export const coreFilter = token => - token.filePath.startsWith('design-tokens/core/') && !token.filePath.startsWith('design-tokens/core/colors_') - -export const lchColorsFilter = token => - token.filePath.startsWith('design-tokens/core/') && token.filePath.startsWith('design-tokens/core/colors_lch') - -// filters only tokens originating from breakpoint folder -export const breakpointFilter = token => token.filePath.startsWith('design-tokens/breakpoint/') - -// filters only tokens originating from components folder -export const componentsFilter = token => token.filePath.startsWith('design-tokens/components/') - -// filters only tokens originating from semantic sets (not core, not components) and also check themeable or not -export const semanticFilter = - (themeable = false) => - token => { - const themeDimensions = ['mode', 'brand'] - const tokenThemable = Boolean(token.attributes.themeable) - // return true; - return ( - themeable === tokenThemable && - [...themeDimensions].some(cat => token.filePath.startsWith(`design-tokens/${cat}/`)) - ) - } diff --git a/packages/core-design-system/package.json b/packages/core-design-system/package.json index b8ddcd3d06..401e1ef812 100644 --- a/packages/core-design-system/package.json +++ b/packages/core-design-system/package.json @@ -11,8 +11,8 @@ "scripts": { "build:styles": "rm -rf src/styles/design-system && node export-tokens/build.js", "build:styles:esm": "rm -rf src/styles/design-system && node export-tokens-js/build.js", - "build": " pnpm clean && npm run build:styles && npm run build:styles:esm", - "build:uni": " pnpm clean && node export-tokens-uni/build.js", + "build": " pnpm clean && pnpm build:uni", + "build:uni": "node scripts/build.js", "clean": "rimraf ./src/styles && rimraf ./src/styles-esm" }, "keywords": [ diff --git a/packages/core-design-system/export-tokens-uni/build.js b/packages/core-design-system/scripts/build.js similarity index 94% rename from packages/core-design-system/export-tokens-uni/build.js rename to packages/core-design-system/scripts/build.js index 6159206b33..cc4b44378b 100644 --- a/packages/core-design-system/export-tokens-uni/build.js +++ b/packages/core-design-system/scripts/build.js @@ -160,9 +160,9 @@ async function createIndexFile() { .sort() // Organize files by type - const coreFiles = cssFiles.filter(file => !file.startsWith('source-')) - const darkFiles = cssFiles.filter(file => file.includes('-dark-')) - const lightFiles = cssFiles.filter(file => file.includes('-light-')) + const coreFiles = cssFiles.filter(file => !file.startsWith('dark-') && !file.startsWith('light-')) + const darkFiles = cssFiles.filter(file => file.startsWith('dark-')) + const lightFiles = cssFiles.filter(file => file.startsWith('light-')) console.log('\n=== Theme File Summary (css) ===') console.table({ @@ -207,9 +207,9 @@ async function createEsmIndexFile() { .sort() // Organize files by type - const coreFiles = styleValueFiles.filter(file => !file.startsWith('source-')) - const darkFiles = styleValueFiles.filter(file => file.includes('-dark-')) - const lightFiles = styleValueFiles.filter(file => file.includes('-light-')) + const coreFiles = styleValueFiles.filter(file => !file.startsWith('dark-') && !file.startsWith('light-')) + const darkFiles = styleValueFiles.filter(file => file.startsWith('dark-')) + const lightFiles = styleValueFiles.filter(file => file.startsWith('light-')) console.log('\n=== Theme File Summary (ts) ===') console.table({ diff --git a/packages/core-design-system/export-tokens-uni/complete-log.js b/packages/core-design-system/scripts/complete-log.js similarity index 100% rename from packages/core-design-system/export-tokens-uni/complete-log.js rename to packages/core-design-system/scripts/complete-log.js diff --git a/packages/core-design-system/export-tokens-uni/constants.js b/packages/core-design-system/scripts/constants.js similarity index 94% rename from packages/core-design-system/export-tokens-uni/constants.js rename to packages/core-design-system/scripts/constants.js index 31f5a3c04b..9710f319d4 100644 --- a/packages/core-design-system/export-tokens-uni/constants.js +++ b/packages/core-design-system/scripts/constants.js @@ -3,7 +3,7 @@ import { formats } from 'style-dictionary/enums' export const DESIGN_SYSTEM_ROOT = 'src/styles' export const DESIGN_SYSTEM_ROOT_ESM = 'src/styles-esm' -export const DESIGN_SYSTEM_PREFIX = 'canary' +export const DESIGN_SYSTEM_PREFIX = 'cn' export const STYLE_BUILD_FORMATS = { CSS_VARIABLES: formats.cssVariables, diff --git a/packages/core-design-system/export-tokens-uni/sd-file-generators.js b/packages/core-design-system/scripts/sd-file-generators.js similarity index 91% rename from packages/core-design-system/export-tokens-uni/sd-file-generators.js rename to packages/core-design-system/scripts/sd-file-generators.js index 8d094a8d73..94990f7704 100644 --- a/packages/core-design-system/export-tokens-uni/sd-file-generators.js +++ b/packages/core-design-system/scripts/sd-file-generators.js @@ -41,17 +41,19 @@ export const generateCoreFiles = ({ destination, type, format }) => [ // ✨ Building theme-specific tokens export const generateThemeFiles = ({ destination, type, theme, format }) => { const filesArr = [] + const themeLower = theme.toLowerCase().replace(/(source-|desktop-)/g, '') + // theme-specific outputs filesArr.push({ format, filter: semanticFilter(true), - destination: `${destination}/${theme.toLowerCase()}.${type}`, + destination: `${destination}/${themeLower.toLowerCase()}.${type}`, options: { outputReferences: token => { // ADD REFERENCE ONLY TO NON-ALPHA TOKENS, ALPHA TOKENS ARE TRANSFORMED AND REFERENCED MANUALLY return token?.$extensions?.['studio.tokens']?.modify?.type !== 'alpha' }, - selector: `.${theme.toLowerCase()}` + selector: `.${themeLower.toLowerCase()}` } }) return filesArr diff --git a/packages/core-design-system/export-tokens-js/sd-filters.js b/packages/core-design-system/scripts/sd-filters.js similarity index 100% rename from packages/core-design-system/export-tokens-js/sd-filters.js rename to packages/core-design-system/scripts/sd-filters.js diff --git a/packages/core-design-system/src/styles-esm/breakpoint.ts b/packages/core-design-system/src/styles-esm/breakpoint.ts index ab93353388..be40814225 100644 --- a/packages/core-design-system/src/styles-esm/breakpoint.ts +++ b/packages/core-design-system/src/styles-esm/breakpoint.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:32 GMT + * Generated on Tue, 18 Mar 2025 06:44:26 GMT * Copyright (c) Harness. */ @@ -26,7 +26,7 @@ export default { }, $description: "Article main heading.", }, - name: "canary-component-markdown-editor-title-h1", + name: "cn-component-markdown-editor-title-h1", attributes: { category: "component", type: "markdown-editor", @@ -52,7 +52,7 @@ export default { }, $description: "Article section heading.", }, - name: "canary-component-markdown-editor-title-h2", + name: "cn-component-markdown-editor-title-h2", attributes: { category: "component", type: "markdown-editor", @@ -78,7 +78,7 @@ export default { }, $description: "Article subsection heading.", }, - name: "canary-component-markdown-editor-title-h3", + name: "cn-component-markdown-editor-title-h3", attributes: { category: "component", type: "markdown-editor", @@ -106,7 +106,7 @@ export default { }, $description: "Article introduction paragraph.", }, - name: "canary-component-markdown-editor-content-lead", + name: "cn-component-markdown-editor-content-lead", attributes: { category: "component", type: "markdown-editor", @@ -132,7 +132,7 @@ export default { }, $description: "Article paragraph text.", }, - name: "canary-component-markdown-editor-content-paragraph", + name: "cn-component-markdown-editor-content-paragraph", attributes: { category: "component", type: "markdown-editor", @@ -158,7 +158,7 @@ export default { }, $description: "Emphasized paragraph text.", }, - name: "canary-component-markdown-editor-content-emphasized", + name: "cn-component-markdown-editor-content-emphasized", attributes: { category: "component", type: "markdown-editor", @@ -180,7 +180,7 @@ export default { $type: "number", $value: "1440", }, - name: "canary-breakpoint-viewport", + name: "cn-breakpoint-viewport", attributes: { category: "breakpoint", type: "viewport", @@ -196,7 +196,7 @@ export default { $type: "number", $value: "1080", }, - name: "canary-breakpoint-viewport-min", + name: "cn-breakpoint-viewport-min", attributes: { category: "breakpoint", type: "viewportMin", @@ -212,7 +212,7 @@ export default { $type: "number", $value: "1919", }, - name: "canary-breakpoint-viewport-max", + name: "cn-breakpoint-viewport-max", attributes: { category: "breakpoint", type: "viewportMax", @@ -228,7 +228,7 @@ export default { $type: "number", $value: "{spacing.8}", }, - name: "canary-breakpoint-container", + name: "cn-breakpoint-container", attributes: { category: "breakpoint", type: "container", @@ -255,7 +255,7 @@ export default { }, $description: "Large headlines with extra emphasis.", }, - name: "canary-heading-hero", + name: "cn-heading-hero", attributes: { category: "heading", type: "hero", @@ -280,7 +280,7 @@ export default { }, $description: "Large headlines, hero sections.", }, - name: "canary-heading-section", + name: "cn-heading-section", attributes: { category: "heading", type: "section", @@ -304,7 +304,7 @@ export default { }, $description: "Emphasized section headers.", }, - name: "canary-heading-subsection", + name: "cn-heading-subsection", attributes: { category: "heading", type: "subsection", @@ -328,7 +328,7 @@ export default { }, $description: "Dialog headers.", }, - name: "canary-heading-dialog", + name: "cn-heading-dialog", attributes: { category: "heading", type: "dialog", @@ -352,7 +352,7 @@ export default { }, $description: "Section headers.", }, - name: "canary-heading-base", + name: "cn-heading-base", attributes: { category: "heading", type: "base", @@ -376,7 +376,7 @@ export default { }, $description: "Section headers.", }, - name: "canary-heading-small", + name: "cn-heading-small", attributes: { category: "heading", type: "small", @@ -402,7 +402,7 @@ export default { }, $description: "Primary text style for UI and content.", }, - name: "canary-body-normal", + name: "cn-body-normal", attributes: { category: "body", type: "normal", @@ -426,7 +426,7 @@ export default { }, $description: "Primary text style for UI and content.", }, - name: "canary-body-strong", + name: "cn-body-strong", attributes: { category: "body", type: "strong", @@ -450,7 +450,7 @@ export default { }, $description: "Code blocks and larger code snippets.", }, - name: "canary-body-code", + name: "cn-body-code", attributes: { category: "body", type: "code", @@ -475,7 +475,7 @@ export default { }, $description: "Primary text style for UI and content.", }, - name: "canary-body-none-normal", + name: "cn-body-none-normal", attributes: { category: "body", type: "none", @@ -498,7 +498,7 @@ export default { letterSpacing: "{tracking.normal}", }, }, - name: "canary-body-none-strong", + name: "cn-body-none-strong", attributes: { category: "body", type: "none", @@ -525,7 +525,7 @@ export default { }, $description: "Primary text style for UI and content.", }, - name: "canary-body-tight-normal", + name: "cn-body-tight-normal", attributes: { category: "body", type: "tight", @@ -548,7 +548,7 @@ export default { letterSpacing: "{tracking.normal}", }, }, - name: "canary-body-tight-strong", + name: "cn-body-tight-strong", attributes: { category: "body", type: "tight", @@ -576,7 +576,7 @@ export default { }, $description: "Primary caption style, small but important text.", }, - name: "canary-caption-normal", + name: "cn-caption-normal", attributes: { category: "caption", type: "normal", @@ -600,7 +600,7 @@ export default { }, $description: "Helper text, meta information.", }, - name: "canary-caption-soft", + name: "cn-caption-soft", attributes: { category: "caption", type: "soft", @@ -625,7 +625,7 @@ export default { }, $description: "Primary caption style, small but important text.", }, - name: "canary-caption-none-normal", + name: "cn-caption-none-normal", attributes: { category: "caption", type: "none", @@ -650,7 +650,7 @@ export default { }, $description: "Helper text, meta information.", }, - name: "canary-caption-none-soft", + name: "cn-caption-none-soft", attributes: { category: "caption", type: "none", diff --git a/packages/core-design-system/src/styles-esm/colors.ts b/packages/core-design-system/src/styles-esm/colors.ts index c851523beb..340d498597 100644 --- a/packages/core-design-system/src/styles-esm/colors.ts +++ b/packages/core-design-system/src/styles-esm/colors.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:32 GMT + * Generated on Tue, 18 Mar 2025 06:44:26 GMT * Copyright (c) Harness. */ @@ -17,7 +17,7 @@ export default { $value: "lch(100% 0 134.54)", $type: "color", }, - name: "canary-colors-pure-white", + name: "cn-colors-pure-white", attributes: { category: "colors", type: "pure", @@ -34,7 +34,7 @@ export default { $value: "lch(2.44% 1.49 285.81)", $type: "color", }, - name: "canary-colors-pure-black", + name: "cn-colors-pure-black", attributes: { category: "colors", type: "pure", @@ -53,7 +53,7 @@ export default { $value: "lch(98.27% 0.36 135.2)", $type: "color", }, - name: "canary-colors-chrome-50", + name: "cn-colors-chrome-50", attributes: { category: "colors", type: "chrome", @@ -70,7 +70,7 @@ export default { $value: "lch(90.71% 0.38 284.93)", $type: "color", }, - name: "canary-colors-chrome-100", + name: "cn-colors-chrome-100", attributes: { category: "colors", type: "chrome", @@ -87,7 +87,7 @@ export default { $value: "lch(85.99% 3.77 285.34)", $type: "color", }, - name: "canary-colors-chrome-150", + name: "cn-colors-chrome-150", attributes: { category: "colors", type: "chrome", @@ -104,7 +104,7 @@ export default { $value: "lch(81.33% 4.52 285.46)", $type: "color", }, - name: "canary-colors-chrome-200", + name: "cn-colors-chrome-200", attributes: { category: "colors", type: "chrome", @@ -121,7 +121,7 @@ export default { $value: "lch(74.37% 4.52 285.5)", $type: "color", }, - name: "canary-colors-chrome-300", + name: "cn-colors-chrome-300", attributes: { category: "colors", type: "chrome", @@ -138,7 +138,7 @@ export default { $value: "lch(67.41% 4.51 285.56)", $type: "color", }, - name: "canary-colors-chrome-400", + name: "cn-colors-chrome-400", attributes: { category: "colors", type: "chrome", @@ -155,7 +155,7 @@ export default { $value: "lch(58.08% 6.76 286.02)", $type: "color", }, - name: "canary-colors-chrome-500", + name: "cn-colors-chrome-500", attributes: { category: "colors", type: "chrome", @@ -172,7 +172,7 @@ export default { $value: "lch(46.46% 7.5 286.37)", $type: "color", }, - name: "canary-colors-chrome-600", + name: "cn-colors-chrome-600", attributes: { category: "colors", type: "chrome", @@ -189,7 +189,7 @@ export default { $value: "lch(39.46% 8.98 286.89)", $type: "color", }, - name: "canary-colors-chrome-700", + name: "cn-colors-chrome-700", attributes: { category: "colors", type: "chrome", @@ -206,7 +206,7 @@ export default { $value: "lch(26.73% 7.48 287.06)", $type: "color", }, - name: "canary-colors-chrome-800", + name: "cn-colors-chrome-800", attributes: { category: "colors", type: "chrome", @@ -223,7 +223,7 @@ export default { $value: "lch(18.63% 6.73 287.29)", $type: "color", }, - name: "canary-colors-chrome-850", + name: "cn-colors-chrome-850", attributes: { category: "colors", type: "chrome", @@ -240,7 +240,7 @@ export default { $value: "lch(8.25% 4.49 287.18)", $type: "color", }, - name: "canary-colors-chrome-900", + name: "cn-colors-chrome-900", attributes: { category: "colors", type: "chrome", @@ -257,7 +257,7 @@ export default { $value: "lch(5.2% 3.07 285.78)", $type: "color", }, - name: "canary-colors-chrome-950", + name: "cn-colors-chrome-950", attributes: { category: "colors", type: "chrome", @@ -274,7 +274,7 @@ export default { $value: "lch(3.66% 1.93 285.7)", $type: "color", }, - name: "canary-colors-chrome-1000", + name: "cn-colors-chrome-1000", attributes: { category: "colors", type: "chrome", @@ -293,7 +293,7 @@ export default { $value: "lch(95.27% 4.16 280.86)", $type: "color", }, - name: "canary-colors-blue-50", + name: "cn-colors-blue-50", attributes: { category: "colors", type: "blue", @@ -310,7 +310,7 @@ export default { $value: "lch(89.92% 10.91 279.8)", $type: "color", }, - name: "canary-colors-blue-100", + name: "cn-colors-blue-100", attributes: { category: "colors", type: "blue", @@ -327,7 +327,7 @@ export default { $value: "lch(73.08% 34.81 281.21)", $type: "color", }, - name: "canary-colors-blue-200", + name: "cn-colors-blue-200", attributes: { category: "colors", type: "blue", @@ -344,7 +344,7 @@ export default { $value: "lch(63.4% 48.44 281.2)", $type: "color", }, - name: "canary-colors-blue-300", + name: "cn-colors-blue-300", attributes: { category: "colors", type: "blue", @@ -361,7 +361,7 @@ export default { $value: "lch(54.29% 60.55 281.11)", $type: "color", }, - name: "canary-colors-blue-400", + name: "cn-colors-blue-400", attributes: { category: "colors", type: "blue", @@ -378,7 +378,7 @@ export default { $value: "lch(47.04% 69.94 279.78)", $type: "color", }, - name: "canary-colors-blue-500", + name: "cn-colors-blue-500", attributes: { category: "colors", type: "blue", @@ -395,7 +395,7 @@ export default { $value: "lch(35.67% 59.7 280.58)", $type: "color", }, - name: "canary-colors-blue-600", + name: "cn-colors-blue-600", attributes: { category: "colors", type: "blue", @@ -412,7 +412,7 @@ export default { $value: "lch(27.25% 49.8 280.51)", $type: "color", }, - name: "canary-colors-blue-700", + name: "cn-colors-blue-700", attributes: { category: "colors", type: "blue", @@ -429,7 +429,7 @@ export default { $value: "lch(18.28% 39.2 280.4)", $type: "color", }, - name: "canary-colors-blue-800", + name: "cn-colors-blue-800", attributes: { category: "colors", type: "blue", @@ -446,7 +446,7 @@ export default { $value: "lch(9.63% 33.17 284.31)", $type: "color", }, - name: "canary-colors-blue-900", + name: "cn-colors-blue-900", attributes: { category: "colors", type: "blue", @@ -463,7 +463,7 @@ export default { $value: "lch(2.52% 22.28 283.9)", $type: "color", }, - name: "canary-colors-blue-950", + name: "cn-colors-blue-950", attributes: { category: "colors", type: "blue", @@ -482,7 +482,7 @@ export default { $value: "lch(95.4% 5 238.5)", $type: "color", }, - name: "canary-colors-cyan-50", + name: "cn-colors-cyan-50", attributes: { category: "colors", type: "cyan", @@ -499,7 +499,7 @@ export default { $value: "lch(90.24% 13.5 239.5)", $type: "color", }, - name: "canary-colors-cyan-100", + name: "cn-colors-cyan-100", attributes: { category: "colors", type: "cyan", @@ -516,7 +516,7 @@ export default { $value: "lch(74.15% 29 241)", $type: "color", }, - name: "canary-colors-cyan-200", + name: "cn-colors-cyan-200", attributes: { category: "colors", type: "cyan", @@ -533,7 +533,7 @@ export default { $value: "lch(65.49% 45.28 239)", $type: "color", }, - name: "canary-colors-cyan-300", + name: "cn-colors-cyan-300", attributes: { category: "colors", type: "cyan", @@ -550,7 +550,7 @@ export default { $value: "lch(56.15% 44.5 246.5)", $type: "color", }, - name: "canary-colors-cyan-400", + name: "cn-colors-cyan-400", attributes: { category: "colors", type: "cyan", @@ -567,7 +567,7 @@ export default { $value: "lch(46.84% 41.5 250)", $type: "color", }, - name: "canary-colors-cyan-500", + name: "cn-colors-cyan-500", attributes: { category: "colors", type: "cyan", @@ -584,7 +584,7 @@ export default { $value: "lch(37.53% 36.5 254)", $type: "color", }, - name: "canary-colors-cyan-600", + name: "cn-colors-cyan-600", attributes: { category: "colors", type: "cyan", @@ -601,7 +601,7 @@ export default { $value: "lch(28.81% 30 257.5)", $type: "color", }, - name: "canary-colors-cyan-700", + name: "cn-colors-cyan-700", attributes: { category: "colors", type: "cyan", @@ -618,7 +618,7 @@ export default { $value: "lch(19.49% 23 261.5)", $type: "color", }, - name: "canary-colors-cyan-800", + name: "cn-colors-cyan-800", attributes: { category: "colors", type: "cyan", @@ -635,7 +635,7 @@ export default { $value: "lch(10.76% 15.5 265)", $type: "color", }, - name: "canary-colors-cyan-900", + name: "cn-colors-cyan-900", attributes: { category: "colors", type: "cyan", @@ -652,7 +652,7 @@ export default { $value: "lch(3.09% 7.5 268)", $type: "color", }, - name: "canary-colors-cyan-950", + name: "cn-colors-cyan-950", attributes: { category: "colors", type: "cyan", @@ -671,7 +671,7 @@ export default { $value: "lch(95.23% 5.25 32.59)", $type: "color", }, - name: "canary-colors-red-50", + name: "cn-colors-red-50", attributes: { category: "colors", type: "red", @@ -688,7 +688,7 @@ export default { $value: "lch(89.81% 13.4 32.67)", $type: "color", }, - name: "canary-colors-red-100", + name: "cn-colors-red-100", attributes: { category: "colors", type: "red", @@ -705,7 +705,7 @@ export default { $value: "lch(72.7% 48.17 33.53)", $type: "color", }, - name: "canary-colors-red-200", + name: "cn-colors-red-200", attributes: { category: "colors", type: "red", @@ -722,7 +722,7 @@ export default { $value: "lch(65.59% 65.99 34.56)", $type: "color", }, - name: "canary-colors-red-300", + name: "cn-colors-red-300", attributes: { category: "colors", type: "red", @@ -739,7 +739,7 @@ export default { $value: "lch(53.74% 88.37 37.69)", $type: "color", }, - name: "canary-colors-red-400", + name: "cn-colors-red-400", attributes: { category: "colors", type: "red", @@ -756,7 +756,7 @@ export default { $value: "lch(44.74% 76.92 37.68)", $type: "color", }, - name: "canary-colors-red-500", + name: "cn-colors-red-500", attributes: { category: "colors", type: "red", @@ -773,7 +773,7 @@ export default { $value: "lch(35.74% 65.47 37.67)", $type: "color", }, - name: "canary-colors-red-600", + name: "cn-colors-red-600", attributes: { category: "colors", type: "red", @@ -790,7 +790,7 @@ export default { $value: "lch(27.3% 54.82 37.68)", $type: "color", }, - name: "canary-colors-red-700", + name: "cn-colors-red-700", attributes: { category: "colors", type: "red", @@ -807,7 +807,7 @@ export default { $value: "lch(18.31% 42.35 35.83)", $type: "color", }, - name: "canary-colors-red-800", + name: "cn-colors-red-800", attributes: { category: "colors", type: "red", @@ -824,7 +824,7 @@ export default { $value: "lch(9.87% 29.51 28.59)", $type: "color", }, - name: "canary-colors-red-900", + name: "cn-colors-red-900", attributes: { category: "colors", type: "red", @@ -841,7 +841,7 @@ export default { $value: "lch(2.8% 10.22 21.65)", $type: "color", }, - name: "canary-colors-red-950", + name: "cn-colors-red-950", attributes: { category: "colors", type: "red", @@ -860,7 +860,7 @@ export default { $value: "lch(95.15% 5.42 350.29)", $type: "color", }, - name: "canary-colors-pink-50", + name: "cn-colors-pink-50", attributes: { category: "colors", type: "pink", @@ -877,7 +877,7 @@ export default { $value: "lch(89.61% 13.47 350.26)", $type: "color", }, - name: "canary-colors-pink-100", + name: "cn-colors-pink-100", attributes: { category: "colors", type: "pink", @@ -894,7 +894,7 @@ export default { $value: "lch(72% 46.72 350.11)", $type: "color", }, - name: "canary-colors-pink-200", + name: "cn-colors-pink-200", attributes: { category: "colors", type: "pink", @@ -911,7 +911,7 @@ export default { $value: "lch(61.26% 69.37 350)", $type: "color", }, - name: "canary-colors-pink-300", + name: "cn-colors-pink-300", attributes: { category: "colors", type: "pink", @@ -928,7 +928,7 @@ export default { $value: "lch(53.21% 65.17 349.99)", $type: "color", }, - name: "canary-colors-pink-400", + name: "cn-colors-pink-400", attributes: { category: "colors", type: "pink", @@ -945,7 +945,7 @@ export default { $value: "lch(44.27% 56.78 349.99)", $type: "color", }, - name: "canary-colors-pink-500", + name: "cn-colors-pink-500", attributes: { category: "colors", type: "pink", @@ -962,7 +962,7 @@ export default { $value: "lch(35.34% 48.39 349.99)", $type: "color", }, - name: "canary-colors-pink-600", + name: "cn-colors-pink-600", attributes: { category: "colors", type: "pink", @@ -979,7 +979,7 @@ export default { $value: "lch(26.98% 40.34 349.99)", $type: "color", }, - name: "canary-colors-pink-700", + name: "cn-colors-pink-700", attributes: { category: "colors", type: "pink", @@ -996,7 +996,7 @@ export default { $value: "lch(18.05% 31.95 349.99)", $type: "color", }, - name: "canary-colors-pink-800", + name: "cn-colors-pink-800", attributes: { category: "colors", type: "pink", @@ -1013,7 +1013,7 @@ export default { $value: "lch(9.69% 23.89 349.99)", $type: "color", }, - name: "canary-colors-pink-900", + name: "cn-colors-pink-900", attributes: { category: "colors", type: "pink", @@ -1030,7 +1030,7 @@ export default { $value: "lch(2.74% 8.62 350.99)", $type: "color", }, - name: "canary-colors-pink-950", + name: "cn-colors-pink-950", attributes: { category: "colors", type: "pink", @@ -1049,7 +1049,7 @@ export default { $value: "lch(95.22% 5.2 27.21)", $type: "color", }, - name: "canary-colors-peach-50", + name: "cn-colors-peach-50", attributes: { category: "colors", type: "peach", @@ -1066,7 +1066,7 @@ export default { $value: "lch(89.79% 12.88 27.31)", $type: "color", }, - name: "canary-colors-peach-100", + name: "cn-colors-peach-100", attributes: { category: "colors", type: "peach", @@ -1083,7 +1083,7 @@ export default { $value: "lch(72.22% 46.73 23.25)", $type: "color", }, - name: "canary-colors-peach-200", + name: "cn-colors-peach-200", attributes: { category: "colors", type: "peach", @@ -1100,7 +1100,7 @@ export default { $value: "lch(62.66% 70.81 29.46)", $type: "color", }, - name: "canary-colors-peach-300", + name: "cn-colors-peach-300", attributes: { category: "colors", type: "peach", @@ -1117,7 +1117,7 @@ export default { $value: "lch(53.64% 82.24 30.93)", $type: "color", }, - name: "canary-colors-peach-400", + name: "cn-colors-peach-400", attributes: { category: "colors", type: "peach", @@ -1134,7 +1134,7 @@ export default { $value: "lch(44.66% 71.48 30.92)", $type: "color", }, - name: "canary-colors-peach-500", + name: "cn-colors-peach-500", attributes: { category: "colors", type: "peach", @@ -1151,7 +1151,7 @@ export default { $value: "lch(35.68% 60.73 30.9)", $type: "color", }, - name: "canary-colors-peach-600", + name: "cn-colors-peach-600", attributes: { category: "colors", type: "peach", @@ -1168,7 +1168,7 @@ export default { $value: "lch(27.25% 50.72 30.88)", $type: "color", }, - name: "canary-colors-peach-700", + name: "cn-colors-peach-700", attributes: { category: "colors", type: "peach", @@ -1185,7 +1185,7 @@ export default { $value: "lch(18.26% 40.26 30.65)", $type: "color", }, - name: "canary-colors-peach-800", + name: "cn-colors-peach-800", attributes: { category: "colors", type: "peach", @@ -1202,7 +1202,7 @@ export default { $value: "lch(9.84% 28.78 25.16)", $type: "color", }, - name: "canary-colors-peach-900", + name: "cn-colors-peach-900", attributes: { category: "colors", type: "peach", @@ -1219,7 +1219,7 @@ export default { $value: "lch(2.79% 10.24 18.76)", $type: "color", }, - name: "canary-colors-peach-950", + name: "cn-colors-peach-950", attributes: { category: "colors", type: "peach", @@ -1238,7 +1238,7 @@ export default { $value: "lch(95.62% 18.31 92.87)", $type: "color", }, - name: "canary-colors-yellow-50", + name: "cn-colors-yellow-50", attributes: { category: "colors", type: "yellow", @@ -1255,7 +1255,7 @@ export default { $value: "lch(90.23% 26.34 77.18)", $type: "color", }, - name: "canary-colors-yellow-100", + name: "cn-colors-yellow-100", attributes: { category: "colors", type: "yellow", @@ -1272,7 +1272,7 @@ export default { $value: "lch(73.82% 74.92 75.35)", $type: "color", }, - name: "canary-colors-yellow-200", + name: "cn-colors-yellow-200", attributes: { category: "colors", type: "yellow", @@ -1289,7 +1289,7 @@ export default { $value: "lch(64.58% 68.1 76.07)", $type: "color", }, - name: "canary-colors-yellow-300", + name: "cn-colors-yellow-300", attributes: { category: "colors", type: "yellow", @@ -1306,7 +1306,7 @@ export default { $value: "lch(55.9% 60.21 76.41)", $type: "color", }, - name: "canary-colors-yellow-400", + name: "cn-colors-yellow-400", attributes: { category: "colors", type: "yellow", @@ -1323,7 +1323,7 @@ export default { $value: "lch(46.64% 52.59 77.11)", $type: "color", }, - name: "canary-colors-yellow-500", + name: "cn-colors-yellow-500", attributes: { category: "colors", type: "yellow", @@ -1340,7 +1340,7 @@ export default { $value: "lch(37.37% 44.92 77.47)", $type: "color", }, - name: "canary-colors-yellow-600", + name: "cn-colors-yellow-600", attributes: { category: "colors", type: "yellow", @@ -1357,7 +1357,7 @@ export default { $value: "lch(28.67% 36.97 77.45)", $type: "color", }, - name: "canary-colors-yellow-700", + name: "cn-colors-yellow-700", attributes: { category: "colors", type: "yellow", @@ -1374,7 +1374,7 @@ export default { $value: "lch(19.4% 27.53 77.01)", $type: "color", }, - name: "canary-colors-yellow-800", + name: "cn-colors-yellow-800", attributes: { category: "colors", type: "yellow", @@ -1391,7 +1391,7 @@ export default { $value: "lch(10.69% 16.28 73.34)", $type: "color", }, - name: "canary-colors-yellow-900", + name: "cn-colors-yellow-900", attributes: { category: "colors", type: "yellow", @@ -1408,7 +1408,7 @@ export default { $value: "lch(3.06% 4.5 71.6)", $type: "color", }, - name: "canary-colors-yellow-950", + name: "cn-colors-yellow-950", attributes: { category: "colors", type: "yellow", @@ -1427,7 +1427,7 @@ export default { $value: "lch(95.42% 10.03 79.83)", $type: "color", }, - name: "canary-colors-orange-50", + name: "cn-colors-orange-50", attributes: { category: "colors", type: "orange", @@ -1444,7 +1444,7 @@ export default { $value: "lch(90.02% 17.62 61.56)", $type: "color", }, - name: "canary-colors-orange-100", + name: "cn-colors-orange-100", attributes: { category: "colors", type: "orange", @@ -1461,7 +1461,7 @@ export default { $value: "lch(74.82% 51.93 49.87)", $type: "color", }, - name: "canary-colors-orange-200", + name: "cn-colors-orange-200", attributes: { category: "colors", type: "orange", @@ -1478,7 +1478,7 @@ export default { $value: "lch(63.38% 78.04 52.26)", $type: "color", }, - name: "canary-colors-orange-300", + name: "cn-colors-orange-300", attributes: { category: "colors", type: "orange", @@ -1495,7 +1495,7 @@ export default { $value: "lch(54.81% 69.74 52.27)", $type: "color", }, - name: "canary-colors-orange-400", + name: "cn-colors-orange-400", attributes: { category: "colors", type: "orange", @@ -1512,7 +1512,7 @@ export default { $value: "lch(45.68% 60.45 52.23)", $type: "color", }, - name: "canary-colors-orange-500", + name: "cn-colors-orange-500", attributes: { category: "colors", type: "orange", @@ -1529,7 +1529,7 @@ export default { $value: "lch(36.54% 51.77 52.28)", $type: "color", }, - name: "canary-colors-orange-600", + name: "cn-colors-orange-600", attributes: { category: "colors", type: "orange", @@ -1546,7 +1546,7 @@ export default { $value: "lch(27.78% 46.26 47.39)", $type: "color", }, - name: "canary-colors-orange-700", + name: "cn-colors-orange-700", attributes: { category: "colors", type: "orange", @@ -1563,7 +1563,7 @@ export default { $value: "lch(18.69% 35.31 45.59)", $type: "color", }, - name: "canary-colors-orange-800", + name: "cn-colors-orange-800", attributes: { category: "colors", type: "orange", @@ -1580,7 +1580,7 @@ export default { $value: "lch(10.26% 21.63 42.58)", $type: "color", }, - name: "canary-colors-orange-900", + name: "cn-colors-orange-900", attributes: { category: "colors", type: "orange", @@ -1597,7 +1597,7 @@ export default { $value: "lch(2.93% 6.64 36.42)", $type: "color", }, - name: "canary-colors-orange-950", + name: "cn-colors-orange-950", attributes: { category: "colors", type: "orange", @@ -1616,7 +1616,7 @@ export default { $value: "lch(95.55% 12.75 93.47)", $type: "color", }, - name: "canary-colors-brown-50", + name: "cn-colors-brown-50", attributes: { category: "colors", type: "brown", @@ -1633,7 +1633,7 @@ export default { $value: "lch(90.24% 19.27 79.52)", $type: "color", }, - name: "canary-colors-brown-100", + name: "cn-colors-brown-100", attributes: { category: "colors", type: "brown", @@ -1650,7 +1650,7 @@ export default { $value: "lch(73.38% 45.67 56.65)", $type: "color", }, - name: "canary-colors-brown-200", + name: "cn-colors-brown-200", attributes: { category: "colors", type: "brown", @@ -1667,7 +1667,7 @@ export default { $value: "lch(64.06% 48.96 57.29)", $type: "color", }, - name: "canary-colors-brown-300", + name: "cn-colors-brown-300", attributes: { category: "colors", type: "brown", @@ -1684,7 +1684,7 @@ export default { $value: "lch(57.17% 44.39 57.69)", $type: "color", }, - name: "canary-colors-brown-400", + name: "cn-colors-brown-400", attributes: { category: "colors", type: "brown", @@ -1701,7 +1701,7 @@ export default { $value: "lch(46.22% 37.68 57.68)", $type: "color", }, - name: "canary-colors-brown-500", + name: "cn-colors-brown-500", attributes: { category: "colors", type: "brown", @@ -1718,7 +1718,7 @@ export default { $value: "lch(37.01% 31.77 57.67)", $type: "color", }, - name: "canary-colors-brown-600", + name: "cn-colors-brown-600", attributes: { category: "colors", type: "brown", @@ -1735,7 +1735,7 @@ export default { $value: "lch(28.37% 26.84 58.1)", $type: "color", }, - name: "canary-colors-brown-700", + name: "cn-colors-brown-700", attributes: { category: "colors", type: "brown", @@ -1752,7 +1752,7 @@ export default { $value: "lch(19.16% 20.96 58.49)", $type: "color", }, - name: "canary-colors-brown-800", + name: "cn-colors-brown-800", attributes: { category: "colors", type: "brown", @@ -1769,7 +1769,7 @@ export default { $value: "lch(10.55% 13.64 57.69)", $type: "color", }, - name: "canary-colors-brown-900", + name: "cn-colors-brown-900", attributes: { category: "colors", type: "brown", @@ -1786,7 +1786,7 @@ export default { $value: "lch(3% 4.01 51.14)", $type: "color", }, - name: "canary-colors-brown-950", + name: "cn-colors-brown-950", attributes: { category: "colors", type: "brown", @@ -1805,7 +1805,7 @@ export default { $value: "lch(95.82% 11.79 156.15)", $type: "color", }, - name: "canary-colors-green-50", + name: "cn-colors-green-50", attributes: { category: "colors", type: "green", @@ -1822,7 +1822,7 @@ export default { $value: "lch(91.19% 27.27 156.17)", $type: "color", }, - name: "canary-colors-green-100", + name: "cn-colors-green-100", attributes: { category: "colors", type: "green", @@ -1839,7 +1839,7 @@ export default { $value: "lch(73.78% 60.44 156.25)", $type: "color", }, - name: "canary-colors-green-200", + name: "cn-colors-green-200", attributes: { category: "colors", type: "green", @@ -1856,7 +1856,7 @@ export default { $value: "lch(66.65% 55.77 156.25)", $type: "color", }, - name: "canary-colors-green-300", + name: "cn-colors-green-300", attributes: { category: "colors", type: "green", @@ -1873,7 +1873,7 @@ export default { $value: "lch(57.73% 49.65 156.25)", $type: "color", }, - name: "canary-colors-green-400", + name: "cn-colors-green-400", attributes: { category: "colors", type: "green", @@ -1890,7 +1890,7 @@ export default { $value: "lch(48.21% 43.17 156.25)", $type: "color", }, - name: "canary-colors-green-500", + name: "cn-colors-green-500", attributes: { category: "colors", type: "green", @@ -1907,7 +1907,7 @@ export default { $value: "lch(38.71% 37.07 156.25)", $type: "color", }, - name: "canary-colors-green-600", + name: "cn-colors-green-600", attributes: { category: "colors", type: "green", @@ -1924,7 +1924,7 @@ export default { $value: "lch(29.79% 30.94 156.25)", $type: "color", }, - name: "canary-colors-green-700", + name: "cn-colors-green-700", attributes: { category: "colors", type: "green", @@ -1941,7 +1941,7 @@ export default { $value: "lch(20.26% 24.09 156.25)", $type: "color", }, - name: "canary-colors-green-800", + name: "cn-colors-green-800", attributes: { category: "colors", type: "green", @@ -1958,7 +1958,7 @@ export default { $value: "lch(11.35% 18.27 156.36)", $type: "color", }, - name: "canary-colors-green-900", + name: "cn-colors-green-900", attributes: { category: "colors", type: "green", @@ -1975,7 +1975,7 @@ export default { $value: "lch(3.27% 5.33 156.53)", $type: "color", }, - name: "canary-colors-green-950", + name: "cn-colors-green-950", attributes: { category: "colors", type: "green", @@ -1994,7 +1994,7 @@ export default { $value: "lch(95.82% 11.97 171.06)", $type: "color", }, - name: "canary-colors-mint-50", + name: "cn-colors-mint-50", attributes: { category: "colors", type: "mint", @@ -2011,7 +2011,7 @@ export default { $value: "lch(91.09% 25.48 176.08)", $type: "color", }, - name: "canary-colors-mint-100", + name: "cn-colors-mint-100", attributes: { category: "colors", type: "mint", @@ -2028,7 +2028,7 @@ export default { $value: "lch(73.4% 50.15 176.67)", $type: "color", }, - name: "canary-colors-mint-200", + name: "cn-colors-mint-200", attributes: { category: "colors", type: "mint", @@ -2045,7 +2045,7 @@ export default { $value: "lch(66.3% 46.27 176.67)", $type: "color", }, - name: "canary-colors-mint-300", + name: "cn-colors-mint-300", attributes: { category: "colors", type: "mint", @@ -2062,7 +2062,7 @@ export default { $value: "lch(57.46% 42.15 174.53)", $type: "color", }, - name: "canary-colors-mint-400", + name: "cn-colors-mint-400", attributes: { category: "colors", type: "mint", @@ -2079,7 +2079,7 @@ export default { $value: "lch(48.03% 37.67 171.84)", $type: "color", }, - name: "canary-colors-mint-500", + name: "cn-colors-mint-500", attributes: { category: "colors", type: "mint", @@ -2096,7 +2096,7 @@ export default { $value: "lch(38.59% 33.16 169.14)", $type: "color", }, - name: "canary-colors-mint-600", + name: "cn-colors-mint-600", attributes: { category: "colors", type: "mint", @@ -2113,7 +2113,7 @@ export default { $value: "lch(29.72% 28.6 166.42)", $type: "color", }, - name: "canary-colors-mint-700", + name: "cn-colors-mint-700", attributes: { category: "colors", type: "mint", @@ -2130,7 +2130,7 @@ export default { $value: "lch(20.24% 23.29 164.22)", $type: "color", }, - name: "canary-colors-mint-800", + name: "cn-colors-mint-800", attributes: { category: "colors", type: "mint", @@ -2147,7 +2147,7 @@ export default { $value: "lch(11.35% 18.26 160.23)", $type: "color", }, - name: "canary-colors-mint-900", + name: "cn-colors-mint-900", attributes: { category: "colors", type: "mint", @@ -2164,7 +2164,7 @@ export default { $value: "lch(3.26% 5.16 160.96)", $type: "color", }, - name: "canary-colors-mint-950", + name: "cn-colors-mint-950", attributes: { category: "colors", type: "mint", @@ -2183,7 +2183,7 @@ export default { $value: "lch(95.86% 15.3 127.41)", $type: "color", }, - name: "canary-colors-lime-50", + name: "cn-colors-lime-50", attributes: { category: "colors", type: "lime", @@ -2200,7 +2200,7 @@ export default { $value: "lch(91.05% 29.33 126.46)", $type: "color", }, - name: "canary-colors-lime-100", + name: "cn-colors-lime-100", attributes: { category: "colors", type: "lime", @@ -2217,7 +2217,7 @@ export default { $value: "lch(74.24% 53.56 123.85)", $type: "color", }, - name: "canary-colors-lime-200", + name: "cn-colors-lime-200", attributes: { category: "colors", type: "lime", @@ -2234,7 +2234,7 @@ export default { $value: "lch(65.98% 48.66 123.85)", $type: "color", }, - name: "canary-colors-lime-300", + name: "cn-colors-lime-300", attributes: { category: "colors", type: "lime", @@ -2251,7 +2251,7 @@ export default { $value: "lch(57.13% 43.37 123.85)", $type: "color", }, - name: "canary-colors-lime-400", + name: "cn-colors-lime-400", attributes: { category: "colors", type: "lime", @@ -2268,7 +2268,7 @@ export default { $value: "lch(47.69% 37.71 123.86)", $type: "color", }, - name: "canary-colors-lime-500", + name: "cn-colors-lime-500", attributes: { category: "colors", type: "lime", @@ -2285,7 +2285,7 @@ export default { $value: "lch(38.26% 32.05 123.88)", $type: "color", }, - name: "canary-colors-lime-600", + name: "cn-colors-lime-600", attributes: { category: "colors", type: "lime", @@ -2302,7 +2302,7 @@ export default { $value: "lch(29.42% 27.17 123.81)", $type: "color", }, - name: "canary-colors-lime-700", + name: "cn-colors-lime-700", attributes: { category: "colors", type: "lime", @@ -2319,7 +2319,7 @@ export default { $value: "lch(19.97% 21.1 123.91)", $type: "color", }, - name: "canary-colors-lime-800", + name: "cn-colors-lime-800", attributes: { category: "colors", type: "lime", @@ -2336,7 +2336,7 @@ export default { $value: "lch(11.12% 14.71 126.9)", $type: "color", }, - name: "canary-colors-lime-900", + name: "cn-colors-lime-900", attributes: { category: "colors", type: "lime", @@ -2353,7 +2353,7 @@ export default { $value: "lch(3.2% 4.34 131.4)", $type: "color", }, - name: "canary-colors-lime-950", + name: "cn-colors-lime-950", attributes: { category: "colors", type: "lime", @@ -2372,7 +2372,7 @@ export default { $value: "lch(95.14% 7 301.11)", $type: "color", }, - name: "canary-colors-purple-50", + name: "cn-colors-purple-50", attributes: { category: "colors", type: "purple", @@ -2389,7 +2389,7 @@ export default { $value: "lch(89.58% 17.29 301.92)", $type: "color", }, - name: "canary-colors-purple-100", + name: "cn-colors-purple-100", attributes: { category: "colors", type: "purple", @@ -2406,7 +2406,7 @@ export default { $value: "lch(72.4% 55.68 305.19)", $type: "color", }, - name: "canary-colors-purple-200", + name: "cn-colors-purple-200", attributes: { category: "colors", type: "purple", @@ -2423,7 +2423,7 @@ export default { $value: "lch(61.28% 80.51 307.53)", $type: "color", }, - name: "canary-colors-purple-300", + name: "cn-colors-purple-300", attributes: { category: "colors", type: "purple", @@ -2440,7 +2440,7 @@ export default { $value: "lch(50.99% 105.85 309.98)", $type: "color", }, - name: "canary-colors-purple-400", + name: "cn-colors-purple-400", attributes: { category: "colors", type: "purple", @@ -2457,7 +2457,7 @@ export default { $value: "lch(40.58% 118.62 311.84)", $type: "color", }, - name: "canary-colors-purple-500", + name: "cn-colors-purple-500", attributes: { category: "colors", type: "purple", @@ -2474,7 +2474,7 @@ export default { $value: "lch(32.21% 100.98 311.83)", $type: "color", }, - name: "canary-colors-purple-600", + name: "cn-colors-purple-600", attributes: { category: "colors", type: "purple", @@ -2491,7 +2491,7 @@ export default { $value: "lch(24.34% 84.56 311.84)", $type: "color", }, - name: "canary-colors-purple-700", + name: "cn-colors-purple-700", attributes: { category: "colors", type: "purple", @@ -2508,7 +2508,7 @@ export default { $value: "lch(15.97% 66.91 311.83)", $type: "color", }, - name: "canary-colors-purple-800", + name: "cn-colors-purple-800", attributes: { category: "colors", type: "purple", @@ -2525,7 +2525,7 @@ export default { $value: "lch(8.1% 50.49 311.83)", $type: "color", }, - name: "canary-colors-purple-900", + name: "cn-colors-purple-900", attributes: { category: "colors", type: "purple", @@ -2542,7 +2542,7 @@ export default { $value: "lch(2.32% 21.96 302.37)", $type: "color", }, - name: "canary-colors-purple-950", + name: "cn-colors-purple-950", attributes: { category: "colors", type: "purple", @@ -2561,7 +2561,7 @@ export default { $value: "lch(95.18% 6.31 296.62)", $type: "color", }, - name: "canary-colors-violet-50", + name: "cn-colors-violet-50", attributes: { category: "colors", type: "violet", @@ -2578,7 +2578,7 @@ export default { $value: "lch(89.64% 16.29 297.99)", $type: "color", }, - name: "canary-colors-violet-100", + name: "cn-colors-violet-100", attributes: { category: "colors", type: "violet", @@ -2595,7 +2595,7 @@ export default { $value: "lch(72.11% 52.02 298.43)", $type: "color", }, - name: "canary-colors-violet-200", + name: "cn-colors-violet-200", attributes: { category: "colors", type: "violet", @@ -2612,7 +2612,7 @@ export default { $value: "lch(65.15% 65.45 298.5)", $type: "color", }, - name: "canary-colors-violet-300", + name: "cn-colors-violet-300", attributes: { category: "colors", type: "violet", @@ -2629,7 +2629,7 @@ export default { $value: "lch(51.98% 93.37 301.42)", $type: "color", }, - name: "canary-colors-violet-400", + name: "cn-colors-violet-400", attributes: { category: "colors", type: "violet", @@ -2646,7 +2646,7 @@ export default { $value: "lch(40.56% 121.68 305.61)", $type: "color", }, - name: "canary-colors-violet-500", + name: "cn-colors-violet-500", attributes: { category: "colors", type: "violet", @@ -2663,7 +2663,7 @@ export default { $value: "lch(31.46% 113.1 306.9)", $type: "color", }, - name: "canary-colors-violet-600", + name: "cn-colors-violet-600", attributes: { category: "colors", type: "violet", @@ -2680,7 +2680,7 @@ export default { $value: "lch(23.77% 93.78 307.37)", $type: "color", }, - name: "canary-colors-violet-700", + name: "cn-colors-violet-700", attributes: { category: "colors", type: "violet", @@ -2697,7 +2697,7 @@ export default { $value: "lch(15.62% 72.5 308.3)", $type: "color", }, - name: "canary-colors-violet-800", + name: "cn-colors-violet-800", attributes: { category: "colors", type: "violet", @@ -2714,7 +2714,7 @@ export default { $value: "lch(8.15% 49.81 312.23)", $type: "color", }, - name: "canary-colors-violet-900", + name: "cn-colors-violet-900", attributes: { category: "colors", type: "violet", @@ -2731,7 +2731,7 @@ export default { $value: "lch(2.33% 21.62 302.28)", $type: "color", }, - name: "canary-colors-violet-950", + name: "cn-colors-violet-950", attributes: { category: "colors", type: "violet", @@ -2750,7 +2750,7 @@ export default { $value: "lch(95.23% 6.03 283.32)", $type: "color", }, - name: "canary-colors-indigo-50", + name: "cn-colors-indigo-50", attributes: { category: "colors", type: "indigo", @@ -2767,7 +2767,7 @@ export default { $value: "lch(89.8% 14.62 283.7)", $type: "color", }, - name: "canary-colors-indigo-100", + name: "cn-colors-indigo-100", attributes: { category: "colors", type: "indigo", @@ -2784,7 +2784,7 @@ export default { $value: "lch(72.68% 45.97 284.36)", $type: "color", }, - name: "canary-colors-indigo-200", + name: "cn-colors-indigo-200", attributes: { category: "colors", type: "indigo", @@ -2801,7 +2801,7 @@ export default { $value: "lch(65.79% 58.29 283.92)", $type: "color", }, - name: "canary-colors-indigo-300", + name: "cn-colors-indigo-300", attributes: { category: "colors", type: "indigo", @@ -2818,7 +2818,7 @@ export default { $value: "lch(53.15% 81.87 288.43)", $type: "color", }, - name: "canary-colors-indigo-400", + name: "cn-colors-indigo-400", attributes: { category: "colors", type: "indigo", @@ -2835,7 +2835,7 @@ export default { $value: "lch(42.04% 107.17 295.8)", $type: "color", }, - name: "canary-colors-indigo-500", + name: "cn-colors-indigo-500", attributes: { category: "colors", type: "indigo", @@ -2852,7 +2852,7 @@ export default { $value: "lch(30.63% 128.3 302.36)", $type: "color", }, - name: "canary-colors-indigo-600", + name: "cn-colors-indigo-600", attributes: { category: "colors", type: "indigo", @@ -2869,7 +2869,7 @@ export default { $value: "lch(23.02% 107.52 302.38)", $type: "color", }, - name: "canary-colors-indigo-700", + name: "cn-colors-indigo-700", attributes: { category: "colors", type: "indigo", @@ -2886,7 +2886,7 @@ export default { $value: "lch(14.93% 84.93 302.33)", $type: "color", }, - name: "canary-colors-indigo-800", + name: "cn-colors-indigo-800", attributes: { category: "colors", type: "indigo", @@ -2903,7 +2903,7 @@ export default { $value: "lch(7.38% 63.51 302.14)", $type: "color", }, - name: "canary-colors-indigo-900", + name: "cn-colors-indigo-900", attributes: { category: "colors", type: "indigo", @@ -2920,7 +2920,7 @@ export default { $value: "lch(2.17% 29.85 290.49)", $type: "color", }, - name: "canary-colors-indigo-950", + name: "cn-colors-indigo-950", attributes: { category: "colors", type: "indigo", diff --git a/packages/core-design-system/src/styles-esm/components.ts b/packages/core-design-system/src/styles-esm/components.ts index 22c9e34b68..4fbb90fa09 100644 --- a/packages/core-design-system/src/styles-esm/components.ts +++ b/packages/core-design-system/src/styles-esm/components.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:32 GMT + * Generated on Tue, 18 Mar 2025 06:44:26 GMT * Copyright (c) Harness. */ @@ -29,7 +29,7 @@ export default { }, }, }, - name: "canary-input-size-sm", + name: "cn-input-size-sm", attributes: { category: "input", type: "size", @@ -58,7 +58,7 @@ export default { }, }, }, - name: "canary-input-size-default", + name: "cn-input-size-default", attributes: { category: "input", type: "size", @@ -88,7 +88,7 @@ export default { }, }, }, - name: "canary-input-radius", + name: "cn-input-radius", attributes: { category: "input", type: "radius", @@ -114,7 +114,7 @@ export default { }, }, }, - name: "canary-input-gap", + name: "cn-input-gap", attributes: { category: "input", type: "gap", @@ -142,7 +142,7 @@ export default { }, }, }, - name: "canary-input-px", + name: "cn-input-px", attributes: { category: "input", type: "px", @@ -170,7 +170,7 @@ export default { }, }, }, - name: "canary-input-py", + name: "cn-input-py", attributes: { category: "input", type: "py", @@ -199,7 +199,7 @@ export default { }, }, }, - name: "canary-btn-size-sm", + name: "cn-btn-size-sm", attributes: { category: "btn", type: "size", @@ -226,7 +226,7 @@ export default { }, }, }, - name: "canary-btn-size-default", + name: "cn-btn-size-default", attributes: { category: "btn", type: "size", @@ -253,7 +253,7 @@ export default { }, }, }, - name: "canary-btn-size-icon", + name: "cn-btn-size-icon", attributes: { category: "btn", type: "size", @@ -280,7 +280,7 @@ export default { }, }, }, - name: "canary-btn-size-lg", + name: "cn-btn-size-lg", attributes: { category: "btn", type: "size", @@ -309,7 +309,7 @@ export default { }, }, }, - name: "canary-btn-gap-sm", + name: "cn-btn-gap-sm", attributes: { category: "btn", type: "gap", @@ -336,7 +336,7 @@ export default { }, }, }, - name: "canary-btn-gap-default", + name: "cn-btn-gap-default", attributes: { category: "btn", type: "gap", @@ -363,7 +363,7 @@ export default { }, }, }, - name: "canary-btn-gap-lg", + name: "cn-btn-gap-lg", attributes: { category: "btn", type: "gap", @@ -392,7 +392,7 @@ export default { }, }, }, - name: "canary-btn-default-radius", + name: "cn-btn-default-radius", attributes: { category: "btn", type: "default", @@ -421,7 +421,7 @@ export default { }, }, }, - name: "canary-btn-rounded-radius", + name: "cn-btn-rounded-radius", attributes: { category: "btn", type: "rounded", @@ -449,7 +449,7 @@ export default { }, }, }, - name: "canary-btn-border", + name: "cn-btn-border", attributes: { category: "btn", type: "border", @@ -476,7 +476,7 @@ export default { }, }, }, - name: "canary-btn-px-sm", + name: "cn-btn-px-sm", attributes: { category: "btn", type: "px", @@ -503,7 +503,7 @@ export default { }, }, }, - name: "canary-btn-px-default", + name: "cn-btn-px-default", attributes: { category: "btn", type: "px", @@ -530,7 +530,7 @@ export default { }, }, }, - name: "canary-btn-px-lg", + name: "cn-btn-px-lg", attributes: { category: "btn", type: "px", @@ -559,7 +559,7 @@ export default { }, }, }, - name: "canary-btn-py-sm", + name: "cn-btn-py-sm", attributes: { category: "btn", type: "py", @@ -586,7 +586,7 @@ export default { }, }, }, - name: "canary-btn-py-default", + name: "cn-btn-py-default", attributes: { category: "btn", type: "py", @@ -613,7 +613,7 @@ export default { }, }, }, - name: "canary-btn-py-lg", + name: "cn-btn-py-lg", attributes: { category: "btn", type: "py", @@ -644,7 +644,7 @@ export default { }, }, }, - name: "canary-btn-link-size-sm", + name: "cn-btn-link-size-sm", attributes: { category: "btn-link", type: "size", @@ -671,7 +671,7 @@ export default { }, }, }, - name: "canary-btn-link-size-default", + name: "cn-btn-link-size-default", attributes: { category: "btn-link", type: "size", @@ -700,7 +700,7 @@ export default { }, }, }, - name: "canary-btn-link-gap-sm", + name: "cn-btn-link-gap-sm", attributes: { category: "btn-link", type: "gap", @@ -727,7 +727,7 @@ export default { }, }, }, - name: "canary-btn-link-gap-default", + name: "cn-btn-link-gap-default", attributes: { category: "btn-link", type: "gap", @@ -758,7 +758,7 @@ export default { }, }, }, - name: "canary-badge-size-sm", + name: "cn-badge-size-sm", attributes: { category: "badge", type: "size", @@ -785,7 +785,7 @@ export default { }, }, }, - name: "canary-badge-size-default", + name: "cn-badge-size-default", attributes: { category: "badge", type: "size", @@ -814,7 +814,7 @@ export default { }, }, }, - name: "canary-badge-default-gap", + name: "cn-badge-default-gap", attributes: { category: "badge", type: "default", @@ -841,7 +841,7 @@ export default { }, }, }, - name: "canary-badge-default-py", + name: "cn-badge-default-py", attributes: { category: "badge", type: "default", @@ -868,7 +868,7 @@ export default { }, }, }, - name: "canary-badge-default-px", + name: "cn-badge-default-px", attributes: { category: "badge", type: "default", @@ -895,7 +895,7 @@ export default { }, }, }, - name: "canary-badge-default-radius", + name: "cn-badge-default-radius", attributes: { category: "badge", type: "default", @@ -924,7 +924,7 @@ export default { }, }, }, - name: "canary-badge-rounded-radius", + name: "cn-badge-rounded-radius", attributes: { category: "badge", type: "rounded", @@ -951,7 +951,7 @@ export default { }, }, }, - name: "canary-badge-rounded-px", + name: "cn-badge-rounded-px", attributes: { category: "badge", type: "rounded", @@ -979,7 +979,7 @@ export default { }, }, }, - name: "canary-badge-border", + name: "cn-badge-border", attributes: { category: "badge", type: "border", @@ -1007,7 +1007,7 @@ export default { }, }, }, - name: "canary-tag-size", + name: "cn-tag-size", attributes: { category: "tag", type: "size", @@ -1033,7 +1033,7 @@ export default { }, }, }, - name: "canary-tag-gap", + name: "cn-tag-gap", attributes: { category: "tag", type: "gap", @@ -1059,7 +1059,7 @@ export default { }, }, }, - name: "canary-tag-py", + name: "cn-tag-py", attributes: { category: "tag", type: "py", @@ -1085,7 +1085,7 @@ export default { }, }, }, - name: "canary-tag-px", + name: "cn-tag-px", attributes: { category: "tag", type: "px", @@ -1112,7 +1112,7 @@ export default { }, }, }, - name: "canary-tag-default-radius", + name: "cn-tag-default-radius", attributes: { category: "tag", type: "default", @@ -1143,7 +1143,7 @@ export default { }, }, }, - name: "canary-tag-split-right-radius-r", + name: "cn-tag-split-right-radius-r", attributes: { category: "tag", type: "split", @@ -1172,7 +1172,7 @@ export default { }, }, }, - name: "canary-tag-split-right-radius-l", + name: "cn-tag-split-right-radius-l", attributes: { category: "tag", type: "split", @@ -1205,7 +1205,7 @@ export default { }, }, }, - name: "canary-tag-split-left-radius-r", + name: "cn-tag-split-left-radius-r", attributes: { category: "tag", type: "split", @@ -1234,7 +1234,7 @@ export default { }, }, }, - name: "canary-tag-split-left-radius-l", + name: "cn-tag-split-left-radius-l", attributes: { category: "tag", type: "split", @@ -1266,7 +1266,7 @@ export default { }, }, }, - name: "canary-tag-border", + name: "cn-tag-border", attributes: { category: "tag", type: "border", @@ -1297,7 +1297,7 @@ export default { }, }, }, - name: "canary-dropdown-item-px", + name: "cn-dropdown-item-px", attributes: { category: "dropdown", type: "item", @@ -1326,7 +1326,7 @@ export default { }, }, }, - name: "canary-dropdown-item-gap", + name: "cn-dropdown-item-gap", attributes: { category: "dropdown", type: "item", @@ -1353,7 +1353,7 @@ export default { }, }, }, - name: "canary-dropdown-item-radius", + name: "cn-dropdown-item-radius", attributes: { category: "dropdown", type: "item", @@ -1384,7 +1384,7 @@ export default { }, }, }, - name: "canary-dropdown-sub-item-px", + name: "cn-dropdown-sub-item-px", attributes: { category: "dropdown", type: "sub-item", @@ -1413,7 +1413,7 @@ export default { }, }, }, - name: "canary-dropdown-sub-item-py", + name: "cn-dropdown-sub-item-py", attributes: { category: "dropdown", type: "sub-item", @@ -1440,7 +1440,7 @@ export default { }, }, }, - name: "canary-dropdown-sub-item-gap", + name: "cn-dropdown-sub-item-gap", attributes: { category: "dropdown", type: "sub-item", @@ -1467,7 +1467,7 @@ export default { }, }, }, - name: "canary-dropdown-sub-item-radius", + name: "cn-dropdown-sub-item-radius", attributes: { category: "dropdown", type: "sub-item", @@ -1494,7 +1494,7 @@ export default { }, }, }, - name: "canary-dropdown-sub-item-size", + name: "cn-dropdown-sub-item-size", attributes: { category: "dropdown", type: "sub-item", @@ -1523,7 +1523,7 @@ export default { }, }, }, - name: "canary-dropdown-sub-item-gap-y", + name: "cn-dropdown-sub-item-gap-y", attributes: { category: "dropdown", type: "sub-item", @@ -1554,7 +1554,7 @@ export default { }, }, }, - name: "canary-dropdown-container-py", + name: "cn-dropdown-container-py", attributes: { category: "dropdown", type: "container", @@ -1583,7 +1583,7 @@ export default { }, }, }, - name: "canary-dropdown-container-radius", + name: "cn-dropdown-container-radius", attributes: { category: "dropdown", type: "container", @@ -1610,7 +1610,7 @@ export default { }, }, }, - name: "canary-dropdown-container-min-w", + name: "cn-dropdown-container-min-w", attributes: { category: "dropdown", type: "container", @@ -1642,7 +1642,7 @@ export default { }, }, }, - name: "canary-dropdown-menu-item-branch-selector-tag-px", + name: "cn-dropdown-menu-item-branch-selector-tag-px", attributes: { category: "dropdown", type: "menu-item-branch-selector", @@ -1672,7 +1672,7 @@ export default { }, }, }, - name: "canary-dropdown-menu-item-branch-selector-tag-size", + name: "cn-dropdown-menu-item-branch-selector-tag-size", attributes: { category: "dropdown", type: "menu-item-branch-selector", @@ -1706,7 +1706,7 @@ export default { }, }, }, - name: "canary-dropdown-menu-items-header-footer-px", + name: "cn-dropdown-menu-items-header-footer-px", attributes: { category: "dropdown", type: "menu-items", @@ -1736,7 +1736,7 @@ export default { }, }, }, - name: "canary-dropdown-menu-items-header-footer-py", + name: "cn-dropdown-menu-items-header-footer-py", attributes: { category: "dropdown", type: "menu-items", diff --git a/packages/core-design-system/src/styles-esm/core.ts b/packages/core-design-system/src/styles-esm/core.ts index 6bd691001f..67cadc8853 100644 --- a/packages/core-design-system/src/styles-esm/core.ts +++ b/packages/core-design-system/src/styles-esm/core.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:32 GMT + * Generated on Tue, 18 Mar 2025 06:44:26 GMT * Copyright (c) Harness. */ @@ -28,7 +28,7 @@ export default { }, }, }, - name: "canary-tracking-tighter", + name: "cn-tracking-tighter", attributes: { category: "tracking", type: "tighter", @@ -56,7 +56,7 @@ export default { }, }, }, - name: "canary-tracking-tight", + name: "cn-tracking-tight", attributes: { category: "tracking", type: "tight", @@ -84,7 +84,7 @@ export default { }, }, }, - name: "canary-tracking-normal", + name: "cn-tracking-normal", attributes: { category: "tracking", type: "normal", @@ -112,7 +112,7 @@ export default { }, }, }, - name: "canary-tracking-wide", + name: "cn-tracking-wide", attributes: { category: "tracking", type: "wide", @@ -140,7 +140,7 @@ export default { }, }, }, - name: "canary-tracking-wider", + name: "cn-tracking-wider", attributes: { category: "tracking", type: "wider", @@ -168,7 +168,7 @@ export default { }, }, }, - name: "canary-tracking-widest", + name: "cn-tracking-widest", attributes: { category: "tracking", type: "widest", @@ -198,7 +198,7 @@ export default { }, }, }, - name: "canary-font-weight-default-normal-100", + name: "cn-font-weight-default-normal-100", attributes: { category: "fontWeight", type: "default", @@ -226,7 +226,7 @@ export default { }, }, }, - name: "canary-font-weight-default-normal-200", + name: "cn-font-weight-default-normal-200", attributes: { category: "fontWeight", type: "default", @@ -254,7 +254,7 @@ export default { }, }, }, - name: "canary-font-weight-default-normal-300", + name: "cn-font-weight-default-normal-300", attributes: { category: "fontWeight", type: "default", @@ -282,7 +282,7 @@ export default { }, }, }, - name: "canary-font-weight-default-normal-400", + name: "cn-font-weight-default-normal-400", attributes: { category: "fontWeight", type: "default", @@ -310,7 +310,7 @@ export default { }, }, }, - name: "canary-font-weight-default-normal-500", + name: "cn-font-weight-default-normal-500", attributes: { category: "fontWeight", type: "default", @@ -338,7 +338,7 @@ export default { }, }, }, - name: "canary-font-weight-default-normal-600", + name: "cn-font-weight-default-normal-600", attributes: { category: "fontWeight", type: "default", @@ -366,7 +366,7 @@ export default { }, }, }, - name: "canary-font-weight-default-normal-700", + name: "cn-font-weight-default-normal-700", attributes: { category: "fontWeight", type: "default", @@ -394,7 +394,7 @@ export default { }, }, }, - name: "canary-font-weight-default-normal-800", + name: "cn-font-weight-default-normal-800", attributes: { category: "fontWeight", type: "default", @@ -422,7 +422,7 @@ export default { }, }, }, - name: "canary-font-weight-default-normal-900", + name: "cn-font-weight-default-normal-900", attributes: { category: "fontWeight", type: "default", @@ -453,7 +453,7 @@ export default { }, }, }, - name: "canary-font-weight-default-italic-100-weight", + name: "cn-font-weight-default-italic-100-weight", attributes: { category: "fontWeight", type: "default", @@ -482,7 +482,7 @@ export default { }, }, }, - name: "canary-font-weight-default-italic-100-style", + name: "cn-font-weight-default-italic-100-style", attributes: { category: "fontWeight", type: "default", @@ -513,7 +513,7 @@ export default { }, }, }, - name: "canary-font-weight-default-italic-200-weight", + name: "cn-font-weight-default-italic-200-weight", attributes: { category: "fontWeight", type: "default", @@ -542,7 +542,7 @@ export default { }, }, }, - name: "canary-font-weight-default-italic-200-style", + name: "cn-font-weight-default-italic-200-style", attributes: { category: "fontWeight", type: "default", @@ -573,7 +573,7 @@ export default { }, }, }, - name: "canary-font-weight-default-italic-300-weight", + name: "cn-font-weight-default-italic-300-weight", attributes: { category: "fontWeight", type: "default", @@ -602,7 +602,7 @@ export default { }, }, }, - name: "canary-font-weight-default-italic-300-style", + name: "cn-font-weight-default-italic-300-style", attributes: { category: "fontWeight", type: "default", @@ -633,7 +633,7 @@ export default { }, }, }, - name: "canary-font-weight-default-italic-400-weight", + name: "cn-font-weight-default-italic-400-weight", attributes: { category: "fontWeight", type: "default", @@ -662,7 +662,7 @@ export default { }, }, }, - name: "canary-font-weight-default-italic-400-style", + name: "cn-font-weight-default-italic-400-style", attributes: { category: "fontWeight", type: "default", @@ -693,7 +693,7 @@ export default { }, }, }, - name: "canary-font-weight-default-italic-500-weight", + name: "cn-font-weight-default-italic-500-weight", attributes: { category: "fontWeight", type: "default", @@ -722,7 +722,7 @@ export default { }, }, }, - name: "canary-font-weight-default-italic-500-style", + name: "cn-font-weight-default-italic-500-style", attributes: { category: "fontWeight", type: "default", @@ -753,7 +753,7 @@ export default { }, }, }, - name: "canary-font-weight-default-italic-600-weight", + name: "cn-font-weight-default-italic-600-weight", attributes: { category: "fontWeight", type: "default", @@ -782,7 +782,7 @@ export default { }, }, }, - name: "canary-font-weight-default-italic-600-style", + name: "cn-font-weight-default-italic-600-style", attributes: { category: "fontWeight", type: "default", @@ -813,7 +813,7 @@ export default { }, }, }, - name: "canary-font-weight-default-italic-700-weight", + name: "cn-font-weight-default-italic-700-weight", attributes: { category: "fontWeight", type: "default", @@ -842,7 +842,7 @@ export default { }, }, }, - name: "canary-font-weight-default-italic-700-style", + name: "cn-font-weight-default-italic-700-style", attributes: { category: "fontWeight", type: "default", @@ -873,7 +873,7 @@ export default { }, }, }, - name: "canary-font-weight-default-italic-800-weight", + name: "cn-font-weight-default-italic-800-weight", attributes: { category: "fontWeight", type: "default", @@ -902,7 +902,7 @@ export default { }, }, }, - name: "canary-font-weight-default-italic-800-style", + name: "cn-font-weight-default-italic-800-style", attributes: { category: "fontWeight", type: "default", @@ -933,7 +933,7 @@ export default { }, }, }, - name: "canary-font-weight-default-italic-900-weight", + name: "cn-font-weight-default-italic-900-weight", attributes: { category: "fontWeight", type: "default", @@ -962,7 +962,7 @@ export default { }, }, }, - name: "canary-font-weight-default-italic-900-style", + name: "cn-font-weight-default-italic-900-style", attributes: { category: "fontWeight", type: "default", @@ -996,7 +996,7 @@ export default { }, }, }, - name: "canary-font-weight-mono-normal-100", + name: "cn-font-weight-mono-normal-100", attributes: { category: "fontWeight", type: "mono", @@ -1024,7 +1024,7 @@ export default { }, }, }, - name: "canary-font-weight-mono-normal-200", + name: "cn-font-weight-mono-normal-200", attributes: { category: "fontWeight", type: "mono", @@ -1052,7 +1052,7 @@ export default { }, }, }, - name: "canary-font-weight-mono-normal-300", + name: "cn-font-weight-mono-normal-300", attributes: { category: "fontWeight", type: "mono", @@ -1080,7 +1080,7 @@ export default { }, }, }, - name: "canary-font-weight-mono-normal-400", + name: "cn-font-weight-mono-normal-400", attributes: { category: "fontWeight", type: "mono", @@ -1108,7 +1108,7 @@ export default { }, }, }, - name: "canary-font-weight-mono-normal-500", + name: "cn-font-weight-mono-normal-500", attributes: { category: "fontWeight", type: "mono", @@ -1136,7 +1136,7 @@ export default { }, }, }, - name: "canary-font-weight-mono-normal-700", + name: "cn-font-weight-mono-normal-700", attributes: { category: "fontWeight", type: "mono", @@ -1164,7 +1164,7 @@ export default { }, }, }, - name: "canary-font-weight-mono-normal-800", + name: "cn-font-weight-mono-normal-800", attributes: { category: "fontWeight", type: "mono", @@ -1195,7 +1195,7 @@ export default { }, }, }, - name: "canary-font-weight-mono-italic-100-weight", + name: "cn-font-weight-mono-italic-100-weight", attributes: { category: "fontWeight", type: "mono", @@ -1224,7 +1224,7 @@ export default { }, }, }, - name: "canary-font-weight-mono-italic-100-style", + name: "cn-font-weight-mono-italic-100-style", attributes: { category: "fontWeight", type: "mono", @@ -1255,7 +1255,7 @@ export default { }, }, }, - name: "canary-font-weight-mono-italic-200-weight", + name: "cn-font-weight-mono-italic-200-weight", attributes: { category: "fontWeight", type: "mono", @@ -1284,7 +1284,7 @@ export default { }, }, }, - name: "canary-font-weight-mono-italic-200-style", + name: "cn-font-weight-mono-italic-200-style", attributes: { category: "fontWeight", type: "mono", @@ -1315,7 +1315,7 @@ export default { }, }, }, - name: "canary-font-weight-mono-italic-300-weight", + name: "cn-font-weight-mono-italic-300-weight", attributes: { category: "fontWeight", type: "mono", @@ -1344,7 +1344,7 @@ export default { }, }, }, - name: "canary-font-weight-mono-italic-300-style", + name: "cn-font-weight-mono-italic-300-style", attributes: { category: "fontWeight", type: "mono", @@ -1375,7 +1375,7 @@ export default { }, }, }, - name: "canary-font-weight-mono-italic-400-weight", + name: "cn-font-weight-mono-italic-400-weight", attributes: { category: "fontWeight", type: "mono", @@ -1404,7 +1404,7 @@ export default { }, }, }, - name: "canary-font-weight-mono-italic-400-style", + name: "cn-font-weight-mono-italic-400-style", attributes: { category: "fontWeight", type: "mono", @@ -1435,7 +1435,7 @@ export default { }, }, }, - name: "canary-font-weight-mono-italic-500-weight", + name: "cn-font-weight-mono-italic-500-weight", attributes: { category: "fontWeight", type: "mono", @@ -1464,7 +1464,7 @@ export default { }, }, }, - name: "canary-font-weight-mono-italic-500-style", + name: "cn-font-weight-mono-italic-500-style", attributes: { category: "fontWeight", type: "mono", @@ -1495,7 +1495,7 @@ export default { }, }, }, - name: "canary-font-weight-mono-italic-700-weight", + name: "cn-font-weight-mono-italic-700-weight", attributes: { category: "fontWeight", type: "mono", @@ -1524,7 +1524,7 @@ export default { }, }, }, - name: "canary-font-weight-mono-italic-700-style", + name: "cn-font-weight-mono-italic-700-style", attributes: { category: "fontWeight", type: "mono", @@ -1555,7 +1555,7 @@ export default { }, }, }, - name: "canary-font-weight-mono-italic-800-weight", + name: "cn-font-weight-mono-italic-800-weight", attributes: { category: "fontWeight", type: "mono", @@ -1584,7 +1584,7 @@ export default { }, }, }, - name: "canary-font-weight-mono-italic-800-style", + name: "cn-font-weight-mono-italic-800-style", attributes: { category: "fontWeight", type: "mono", @@ -1618,7 +1618,7 @@ export default { }, }, }, - name: "canary-font-family-default", + name: "cn-font-family-default", attributes: { category: "fontFamily", type: "default", @@ -1644,7 +1644,7 @@ export default { }, }, }, - name: "canary-font-family-mono", + name: "cn-font-family-mono", attributes: { category: "fontFamily", type: "mono", @@ -1662,7 +1662,7 @@ export default { $type: "textDecoration", $value: "none", }, - name: "canary-text-decoration-none", + name: "cn-text-decoration-none", attributes: { category: "textDecoration", type: "none", @@ -1678,7 +1678,7 @@ export default { $type: "textDecoration", $value: "underline", }, - name: "canary-text-decoration-underline", + name: "cn-text-decoration-underline", attributes: { category: "textDecoration", type: "underline", @@ -1694,7 +1694,7 @@ export default { $type: "textDecoration", $value: "line-through", }, - name: "canary-text-decoration-line-through", + name: "cn-text-decoration-line-through", attributes: { category: "textDecoration", type: "line-through", @@ -1712,7 +1712,7 @@ export default { $type: "textCase", $value: "none", }, - name: "canary-text-case-none", + name: "cn-text-case-none", attributes: { category: "textCase", type: "none", @@ -1728,7 +1728,7 @@ export default { $type: "textCase", $value: "uppercase", }, - name: "canary-text-case-uppercase", + name: "cn-text-case-uppercase", attributes: { category: "textCase", type: "uppercase", @@ -1744,7 +1744,7 @@ export default { $type: "textCase", $value: "lowercase", }, - name: "canary-text-case-lowercase", + name: "cn-text-case-lowercase", attributes: { category: "textCase", type: "lowercase", @@ -1760,7 +1760,7 @@ export default { $type: "textCase", $value: "capitalize", }, - name: "canary-text-case-capitalize", + name: "cn-text-case-capitalize", attributes: { category: "textCase", type: "capitalize", @@ -1790,7 +1790,7 @@ export default { }, }, }, - name: "canary-font-size-1", + name: "cn-font-size-1", attributes: { category: "fontSize", type: "1", @@ -1818,7 +1818,7 @@ export default { }, }, }, - name: "canary-font-size-2", + name: "cn-font-size-2", attributes: { category: "fontSize", type: "2", @@ -1846,7 +1846,7 @@ export default { }, }, }, - name: "canary-font-size-3", + name: "cn-font-size-3", attributes: { category: "fontSize", type: "3", @@ -1874,7 +1874,7 @@ export default { }, }, }, - name: "canary-font-size-4", + name: "cn-font-size-4", attributes: { category: "fontSize", type: "4", @@ -1902,7 +1902,7 @@ export default { }, }, }, - name: "canary-font-size-5", + name: "cn-font-size-5", attributes: { category: "fontSize", type: "5", @@ -1930,7 +1930,7 @@ export default { }, }, }, - name: "canary-font-size-6", + name: "cn-font-size-6", attributes: { category: "fontSize", type: "6", @@ -1958,7 +1958,7 @@ export default { }, }, }, - name: "canary-font-size-7", + name: "cn-font-size-7", attributes: { category: "fontSize", type: "7", @@ -1986,7 +1986,7 @@ export default { }, }, }, - name: "canary-font-size-8", + name: "cn-font-size-8", attributes: { category: "fontSize", type: "8", @@ -2014,7 +2014,7 @@ export default { }, }, }, - name: "canary-font-size-9", + name: "cn-font-size-9", attributes: { category: "fontSize", type: "9", @@ -2042,7 +2042,7 @@ export default { }, }, }, - name: "canary-font-size-10", + name: "cn-font-size-10", attributes: { category: "fontSize", type: "10", @@ -2070,7 +2070,7 @@ export default { }, }, }, - name: "canary-font-size-11", + name: "cn-font-size-11", attributes: { category: "fontSize", type: "11", @@ -2098,7 +2098,7 @@ export default { }, }, }, - name: "canary-font-size-12", + name: "cn-font-size-12", attributes: { category: "fontSize", type: "12", @@ -2126,7 +2126,7 @@ export default { }, }, }, - name: "canary-font-size-13", + name: "cn-font-size-13", attributes: { category: "fontSize", type: "13", @@ -2155,7 +2155,7 @@ export default { }, }, }, - name: "canary-line-height-1-none", + name: "cn-line-height-1-none", attributes: { category: "lineHeight", type: "1", @@ -2182,7 +2182,7 @@ export default { }, }, }, - name: "canary-line-height-1-tight", + name: "cn-line-height-1-tight", attributes: { category: "lineHeight", type: "1", @@ -2209,7 +2209,7 @@ export default { }, }, }, - name: "canary-line-height-1-snug", + name: "cn-line-height-1-snug", attributes: { category: "lineHeight", type: "1", @@ -2236,7 +2236,7 @@ export default { }, }, }, - name: "canary-line-height-1-normal", + name: "cn-line-height-1-normal", attributes: { category: "lineHeight", type: "1", @@ -2263,7 +2263,7 @@ export default { }, }, }, - name: "canary-line-height-1-relaxed", + name: "cn-line-height-1-relaxed", attributes: { category: "lineHeight", type: "1", @@ -2290,7 +2290,7 @@ export default { }, }, }, - name: "canary-line-height-1-loose", + name: "cn-line-height-1-loose", attributes: { category: "lineHeight", type: "1", @@ -2319,7 +2319,7 @@ export default { }, }, }, - name: "canary-line-height-2-none", + name: "cn-line-height-2-none", attributes: { category: "lineHeight", type: "2", @@ -2346,7 +2346,7 @@ export default { }, }, }, - name: "canary-line-height-2-tight", + name: "cn-line-height-2-tight", attributes: { category: "lineHeight", type: "2", @@ -2373,7 +2373,7 @@ export default { }, }, }, - name: "canary-line-height-2-snug", + name: "cn-line-height-2-snug", attributes: { category: "lineHeight", type: "2", @@ -2400,7 +2400,7 @@ export default { }, }, }, - name: "canary-line-height-2-normal", + name: "cn-line-height-2-normal", attributes: { category: "lineHeight", type: "2", @@ -2427,7 +2427,7 @@ export default { }, }, }, - name: "canary-line-height-2-relaxed", + name: "cn-line-height-2-relaxed", attributes: { category: "lineHeight", type: "2", @@ -2454,7 +2454,7 @@ export default { }, }, }, - name: "canary-line-height-2-loose", + name: "cn-line-height-2-loose", attributes: { category: "lineHeight", type: "2", @@ -2483,7 +2483,7 @@ export default { }, }, }, - name: "canary-line-height-3-none", + name: "cn-line-height-3-none", attributes: { category: "lineHeight", type: "3", @@ -2510,7 +2510,7 @@ export default { }, }, }, - name: "canary-line-height-3-tight", + name: "cn-line-height-3-tight", attributes: { category: "lineHeight", type: "3", @@ -2537,7 +2537,7 @@ export default { }, }, }, - name: "canary-line-height-3-snug", + name: "cn-line-height-3-snug", attributes: { category: "lineHeight", type: "3", @@ -2564,7 +2564,7 @@ export default { }, }, }, - name: "canary-line-height-3-normal", + name: "cn-line-height-3-normal", attributes: { category: "lineHeight", type: "3", @@ -2591,7 +2591,7 @@ export default { }, }, }, - name: "canary-line-height-3-relaxed", + name: "cn-line-height-3-relaxed", attributes: { category: "lineHeight", type: "3", @@ -2618,7 +2618,7 @@ export default { }, }, }, - name: "canary-line-height-3-loose", + name: "cn-line-height-3-loose", attributes: { category: "lineHeight", type: "3", @@ -2647,7 +2647,7 @@ export default { }, }, }, - name: "canary-line-height-4-none", + name: "cn-line-height-4-none", attributes: { category: "lineHeight", type: "4", @@ -2674,7 +2674,7 @@ export default { }, }, }, - name: "canary-line-height-4-tight", + name: "cn-line-height-4-tight", attributes: { category: "lineHeight", type: "4", @@ -2701,7 +2701,7 @@ export default { }, }, }, - name: "canary-line-height-4-snug", + name: "cn-line-height-4-snug", attributes: { category: "lineHeight", type: "4", @@ -2728,7 +2728,7 @@ export default { }, }, }, - name: "canary-line-height-4-normal", + name: "cn-line-height-4-normal", attributes: { category: "lineHeight", type: "4", @@ -2755,7 +2755,7 @@ export default { }, }, }, - name: "canary-line-height-4-relaxed", + name: "cn-line-height-4-relaxed", attributes: { category: "lineHeight", type: "4", @@ -2782,7 +2782,7 @@ export default { }, }, }, - name: "canary-line-height-4-loose", + name: "cn-line-height-4-loose", attributes: { category: "lineHeight", type: "4", @@ -2811,7 +2811,7 @@ export default { }, }, }, - name: "canary-line-height-5-none", + name: "cn-line-height-5-none", attributes: { category: "lineHeight", type: "5", @@ -2838,7 +2838,7 @@ export default { }, }, }, - name: "canary-line-height-5-tight", + name: "cn-line-height-5-tight", attributes: { category: "lineHeight", type: "5", @@ -2865,7 +2865,7 @@ export default { }, }, }, - name: "canary-line-height-5-snug", + name: "cn-line-height-5-snug", attributes: { category: "lineHeight", type: "5", @@ -2892,7 +2892,7 @@ export default { }, }, }, - name: "canary-line-height-5-normal", + name: "cn-line-height-5-normal", attributes: { category: "lineHeight", type: "5", @@ -2919,7 +2919,7 @@ export default { }, }, }, - name: "canary-line-height-5-relaxed", + name: "cn-line-height-5-relaxed", attributes: { category: "lineHeight", type: "5", @@ -2946,7 +2946,7 @@ export default { }, }, }, - name: "canary-line-height-5-loose", + name: "cn-line-height-5-loose", attributes: { category: "lineHeight", type: "5", @@ -2975,7 +2975,7 @@ export default { }, }, }, - name: "canary-line-height-6-none", + name: "cn-line-height-6-none", attributes: { category: "lineHeight", type: "6", @@ -3002,7 +3002,7 @@ export default { }, }, }, - name: "canary-line-height-6-tight", + name: "cn-line-height-6-tight", attributes: { category: "lineHeight", type: "6", @@ -3029,7 +3029,7 @@ export default { }, }, }, - name: "canary-line-height-6-snug", + name: "cn-line-height-6-snug", attributes: { category: "lineHeight", type: "6", @@ -3056,7 +3056,7 @@ export default { }, }, }, - name: "canary-line-height-6-normal", + name: "cn-line-height-6-normal", attributes: { category: "lineHeight", type: "6", @@ -3083,7 +3083,7 @@ export default { }, }, }, - name: "canary-line-height-6-relaxed", + name: "cn-line-height-6-relaxed", attributes: { category: "lineHeight", type: "6", @@ -3110,7 +3110,7 @@ export default { }, }, }, - name: "canary-line-height-6-loose", + name: "cn-line-height-6-loose", attributes: { category: "lineHeight", type: "6", @@ -3139,7 +3139,7 @@ export default { }, }, }, - name: "canary-line-height-7-none", + name: "cn-line-height-7-none", attributes: { category: "lineHeight", type: "7", @@ -3166,7 +3166,7 @@ export default { }, }, }, - name: "canary-line-height-7-tight", + name: "cn-line-height-7-tight", attributes: { category: "lineHeight", type: "7", @@ -3193,7 +3193,7 @@ export default { }, }, }, - name: "canary-line-height-7-snug", + name: "cn-line-height-7-snug", attributes: { category: "lineHeight", type: "7", @@ -3220,7 +3220,7 @@ export default { }, }, }, - name: "canary-line-height-7-normal", + name: "cn-line-height-7-normal", attributes: { category: "lineHeight", type: "7", @@ -3247,7 +3247,7 @@ export default { }, }, }, - name: "canary-line-height-7-relaxed", + name: "cn-line-height-7-relaxed", attributes: { category: "lineHeight", type: "7", @@ -3274,7 +3274,7 @@ export default { }, }, }, - name: "canary-line-height-7-loose", + name: "cn-line-height-7-loose", attributes: { category: "lineHeight", type: "7", @@ -3303,7 +3303,7 @@ export default { }, }, }, - name: "canary-line-height-8-none", + name: "cn-line-height-8-none", attributes: { category: "lineHeight", type: "8", @@ -3330,7 +3330,7 @@ export default { }, }, }, - name: "canary-line-height-8-tight", + name: "cn-line-height-8-tight", attributes: { category: "lineHeight", type: "8", @@ -3357,7 +3357,7 @@ export default { }, }, }, - name: "canary-line-height-8-snug", + name: "cn-line-height-8-snug", attributes: { category: "lineHeight", type: "8", @@ -3384,7 +3384,7 @@ export default { }, }, }, - name: "canary-line-height-8-normal", + name: "cn-line-height-8-normal", attributes: { category: "lineHeight", type: "8", @@ -3411,7 +3411,7 @@ export default { }, }, }, - name: "canary-line-height-8-relaxed", + name: "cn-line-height-8-relaxed", attributes: { category: "lineHeight", type: "8", @@ -3438,7 +3438,7 @@ export default { }, }, }, - name: "canary-line-height-8-loose", + name: "cn-line-height-8-loose", attributes: { category: "lineHeight", type: "8", @@ -3467,7 +3467,7 @@ export default { }, }, }, - name: "canary-line-height-9-none", + name: "cn-line-height-9-none", attributes: { category: "lineHeight", type: "9", @@ -3494,7 +3494,7 @@ export default { }, }, }, - name: "canary-line-height-9-tight", + name: "cn-line-height-9-tight", attributes: { category: "lineHeight", type: "9", @@ -3521,7 +3521,7 @@ export default { }, }, }, - name: "canary-line-height-9-snug", + name: "cn-line-height-9-snug", attributes: { category: "lineHeight", type: "9", @@ -3548,7 +3548,7 @@ export default { }, }, }, - name: "canary-line-height-9-normal", + name: "cn-line-height-9-normal", attributes: { category: "lineHeight", type: "9", @@ -3575,7 +3575,7 @@ export default { }, }, }, - name: "canary-line-height-9-relaxed", + name: "cn-line-height-9-relaxed", attributes: { category: "lineHeight", type: "9", @@ -3602,7 +3602,7 @@ export default { }, }, }, - name: "canary-line-height-9-loose", + name: "cn-line-height-9-loose", attributes: { category: "lineHeight", type: "9", @@ -3631,7 +3631,7 @@ export default { }, }, }, - name: "canary-line-height-10-none", + name: "cn-line-height-10-none", attributes: { category: "lineHeight", type: "10", @@ -3658,7 +3658,7 @@ export default { }, }, }, - name: "canary-line-height-10-tight", + name: "cn-line-height-10-tight", attributes: { category: "lineHeight", type: "10", @@ -3685,7 +3685,7 @@ export default { }, }, }, - name: "canary-line-height-10-snug", + name: "cn-line-height-10-snug", attributes: { category: "lineHeight", type: "10", @@ -3712,7 +3712,7 @@ export default { }, }, }, - name: "canary-line-height-10-normal", + name: "cn-line-height-10-normal", attributes: { category: "lineHeight", type: "10", @@ -3739,7 +3739,7 @@ export default { }, }, }, - name: "canary-line-height-10-relaxed", + name: "cn-line-height-10-relaxed", attributes: { category: "lineHeight", type: "10", @@ -3766,7 +3766,7 @@ export default { }, }, }, - name: "canary-line-height-10-loose", + name: "cn-line-height-10-loose", attributes: { category: "lineHeight", type: "10", @@ -3795,7 +3795,7 @@ export default { }, }, }, - name: "canary-line-height-11-none", + name: "cn-line-height-11-none", attributes: { category: "lineHeight", type: "11", @@ -3822,7 +3822,7 @@ export default { }, }, }, - name: "canary-line-height-11-tight", + name: "cn-line-height-11-tight", attributes: { category: "lineHeight", type: "11", @@ -3849,7 +3849,7 @@ export default { }, }, }, - name: "canary-line-height-11-snug", + name: "cn-line-height-11-snug", attributes: { category: "lineHeight", type: "11", @@ -3876,7 +3876,7 @@ export default { }, }, }, - name: "canary-line-height-11-normal", + name: "cn-line-height-11-normal", attributes: { category: "lineHeight", type: "11", @@ -3903,7 +3903,7 @@ export default { }, }, }, - name: "canary-line-height-11-relaxed", + name: "cn-line-height-11-relaxed", attributes: { category: "lineHeight", type: "11", @@ -3930,7 +3930,7 @@ export default { }, }, }, - name: "canary-line-height-11-loose", + name: "cn-line-height-11-loose", attributes: { category: "lineHeight", type: "11", @@ -3959,7 +3959,7 @@ export default { }, }, }, - name: "canary-line-height-12-none", + name: "cn-line-height-12-none", attributes: { category: "lineHeight", type: "12", @@ -3986,7 +3986,7 @@ export default { }, }, }, - name: "canary-line-height-12-tight", + name: "cn-line-height-12-tight", attributes: { category: "lineHeight", type: "12", @@ -4013,7 +4013,7 @@ export default { }, }, }, - name: "canary-line-height-12-snug", + name: "cn-line-height-12-snug", attributes: { category: "lineHeight", type: "12", @@ -4040,7 +4040,7 @@ export default { }, }, }, - name: "canary-line-height-12-normal", + name: "cn-line-height-12-normal", attributes: { category: "lineHeight", type: "12", @@ -4067,7 +4067,7 @@ export default { }, }, }, - name: "canary-line-height-12-relaxed", + name: "cn-line-height-12-relaxed", attributes: { category: "lineHeight", type: "12", @@ -4094,7 +4094,7 @@ export default { }, }, }, - name: "canary-line-height-12-loose", + name: "cn-line-height-12-loose", attributes: { category: "lineHeight", type: "12", @@ -4123,7 +4123,7 @@ export default { }, }, }, - name: "canary-line-height-13-none", + name: "cn-line-height-13-none", attributes: { category: "lineHeight", type: "13", @@ -4150,7 +4150,7 @@ export default { }, }, }, - name: "canary-line-height-13-tight", + name: "cn-line-height-13-tight", attributes: { category: "lineHeight", type: "13", @@ -4177,7 +4177,7 @@ export default { }, }, }, - name: "canary-line-height-13-snug", + name: "cn-line-height-13-snug", attributes: { category: "lineHeight", type: "13", @@ -4204,7 +4204,7 @@ export default { }, }, }, - name: "canary-line-height-13-normal", + name: "cn-line-height-13-normal", attributes: { category: "lineHeight", type: "13", @@ -4231,7 +4231,7 @@ export default { }, }, }, - name: "canary-line-height-13-relaxed", + name: "cn-line-height-13-relaxed", attributes: { category: "lineHeight", type: "13", @@ -4258,7 +4258,7 @@ export default { }, }, }, - name: "canary-line-height-13-loose", + name: "cn-line-height-13-loose", attributes: { category: "lineHeight", type: "13", @@ -4286,7 +4286,7 @@ export default { }, }, }, - name: "canary-line-height-none", + name: "cn-line-height-none", attributes: { category: "lineHeight", type: "none", @@ -4312,7 +4312,7 @@ export default { }, }, }, - name: "canary-line-height-tight", + name: "cn-line-height-tight", attributes: { category: "lineHeight", type: "tight", @@ -4338,7 +4338,7 @@ export default { }, }, }, - name: "canary-line-height-snug", + name: "cn-line-height-snug", attributes: { category: "lineHeight", type: "snug", @@ -4364,7 +4364,7 @@ export default { }, }, }, - name: "canary-line-height-normal", + name: "cn-line-height-normal", attributes: { category: "lineHeight", type: "normal", @@ -4390,7 +4390,7 @@ export default { }, }, }, - name: "canary-line-height-relaxed", + name: "cn-line-height-relaxed", attributes: { category: "lineHeight", type: "relaxed", @@ -4416,7 +4416,7 @@ export default { }, }, }, - name: "canary-line-height-loose", + name: "cn-line-height-loose", attributes: { category: "lineHeight", type: "loose", @@ -4444,7 +4444,7 @@ export default { }, }, }, - name: "canary-spacing-0", + name: "cn-spacing-0", attributes: { category: "spacing", type: "0", @@ -4470,7 +4470,7 @@ export default { }, }, }, - name: "canary-spacing-1", + name: "cn-spacing-1", attributes: { category: "spacing", type: "1", @@ -4496,7 +4496,7 @@ export default { }, }, }, - name: "canary-spacing-2", + name: "cn-spacing-2", attributes: { category: "spacing", type: "2", @@ -4522,7 +4522,7 @@ export default { }, }, }, - name: "canary-spacing-3", + name: "cn-spacing-3", attributes: { category: "spacing", type: "3", @@ -4548,7 +4548,7 @@ export default { }, }, }, - name: "canary-spacing-4", + name: "cn-spacing-4", attributes: { category: "spacing", type: "4", @@ -4574,7 +4574,7 @@ export default { }, }, }, - name: "canary-spacing-5", + name: "cn-spacing-5", attributes: { category: "spacing", type: "5", @@ -4600,7 +4600,7 @@ export default { }, }, }, - name: "canary-spacing-6", + name: "cn-spacing-6", attributes: { category: "spacing", type: "6", @@ -4626,7 +4626,7 @@ export default { }, }, }, - name: "canary-spacing-7", + name: "cn-spacing-7", attributes: { category: "spacing", type: "7", @@ -4652,7 +4652,7 @@ export default { }, }, }, - name: "canary-spacing-8", + name: "cn-spacing-8", attributes: { category: "spacing", type: "8", @@ -4678,7 +4678,7 @@ export default { }, }, }, - name: "canary-spacing-9", + name: "cn-spacing-9", attributes: { category: "spacing", type: "9", @@ -4704,7 +4704,7 @@ export default { }, }, }, - name: "canary-spacing-10", + name: "cn-spacing-10", attributes: { category: "spacing", type: "10", @@ -4730,7 +4730,7 @@ export default { }, }, }, - name: "canary-spacing-11", + name: "cn-spacing-11", attributes: { category: "spacing", type: "11", @@ -4756,7 +4756,7 @@ export default { }, }, }, - name: "canary-spacing-12", + name: "cn-spacing-12", attributes: { category: "spacing", type: "12", @@ -4782,7 +4782,7 @@ export default { }, }, }, - name: "canary-spacing-14", + name: "cn-spacing-14", attributes: { category: "spacing", type: "14", @@ -4808,7 +4808,7 @@ export default { }, }, }, - name: "canary-spacing-16", + name: "cn-spacing-16", attributes: { category: "spacing", type: "16", @@ -4834,7 +4834,7 @@ export default { }, }, }, - name: "canary-spacing-20", + name: "cn-spacing-20", attributes: { category: "spacing", type: "20", @@ -4860,7 +4860,7 @@ export default { }, }, }, - name: "canary-spacing-24", + name: "cn-spacing-24", attributes: { category: "spacing", type: "24", @@ -4886,7 +4886,7 @@ export default { }, }, }, - name: "canary-spacing-28", + name: "cn-spacing-28", attributes: { category: "spacing", type: "28", @@ -4912,7 +4912,7 @@ export default { }, }, }, - name: "canary-spacing-32", + name: "cn-spacing-32", attributes: { category: "spacing", type: "32", @@ -4938,7 +4938,7 @@ export default { }, }, }, - name: "canary-spacing-36", + name: "cn-spacing-36", attributes: { category: "spacing", type: "36", @@ -4964,7 +4964,7 @@ export default { }, }, }, - name: "canary-spacing-40", + name: "cn-spacing-40", attributes: { category: "spacing", type: "40", @@ -4990,7 +4990,7 @@ export default { }, }, }, - name: "canary-spacing-44", + name: "cn-spacing-44", attributes: { category: "spacing", type: "44", @@ -5016,7 +5016,7 @@ export default { }, }, }, - name: "canary-spacing-48", + name: "cn-spacing-48", attributes: { category: "spacing", type: "48", @@ -5042,7 +5042,7 @@ export default { }, }, }, - name: "canary-spacing-52", + name: "cn-spacing-52", attributes: { category: "spacing", type: "52", @@ -5068,7 +5068,7 @@ export default { }, }, }, - name: "canary-spacing-56", + name: "cn-spacing-56", attributes: { category: "spacing", type: "56", @@ -5094,7 +5094,7 @@ export default { }, }, }, - name: "canary-spacing-60", + name: "cn-spacing-60", attributes: { category: "spacing", type: "60", @@ -5120,7 +5120,7 @@ export default { }, }, }, - name: "canary-spacing-64", + name: "cn-spacing-64", attributes: { category: "spacing", type: "64", @@ -5146,7 +5146,7 @@ export default { }, }, }, - name: "canary-spacing-72", + name: "cn-spacing-72", attributes: { category: "spacing", type: "72", @@ -5172,7 +5172,7 @@ export default { }, }, }, - name: "canary-spacing-80", + name: "cn-spacing-80", attributes: { category: "spacing", type: "80", @@ -5198,7 +5198,7 @@ export default { }, }, }, - name: "canary-spacing-96", + name: "cn-spacing-96", attributes: { category: "spacing", type: "96", @@ -5224,7 +5224,7 @@ export default { }, }, }, - name: "canary-spacing-px", + name: "cn-spacing-px", attributes: { category: "spacing", type: "px", @@ -5252,7 +5252,7 @@ export default { }, }, }, - name: "canary-spacing-half", + name: "cn-spacing-half", attributes: { category: "spacing", type: "half", @@ -5280,7 +5280,7 @@ export default { }, }, }, - name: "canary-spacing-1-half", + name: "cn-spacing-1-half", attributes: { category: "spacing", type: "1-half", @@ -5308,7 +5308,7 @@ export default { }, }, }, - name: "canary-spacing-2-half", + name: "cn-spacing-2-half", attributes: { category: "spacing", type: "2-half", @@ -5336,7 +5336,7 @@ export default { }, }, }, - name: "canary-spacing-3-half", + name: "cn-spacing-3-half", attributes: { category: "spacing", type: "3-half", @@ -5364,7 +5364,7 @@ export default { }, }, }, - name: "canary-rounded-1", + name: "cn-rounded-1", attributes: { category: "rounded", type: "1", @@ -5390,7 +5390,7 @@ export default { }, }, }, - name: "canary-rounded-2", + name: "cn-rounded-2", attributes: { category: "rounded", type: "2", @@ -5416,7 +5416,7 @@ export default { }, }, }, - name: "canary-rounded-3", + name: "cn-rounded-3", attributes: { category: "rounded", type: "3", @@ -5442,7 +5442,7 @@ export default { }, }, }, - name: "canary-rounded-4", + name: "cn-rounded-4", attributes: { category: "rounded", type: "4", @@ -5468,7 +5468,7 @@ export default { }, }, }, - name: "canary-rounded-5", + name: "cn-rounded-5", attributes: { category: "rounded", type: "5", @@ -5494,7 +5494,7 @@ export default { }, }, }, - name: "canary-rounded-6", + name: "cn-rounded-6", attributes: { category: "rounded", type: "6", @@ -5520,7 +5520,7 @@ export default { }, }, }, - name: "canary-rounded-7", + name: "cn-rounded-7", attributes: { category: "rounded", type: "7", @@ -5548,7 +5548,7 @@ export default { }, }, }, - name: "canary-rounded-none", + name: "cn-rounded-none", attributes: { category: "rounded", type: "none", @@ -5576,7 +5576,7 @@ export default { }, }, }, - name: "canary-rounded-full", + name: "cn-rounded-full", attributes: { category: "rounded", type: "full", @@ -5604,7 +5604,7 @@ export default { }, }, }, - name: "canary-size-0", + name: "cn-size-0", attributes: { category: "size", type: "0", @@ -5630,7 +5630,7 @@ export default { }, }, }, - name: "canary-size-1", + name: "cn-size-1", attributes: { category: "size", type: "1", @@ -5656,7 +5656,7 @@ export default { }, }, }, - name: "canary-size-2", + name: "cn-size-2", attributes: { category: "size", type: "2", @@ -5682,7 +5682,7 @@ export default { }, }, }, - name: "canary-size-3", + name: "cn-size-3", attributes: { category: "size", type: "3", @@ -5708,7 +5708,7 @@ export default { }, }, }, - name: "canary-size-4", + name: "cn-size-4", attributes: { category: "size", type: "4", @@ -5734,7 +5734,7 @@ export default { }, }, }, - name: "canary-size-5", + name: "cn-size-5", attributes: { category: "size", type: "5", @@ -5760,7 +5760,7 @@ export default { }, }, }, - name: "canary-size-6", + name: "cn-size-6", attributes: { category: "size", type: "6", @@ -5786,7 +5786,7 @@ export default { }, }, }, - name: "canary-size-7", + name: "cn-size-7", attributes: { category: "size", type: "7", @@ -5812,7 +5812,7 @@ export default { }, }, }, - name: "canary-size-8", + name: "cn-size-8", attributes: { category: "size", type: "8", @@ -5838,7 +5838,7 @@ export default { }, }, }, - name: "canary-size-9", + name: "cn-size-9", attributes: { category: "size", type: "9", @@ -5864,7 +5864,7 @@ export default { }, }, }, - name: "canary-size-10", + name: "cn-size-10", attributes: { category: "size", type: "10", @@ -5890,7 +5890,7 @@ export default { }, }, }, - name: "canary-size-11", + name: "cn-size-11", attributes: { category: "size", type: "11", @@ -5916,7 +5916,7 @@ export default { }, }, }, - name: "canary-size-12", + name: "cn-size-12", attributes: { category: "size", type: "12", @@ -5942,7 +5942,7 @@ export default { }, }, }, - name: "canary-size-14", + name: "cn-size-14", attributes: { category: "size", type: "14", @@ -5968,7 +5968,7 @@ export default { }, }, }, - name: "canary-size-16", + name: "cn-size-16", attributes: { category: "size", type: "16", @@ -5994,7 +5994,7 @@ export default { }, }, }, - name: "canary-size-20", + name: "cn-size-20", attributes: { category: "size", type: "20", @@ -6020,7 +6020,7 @@ export default { }, }, }, - name: "canary-size-24", + name: "cn-size-24", attributes: { category: "size", type: "24", @@ -6046,7 +6046,7 @@ export default { }, }, }, - name: "canary-size-28", + name: "cn-size-28", attributes: { category: "size", type: "28", @@ -6072,7 +6072,7 @@ export default { }, }, }, - name: "canary-size-32", + name: "cn-size-32", attributes: { category: "size", type: "32", @@ -6098,7 +6098,7 @@ export default { }, }, }, - name: "canary-size-36", + name: "cn-size-36", attributes: { category: "size", type: "36", @@ -6124,7 +6124,7 @@ export default { }, }, }, - name: "canary-size-40", + name: "cn-size-40", attributes: { category: "size", type: "40", @@ -6150,7 +6150,7 @@ export default { }, }, }, - name: "canary-size-44", + name: "cn-size-44", attributes: { category: "size", type: "44", @@ -6176,7 +6176,7 @@ export default { }, }, }, - name: "canary-size-48", + name: "cn-size-48", attributes: { category: "size", type: "48", @@ -6202,7 +6202,7 @@ export default { }, }, }, - name: "canary-size-52", + name: "cn-size-52", attributes: { category: "size", type: "52", @@ -6228,7 +6228,7 @@ export default { }, }, }, - name: "canary-size-56", + name: "cn-size-56", attributes: { category: "size", type: "56", @@ -6254,7 +6254,7 @@ export default { }, }, }, - name: "canary-size-60", + name: "cn-size-60", attributes: { category: "size", type: "60", @@ -6280,7 +6280,7 @@ export default { }, }, }, - name: "canary-size-64", + name: "cn-size-64", attributes: { category: "size", type: "64", @@ -6306,7 +6306,7 @@ export default { }, }, }, - name: "canary-size-72", + name: "cn-size-72", attributes: { category: "size", type: "72", @@ -6332,7 +6332,7 @@ export default { }, }, }, - name: "canary-size-80", + name: "cn-size-80", attributes: { category: "size", type: "80", @@ -6358,7 +6358,7 @@ export default { }, }, }, - name: "canary-size-96", + name: "cn-size-96", attributes: { category: "size", type: "96", @@ -6384,7 +6384,7 @@ export default { }, }, }, - name: "canary-size-px", + name: "cn-size-px", attributes: { category: "size", type: "px", @@ -6412,7 +6412,7 @@ export default { }, }, }, - name: "canary-size-half", + name: "cn-size-half", attributes: { category: "size", type: "half", @@ -6440,7 +6440,7 @@ export default { }, }, }, - name: "canary-size-1-half", + name: "cn-size-1-half", attributes: { category: "size", type: "1-half", @@ -6468,7 +6468,7 @@ export default { }, }, }, - name: "canary-size-2-half", + name: "cn-size-2-half", attributes: { category: "size", type: "2-half", @@ -6496,7 +6496,7 @@ export default { }, }, }, - name: "canary-size-3-half", + name: "cn-size-3-half", attributes: { category: "size", type: "3-half", @@ -6526,7 +6526,7 @@ export default { }, }, }, - name: "canary-border-width-0", + name: "cn-border-width-0", attributes: { category: "borderWidth", type: "0", @@ -6554,7 +6554,7 @@ export default { }, }, }, - name: "canary-border-width-1", + name: "cn-border-width-1", attributes: { category: "borderWidth", type: "1", @@ -6582,7 +6582,7 @@ export default { }, }, }, - name: "canary-border-width-2", + name: "cn-border-width-2", attributes: { category: "borderWidth", type: "2", @@ -6610,7 +6610,7 @@ export default { }, }, }, - name: "canary-border-width-4", + name: "cn-border-width-4", attributes: { category: "borderWidth", type: "4", @@ -6638,7 +6638,7 @@ export default { }, }, }, - name: "canary-border-width-8", + name: "cn-border-width-8", attributes: { category: "borderWidth", type: "8", @@ -6666,7 +6666,7 @@ export default { }, }, }, - name: "canary-icon-size-xxs", + name: "cn-icon-size-xxs", attributes: { category: "iconSize", type: "xxs", @@ -6692,7 +6692,7 @@ export default { }, }, }, - name: "canary-icon-size-xs", + name: "cn-icon-size-xs", attributes: { category: "iconSize", type: "xs", @@ -6718,7 +6718,7 @@ export default { }, }, }, - name: "canary-icon-size-sm", + name: "cn-icon-size-sm", attributes: { category: "iconSize", type: "sm", @@ -6744,7 +6744,7 @@ export default { }, }, }, - name: "canary-icon-size-default", + name: "cn-icon-size-default", attributes: { category: "iconSize", type: "default", @@ -6770,7 +6770,7 @@ export default { }, }, }, - name: "canary-icon-size-md", + name: "cn-icon-size-md", attributes: { category: "iconSize", type: "md", @@ -6798,7 +6798,7 @@ export default { }, }, }, - name: "canary-icon-size-lg", + name: "cn-icon-size-lg", attributes: { category: "iconSize", type: "lg", diff --git a/packages/core-design-system/src/styles-esm/source-dark-deuteranopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/dark-deuteranopia-gitness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-dark-deuteranopia-desktop-gitness.ts rename to packages/core-design-system/src/styles-esm/dark-deuteranopia-gitness.ts index e6b2170f6b..ef093170a5 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-deuteranopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/dark-deuteranopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:02 GMT + * Generated on Tue, 18 Mar 2025 06:44:06 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.2)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable cyan text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.2)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-yellow-300) l c h / 0.2)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-yellow-500) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.2)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1955,7 +1955,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1979,7 +1979,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2003,7 +2003,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2029,7 +2029,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2053,7 +2053,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2077,7 +2077,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2105,7 +2105,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2129,7 +2129,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2155,7 +2155,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2179,7 +2179,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2206,7 +2206,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable cyan text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2227,7 +2227,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -2247,7 +2247,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2268,7 +2268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.2)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -2288,7 +2288,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2310,7 +2310,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -2330,7 +2330,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2352,7 +2352,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -2372,7 +2372,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2399,7 +2399,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2420,7 +2420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -2440,7 +2440,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2461,7 +2461,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -2481,7 +2481,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2503,7 +2503,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -2523,7 +2523,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2545,7 +2545,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -2565,7 +2565,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2592,7 +2592,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2613,7 +2613,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2638,7 +2638,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2664,7 +2664,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2686,7 +2686,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2710,7 +2710,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2732,7 +2732,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2754,7 +2754,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2774,7 +2774,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2794,7 +2794,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -2814,7 +2814,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2838,7 +2838,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2858,7 +2858,7 @@ export default { $value: "{border.1}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2881,7 +2881,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2903,7 +2903,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2926,7 +2926,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -2946,7 +2946,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2982,7 +2982,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3002,7 +3002,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.12)", $description: "Cyan background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -3022,7 +3022,7 @@ export default { $description: "Cyan background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3042,7 +3042,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -3062,7 +3062,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3082,7 +3082,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -3102,7 +3102,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3124,7 +3124,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3146,7 +3146,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3166,7 +3166,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.12)", $description: "Orange background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -3186,7 +3186,7 @@ export default { $description: "Orange background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3206,7 +3206,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -3226,7 +3226,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3246,7 +3246,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -3266,7 +3266,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3288,7 +3288,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3310,7 +3310,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3332,7 +3332,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3354,7 +3354,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3374,7 +3374,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -3394,7 +3394,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3414,7 +3414,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", isSource: true, @@ -3432,7 +3432,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3454,7 +3454,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3476,7 +3476,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3500,7 +3500,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3522,7 +3522,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3544,7 +3544,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3566,7 +3566,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3588,7 +3588,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3612,7 +3612,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3636,7 +3636,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3658,7 +3658,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3681,7 +3681,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3704,7 +3704,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3725,7 +3725,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3738,7 +3738,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Navigation container border.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", isSource: true, @@ -3747,7 +3747,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3767,7 +3767,7 @@ export default { $value: "{background.1}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3792,7 +3792,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3818,7 +3818,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3847,7 +3847,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3872,7 +3872,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3886,7 +3886,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--cn-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -3898,7 +3898,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3924,7 +3924,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3950,7 +3950,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3978,7 +3978,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3991,7 +3991,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -4002,7 +4002,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4028,7 +4028,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4052,7 +4052,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4077,7 +4077,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -4097,7 +4097,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4123,7 +4123,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4134,7 +4134,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -4145,7 +4145,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4156,7 +4156,7 @@ export default { }, separator: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -4167,7 +4167,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4178,7 +4178,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", isSource: true, @@ -4187,7 +4187,7 @@ export default { $value: "{state.hover}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4198,7 +4198,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", isSource: true, @@ -4207,7 +4207,7 @@ export default { $value: "{state.selected}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4231,7 +4231,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4255,7 +4255,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4281,7 +4281,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4305,7 +4305,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4330,7 +4330,7 @@ export default { $value: "{text.1}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4351,7 +4351,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4376,7 +4376,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4397,7 +4397,7 @@ export default { $value: "{border.2}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4420,7 +4420,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4444,7 +4444,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4468,7 +4468,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4492,7 +4492,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4517,7 +4517,7 @@ export default { $value: "{text.1}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4538,7 +4538,7 @@ export default { $value: "{text.3}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4564,7 +4564,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4589,7 +4589,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4612,7 +4612,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4635,7 +4635,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4660,7 +4660,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4683,7 +4683,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4706,7 +4706,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4721,7 +4721,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -4732,7 +4732,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4758,7 +4758,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4783,7 +4783,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4806,7 +4806,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4831,7 +4831,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4854,7 +4854,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4879,7 +4879,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4902,7 +4902,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4928,7 +4928,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4950,7 +4950,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -4972,7 +4972,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -4994,7 +4994,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5016,7 +5016,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5038,7 +5038,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5060,7 +5060,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5085,7 +5085,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5108,7 +5108,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5133,7 +5133,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5156,7 +5156,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5183,7 +5183,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5206,7 +5206,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5229,7 +5229,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -5249,7 +5249,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5261,7 +5261,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -5272,7 +5272,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5297,7 +5297,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5323,7 +5323,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5334,7 +5334,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -5345,7 +5345,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5369,7 +5369,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5393,7 +5393,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5417,7 +5417,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5443,7 +5443,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5467,7 +5467,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5491,7 +5491,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5520,7 +5520,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5543,7 +5543,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5566,7 +5566,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5587,7 +5587,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5612,7 +5612,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5635,7 +5635,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5658,7 +5658,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5679,7 +5679,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5704,7 +5704,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5727,7 +5727,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5750,7 +5750,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5771,7 +5771,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5796,7 +5796,7 @@ export default { $description: "Text color for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5819,7 +5819,7 @@ export default { $description: "Background color for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5842,7 +5842,7 @@ export default { $description: "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5863,7 +5863,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags, replaced with cyan.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5888,7 +5888,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5911,7 +5911,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5934,7 +5934,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5955,7 +5955,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -5980,7 +5980,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6003,7 +6003,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6026,7 +6026,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6047,7 +6047,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6072,7 +6072,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6095,7 +6095,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6118,7 +6118,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6139,7 +6139,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6164,7 +6164,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6187,7 +6187,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6210,7 +6210,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6231,7 +6231,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6256,7 +6256,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6279,7 +6279,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6302,7 +6302,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6323,7 +6323,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6348,7 +6348,7 @@ export default { $description: "Text color for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6371,7 +6371,7 @@ export default { $description: "Background color for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6394,7 +6394,7 @@ export default { $description: "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6415,7 +6415,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags, replaced with cyan.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6440,7 +6440,7 @@ export default { $description: "Text color for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6463,7 +6463,7 @@ export default { $description: "Background color for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6486,7 +6486,7 @@ export default { $description: "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6507,7 +6507,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags, replaced with orange.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6532,7 +6532,7 @@ export default { $description: "Text color for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6555,7 +6555,7 @@ export default { $description: "Background color for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6578,7 +6578,7 @@ export default { $description: "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6599,7 +6599,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags, replaced with blue.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6624,7 +6624,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6647,7 +6647,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6670,7 +6670,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6691,7 +6691,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6716,7 +6716,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6739,7 +6739,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6762,7 +6762,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6783,7 +6783,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6810,7 +6810,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6833,7 +6833,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6856,7 +6856,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6868,7 +6868,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -6879,7 +6879,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6904,7 +6904,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6927,7 +6927,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6950,7 +6950,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -6973,7 +6973,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -6999,7 +6999,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7021,7 +7021,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7032,7 +7032,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7043,7 +7043,7 @@ export default { $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-border", + name: "cn-component-tooltip-border", attributes: { category: "component", type: "tooltip", @@ -7057,7 +7057,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7085,7 +7085,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7095,8 +7095,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7124,7 +7123,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7135,7 +7134,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7173,7 +7172,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7184,7 +7183,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7222,7 +7221,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7233,7 +7232,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7271,7 +7270,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7282,7 +7281,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7320,7 +7319,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7331,7 +7330,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7359,7 +7358,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7370,7 +7369,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7398,7 +7397,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7419,7 +7418,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7439,7 +7438,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7458,7 +7457,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7478,7 +7477,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7497,7 +7496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7517,7 +7516,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7536,7 +7535,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7556,7 +7555,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7575,7 +7574,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7595,7 +7594,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7614,7 +7613,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7634,7 +7633,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7653,7 +7652,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7673,7 +7672,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7692,7 +7691,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7712,7 +7711,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7763,7 +7762,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7783,7 +7782,7 @@ export default { $type: "color", $value: "{colors.yellow.100}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7801,7 +7800,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7819,7 +7818,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7837,7 +7836,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7857,7 +7856,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7875,7 +7874,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7893,7 +7892,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7914,7 +7913,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7935,7 +7934,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.4)", filePath: "design-tokens/mode/dark/default-deuteranopia.json", isSource: true, original: { @@ -7951,7 +7950,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7970,7 +7969,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -7991,7 +7990,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8010,7 +8009,7 @@ export default { $type: "color", $value: "{colors.blue.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8029,7 +8028,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8051,7 +8050,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8077,7 +8076,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8099,7 +8098,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8119,7 +8118,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8143,7 +8142,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8163,7 +8162,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8186,7 +8185,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8213,7 +8212,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8242,7 +8241,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8269,7 +8268,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8312,7 +8311,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8339,7 +8338,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8366,7 +8365,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8393,7 +8392,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8420,7 +8419,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8447,7 +8446,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8467,7 +8466,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8485,7 +8484,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8503,7 +8502,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8521,7 +8520,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8539,7 +8538,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8557,7 +8556,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8575,7 +8574,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8593,7 +8592,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8611,7 +8610,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8629,7 +8628,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8647,7 +8646,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8667,7 +8666,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8685,7 +8684,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8703,7 +8702,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8721,7 +8720,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8739,7 +8738,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8757,7 +8756,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8775,7 +8774,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8793,7 +8792,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8811,7 +8810,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8829,7 +8828,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8847,7 +8846,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-dark-deuteranopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/dark-deuteranopia-harness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-dark-deuteranopia-desktop-harness.ts rename to packages/core-design-system/src/styles-esm/dark-deuteranopia-harness.ts index 66ddf8d746..cdf731f894 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-deuteranopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/dark-deuteranopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:01 GMT + * Generated on Tue, 18 Mar 2025 06:44:06 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.2)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable cyan text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.2)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-yellow-300) l c h / 0.2)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-yellow-500) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.2)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1955,7 +1955,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1979,7 +1979,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2003,7 +2003,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2029,7 +2029,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2053,7 +2053,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2077,7 +2077,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2105,7 +2105,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2129,7 +2129,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2155,7 +2155,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2179,7 +2179,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2206,7 +2206,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable cyan text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2227,7 +2227,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -2247,7 +2247,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2268,7 +2268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.2)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -2288,7 +2288,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2310,7 +2310,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -2330,7 +2330,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2352,7 +2352,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -2372,7 +2372,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2399,7 +2399,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2420,7 +2420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -2440,7 +2440,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2461,7 +2461,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -2481,7 +2481,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2503,7 +2503,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -2523,7 +2523,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2545,7 +2545,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -2565,7 +2565,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2592,7 +2592,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2613,7 +2613,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2638,7 +2638,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2664,7 +2664,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2686,7 +2686,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2710,7 +2710,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2732,7 +2732,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2754,7 +2754,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2774,7 +2774,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2794,7 +2794,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -2814,7 +2814,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2838,7 +2838,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2858,7 +2858,7 @@ export default { $value: "{border.1}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2881,7 +2881,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2903,7 +2903,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2926,7 +2926,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -2946,7 +2946,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2982,7 +2982,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3002,7 +3002,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.12)", $description: "Cyan background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -3022,7 +3022,7 @@ export default { $description: "Cyan background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3042,7 +3042,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -3062,7 +3062,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3082,7 +3082,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -3102,7 +3102,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3124,7 +3124,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3146,7 +3146,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3166,7 +3166,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.12)", $description: "Orange background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -3186,7 +3186,7 @@ export default { $description: "Orange background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3206,7 +3206,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -3226,7 +3226,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3246,7 +3246,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -3266,7 +3266,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3288,7 +3288,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3310,7 +3310,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3332,7 +3332,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3354,7 +3354,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3374,7 +3374,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -3394,7 +3394,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3414,7 +3414,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", isSource: true, @@ -3432,7 +3432,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3454,7 +3454,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3476,7 +3476,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3500,7 +3500,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3522,7 +3522,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3544,7 +3544,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3566,7 +3566,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3588,7 +3588,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3612,7 +3612,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3636,7 +3636,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3658,7 +3658,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3681,7 +3681,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3704,7 +3704,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3725,7 +3725,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3738,7 +3738,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Navigation container border.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", isSource: true, @@ -3747,7 +3747,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3767,7 +3767,7 @@ export default { $value: "{background.1}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3792,7 +3792,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3818,7 +3818,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3847,7 +3847,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3872,7 +3872,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3886,7 +3886,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--cn-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -3898,7 +3898,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3924,7 +3924,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3950,7 +3950,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3978,7 +3978,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3991,7 +3991,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -4002,7 +4002,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4028,7 +4028,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4052,7 +4052,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4077,7 +4077,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -4097,7 +4097,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4123,7 +4123,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4134,7 +4134,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -4145,7 +4145,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4156,7 +4156,7 @@ export default { }, separator: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -4167,7 +4167,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4178,7 +4178,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", isSource: true, @@ -4187,7 +4187,7 @@ export default { $value: "{state.hover}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4198,7 +4198,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", isSource: true, @@ -4207,7 +4207,7 @@ export default { $value: "{state.selected}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4231,7 +4231,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4255,7 +4255,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4281,7 +4281,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4305,7 +4305,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4330,7 +4330,7 @@ export default { $value: "{text.1}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4351,7 +4351,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4376,7 +4376,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4397,7 +4397,7 @@ export default { $value: "{border.2}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4420,7 +4420,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4444,7 +4444,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4468,7 +4468,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4492,7 +4492,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4517,7 +4517,7 @@ export default { $value: "{text.1}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4538,7 +4538,7 @@ export default { $value: "{text.3}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4564,7 +4564,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4589,7 +4589,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4612,7 +4612,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4635,7 +4635,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4660,7 +4660,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4683,7 +4683,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4706,7 +4706,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4721,7 +4721,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -4732,7 +4732,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4758,7 +4758,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4783,7 +4783,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4806,7 +4806,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4831,7 +4831,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4854,7 +4854,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4879,7 +4879,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4902,7 +4902,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4928,7 +4928,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4950,7 +4950,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -4972,7 +4972,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -4994,7 +4994,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5016,7 +5016,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5038,7 +5038,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5060,7 +5060,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5085,7 +5085,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5108,7 +5108,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5133,7 +5133,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5156,7 +5156,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5183,7 +5183,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5206,7 +5206,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5229,7 +5229,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -5249,7 +5249,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5261,7 +5261,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -5272,7 +5272,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5297,7 +5297,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5323,7 +5323,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5334,7 +5334,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -5345,7 +5345,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5369,7 +5369,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5393,7 +5393,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5417,7 +5417,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5443,7 +5443,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5467,7 +5467,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5491,7 +5491,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5520,7 +5520,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5543,7 +5543,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5566,7 +5566,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5587,7 +5587,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5612,7 +5612,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5635,7 +5635,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5658,7 +5658,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5679,7 +5679,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5704,7 +5704,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5727,7 +5727,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5750,7 +5750,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5771,7 +5771,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5796,7 +5796,7 @@ export default { $description: "Text color for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5819,7 +5819,7 @@ export default { $description: "Background color for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5842,7 +5842,7 @@ export default { $description: "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5863,7 +5863,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags, replaced with cyan.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5888,7 +5888,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5911,7 +5911,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5934,7 +5934,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5955,7 +5955,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -5980,7 +5980,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6003,7 +6003,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6026,7 +6026,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6047,7 +6047,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6072,7 +6072,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6095,7 +6095,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6118,7 +6118,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6139,7 +6139,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6164,7 +6164,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6187,7 +6187,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6210,7 +6210,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6231,7 +6231,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6256,7 +6256,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6279,7 +6279,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6302,7 +6302,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6323,7 +6323,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6348,7 +6348,7 @@ export default { $description: "Text color for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6371,7 +6371,7 @@ export default { $description: "Background color for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6394,7 +6394,7 @@ export default { $description: "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6415,7 +6415,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags, replaced with cyan.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6440,7 +6440,7 @@ export default { $description: "Text color for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6463,7 +6463,7 @@ export default { $description: "Background color for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6486,7 +6486,7 @@ export default { $description: "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6507,7 +6507,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags, replaced with orange.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6532,7 +6532,7 @@ export default { $description: "Text color for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6555,7 +6555,7 @@ export default { $description: "Background color for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6578,7 +6578,7 @@ export default { $description: "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6599,7 +6599,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags, replaced with blue.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6624,7 +6624,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6647,7 +6647,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6670,7 +6670,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6691,7 +6691,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6716,7 +6716,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6739,7 +6739,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6762,7 +6762,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6783,7 +6783,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6810,7 +6810,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6833,7 +6833,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6856,7 +6856,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6868,7 +6868,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -6879,7 +6879,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6904,7 +6904,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6927,7 +6927,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6950,7 +6950,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -6973,7 +6973,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -6999,7 +6999,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7021,7 +7021,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7032,7 +7032,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7043,7 +7043,7 @@ export default { $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-border", + name: "cn-component-tooltip-border", attributes: { category: "component", type: "tooltip", @@ -7057,7 +7057,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7085,7 +7085,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7095,8 +7095,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7124,7 +7123,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7135,7 +7134,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7173,7 +7172,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7184,7 +7183,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7222,7 +7221,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7233,7 +7232,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7271,7 +7270,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7282,7 +7281,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7320,7 +7319,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7331,7 +7330,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7359,7 +7358,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7370,7 +7369,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7398,7 +7397,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7419,7 +7418,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7439,7 +7438,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7458,7 +7457,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7478,7 +7477,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7497,7 +7496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7517,7 +7516,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7536,7 +7535,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7556,7 +7555,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7575,7 +7574,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7595,7 +7594,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7614,7 +7613,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7634,7 +7633,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7653,7 +7652,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7673,7 +7672,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7692,7 +7691,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/dark/default-deuteranopia.json", @@ -7712,7 +7711,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7763,7 +7762,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7783,7 +7782,7 @@ export default { $type: "color", $value: "{colors.yellow.100}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7801,7 +7800,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7819,7 +7818,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7837,7 +7836,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7857,7 +7856,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7875,7 +7874,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7893,7 +7892,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7914,7 +7913,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7935,7 +7934,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.4)", filePath: "design-tokens/mode/dark/default-deuteranopia.json", isSource: true, original: { @@ -7951,7 +7950,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7970,7 +7969,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -7991,7 +7990,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8010,7 +8009,7 @@ export default { $type: "color", $value: "{colors.blue.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8029,7 +8028,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8051,7 +8050,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8077,7 +8076,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8099,7 +8098,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8119,7 +8118,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8143,7 +8142,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8163,7 +8162,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8186,7 +8185,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8213,7 +8212,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8242,7 +8241,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8269,7 +8268,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8312,7 +8311,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8339,7 +8338,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8366,7 +8365,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8393,7 +8392,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8420,7 +8419,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8447,7 +8446,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8467,7 +8466,7 @@ export default { $type: "color", $value: "{colors.cyan.50}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8485,7 +8484,7 @@ export default { $type: "color", $value: "{colors.cyan.100}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8503,7 +8502,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8521,7 +8520,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8539,7 +8538,7 @@ export default { $type: "color", $value: "{colors.cyan.400}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8557,7 +8556,7 @@ export default { $type: "color", $value: "{colors.cyan.500}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8575,7 +8574,7 @@ export default { $type: "color", $value: "{colors.cyan.600}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8593,7 +8592,7 @@ export default { $type: "color", $value: "{colors.cyan.700}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8611,7 +8610,7 @@ export default { $type: "color", $value: "{colors.cyan.800}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8629,7 +8628,7 @@ export default { $type: "color", $value: "{colors.cyan.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8647,7 +8646,7 @@ export default { $type: "color", $value: "{colors.cyan.950}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8667,7 +8666,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8685,7 +8684,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8703,7 +8702,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8721,7 +8720,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8739,7 +8738,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8757,7 +8756,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8775,7 +8774,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8793,7 +8792,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8811,7 +8810,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8829,7 +8828,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8847,7 +8846,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-dark-dimmer-deuteranopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/dark-dimmer-deuteranopia-gitness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-dark-dimmer-deuteranopia-desktop-gitness.ts rename to packages/core-design-system/src/styles-esm/dark-dimmer-deuteranopia-gitness.ts index bc53fb9226..e2b44e6f68 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-dimmer-deuteranopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/dark-dimmer-deuteranopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:04 GMT + * Generated on Tue, 18 Mar 2025 06:44:08 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -276,7 +276,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -297,7 +297,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -318,7 +318,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -339,7 +339,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -360,7 +360,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -381,7 +381,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -401,7 +401,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -420,7 +420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -440,7 +440,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -462,7 +462,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -484,7 +484,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -506,7 +506,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -532,7 +532,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -554,7 +554,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -576,7 +576,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -598,7 +598,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -623,7 +623,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -646,7 +646,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -669,7 +669,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -692,7 +692,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -717,7 +717,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -740,7 +740,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -761,7 +761,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -781,7 +781,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -802,7 +802,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -822,7 +822,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -848,7 +848,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -870,7 +870,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -892,7 +892,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -917,7 +917,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -940,7 +940,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -963,7 +963,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -988,7 +988,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1009,7 +1009,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -1029,7 +1029,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1050,7 +1050,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.2)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -1070,7 +1070,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1095,7 +1095,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable cyan text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1116,7 +1116,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.2)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -1136,7 +1136,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1157,7 +1157,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -1177,7 +1177,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1202,7 +1202,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1223,7 +1223,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -1243,7 +1243,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1264,7 +1264,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -1284,7 +1284,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1309,7 +1309,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1330,7 +1330,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-yellow-300) l c h / 0.2)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -1350,7 +1350,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1371,7 +1371,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-yellow-500) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -1391,7 +1391,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1416,7 +1416,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1437,7 +1437,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -1457,7 +1457,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1478,7 +1478,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -1498,7 +1498,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1523,7 +1523,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1544,7 +1544,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.2)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -1564,7 +1564,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1585,7 +1585,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -1605,7 +1605,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1630,7 +1630,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1653,7 +1653,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1678,7 +1678,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1704,7 +1704,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1726,7 +1726,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1748,7 +1748,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1773,7 +1773,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1796,7 +1796,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1819,7 +1819,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1844,7 +1844,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1867,7 +1867,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1890,7 +1890,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1913,7 +1913,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1937,7 +1937,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1961,7 +1961,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -1985,7 +1985,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2011,7 +2011,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2035,7 +2035,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2059,7 +2059,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2087,7 +2087,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2111,7 +2111,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2137,7 +2137,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2161,7 +2161,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2188,7 +2188,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable cyan text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2209,7 +2209,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -2229,7 +2229,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2250,7 +2250,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.2)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -2270,7 +2270,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2292,7 +2292,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -2312,7 +2312,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2334,7 +2334,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -2354,7 +2354,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2381,7 +2381,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2402,7 +2402,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -2422,7 +2422,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2443,7 +2443,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -2463,7 +2463,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2485,7 +2485,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -2505,7 +2505,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2527,7 +2527,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -2547,7 +2547,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2574,7 +2574,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2595,7 +2595,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2620,7 +2620,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2646,7 +2646,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2668,7 +2668,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2692,7 +2692,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2714,7 +2714,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2736,7 +2736,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2756,7 +2756,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2776,7 +2776,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -2796,7 +2796,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2820,7 +2820,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2840,7 +2840,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2863,7 +2863,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2885,7 +2885,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2908,7 +2908,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -2928,7 +2928,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2964,7 +2964,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -2984,7 +2984,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.12)", $description: "Cyan background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -3004,7 +3004,7 @@ export default { $description: "Cyan background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3024,7 +3024,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -3044,7 +3044,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3064,7 +3064,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -3084,7 +3084,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3106,7 +3106,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3128,7 +3128,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3148,7 +3148,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.12)", $description: "Orange background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -3168,7 +3168,7 @@ export default { $description: "Orange background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3188,7 +3188,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -3208,7 +3208,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3228,7 +3228,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -3248,7 +3248,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3270,7 +3270,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3292,7 +3292,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3314,7 +3314,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3336,7 +3336,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3356,7 +3356,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -3376,7 +3376,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3396,7 +3396,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", isSource: true, @@ -3414,7 +3414,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3436,7 +3436,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3458,7 +3458,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3482,7 +3482,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3504,7 +3504,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3526,7 +3526,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3548,7 +3548,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3570,7 +3570,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3594,7 +3594,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3618,7 +3618,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3640,7 +3640,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3663,7 +3663,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3686,7 +3686,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3707,7 +3707,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3729,7 +3729,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3749,7 +3749,7 @@ export default { $value: "{background.1}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3774,7 +3774,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3800,7 +3800,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3829,7 +3829,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3854,7 +3854,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3868,7 +3868,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--cn-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -3880,7 +3880,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3906,7 +3906,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3932,7 +3932,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3960,7 +3960,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3984,7 +3984,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4010,7 +4010,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4034,7 +4034,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4059,7 +4059,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -4079,7 +4079,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4105,7 +4105,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4127,7 +4127,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4149,7 +4149,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4160,7 +4160,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", isSource: true, @@ -4169,7 +4169,7 @@ export default { $value: "{state.hover}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4180,7 +4180,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", isSource: true, @@ -4189,7 +4189,7 @@ export default { $value: "{state.selected}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4213,7 +4213,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4237,7 +4237,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4263,7 +4263,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4287,7 +4287,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4312,7 +4312,7 @@ export default { $value: "{text.1}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4333,7 +4333,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4358,7 +4358,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4379,7 +4379,7 @@ export default { $value: "{border.2}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4402,7 +4402,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4426,7 +4426,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4450,7 +4450,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4474,7 +4474,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4499,7 +4499,7 @@ export default { $value: "{text.1}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4520,7 +4520,7 @@ export default { $value: "{text.3}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4546,7 +4546,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4571,7 +4571,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4594,7 +4594,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4617,7 +4617,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4642,7 +4642,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4665,7 +4665,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4688,7 +4688,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4714,7 +4714,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4740,7 +4740,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4765,7 +4765,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4788,7 +4788,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4813,7 +4813,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4836,7 +4836,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4861,7 +4861,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4884,7 +4884,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4910,7 +4910,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states using cyan for deuteranopia accessibility.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4932,7 +4932,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states using orange for deuteranopia accessibility.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -4954,7 +4954,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -4976,7 +4976,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -4998,7 +4998,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5020,7 +5020,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5042,7 +5042,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5067,7 +5067,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5090,7 +5090,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5115,7 +5115,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5138,7 +5138,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5165,7 +5165,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5188,7 +5188,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5211,7 +5211,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -5231,7 +5231,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5254,7 +5254,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5279,7 +5279,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5305,7 +5305,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5327,7 +5327,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5351,7 +5351,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5375,7 +5375,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5399,7 +5399,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5425,7 +5425,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5449,7 +5449,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5473,7 +5473,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5502,7 +5502,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5525,7 +5525,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5548,7 +5548,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5569,7 +5569,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5594,7 +5594,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5617,7 +5617,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5640,7 +5640,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5661,7 +5661,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5686,7 +5686,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5709,7 +5709,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5732,7 +5732,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5753,7 +5753,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5778,7 +5778,7 @@ export default { $description: "Text color for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5801,7 +5801,7 @@ export default { $description: "Background color for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5824,7 +5824,7 @@ export default { $description: "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5845,7 +5845,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags, replaced with cyan.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5870,7 +5870,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5893,7 +5893,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5916,7 +5916,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5937,7 +5937,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -5962,7 +5962,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -5985,7 +5985,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6008,7 +6008,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6029,7 +6029,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6054,7 +6054,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6077,7 +6077,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6100,7 +6100,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6121,7 +6121,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6146,7 +6146,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6169,7 +6169,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6192,7 +6192,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6213,7 +6213,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6238,7 +6238,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6261,7 +6261,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6284,7 +6284,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6305,7 +6305,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6330,7 +6330,7 @@ export default { $description: "Text color for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6353,7 +6353,7 @@ export default { $description: "Background color for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6376,7 +6376,7 @@ export default { $description: "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6397,7 +6397,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags, replaced with cyan.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6422,7 +6422,7 @@ export default { $description: "Text color for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6445,7 +6445,7 @@ export default { $description: "Background color for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6468,7 +6468,7 @@ export default { $description: "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6489,7 +6489,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags, replaced with orange.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6514,7 +6514,7 @@ export default { $description: "Text color for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6537,7 +6537,7 @@ export default { $description: "Background color for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6560,7 +6560,7 @@ export default { $description: "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6581,7 +6581,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags, replaced with blue.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6606,7 +6606,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6629,7 +6629,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6652,7 +6652,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6673,7 +6673,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6698,7 +6698,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6721,7 +6721,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6744,7 +6744,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6765,7 +6765,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6792,7 +6792,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6815,7 +6815,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6838,7 +6838,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6861,7 +6861,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6886,7 +6886,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6909,7 +6909,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6932,7 +6932,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -6955,7 +6955,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -6981,7 +6981,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7003,7 +7003,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7025,7 +7025,7 @@ export default { $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-border", + name: "cn-component-tooltip-border", attributes: { category: "component", type: "tooltip", @@ -7039,7 +7039,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7067,7 +7067,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7077,8 +7077,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7106,7 +7105,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7117,7 +7116,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7155,7 +7154,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7166,7 +7165,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7204,7 +7203,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7215,7 +7214,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7253,7 +7252,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7264,7 +7263,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7302,7 +7301,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7313,7 +7312,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7341,7 +7340,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7352,7 +7351,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7380,7 +7379,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7401,7 +7400,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7421,7 +7420,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7440,7 +7439,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7460,7 +7459,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7479,7 +7478,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7499,7 +7498,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7518,7 +7517,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7538,7 +7537,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7557,7 +7556,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7577,7 +7576,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7596,7 +7595,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7616,7 +7615,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7635,7 +7634,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7655,7 +7654,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7674,7 +7673,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7694,7 +7693,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7745,7 +7744,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7765,7 +7764,7 @@ export default { $type: "color", $value: "{colors.yellow.100}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7783,7 +7782,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7801,7 +7800,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7819,7 +7818,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7839,7 +7838,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7857,7 +7856,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7875,7 +7874,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7896,7 +7895,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7917,7 +7916,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.4)", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", isSource: true, original: { @@ -7933,7 +7932,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7952,7 +7951,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -7973,7 +7972,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7992,7 +7991,7 @@ export default { $type: "color", $value: "{colors.blue.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8011,7 +8010,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8033,7 +8032,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8059,7 +8058,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8081,7 +8080,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8101,7 +8100,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8125,7 +8124,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8145,7 +8144,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8168,7 +8167,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8195,7 +8194,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8224,7 +8223,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8251,7 +8250,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8294,7 +8293,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8321,7 +8320,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8348,7 +8347,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8375,7 +8374,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8402,7 +8401,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8429,7 +8428,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8449,7 +8448,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8467,7 +8466,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8485,7 +8484,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8503,7 +8502,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8521,7 +8520,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8539,7 +8538,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8557,7 +8556,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8575,7 +8574,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8593,7 +8592,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8611,7 +8610,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8629,7 +8628,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8649,7 +8648,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8667,7 +8666,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8685,7 +8684,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8703,7 +8702,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8721,7 +8720,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8739,7 +8738,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8757,7 +8756,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8775,7 +8774,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8793,7 +8792,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8811,7 +8810,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8829,7 +8828,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-dark-dimmer-deuteranopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/dark-dimmer-deuteranopia-harness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-dark-dimmer-deuteranopia-desktop-harness.ts rename to packages/core-design-system/src/styles-esm/dark-dimmer-deuteranopia-harness.ts index 4b9291d8b0..bf08bc5e18 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-dimmer-deuteranopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/dark-dimmer-deuteranopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:03 GMT + * Generated on Tue, 18 Mar 2025 06:44:07 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -276,7 +276,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -297,7 +297,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -318,7 +318,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -339,7 +339,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -360,7 +360,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -381,7 +381,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -401,7 +401,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -420,7 +420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -440,7 +440,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -462,7 +462,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -484,7 +484,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -506,7 +506,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -532,7 +532,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -554,7 +554,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -576,7 +576,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -598,7 +598,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -623,7 +623,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -646,7 +646,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -669,7 +669,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -692,7 +692,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -717,7 +717,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -740,7 +740,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -761,7 +761,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -781,7 +781,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -802,7 +802,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -822,7 +822,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -848,7 +848,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -870,7 +870,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -892,7 +892,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -917,7 +917,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -940,7 +940,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -963,7 +963,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -988,7 +988,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1009,7 +1009,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -1029,7 +1029,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1050,7 +1050,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.2)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -1070,7 +1070,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1095,7 +1095,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable cyan text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1116,7 +1116,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.2)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -1136,7 +1136,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1157,7 +1157,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -1177,7 +1177,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1202,7 +1202,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1223,7 +1223,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -1243,7 +1243,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1264,7 +1264,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -1284,7 +1284,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1309,7 +1309,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1330,7 +1330,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-yellow-300) l c h / 0.2)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -1350,7 +1350,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1371,7 +1371,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-yellow-500) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -1391,7 +1391,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1416,7 +1416,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1437,7 +1437,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -1457,7 +1457,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1478,7 +1478,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -1498,7 +1498,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1523,7 +1523,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1544,7 +1544,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.2)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -1564,7 +1564,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1585,7 +1585,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -1605,7 +1605,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1630,7 +1630,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1653,7 +1653,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1678,7 +1678,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1704,7 +1704,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1726,7 +1726,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1748,7 +1748,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1773,7 +1773,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1796,7 +1796,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1819,7 +1819,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1844,7 +1844,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1867,7 +1867,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1890,7 +1890,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1913,7 +1913,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1937,7 +1937,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1961,7 +1961,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -1985,7 +1985,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2011,7 +2011,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2035,7 +2035,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2059,7 +2059,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2087,7 +2087,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2111,7 +2111,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2137,7 +2137,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2161,7 +2161,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2188,7 +2188,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable cyan text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2209,7 +2209,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -2229,7 +2229,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2250,7 +2250,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.2)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -2270,7 +2270,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2292,7 +2292,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -2312,7 +2312,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2334,7 +2334,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -2354,7 +2354,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2381,7 +2381,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2402,7 +2402,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -2422,7 +2422,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2443,7 +2443,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -2463,7 +2463,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2485,7 +2485,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -2505,7 +2505,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2527,7 +2527,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -2547,7 +2547,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2574,7 +2574,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2595,7 +2595,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2620,7 +2620,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2646,7 +2646,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2668,7 +2668,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2692,7 +2692,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2714,7 +2714,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2736,7 +2736,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2756,7 +2756,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2776,7 +2776,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -2796,7 +2796,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2820,7 +2820,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2840,7 +2840,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2863,7 +2863,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2885,7 +2885,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2908,7 +2908,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -2928,7 +2928,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2964,7 +2964,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -2984,7 +2984,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.12)", $description: "Cyan background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -3004,7 +3004,7 @@ export default { $description: "Cyan background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3024,7 +3024,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -3044,7 +3044,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3064,7 +3064,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -3084,7 +3084,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3106,7 +3106,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3128,7 +3128,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3148,7 +3148,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.12)", $description: "Orange background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -3168,7 +3168,7 @@ export default { $description: "Orange background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3188,7 +3188,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -3208,7 +3208,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3228,7 +3228,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -3248,7 +3248,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3270,7 +3270,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3292,7 +3292,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3314,7 +3314,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3336,7 +3336,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3356,7 +3356,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -3376,7 +3376,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3396,7 +3396,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", isSource: true, @@ -3414,7 +3414,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3436,7 +3436,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3458,7 +3458,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3482,7 +3482,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3504,7 +3504,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3526,7 +3526,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3548,7 +3548,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3570,7 +3570,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3594,7 +3594,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3618,7 +3618,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3640,7 +3640,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3663,7 +3663,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3686,7 +3686,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3707,7 +3707,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3729,7 +3729,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3749,7 +3749,7 @@ export default { $value: "{background.1}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3774,7 +3774,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3800,7 +3800,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3829,7 +3829,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3854,7 +3854,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3868,7 +3868,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--cn-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -3880,7 +3880,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3906,7 +3906,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3932,7 +3932,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3960,7 +3960,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3984,7 +3984,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4010,7 +4010,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4034,7 +4034,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4059,7 +4059,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -4079,7 +4079,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4105,7 +4105,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4127,7 +4127,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4149,7 +4149,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4160,7 +4160,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", isSource: true, @@ -4169,7 +4169,7 @@ export default { $value: "{state.hover}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4180,7 +4180,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", isSource: true, @@ -4189,7 +4189,7 @@ export default { $value: "{state.selected}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4213,7 +4213,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4237,7 +4237,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4263,7 +4263,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4287,7 +4287,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4312,7 +4312,7 @@ export default { $value: "{text.1}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4333,7 +4333,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4358,7 +4358,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4379,7 +4379,7 @@ export default { $value: "{border.2}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4402,7 +4402,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4426,7 +4426,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4450,7 +4450,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4474,7 +4474,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4499,7 +4499,7 @@ export default { $value: "{text.1}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4520,7 +4520,7 @@ export default { $value: "{text.3}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4546,7 +4546,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4571,7 +4571,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4594,7 +4594,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4617,7 +4617,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4642,7 +4642,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4665,7 +4665,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4688,7 +4688,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4714,7 +4714,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4740,7 +4740,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4765,7 +4765,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4788,7 +4788,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4813,7 +4813,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4836,7 +4836,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4861,7 +4861,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4884,7 +4884,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4910,7 +4910,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states using cyan for deuteranopia accessibility.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4932,7 +4932,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states using orange for deuteranopia accessibility.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -4954,7 +4954,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -4976,7 +4976,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -4998,7 +4998,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5020,7 +5020,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5042,7 +5042,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5067,7 +5067,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5090,7 +5090,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5115,7 +5115,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5138,7 +5138,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5165,7 +5165,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5188,7 +5188,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5211,7 +5211,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -5231,7 +5231,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5254,7 +5254,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5279,7 +5279,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5305,7 +5305,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5327,7 +5327,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5351,7 +5351,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5375,7 +5375,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5399,7 +5399,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5425,7 +5425,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5449,7 +5449,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5473,7 +5473,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5502,7 +5502,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5525,7 +5525,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5548,7 +5548,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5569,7 +5569,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5594,7 +5594,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5617,7 +5617,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5640,7 +5640,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5661,7 +5661,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5686,7 +5686,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5709,7 +5709,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5732,7 +5732,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5753,7 +5753,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5778,7 +5778,7 @@ export default { $description: "Text color for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5801,7 +5801,7 @@ export default { $description: "Background color for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5824,7 +5824,7 @@ export default { $description: "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5845,7 +5845,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags, replaced with cyan.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5870,7 +5870,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5893,7 +5893,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5916,7 +5916,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5937,7 +5937,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -5962,7 +5962,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -5985,7 +5985,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6008,7 +6008,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6029,7 +6029,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6054,7 +6054,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6077,7 +6077,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6100,7 +6100,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6121,7 +6121,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6146,7 +6146,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6169,7 +6169,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6192,7 +6192,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6213,7 +6213,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6238,7 +6238,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6261,7 +6261,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6284,7 +6284,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6305,7 +6305,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6330,7 +6330,7 @@ export default { $description: "Text color for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6353,7 +6353,7 @@ export default { $description: "Background color for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6376,7 +6376,7 @@ export default { $description: "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6397,7 +6397,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags, replaced with cyan.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6422,7 +6422,7 @@ export default { $description: "Text color for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6445,7 +6445,7 @@ export default { $description: "Background color for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6468,7 +6468,7 @@ export default { $description: "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6489,7 +6489,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags, replaced with orange.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6514,7 +6514,7 @@ export default { $description: "Text color for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6537,7 +6537,7 @@ export default { $description: "Background color for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6560,7 +6560,7 @@ export default { $description: "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6581,7 +6581,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags, replaced with blue.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6606,7 +6606,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6629,7 +6629,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6652,7 +6652,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6673,7 +6673,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6698,7 +6698,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6721,7 +6721,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6744,7 +6744,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6765,7 +6765,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6792,7 +6792,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6815,7 +6815,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6838,7 +6838,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6861,7 +6861,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6886,7 +6886,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6909,7 +6909,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6932,7 +6932,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -6955,7 +6955,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -6981,7 +6981,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7003,7 +7003,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7025,7 +7025,7 @@ export default { $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-border", + name: "cn-component-tooltip-border", attributes: { category: "component", type: "tooltip", @@ -7039,7 +7039,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7067,7 +7067,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7077,8 +7077,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7106,7 +7105,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7117,7 +7116,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7155,7 +7154,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7166,7 +7165,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7204,7 +7203,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7215,7 +7214,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7253,7 +7252,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7264,7 +7263,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7302,7 +7301,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7313,7 +7312,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7341,7 +7340,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7352,7 +7351,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7380,7 +7379,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7401,7 +7400,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7421,7 +7420,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7440,7 +7439,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7460,7 +7459,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7479,7 +7478,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7499,7 +7498,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7518,7 +7517,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7538,7 +7537,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7557,7 +7556,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7577,7 +7576,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7596,7 +7595,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7616,7 +7615,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7635,7 +7634,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7655,7 +7654,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7674,7 +7673,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", @@ -7694,7 +7693,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7745,7 +7744,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7765,7 +7764,7 @@ export default { $type: "color", $value: "{colors.yellow.100}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7783,7 +7782,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7801,7 +7800,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7819,7 +7818,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7839,7 +7838,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7857,7 +7856,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7875,7 +7874,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7896,7 +7895,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7917,7 +7916,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.4)", filePath: "design-tokens/mode/dark/dimmer-deuteranopia.json", isSource: true, original: { @@ -7933,7 +7932,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7952,7 +7951,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -7973,7 +7972,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7992,7 +7991,7 @@ export default { $type: "color", $value: "{colors.blue.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8011,7 +8010,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8033,7 +8032,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8059,7 +8058,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8081,7 +8080,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8101,7 +8100,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8125,7 +8124,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8145,7 +8144,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8168,7 +8167,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8195,7 +8194,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8224,7 +8223,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8251,7 +8250,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8294,7 +8293,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8321,7 +8320,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8348,7 +8347,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8375,7 +8374,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8402,7 +8401,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8429,7 +8428,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8449,7 +8448,7 @@ export default { $type: "color", $value: "{colors.cyan.50}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8467,7 +8466,7 @@ export default { $type: "color", $value: "{colors.cyan.100}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8485,7 +8484,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8503,7 +8502,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8521,7 +8520,7 @@ export default { $type: "color", $value: "{colors.cyan.400}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8539,7 +8538,7 @@ export default { $type: "color", $value: "{colors.cyan.500}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8557,7 +8556,7 @@ export default { $type: "color", $value: "{colors.cyan.600}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8575,7 +8574,7 @@ export default { $type: "color", $value: "{colors.cyan.700}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8593,7 +8592,7 @@ export default { $type: "color", $value: "{colors.cyan.800}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8611,7 +8610,7 @@ export default { $type: "color", $value: "{colors.cyan.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8629,7 +8628,7 @@ export default { $type: "color", $value: "{colors.cyan.950}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8649,7 +8648,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8667,7 +8666,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8685,7 +8684,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8703,7 +8702,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8721,7 +8720,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8739,7 +8738,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8757,7 +8756,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8775,7 +8774,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8793,7 +8792,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8811,7 +8810,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8829,7 +8828,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-dark-dimmer-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/dark-dimmer-gitness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-dark-dimmer-desktop-gitness.ts rename to packages/core-design-system/src/styles-esm/dark-dimmer-gitness.ts index 13a040a0ff..d13411bbfb 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-dimmer-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/dark-dimmer-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:06:51 GMT + * Generated on Tue, 18 Mar 2025 06:43:58 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -276,7 +276,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -297,7 +297,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -318,7 +318,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -339,7 +339,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -360,7 +360,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -381,7 +381,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -401,7 +401,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -420,7 +420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -440,7 +440,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -462,7 +462,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -484,7 +484,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -506,7 +506,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -532,7 +532,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -554,7 +554,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -576,7 +576,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -598,7 +598,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -623,7 +623,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -646,7 +646,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -669,7 +669,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -692,7 +692,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -717,7 +717,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -740,7 +740,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -761,7 +761,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -781,7 +781,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -802,7 +802,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -822,7 +822,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -848,7 +848,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -870,7 +870,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -892,7 +892,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -917,7 +917,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -940,7 +940,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -963,7 +963,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -988,7 +988,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1009,7 +1009,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -1029,7 +1029,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1050,7 +1050,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.2)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -1070,7 +1070,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1095,7 +1095,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable green text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1116,7 +1116,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-green-300) l c h / 0.2)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -1136,7 +1136,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1157,7 +1157,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -1177,7 +1177,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1202,7 +1202,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1223,7 +1223,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -1243,7 +1243,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1264,7 +1264,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -1284,7 +1284,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1309,7 +1309,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1330,7 +1330,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-yellow-300) l c h / 0.2)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -1350,7 +1350,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1371,7 +1371,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-yellow-500) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -1391,7 +1391,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1416,7 +1416,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1437,7 +1437,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -1457,7 +1457,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1478,7 +1478,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -1498,7 +1498,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1523,7 +1523,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1544,7 +1544,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-purple-300) l c h / 0.2)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -1564,7 +1564,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1585,7 +1585,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-purple-500) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -1605,7 +1605,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1630,7 +1630,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1653,7 +1653,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1678,7 +1678,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1704,7 +1704,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1726,7 +1726,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1748,7 +1748,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1773,7 +1773,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1796,7 +1796,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1819,7 +1819,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1844,7 +1844,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1867,7 +1867,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1890,7 +1890,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1913,7 +1913,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1937,7 +1937,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1961,7 +1961,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -1985,7 +1985,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2011,7 +2011,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2035,7 +2035,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2059,7 +2059,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2087,7 +2087,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2111,7 +2111,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2137,7 +2137,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2161,7 +2161,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2188,7 +2188,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable green text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2209,7 +2209,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.1)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -2229,7 +2229,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2250,7 +2250,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-green-300) l c h / 0.2)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -2270,7 +2270,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2292,7 +2292,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -2312,7 +2312,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2334,7 +2334,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -2354,7 +2354,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2381,7 +2381,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2402,7 +2402,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -2422,7 +2422,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2443,7 +2443,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -2463,7 +2463,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2485,7 +2485,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -2505,7 +2505,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2527,7 +2527,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -2547,7 +2547,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2574,7 +2574,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2595,7 +2595,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2620,7 +2620,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2646,7 +2646,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2668,7 +2668,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2692,7 +2692,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2714,7 +2714,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2736,7 +2736,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2756,7 +2756,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2776,7 +2776,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -2796,7 +2796,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2820,7 +2820,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2840,7 +2840,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2863,7 +2863,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2885,7 +2885,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2908,7 +2908,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -2928,7 +2928,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2964,7 +2964,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -2984,7 +2984,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.12)", $description: "Green background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -3004,7 +3004,7 @@ export default { $description: "Green background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3024,7 +3024,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -3044,7 +3044,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3064,7 +3064,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -3084,7 +3084,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3106,7 +3106,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3128,7 +3128,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3148,7 +3148,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.12)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -3168,7 +3168,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3188,7 +3188,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -3208,7 +3208,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3228,7 +3228,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -3248,7 +3248,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3270,7 +3270,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3292,7 +3292,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3314,7 +3314,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3336,7 +3336,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3356,7 +3356,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -3376,7 +3376,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3396,7 +3396,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/dark/dimmer.json", isSource: true, @@ -3414,7 +3414,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3436,7 +3436,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3458,7 +3458,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3482,7 +3482,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3504,7 +3504,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3526,7 +3526,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3548,7 +3548,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3570,7 +3570,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3594,7 +3594,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3618,7 +3618,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3640,7 +3640,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3663,7 +3663,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3686,7 +3686,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3707,7 +3707,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3729,7 +3729,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3749,7 +3749,7 @@ export default { $value: "{background.1}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3774,7 +3774,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3800,7 +3800,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3829,7 +3829,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3854,7 +3854,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3868,7 +3868,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--cn-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -3880,7 +3880,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3906,7 +3906,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3932,7 +3932,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3960,7 +3960,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3984,7 +3984,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4010,7 +4010,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4034,7 +4034,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4059,7 +4059,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -4079,7 +4079,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4105,7 +4105,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4127,7 +4127,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4149,7 +4149,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4160,7 +4160,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/dimmer.json", isSource: true, @@ -4169,7 +4169,7 @@ export default { $value: "{state.hover}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4180,7 +4180,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/dimmer.json", isSource: true, @@ -4189,7 +4189,7 @@ export default { $value: "{state.selected}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4213,7 +4213,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4237,7 +4237,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4263,7 +4263,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4287,7 +4287,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4312,7 +4312,7 @@ export default { $value: "{text.1}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4333,7 +4333,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4358,7 +4358,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4379,7 +4379,7 @@ export default { $value: "{border.2}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4402,7 +4402,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4426,7 +4426,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4450,7 +4450,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4474,7 +4474,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4499,7 +4499,7 @@ export default { $value: "{text.1}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4520,7 +4520,7 @@ export default { $value: "{text.3}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4546,7 +4546,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4571,7 +4571,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4594,7 +4594,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4617,7 +4617,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4642,7 +4642,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4665,7 +4665,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4688,7 +4688,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4714,7 +4714,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4740,7 +4740,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4765,7 +4765,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4788,7 +4788,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4813,7 +4813,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4836,7 +4836,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4861,7 +4861,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4884,7 +4884,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4910,7 +4910,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4932,7 +4932,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -4954,7 +4954,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -4976,7 +4976,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -4998,7 +4998,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5020,7 +5020,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5042,7 +5042,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5067,7 +5067,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5090,7 +5090,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5115,7 +5115,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5138,7 +5138,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5165,7 +5165,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5188,7 +5188,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5211,7 +5211,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -5231,7 +5231,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5254,7 +5254,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5279,7 +5279,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5305,7 +5305,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5327,7 +5327,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5351,7 +5351,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5375,7 +5375,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5399,7 +5399,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5425,7 +5425,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5449,7 +5449,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5473,7 +5473,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5502,7 +5502,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5525,7 +5525,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5548,7 +5548,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5569,7 +5569,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags. ", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5594,7 +5594,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5617,7 +5617,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5640,7 +5640,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5661,7 +5661,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags. ", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5686,7 +5686,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5709,7 +5709,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5732,7 +5732,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5753,7 +5753,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5778,7 +5778,7 @@ export default { $description: "Text color for green tags. Ensures readability while maintaining the green color theme.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5801,7 +5801,7 @@ export default { $description: "Background color for green tags. Creates a distinct surface with green theme styling.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5824,7 +5824,7 @@ export default { $description: "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5845,7 +5845,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5870,7 +5870,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5893,7 +5893,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5916,7 +5916,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5937,7 +5937,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -5962,7 +5962,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -5985,7 +5985,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6008,7 +6008,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6029,7 +6029,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6054,7 +6054,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6077,7 +6077,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6100,7 +6100,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6121,7 +6121,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6146,7 +6146,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6169,7 +6169,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6192,7 +6192,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6213,7 +6213,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6238,7 +6238,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6261,7 +6261,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6284,7 +6284,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6305,7 +6305,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6330,7 +6330,7 @@ export default { $description: "Text color for purple tags. Ensures readability while maintaining the purple color theme.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6353,7 +6353,7 @@ export default { $description: "Background color for purple tags. Creates a distinct surface with purple theme styling.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6376,7 +6376,7 @@ export default { $description: "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6397,7 +6397,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6422,7 +6422,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6445,7 +6445,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6468,7 +6468,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6489,7 +6489,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6514,7 +6514,7 @@ export default { $description: "Text color for violet tags. Ensures readability while maintaining the violet color theme.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6537,7 +6537,7 @@ export default { $description: "Background color for violet tags. Creates a distinct surface with violet theme styling.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6560,7 +6560,7 @@ export default { $description: "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6581,7 +6581,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6606,7 +6606,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6629,7 +6629,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6652,7 +6652,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6673,7 +6673,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6698,7 +6698,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6721,7 +6721,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6744,7 +6744,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6765,7 +6765,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6792,7 +6792,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6815,7 +6815,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6838,7 +6838,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6861,7 +6861,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6886,7 +6886,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6909,7 +6909,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6932,7 +6932,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -6955,7 +6955,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -6981,7 +6981,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7003,7 +7003,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7025,7 +7025,7 @@ export default { $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-border", + name: "cn-component-tooltip-border", attributes: { category: "component", type: "tooltip", @@ -7039,7 +7039,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7067,7 +7067,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7077,8 +7077,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7106,7 +7105,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7117,7 +7116,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7155,7 +7154,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7166,7 +7165,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7204,7 +7203,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7215,7 +7214,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7253,7 +7252,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7264,7 +7263,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7302,7 +7301,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7313,7 +7312,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7341,7 +7340,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7352,7 +7351,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7380,7 +7379,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7401,7 +7400,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7421,7 +7420,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7440,7 +7439,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7460,7 +7459,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7479,7 +7478,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7499,7 +7498,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7518,7 +7517,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7538,7 +7537,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7557,7 +7556,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7577,7 +7576,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7596,7 +7595,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7616,7 +7615,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7635,7 +7634,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7655,7 +7654,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7674,7 +7673,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7694,7 +7693,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7745,7 +7744,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7765,7 +7764,7 @@ export default { $type: "color", $value: "{colors.yellow.100}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7783,7 +7782,7 @@ export default { $type: "color", $value: "{colors.pink.200}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7801,7 +7800,7 @@ export default { $type: "color", $value: "{colors.purple.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7819,7 +7818,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7839,7 +7838,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7857,7 +7856,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7875,7 +7874,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7896,7 +7895,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7917,7 +7916,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.4)", filePath: "design-tokens/mode/dark/dimmer.json", isSource: true, original: { @@ -7933,7 +7932,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7952,7 +7951,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -7973,7 +7972,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7992,7 +7991,7 @@ export default { $type: "color", $value: "{colors.blue.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8011,7 +8010,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8033,7 +8032,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8059,7 +8058,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8081,7 +8080,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8101,7 +8100,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8125,7 +8124,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8145,7 +8144,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8168,7 +8167,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8195,7 +8194,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8224,7 +8223,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8251,7 +8250,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8294,7 +8293,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8321,7 +8320,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8348,7 +8347,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8375,7 +8374,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8402,7 +8401,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8429,7 +8428,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8449,7 +8448,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8467,7 +8466,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8485,7 +8484,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8503,7 +8502,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8521,7 +8520,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8539,7 +8538,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8557,7 +8556,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8575,7 +8574,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8593,7 +8592,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8611,7 +8610,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8629,7 +8628,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8649,7 +8648,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8667,7 +8666,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8685,7 +8684,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8703,7 +8702,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8721,7 +8720,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8739,7 +8738,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8757,7 +8756,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8775,7 +8774,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8793,7 +8792,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8811,7 +8810,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8829,7 +8828,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-dark-dimmer-desktop-harness.ts b/packages/core-design-system/src/styles-esm/dark-dimmer-harness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-dark-dimmer-desktop-harness.ts rename to packages/core-design-system/src/styles-esm/dark-dimmer-harness.ts index 4e7e1ab4ec..aa50d3c006 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-dimmer-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/dark-dimmer-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:06:50 GMT + * Generated on Tue, 18 Mar 2025 06:43:57 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -276,7 +276,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -297,7 +297,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -318,7 +318,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -339,7 +339,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -360,7 +360,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -381,7 +381,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -401,7 +401,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -420,7 +420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -440,7 +440,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -462,7 +462,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -484,7 +484,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -506,7 +506,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -532,7 +532,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -554,7 +554,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -576,7 +576,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -598,7 +598,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -623,7 +623,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -646,7 +646,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -669,7 +669,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -692,7 +692,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -717,7 +717,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -740,7 +740,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -761,7 +761,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -781,7 +781,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -802,7 +802,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -822,7 +822,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -848,7 +848,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -870,7 +870,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -892,7 +892,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -917,7 +917,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -940,7 +940,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -963,7 +963,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -988,7 +988,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1009,7 +1009,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -1029,7 +1029,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1050,7 +1050,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.2)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -1070,7 +1070,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1095,7 +1095,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable green text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1116,7 +1116,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-green-300) l c h / 0.2)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -1136,7 +1136,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1157,7 +1157,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -1177,7 +1177,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1202,7 +1202,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1223,7 +1223,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -1243,7 +1243,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1264,7 +1264,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -1284,7 +1284,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1309,7 +1309,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1330,7 +1330,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-yellow-300) l c h / 0.2)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -1350,7 +1350,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1371,7 +1371,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-yellow-500) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -1391,7 +1391,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1416,7 +1416,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1437,7 +1437,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -1457,7 +1457,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1478,7 +1478,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -1498,7 +1498,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1523,7 +1523,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1544,7 +1544,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-purple-300) l c h / 0.2)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -1564,7 +1564,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1585,7 +1585,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-purple-500) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -1605,7 +1605,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1630,7 +1630,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1653,7 +1653,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1678,7 +1678,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1704,7 +1704,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1726,7 +1726,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1748,7 +1748,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1773,7 +1773,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1796,7 +1796,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1819,7 +1819,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1844,7 +1844,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1867,7 +1867,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1890,7 +1890,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1913,7 +1913,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1937,7 +1937,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1961,7 +1961,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -1985,7 +1985,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2011,7 +2011,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2035,7 +2035,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2059,7 +2059,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2087,7 +2087,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2111,7 +2111,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2137,7 +2137,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2161,7 +2161,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2188,7 +2188,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable green text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2209,7 +2209,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.1)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -2229,7 +2229,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2250,7 +2250,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-green-300) l c h / 0.2)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -2270,7 +2270,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2292,7 +2292,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -2312,7 +2312,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2334,7 +2334,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -2354,7 +2354,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2381,7 +2381,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2402,7 +2402,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -2422,7 +2422,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2443,7 +2443,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -2463,7 +2463,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2485,7 +2485,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -2505,7 +2505,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2527,7 +2527,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -2547,7 +2547,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2574,7 +2574,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2595,7 +2595,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2620,7 +2620,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2646,7 +2646,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2668,7 +2668,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2692,7 +2692,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2714,7 +2714,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2736,7 +2736,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2756,7 +2756,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2776,7 +2776,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -2796,7 +2796,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2820,7 +2820,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2840,7 +2840,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2863,7 +2863,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2885,7 +2885,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2908,7 +2908,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -2928,7 +2928,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2964,7 +2964,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -2984,7 +2984,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.12)", $description: "Green background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -3004,7 +3004,7 @@ export default { $description: "Green background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3024,7 +3024,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -3044,7 +3044,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3064,7 +3064,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -3084,7 +3084,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3106,7 +3106,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3128,7 +3128,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3148,7 +3148,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.12)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -3168,7 +3168,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3188,7 +3188,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -3208,7 +3208,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3228,7 +3228,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -3248,7 +3248,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3270,7 +3270,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3292,7 +3292,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3314,7 +3314,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3336,7 +3336,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3356,7 +3356,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -3376,7 +3376,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3396,7 +3396,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/dark/dimmer.json", isSource: true, @@ -3414,7 +3414,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3436,7 +3436,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3458,7 +3458,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3482,7 +3482,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3504,7 +3504,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3526,7 +3526,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3548,7 +3548,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3570,7 +3570,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3594,7 +3594,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3618,7 +3618,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3640,7 +3640,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3663,7 +3663,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3686,7 +3686,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3707,7 +3707,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3729,7 +3729,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3749,7 +3749,7 @@ export default { $value: "{background.1}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3774,7 +3774,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3800,7 +3800,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3829,7 +3829,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3854,7 +3854,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3868,7 +3868,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--cn-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -3880,7 +3880,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3906,7 +3906,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3932,7 +3932,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3960,7 +3960,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3984,7 +3984,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4010,7 +4010,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4034,7 +4034,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4059,7 +4059,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -4079,7 +4079,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4105,7 +4105,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4127,7 +4127,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4149,7 +4149,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4160,7 +4160,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/dimmer.json", isSource: true, @@ -4169,7 +4169,7 @@ export default { $value: "{state.hover}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4180,7 +4180,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/dimmer.json", isSource: true, @@ -4189,7 +4189,7 @@ export default { $value: "{state.selected}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4213,7 +4213,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4237,7 +4237,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4263,7 +4263,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4287,7 +4287,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4312,7 +4312,7 @@ export default { $value: "{text.1}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4333,7 +4333,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4358,7 +4358,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4379,7 +4379,7 @@ export default { $value: "{border.2}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4402,7 +4402,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4426,7 +4426,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4450,7 +4450,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4474,7 +4474,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4499,7 +4499,7 @@ export default { $value: "{text.1}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4520,7 +4520,7 @@ export default { $value: "{text.3}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4546,7 +4546,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4571,7 +4571,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4594,7 +4594,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4617,7 +4617,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4642,7 +4642,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4665,7 +4665,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4688,7 +4688,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4714,7 +4714,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4740,7 +4740,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4765,7 +4765,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4788,7 +4788,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4813,7 +4813,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4836,7 +4836,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4861,7 +4861,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4884,7 +4884,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4910,7 +4910,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4932,7 +4932,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -4954,7 +4954,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -4976,7 +4976,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -4998,7 +4998,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5020,7 +5020,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5042,7 +5042,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5067,7 +5067,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5090,7 +5090,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5115,7 +5115,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5138,7 +5138,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5165,7 +5165,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5188,7 +5188,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5211,7 +5211,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -5231,7 +5231,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5254,7 +5254,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5279,7 +5279,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5305,7 +5305,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5327,7 +5327,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5351,7 +5351,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5375,7 +5375,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5399,7 +5399,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5425,7 +5425,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5449,7 +5449,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5473,7 +5473,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5502,7 +5502,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5525,7 +5525,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5548,7 +5548,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5569,7 +5569,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags. ", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5594,7 +5594,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5617,7 +5617,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5640,7 +5640,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5661,7 +5661,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags. ", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5686,7 +5686,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5709,7 +5709,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5732,7 +5732,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5753,7 +5753,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5778,7 +5778,7 @@ export default { $description: "Text color for green tags. Ensures readability while maintaining the green color theme.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5801,7 +5801,7 @@ export default { $description: "Background color for green tags. Creates a distinct surface with green theme styling.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5824,7 +5824,7 @@ export default { $description: "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5845,7 +5845,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5870,7 +5870,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5893,7 +5893,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5916,7 +5916,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5937,7 +5937,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -5962,7 +5962,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -5985,7 +5985,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6008,7 +6008,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6029,7 +6029,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6054,7 +6054,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6077,7 +6077,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6100,7 +6100,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6121,7 +6121,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6146,7 +6146,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6169,7 +6169,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6192,7 +6192,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6213,7 +6213,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6238,7 +6238,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6261,7 +6261,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6284,7 +6284,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6305,7 +6305,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6330,7 +6330,7 @@ export default { $description: "Text color for purple tags. Ensures readability while maintaining the purple color theme.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6353,7 +6353,7 @@ export default { $description: "Background color for purple tags. Creates a distinct surface with purple theme styling.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6376,7 +6376,7 @@ export default { $description: "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6397,7 +6397,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6422,7 +6422,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6445,7 +6445,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6468,7 +6468,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6489,7 +6489,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6514,7 +6514,7 @@ export default { $description: "Text color for violet tags. Ensures readability while maintaining the violet color theme.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6537,7 +6537,7 @@ export default { $description: "Background color for violet tags. Creates a distinct surface with violet theme styling.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6560,7 +6560,7 @@ export default { $description: "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6581,7 +6581,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6606,7 +6606,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6629,7 +6629,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6652,7 +6652,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6673,7 +6673,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6698,7 +6698,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6721,7 +6721,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6744,7 +6744,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6765,7 +6765,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6792,7 +6792,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6815,7 +6815,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6838,7 +6838,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6861,7 +6861,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6886,7 +6886,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6909,7 +6909,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6932,7 +6932,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -6955,7 +6955,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -6981,7 +6981,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7003,7 +7003,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7025,7 +7025,7 @@ export default { $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-border", + name: "cn-component-tooltip-border", attributes: { category: "component", type: "tooltip", @@ -7039,7 +7039,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7067,7 +7067,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7077,8 +7077,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7106,7 +7105,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7117,7 +7116,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7155,7 +7154,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7166,7 +7165,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7204,7 +7203,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7215,7 +7214,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7253,7 +7252,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7264,7 +7263,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7302,7 +7301,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7313,7 +7312,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7341,7 +7340,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7352,7 +7351,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7380,7 +7379,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7401,7 +7400,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7421,7 +7420,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7440,7 +7439,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7460,7 +7459,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7479,7 +7478,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7499,7 +7498,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7518,7 +7517,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7538,7 +7537,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7557,7 +7556,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7577,7 +7576,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7596,7 +7595,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7616,7 +7615,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7635,7 +7634,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7655,7 +7654,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7674,7 +7673,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/dark/dimmer.json", @@ -7694,7 +7693,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7745,7 +7744,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7765,7 +7764,7 @@ export default { $type: "color", $value: "{colors.yellow.100}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7783,7 +7782,7 @@ export default { $type: "color", $value: "{colors.pink.200}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7801,7 +7800,7 @@ export default { $type: "color", $value: "{colors.purple.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7819,7 +7818,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7839,7 +7838,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7857,7 +7856,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7875,7 +7874,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7896,7 +7895,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7917,7 +7916,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.4)", filePath: "design-tokens/mode/dark/dimmer.json", isSource: true, original: { @@ -7933,7 +7932,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7952,7 +7951,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -7973,7 +7972,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7992,7 +7991,7 @@ export default { $type: "color", $value: "{colors.blue.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8011,7 +8010,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8033,7 +8032,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8059,7 +8058,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8081,7 +8080,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8101,7 +8100,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8125,7 +8124,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8145,7 +8144,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8168,7 +8167,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8195,7 +8194,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8224,7 +8223,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8251,7 +8250,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8294,7 +8293,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8321,7 +8320,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8348,7 +8347,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8375,7 +8374,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8402,7 +8401,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8429,7 +8428,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8449,7 +8448,7 @@ export default { $type: "color", $value: "{colors.cyan.50}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8467,7 +8466,7 @@ export default { $type: "color", $value: "{colors.cyan.100}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8485,7 +8484,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8503,7 +8502,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8521,7 +8520,7 @@ export default { $type: "color", $value: "{colors.cyan.400}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8539,7 +8538,7 @@ export default { $type: "color", $value: "{colors.cyan.500}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8557,7 +8556,7 @@ export default { $type: "color", $value: "{colors.cyan.600}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8575,7 +8574,7 @@ export default { $type: "color", $value: "{colors.cyan.700}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8593,7 +8592,7 @@ export default { $type: "color", $value: "{colors.cyan.800}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8611,7 +8610,7 @@ export default { $type: "color", $value: "{colors.cyan.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8629,7 +8628,7 @@ export default { $type: "color", $value: "{colors.cyan.950}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8649,7 +8648,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8667,7 +8666,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8685,7 +8684,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8703,7 +8702,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8721,7 +8720,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8739,7 +8738,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8757,7 +8756,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8775,7 +8774,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8793,7 +8792,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8811,7 +8810,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8829,7 +8828,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-dark-dimmer-protanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/dark-dimmer-protanopia-gitness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-dark-dimmer-protanopia-desktop-gitness.ts rename to packages/core-design-system/src/styles-esm/dark-dimmer-protanopia-gitness.ts index d56ed8a6c4..e14b25d07e 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-dimmer-protanopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/dark-dimmer-protanopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:06:58 GMT + * Generated on Tue, 18 Mar 2025 06:44:03 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -276,7 +276,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -297,7 +297,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -318,7 +318,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -339,7 +339,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -360,7 +360,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -381,7 +381,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -401,7 +401,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -420,7 +420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -440,7 +440,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -462,7 +462,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -484,7 +484,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -506,7 +506,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -532,7 +532,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -554,7 +554,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -576,7 +576,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -598,7 +598,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -623,7 +623,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -646,7 +646,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -669,7 +669,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -692,7 +692,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -717,7 +717,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -740,7 +740,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -761,7 +761,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -781,7 +781,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -802,7 +802,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -822,7 +822,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -848,7 +848,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -870,7 +870,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -892,7 +892,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -917,7 +917,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -940,7 +940,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -963,7 +963,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -988,7 +988,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1009,7 +1009,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -1029,7 +1029,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1050,7 +1050,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.2)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -1070,7 +1070,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1095,7 +1095,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable blue text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1116,7 +1116,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.2)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -1136,7 +1136,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1157,7 +1157,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -1177,7 +1177,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1202,7 +1202,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1223,7 +1223,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -1243,7 +1243,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1264,7 +1264,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -1284,7 +1284,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1309,7 +1309,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1330,7 +1330,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-yellow-300) l c h / 0.2)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -1350,7 +1350,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1371,7 +1371,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-yellow-500) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -1391,7 +1391,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1416,7 +1416,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1437,7 +1437,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -1457,7 +1457,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1478,7 +1478,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -1498,7 +1498,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1523,7 +1523,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1544,7 +1544,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-purple-300) l c h / 0.2)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -1564,7 +1564,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1585,7 +1585,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-purple-500) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -1605,7 +1605,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1630,7 +1630,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1653,7 +1653,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1678,7 +1678,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1704,7 +1704,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1726,7 +1726,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1748,7 +1748,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1773,7 +1773,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1796,7 +1796,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1819,7 +1819,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1844,7 +1844,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1867,7 +1867,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1890,7 +1890,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1913,7 +1913,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1937,7 +1937,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1961,7 +1961,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -1985,7 +1985,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2011,7 +2011,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2035,7 +2035,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2059,7 +2059,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2087,7 +2087,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2111,7 +2111,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2137,7 +2137,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2161,7 +2161,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2188,7 +2188,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable blue text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2209,7 +2209,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.1)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -2229,7 +2229,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2250,7 +2250,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.2)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -2270,7 +2270,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2292,7 +2292,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -2312,7 +2312,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2334,7 +2334,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -2354,7 +2354,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2381,7 +2381,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2402,7 +2402,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -2422,7 +2422,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2443,7 +2443,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -2463,7 +2463,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2485,7 +2485,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -2505,7 +2505,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2527,7 +2527,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -2547,7 +2547,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2574,7 +2574,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2595,7 +2595,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2620,7 +2620,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2646,7 +2646,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2668,7 +2668,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2692,7 +2692,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2714,7 +2714,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2736,7 +2736,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2756,7 +2756,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2776,7 +2776,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -2796,7 +2796,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2820,7 +2820,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2840,7 +2840,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2863,7 +2863,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2885,7 +2885,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2908,7 +2908,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -2928,7 +2928,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2964,7 +2964,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -2984,7 +2984,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Blue background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -3004,7 +3004,7 @@ export default { $description: "Blue background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3024,7 +3024,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -3044,7 +3044,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3064,7 +3064,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -3084,7 +3084,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3106,7 +3106,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3128,7 +3128,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3148,7 +3148,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.12)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -3168,7 +3168,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3188,7 +3188,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -3208,7 +3208,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3228,7 +3228,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -3248,7 +3248,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3270,7 +3270,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3292,7 +3292,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3314,7 +3314,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3336,7 +3336,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3356,7 +3356,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -3376,7 +3376,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3396,7 +3396,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", isSource: true, @@ -3414,7 +3414,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3436,7 +3436,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3458,7 +3458,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3482,7 +3482,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3504,7 +3504,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3526,7 +3526,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3548,7 +3548,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3570,7 +3570,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3594,7 +3594,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3618,7 +3618,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3640,7 +3640,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3663,7 +3663,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3686,7 +3686,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3707,7 +3707,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3729,7 +3729,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3749,7 +3749,7 @@ export default { $value: "{background.1}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3774,7 +3774,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3800,7 +3800,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3829,7 +3829,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3854,7 +3854,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3868,7 +3868,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--cn-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -3880,7 +3880,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3906,7 +3906,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3932,7 +3932,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3960,7 +3960,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3984,7 +3984,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4010,7 +4010,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4034,7 +4034,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4059,7 +4059,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -4079,7 +4079,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4105,7 +4105,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4127,7 +4127,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4149,7 +4149,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4160,7 +4160,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", isSource: true, @@ -4169,7 +4169,7 @@ export default { $value: "{state.hover}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4180,7 +4180,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", isSource: true, @@ -4189,7 +4189,7 @@ export default { $value: "{state.selected}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4213,7 +4213,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4237,7 +4237,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4263,7 +4263,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4287,7 +4287,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4312,7 +4312,7 @@ export default { $value: "{text.1}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4333,7 +4333,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4358,7 +4358,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4379,7 +4379,7 @@ export default { $value: "{border.2}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4402,7 +4402,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4426,7 +4426,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4450,7 +4450,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4474,7 +4474,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4499,7 +4499,7 @@ export default { $value: "{text.1}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4520,7 +4520,7 @@ export default { $value: "{text.3}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4546,7 +4546,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4571,7 +4571,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4594,7 +4594,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4617,7 +4617,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4642,7 +4642,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4665,7 +4665,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4688,7 +4688,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4714,7 +4714,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4740,7 +4740,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4765,7 +4765,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4788,7 +4788,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4813,7 +4813,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4836,7 +4836,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4861,7 +4861,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4884,7 +4884,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4910,7 +4910,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4932,7 +4932,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -4954,7 +4954,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -4976,7 +4976,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -4998,7 +4998,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5020,7 +5020,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5042,7 +5042,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5067,7 +5067,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5090,7 +5090,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5115,7 +5115,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5138,7 +5138,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5165,7 +5165,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5188,7 +5188,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5211,7 +5211,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -5231,7 +5231,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5254,7 +5254,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5279,7 +5279,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5305,7 +5305,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5327,7 +5327,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5351,7 +5351,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5375,7 +5375,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5399,7 +5399,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5425,7 +5425,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5449,7 +5449,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5473,7 +5473,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5502,7 +5502,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5525,7 +5525,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5548,7 +5548,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5569,7 +5569,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5594,7 +5594,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5617,7 +5617,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5640,7 +5640,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5661,7 +5661,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5686,7 +5686,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5709,7 +5709,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5732,7 +5732,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5753,7 +5753,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5778,7 +5778,7 @@ export default { $description: "Text color for green tags. Adjusted for protanopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5801,7 +5801,7 @@ export default { $description: "Background color for green tags. Adjusted for protanopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5824,7 +5824,7 @@ export default { $description: "Subtle background variation for green tags. Adjusted for protanopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5845,7 +5845,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5870,7 +5870,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5893,7 +5893,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5916,7 +5916,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5937,7 +5937,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -5962,7 +5962,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -5985,7 +5985,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6008,7 +6008,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6029,7 +6029,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6054,7 +6054,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6077,7 +6077,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6100,7 +6100,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6121,7 +6121,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6146,7 +6146,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6169,7 +6169,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6192,7 +6192,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6213,7 +6213,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6238,7 +6238,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6261,7 +6261,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6284,7 +6284,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6305,7 +6305,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6330,7 +6330,7 @@ export default { $description: "Text color for purple tags. Ensures readability while maintaining the purple color theme.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6353,7 +6353,7 @@ export default { $description: "Background color for purple tags. Creates a distinct surface with purple theme styling.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6376,7 +6376,7 @@ export default { $description: "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6397,7 +6397,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6422,7 +6422,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6445,7 +6445,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6468,7 +6468,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6489,7 +6489,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6514,7 +6514,7 @@ export default { $description: "Text color for violet tags. Ensures readability while maintaining the violet color theme.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6537,7 +6537,7 @@ export default { $description: "Background color for violet tags. Creates a distinct surface with violet theme styling.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6560,7 +6560,7 @@ export default { $description: "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6581,7 +6581,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6606,7 +6606,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6629,7 +6629,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6652,7 +6652,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6673,7 +6673,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6698,7 +6698,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6721,7 +6721,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6744,7 +6744,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6765,7 +6765,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6792,7 +6792,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6815,7 +6815,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6838,7 +6838,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6861,7 +6861,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6886,7 +6886,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6909,7 +6909,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6932,7 +6932,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -6955,7 +6955,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -6981,7 +6981,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7003,7 +7003,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7025,7 +7025,7 @@ export default { $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-border", + name: "cn-component-tooltip-border", attributes: { category: "component", type: "tooltip", @@ -7039,7 +7039,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7067,7 +7067,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7077,8 +7077,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7106,7 +7105,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7117,7 +7116,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7155,7 +7154,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7166,7 +7165,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7204,7 +7203,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7215,7 +7214,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7253,7 +7252,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7264,7 +7263,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7302,7 +7301,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7313,7 +7312,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7341,7 +7340,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7352,7 +7351,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7380,7 +7379,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7401,7 +7400,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7421,7 +7420,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7440,7 +7439,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7460,7 +7459,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7479,7 +7478,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7499,7 +7498,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7518,7 +7517,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7538,7 +7537,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7557,7 +7556,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7577,7 +7576,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7596,7 +7595,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7616,7 +7615,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7635,7 +7634,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7655,7 +7654,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7674,7 +7673,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7694,7 +7693,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7745,7 +7744,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7765,7 +7764,7 @@ export default { $type: "color", $value: "{colors.yellow.100}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7783,7 +7782,7 @@ export default { $type: "color", $value: "{colors.pink.200}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7801,7 +7800,7 @@ export default { $type: "color", $value: "{colors.purple.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7819,7 +7818,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7839,7 +7838,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7857,7 +7856,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7875,7 +7874,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7896,7 +7895,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7917,7 +7916,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.4)", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", isSource: true, original: { @@ -7933,7 +7932,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7952,7 +7951,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -7973,7 +7972,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7992,7 +7991,7 @@ export default { $type: "color", $value: "{colors.blue.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8011,7 +8010,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8033,7 +8032,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8059,7 +8058,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8081,7 +8080,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8101,7 +8100,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8125,7 +8124,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8145,7 +8144,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8168,7 +8167,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8195,7 +8194,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8224,7 +8223,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8251,7 +8250,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8294,7 +8293,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8321,7 +8320,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8348,7 +8347,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8375,7 +8374,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8402,7 +8401,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8429,7 +8428,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8449,7 +8448,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8467,7 +8466,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8485,7 +8484,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8503,7 +8502,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8521,7 +8520,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8539,7 +8538,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8557,7 +8556,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8575,7 +8574,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8593,7 +8592,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8611,7 +8610,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8629,7 +8628,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8649,7 +8648,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8667,7 +8666,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8685,7 +8684,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8703,7 +8702,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8721,7 +8720,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8739,7 +8738,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8757,7 +8756,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8775,7 +8774,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8793,7 +8792,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8811,7 +8810,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8829,7 +8828,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-dark-dimmer-protanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/dark-dimmer-protanopia-harness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-dark-dimmer-protanopia-desktop-harness.ts rename to packages/core-design-system/src/styles-esm/dark-dimmer-protanopia-harness.ts index 9a89930f31..775542ad8b 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-dimmer-protanopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/dark-dimmer-protanopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:06:57 GMT + * Generated on Tue, 18 Mar 2025 06:44:03 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -276,7 +276,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -297,7 +297,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -318,7 +318,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -339,7 +339,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -360,7 +360,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -381,7 +381,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -401,7 +401,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -420,7 +420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -440,7 +440,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -462,7 +462,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -484,7 +484,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -506,7 +506,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -532,7 +532,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -554,7 +554,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -576,7 +576,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -598,7 +598,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -623,7 +623,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -646,7 +646,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -669,7 +669,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -692,7 +692,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -717,7 +717,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -740,7 +740,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -761,7 +761,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -781,7 +781,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -802,7 +802,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -822,7 +822,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -848,7 +848,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -870,7 +870,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -892,7 +892,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -917,7 +917,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -940,7 +940,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -963,7 +963,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -988,7 +988,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1009,7 +1009,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -1029,7 +1029,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1050,7 +1050,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.2)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -1070,7 +1070,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1095,7 +1095,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable blue text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1116,7 +1116,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.2)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -1136,7 +1136,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1157,7 +1157,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -1177,7 +1177,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1202,7 +1202,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1223,7 +1223,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -1243,7 +1243,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1264,7 +1264,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -1284,7 +1284,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1309,7 +1309,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1330,7 +1330,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-yellow-300) l c h / 0.2)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -1350,7 +1350,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1371,7 +1371,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-yellow-500) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -1391,7 +1391,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1416,7 +1416,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1437,7 +1437,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -1457,7 +1457,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1478,7 +1478,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -1498,7 +1498,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1523,7 +1523,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1544,7 +1544,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-purple-300) l c h / 0.2)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -1564,7 +1564,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1585,7 +1585,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-purple-500) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -1605,7 +1605,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1630,7 +1630,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1653,7 +1653,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1678,7 +1678,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1704,7 +1704,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1726,7 +1726,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1748,7 +1748,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1773,7 +1773,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1796,7 +1796,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1819,7 +1819,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1844,7 +1844,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1867,7 +1867,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1890,7 +1890,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1913,7 +1913,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1937,7 +1937,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1961,7 +1961,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -1985,7 +1985,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2011,7 +2011,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2035,7 +2035,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2059,7 +2059,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2087,7 +2087,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2111,7 +2111,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2137,7 +2137,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2161,7 +2161,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2188,7 +2188,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable blue text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2209,7 +2209,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.1)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -2229,7 +2229,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2250,7 +2250,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.2)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -2270,7 +2270,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2292,7 +2292,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -2312,7 +2312,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2334,7 +2334,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -2354,7 +2354,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2381,7 +2381,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2402,7 +2402,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -2422,7 +2422,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2443,7 +2443,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -2463,7 +2463,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2485,7 +2485,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -2505,7 +2505,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2527,7 +2527,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -2547,7 +2547,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2574,7 +2574,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2595,7 +2595,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2620,7 +2620,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2646,7 +2646,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2668,7 +2668,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2692,7 +2692,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2714,7 +2714,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2736,7 +2736,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2756,7 +2756,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2776,7 +2776,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -2796,7 +2796,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2820,7 +2820,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2840,7 +2840,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2863,7 +2863,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2885,7 +2885,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2908,7 +2908,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -2928,7 +2928,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2964,7 +2964,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -2984,7 +2984,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Blue background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -3004,7 +3004,7 @@ export default { $description: "Blue background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3024,7 +3024,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -3044,7 +3044,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3064,7 +3064,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -3084,7 +3084,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3106,7 +3106,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3128,7 +3128,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3148,7 +3148,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.12)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -3168,7 +3168,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3188,7 +3188,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -3208,7 +3208,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3228,7 +3228,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -3248,7 +3248,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3270,7 +3270,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3292,7 +3292,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3314,7 +3314,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3336,7 +3336,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3356,7 +3356,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -3376,7 +3376,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3396,7 +3396,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", isSource: true, @@ -3414,7 +3414,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3436,7 +3436,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3458,7 +3458,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3482,7 +3482,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3504,7 +3504,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3526,7 +3526,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3548,7 +3548,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3570,7 +3570,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3594,7 +3594,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3618,7 +3618,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3640,7 +3640,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3663,7 +3663,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3686,7 +3686,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3707,7 +3707,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3729,7 +3729,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3749,7 +3749,7 @@ export default { $value: "{background.1}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3774,7 +3774,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3800,7 +3800,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3829,7 +3829,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3854,7 +3854,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3868,7 +3868,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--cn-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -3880,7 +3880,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3906,7 +3906,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3932,7 +3932,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3960,7 +3960,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3984,7 +3984,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4010,7 +4010,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4034,7 +4034,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4059,7 +4059,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -4079,7 +4079,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4105,7 +4105,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4127,7 +4127,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4149,7 +4149,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4160,7 +4160,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", isSource: true, @@ -4169,7 +4169,7 @@ export default { $value: "{state.hover}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4180,7 +4180,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", isSource: true, @@ -4189,7 +4189,7 @@ export default { $value: "{state.selected}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4213,7 +4213,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4237,7 +4237,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4263,7 +4263,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4287,7 +4287,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4312,7 +4312,7 @@ export default { $value: "{text.1}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4333,7 +4333,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4358,7 +4358,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4379,7 +4379,7 @@ export default { $value: "{border.2}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4402,7 +4402,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4426,7 +4426,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4450,7 +4450,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4474,7 +4474,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4499,7 +4499,7 @@ export default { $value: "{text.1}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4520,7 +4520,7 @@ export default { $value: "{text.3}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4546,7 +4546,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4571,7 +4571,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4594,7 +4594,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4617,7 +4617,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4642,7 +4642,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4665,7 +4665,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4688,7 +4688,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4714,7 +4714,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4740,7 +4740,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4765,7 +4765,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4788,7 +4788,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4813,7 +4813,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4836,7 +4836,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4861,7 +4861,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4884,7 +4884,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4910,7 +4910,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4932,7 +4932,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -4954,7 +4954,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -4976,7 +4976,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -4998,7 +4998,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5020,7 +5020,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5042,7 +5042,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5067,7 +5067,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5090,7 +5090,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5115,7 +5115,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5138,7 +5138,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5165,7 +5165,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5188,7 +5188,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5211,7 +5211,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -5231,7 +5231,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5254,7 +5254,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5279,7 +5279,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5305,7 +5305,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5327,7 +5327,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5351,7 +5351,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5375,7 +5375,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5399,7 +5399,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5425,7 +5425,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5449,7 +5449,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5473,7 +5473,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5502,7 +5502,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5525,7 +5525,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5548,7 +5548,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5569,7 +5569,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5594,7 +5594,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5617,7 +5617,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5640,7 +5640,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5661,7 +5661,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5686,7 +5686,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5709,7 +5709,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5732,7 +5732,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5753,7 +5753,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5778,7 +5778,7 @@ export default { $description: "Text color for green tags. Adjusted for protanopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5801,7 +5801,7 @@ export default { $description: "Background color for green tags. Adjusted for protanopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5824,7 +5824,7 @@ export default { $description: "Subtle background variation for green tags. Adjusted for protanopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5845,7 +5845,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5870,7 +5870,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5893,7 +5893,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5916,7 +5916,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5937,7 +5937,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -5962,7 +5962,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -5985,7 +5985,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6008,7 +6008,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6029,7 +6029,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6054,7 +6054,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6077,7 +6077,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6100,7 +6100,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6121,7 +6121,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6146,7 +6146,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6169,7 +6169,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6192,7 +6192,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6213,7 +6213,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6238,7 +6238,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6261,7 +6261,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6284,7 +6284,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6305,7 +6305,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6330,7 +6330,7 @@ export default { $description: "Text color for purple tags. Ensures readability while maintaining the purple color theme.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6353,7 +6353,7 @@ export default { $description: "Background color for purple tags. Creates a distinct surface with purple theme styling.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6376,7 +6376,7 @@ export default { $description: "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6397,7 +6397,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6422,7 +6422,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6445,7 +6445,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6468,7 +6468,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6489,7 +6489,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6514,7 +6514,7 @@ export default { $description: "Text color for violet tags. Ensures readability while maintaining the violet color theme.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6537,7 +6537,7 @@ export default { $description: "Background color for violet tags. Creates a distinct surface with violet theme styling.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6560,7 +6560,7 @@ export default { $description: "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6581,7 +6581,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6606,7 +6606,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6629,7 +6629,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6652,7 +6652,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6673,7 +6673,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6698,7 +6698,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6721,7 +6721,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6744,7 +6744,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6765,7 +6765,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6792,7 +6792,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6815,7 +6815,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6838,7 +6838,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6861,7 +6861,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6886,7 +6886,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6909,7 +6909,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6932,7 +6932,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -6955,7 +6955,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -6981,7 +6981,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7003,7 +7003,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7025,7 +7025,7 @@ export default { $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-border", + name: "cn-component-tooltip-border", attributes: { category: "component", type: "tooltip", @@ -7039,7 +7039,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7067,7 +7067,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7077,8 +7077,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7106,7 +7105,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7117,7 +7116,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7155,7 +7154,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7166,7 +7165,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7204,7 +7203,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7215,7 +7214,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7253,7 +7252,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7264,7 +7263,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7302,7 +7301,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7313,7 +7312,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7341,7 +7340,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7352,7 +7351,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7380,7 +7379,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7401,7 +7400,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7421,7 +7420,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7440,7 +7439,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7460,7 +7459,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7479,7 +7478,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7499,7 +7498,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7518,7 +7517,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7538,7 +7537,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7557,7 +7556,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7577,7 +7576,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7596,7 +7595,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7616,7 +7615,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7635,7 +7634,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7655,7 +7654,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7674,7 +7673,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", @@ -7694,7 +7693,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7745,7 +7744,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7765,7 +7764,7 @@ export default { $type: "color", $value: "{colors.yellow.100}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7783,7 +7782,7 @@ export default { $type: "color", $value: "{colors.pink.200}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7801,7 +7800,7 @@ export default { $type: "color", $value: "{colors.purple.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7819,7 +7818,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7839,7 +7838,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7857,7 +7856,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7875,7 +7874,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7896,7 +7895,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7917,7 +7916,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.4)", filePath: "design-tokens/mode/dark/dimmer-protanopia.json", isSource: true, original: { @@ -7933,7 +7932,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7952,7 +7951,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -7973,7 +7972,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7992,7 +7991,7 @@ export default { $type: "color", $value: "{colors.blue.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8011,7 +8010,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8033,7 +8032,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8059,7 +8058,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8081,7 +8080,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8101,7 +8100,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8125,7 +8124,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8145,7 +8144,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8168,7 +8167,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8195,7 +8194,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8224,7 +8223,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8251,7 +8250,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8294,7 +8293,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8321,7 +8320,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8348,7 +8347,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8375,7 +8374,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8402,7 +8401,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8429,7 +8428,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8449,7 +8448,7 @@ export default { $type: "color", $value: "{colors.cyan.50}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8467,7 +8466,7 @@ export default { $type: "color", $value: "{colors.cyan.100}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8485,7 +8484,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8503,7 +8502,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8521,7 +8520,7 @@ export default { $type: "color", $value: "{colors.cyan.400}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8539,7 +8538,7 @@ export default { $type: "color", $value: "{colors.cyan.500}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8557,7 +8556,7 @@ export default { $type: "color", $value: "{colors.cyan.600}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8575,7 +8574,7 @@ export default { $type: "color", $value: "{colors.cyan.700}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8593,7 +8592,7 @@ export default { $type: "color", $value: "{colors.cyan.800}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8611,7 +8610,7 @@ export default { $type: "color", $value: "{colors.cyan.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8629,7 +8628,7 @@ export default { $type: "color", $value: "{colors.cyan.950}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8649,7 +8648,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8667,7 +8666,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8685,7 +8684,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8703,7 +8702,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8721,7 +8720,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8739,7 +8738,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8757,7 +8756,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8775,7 +8774,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8793,7 +8792,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8811,7 +8810,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8829,7 +8828,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-dark-dimmer-tritanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/dark-dimmer-tritanopia-gitness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-dark-dimmer-tritanopia-desktop-gitness.ts rename to packages/core-design-system/src/styles-esm/dark-dimmer-tritanopia-gitness.ts index ae314c551a..9b55bee358 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-dimmer-tritanopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/dark-dimmer-tritanopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:10 GMT + * Generated on Tue, 18 Mar 2025 06:44:11 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -276,7 +276,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -297,7 +297,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -318,7 +318,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -339,7 +339,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -360,7 +360,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -381,7 +381,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -401,7 +401,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -420,7 +420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -440,7 +440,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -462,7 +462,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -484,7 +484,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -506,7 +506,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -532,7 +532,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -554,7 +554,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -576,7 +576,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -598,7 +598,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -623,7 +623,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -646,7 +646,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -669,7 +669,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -692,7 +692,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -717,7 +717,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -740,7 +740,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -761,7 +761,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -781,7 +781,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -802,7 +802,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -822,7 +822,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -848,7 +848,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -870,7 +870,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -892,7 +892,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -917,7 +917,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -940,7 +940,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -963,7 +963,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -988,7 +988,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1009,7 +1009,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -1029,7 +1029,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1050,7 +1050,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.2)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -1070,7 +1070,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1095,7 +1095,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable cyan text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1116,7 +1116,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.2)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -1136,7 +1136,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1157,7 +1157,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -1177,7 +1177,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1202,7 +1202,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1223,7 +1223,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -1243,7 +1243,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1264,7 +1264,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -1284,7 +1284,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1309,7 +1309,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable orange text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1330,7 +1330,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -1350,7 +1350,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1371,7 +1371,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -1391,7 +1391,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1416,7 +1416,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1437,7 +1437,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -1457,7 +1457,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1478,7 +1478,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -1498,7 +1498,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1523,7 +1523,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1544,7 +1544,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.2)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -1564,7 +1564,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1585,7 +1585,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -1605,7 +1605,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1630,7 +1630,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1653,7 +1653,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1678,7 +1678,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1704,7 +1704,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1726,7 +1726,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1748,7 +1748,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1773,7 +1773,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1796,7 +1796,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1819,7 +1819,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1844,7 +1844,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1867,7 +1867,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1890,7 +1890,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1913,7 +1913,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1937,7 +1937,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1961,7 +1961,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -1985,7 +1985,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2011,7 +2011,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2035,7 +2035,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2059,7 +2059,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2087,7 +2087,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2111,7 +2111,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2137,7 +2137,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2161,7 +2161,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2188,7 +2188,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable cyan text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2209,7 +2209,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -2229,7 +2229,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2250,7 +2250,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.2)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -2270,7 +2270,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2292,7 +2292,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -2312,7 +2312,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2334,7 +2334,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -2354,7 +2354,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2381,7 +2381,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2402,7 +2402,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -2422,7 +2422,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2443,7 +2443,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -2463,7 +2463,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2485,7 +2485,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -2505,7 +2505,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2527,7 +2527,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -2547,7 +2547,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2574,7 +2574,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2595,7 +2595,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2620,7 +2620,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2646,7 +2646,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2668,7 +2668,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2692,7 +2692,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2714,7 +2714,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2736,7 +2736,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2756,7 +2756,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2776,7 +2776,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -2796,7 +2796,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2820,7 +2820,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2840,7 +2840,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2863,7 +2863,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2885,7 +2885,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2908,7 +2908,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -2928,7 +2928,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2964,7 +2964,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -2984,7 +2984,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.12)", $description: "Cyan background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -3004,7 +3004,7 @@ export default { $description: "Cyan background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3024,7 +3024,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -3044,7 +3044,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3064,7 +3064,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -3084,7 +3084,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3106,7 +3106,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3128,7 +3128,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3148,7 +3148,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.12)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -3168,7 +3168,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3188,7 +3188,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -3208,7 +3208,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3228,7 +3228,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -3248,7 +3248,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3270,7 +3270,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3292,7 +3292,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3314,7 +3314,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3336,7 +3336,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3356,7 +3356,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -3376,7 +3376,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3396,7 +3396,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", isSource: true, @@ -3414,7 +3414,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3436,7 +3436,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3458,7 +3458,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3482,7 +3482,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3504,7 +3504,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3526,7 +3526,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3548,7 +3548,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3570,7 +3570,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3594,7 +3594,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3618,7 +3618,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3640,7 +3640,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3663,7 +3663,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3686,7 +3686,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3707,7 +3707,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3729,7 +3729,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3749,7 +3749,7 @@ export default { $value: "{background.1}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3774,7 +3774,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3800,7 +3800,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3829,7 +3829,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3854,7 +3854,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3868,7 +3868,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--cn-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -3880,7 +3880,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3906,7 +3906,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3931,7 +3931,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed", + name: "cn-component-pipeline-card-completed", attributes: { category: "component", type: "pipeline", @@ -3957,7 +3957,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3981,7 +3981,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4007,7 +4007,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4031,7 +4031,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4056,7 +4056,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -4076,7 +4076,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4102,7 +4102,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4124,7 +4124,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4146,7 +4146,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4157,7 +4157,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", isSource: true, @@ -4166,7 +4166,7 @@ export default { $value: "{state.hover}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4177,7 +4177,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", isSource: true, @@ -4186,7 +4186,7 @@ export default { $value: "{state.selected}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4210,7 +4210,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4234,7 +4234,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4260,7 +4260,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4284,7 +4284,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4309,7 +4309,7 @@ export default { $value: "{text.1}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4330,7 +4330,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4355,7 +4355,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4376,7 +4376,7 @@ export default { $value: "{border.2}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4399,7 +4399,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4423,7 +4423,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4447,7 +4447,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4471,7 +4471,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4496,7 +4496,7 @@ export default { $value: "{text.1}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4517,7 +4517,7 @@ export default { $value: "{text.3}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4543,7 +4543,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4568,7 +4568,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4591,7 +4591,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4614,7 +4614,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4639,7 +4639,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4662,7 +4662,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4685,7 +4685,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4711,7 +4711,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4737,7 +4737,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4762,7 +4762,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4785,7 +4785,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4810,7 +4810,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4833,7 +4833,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4858,7 +4858,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4881,7 +4881,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4907,7 +4907,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4929,7 +4929,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -4951,7 +4951,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -4973,7 +4973,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -4995,7 +4995,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5017,7 +5017,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5039,7 +5039,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5064,7 +5064,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5087,7 +5087,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5112,7 +5112,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5135,7 +5135,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5162,7 +5162,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5185,7 +5185,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5208,7 +5208,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -5228,7 +5228,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5251,7 +5251,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5276,7 +5276,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5302,7 +5302,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5324,7 +5324,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5348,7 +5348,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5372,7 +5372,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5396,7 +5396,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5422,7 +5422,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5446,7 +5446,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5470,7 +5470,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5499,7 +5499,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5522,7 +5522,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5545,7 +5545,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5566,7 +5566,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5591,7 +5591,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5614,7 +5614,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5637,7 +5637,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5658,7 +5658,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5683,7 +5683,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5706,7 +5706,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5729,7 +5729,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5750,7 +5750,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5775,7 +5775,7 @@ export default { $description: "Text color for green tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5798,7 +5798,7 @@ export default { $description: "Background color for green tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5821,7 +5821,7 @@ export default { $description: "Subtle background variation for green tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5842,7 +5842,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags, replaced with cyan.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5867,7 +5867,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5890,7 +5890,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5913,7 +5913,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5934,7 +5934,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -5959,7 +5959,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -5982,7 +5982,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6005,7 +6005,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6026,7 +6026,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6051,7 +6051,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6074,7 +6074,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6097,7 +6097,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6118,7 +6118,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6143,7 +6143,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6166,7 +6166,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6189,7 +6189,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6210,7 +6210,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6235,7 +6235,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6258,7 +6258,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6281,7 +6281,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6302,7 +6302,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6327,7 +6327,7 @@ export default { $description: "Text color for purple tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6350,7 +6350,7 @@ export default { $description: "Background color for purple tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6373,7 +6373,7 @@ export default { $description: "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6394,7 +6394,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags, replaced with cyan.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6419,7 +6419,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6442,7 +6442,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6465,7 +6465,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6486,7 +6486,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6511,7 +6511,7 @@ export default { $description: "Text color for violet tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6534,7 +6534,7 @@ export default { $description: "Background color for violet tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6557,7 +6557,7 @@ export default { $description: "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6578,7 +6578,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags, replaced with cyan.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6603,7 +6603,7 @@ export default { $description: "Text color for yellow tags, replaced with orange for tritanopia visibility.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6626,7 +6626,7 @@ export default { $description: "Background color for yellow tags, replaced with orange for tritanopia visibility.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6649,7 +6649,7 @@ export default { $description: "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6670,7 +6670,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags, replaced with orange.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6695,7 +6695,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6718,7 +6718,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6741,7 +6741,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6762,7 +6762,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6789,7 +6789,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6812,7 +6812,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6835,7 +6835,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6858,7 +6858,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6883,7 +6883,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6906,7 +6906,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6929,7 +6929,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -6952,7 +6952,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -6978,7 +6978,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7000,7 +7000,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7022,7 +7022,7 @@ export default { $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-border", + name: "cn-component-tooltip-border", attributes: { category: "component", type: "tooltip", @@ -7036,7 +7036,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7064,7 +7064,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7074,8 +7074,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7103,7 +7102,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7114,7 +7113,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7152,7 +7151,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7163,7 +7162,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7201,7 +7200,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7212,7 +7211,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7250,7 +7249,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7261,7 +7260,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7299,7 +7298,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7310,7 +7309,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7338,7 +7337,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7349,7 +7348,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7377,7 +7376,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7398,7 +7397,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7418,7 +7417,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7437,7 +7436,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7457,7 +7456,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7476,7 +7475,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7496,7 +7495,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7515,7 +7514,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7535,7 +7534,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7554,7 +7553,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7574,7 +7573,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7593,7 +7592,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7613,7 +7612,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7632,7 +7631,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7652,7 +7651,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7671,7 +7670,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7691,7 +7690,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7742,7 +7741,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7762,7 +7761,7 @@ export default { $type: "color", $value: "{colors.yellow.100}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7780,7 +7779,7 @@ export default { $type: "color", $value: "{colors.pink.200}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7798,7 +7797,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7816,7 +7815,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7836,7 +7835,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7854,7 +7853,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7872,7 +7871,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7893,7 +7892,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7914,7 +7913,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.4)", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", isSource: true, original: { @@ -7930,7 +7929,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7949,7 +7948,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -7970,7 +7969,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7989,7 +7988,7 @@ export default { $type: "color", $value: "{colors.blue.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8008,7 +8007,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8030,7 +8029,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8056,7 +8055,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8078,7 +8077,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8098,7 +8097,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8122,7 +8121,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8142,7 +8141,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8165,7 +8164,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8192,7 +8191,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8221,7 +8220,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8248,7 +8247,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8291,7 +8290,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8318,7 +8317,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8345,7 +8344,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8372,7 +8371,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8399,7 +8398,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8426,7 +8425,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8446,7 +8445,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8464,7 +8463,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8482,7 +8481,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8500,7 +8499,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8518,7 +8517,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8536,7 +8535,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8554,7 +8553,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8572,7 +8571,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8590,7 +8589,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8608,7 +8607,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8626,7 +8625,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8646,7 +8645,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8664,7 +8663,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8682,7 +8681,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8700,7 +8699,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8718,7 +8717,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8736,7 +8735,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8754,7 +8753,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8772,7 +8771,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8790,7 +8789,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8808,7 +8807,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8826,7 +8825,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-dark-dimmer-tritanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/dark-dimmer-tritanopia-harness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-dark-dimmer-tritanopia-desktop-harness.ts rename to packages/core-design-system/src/styles-esm/dark-dimmer-tritanopia-harness.ts index cc8361611b..b650b7b153 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-dimmer-tritanopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/dark-dimmer-tritanopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:10 GMT + * Generated on Tue, 18 Mar 2025 06:44:11 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -276,7 +276,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -297,7 +297,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -318,7 +318,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -339,7 +339,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -360,7 +360,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -381,7 +381,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -401,7 +401,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -420,7 +420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -440,7 +440,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -462,7 +462,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -484,7 +484,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -506,7 +506,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -532,7 +532,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -554,7 +554,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -576,7 +576,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -598,7 +598,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -623,7 +623,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -646,7 +646,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -669,7 +669,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -692,7 +692,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -717,7 +717,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -740,7 +740,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -761,7 +761,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -781,7 +781,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -802,7 +802,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -822,7 +822,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -848,7 +848,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -870,7 +870,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -892,7 +892,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -917,7 +917,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -940,7 +940,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -963,7 +963,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -988,7 +988,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1009,7 +1009,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -1029,7 +1029,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1050,7 +1050,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.2)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -1070,7 +1070,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1095,7 +1095,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable cyan text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1116,7 +1116,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.2)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -1136,7 +1136,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1157,7 +1157,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -1177,7 +1177,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1202,7 +1202,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1223,7 +1223,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -1243,7 +1243,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1264,7 +1264,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -1284,7 +1284,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1309,7 +1309,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable orange text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1330,7 +1330,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -1350,7 +1350,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1371,7 +1371,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -1391,7 +1391,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1416,7 +1416,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1437,7 +1437,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -1457,7 +1457,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1478,7 +1478,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -1498,7 +1498,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1523,7 +1523,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1544,7 +1544,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.2)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -1564,7 +1564,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1585,7 +1585,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -1605,7 +1605,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1630,7 +1630,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1653,7 +1653,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1678,7 +1678,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1704,7 +1704,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1726,7 +1726,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1748,7 +1748,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1773,7 +1773,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1796,7 +1796,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1819,7 +1819,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1844,7 +1844,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1867,7 +1867,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1890,7 +1890,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1913,7 +1913,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1937,7 +1937,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1961,7 +1961,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -1985,7 +1985,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2011,7 +2011,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2035,7 +2035,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2059,7 +2059,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2087,7 +2087,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2111,7 +2111,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2137,7 +2137,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2161,7 +2161,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2188,7 +2188,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable cyan text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2209,7 +2209,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -2229,7 +2229,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2250,7 +2250,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.2)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -2270,7 +2270,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2292,7 +2292,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -2312,7 +2312,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2334,7 +2334,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -2354,7 +2354,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2381,7 +2381,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2402,7 +2402,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -2422,7 +2422,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2443,7 +2443,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -2463,7 +2463,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2485,7 +2485,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -2505,7 +2505,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2527,7 +2527,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -2547,7 +2547,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2574,7 +2574,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2595,7 +2595,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2620,7 +2620,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2646,7 +2646,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2668,7 +2668,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2692,7 +2692,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2714,7 +2714,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2736,7 +2736,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2756,7 +2756,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2776,7 +2776,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -2796,7 +2796,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2820,7 +2820,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2840,7 +2840,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2863,7 +2863,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2885,7 +2885,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2908,7 +2908,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -2928,7 +2928,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2964,7 +2964,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -2984,7 +2984,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.12)", $description: "Cyan background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -3004,7 +3004,7 @@ export default { $description: "Cyan background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3024,7 +3024,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -3044,7 +3044,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3064,7 +3064,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -3084,7 +3084,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3106,7 +3106,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3128,7 +3128,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3148,7 +3148,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.12)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -3168,7 +3168,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3188,7 +3188,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -3208,7 +3208,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3228,7 +3228,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -3248,7 +3248,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3270,7 +3270,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3292,7 +3292,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3314,7 +3314,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3336,7 +3336,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3356,7 +3356,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -3376,7 +3376,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3396,7 +3396,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", isSource: true, @@ -3414,7 +3414,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3436,7 +3436,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3458,7 +3458,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3482,7 +3482,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3504,7 +3504,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3526,7 +3526,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3548,7 +3548,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3570,7 +3570,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3594,7 +3594,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3618,7 +3618,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3640,7 +3640,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3663,7 +3663,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3686,7 +3686,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3707,7 +3707,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3729,7 +3729,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3749,7 +3749,7 @@ export default { $value: "{background.1}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3774,7 +3774,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3800,7 +3800,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3829,7 +3829,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3854,7 +3854,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3868,7 +3868,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--cn-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -3880,7 +3880,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3906,7 +3906,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3931,7 +3931,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed", + name: "cn-component-pipeline-card-completed", attributes: { category: "component", type: "pipeline", @@ -3957,7 +3957,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3981,7 +3981,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4007,7 +4007,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4031,7 +4031,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4056,7 +4056,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -4076,7 +4076,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4102,7 +4102,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4124,7 +4124,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4146,7 +4146,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4157,7 +4157,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", isSource: true, @@ -4166,7 +4166,7 @@ export default { $value: "{state.hover}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4177,7 +4177,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", isSource: true, @@ -4186,7 +4186,7 @@ export default { $value: "{state.selected}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4210,7 +4210,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4234,7 +4234,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4260,7 +4260,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4284,7 +4284,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4309,7 +4309,7 @@ export default { $value: "{text.1}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4330,7 +4330,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4355,7 +4355,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4376,7 +4376,7 @@ export default { $value: "{border.2}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4399,7 +4399,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4423,7 +4423,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4447,7 +4447,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4471,7 +4471,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4496,7 +4496,7 @@ export default { $value: "{text.1}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4517,7 +4517,7 @@ export default { $value: "{text.3}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4543,7 +4543,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4568,7 +4568,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4591,7 +4591,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4614,7 +4614,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4639,7 +4639,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4662,7 +4662,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4685,7 +4685,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4711,7 +4711,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4737,7 +4737,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4762,7 +4762,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4785,7 +4785,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4810,7 +4810,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4833,7 +4833,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4858,7 +4858,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4881,7 +4881,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4907,7 +4907,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4929,7 +4929,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -4951,7 +4951,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -4973,7 +4973,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -4995,7 +4995,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5017,7 +5017,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5039,7 +5039,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5064,7 +5064,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5087,7 +5087,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5112,7 +5112,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5135,7 +5135,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5162,7 +5162,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5185,7 +5185,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5208,7 +5208,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -5228,7 +5228,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5251,7 +5251,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5276,7 +5276,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5302,7 +5302,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5324,7 +5324,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5348,7 +5348,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5372,7 +5372,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5396,7 +5396,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5422,7 +5422,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5446,7 +5446,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5470,7 +5470,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5499,7 +5499,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5522,7 +5522,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5545,7 +5545,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5566,7 +5566,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5591,7 +5591,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5614,7 +5614,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5637,7 +5637,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5658,7 +5658,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5683,7 +5683,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5706,7 +5706,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5729,7 +5729,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5750,7 +5750,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5775,7 +5775,7 @@ export default { $description: "Text color for green tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5798,7 +5798,7 @@ export default { $description: "Background color for green tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5821,7 +5821,7 @@ export default { $description: "Subtle background variation for green tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5842,7 +5842,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags, replaced with cyan.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5867,7 +5867,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5890,7 +5890,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5913,7 +5913,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5934,7 +5934,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -5959,7 +5959,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -5982,7 +5982,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6005,7 +6005,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6026,7 +6026,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6051,7 +6051,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6074,7 +6074,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6097,7 +6097,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6118,7 +6118,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6143,7 +6143,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6166,7 +6166,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6189,7 +6189,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6210,7 +6210,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6235,7 +6235,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6258,7 +6258,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6281,7 +6281,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6302,7 +6302,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6327,7 +6327,7 @@ export default { $description: "Text color for purple tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6350,7 +6350,7 @@ export default { $description: "Background color for purple tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6373,7 +6373,7 @@ export default { $description: "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6394,7 +6394,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags, replaced with cyan.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6419,7 +6419,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6442,7 +6442,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6465,7 +6465,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6486,7 +6486,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6511,7 +6511,7 @@ export default { $description: "Text color for violet tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6534,7 +6534,7 @@ export default { $description: "Background color for violet tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6557,7 +6557,7 @@ export default { $description: "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6578,7 +6578,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags, replaced with cyan.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6603,7 +6603,7 @@ export default { $description: "Text color for yellow tags, replaced with orange for tritanopia visibility.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6626,7 +6626,7 @@ export default { $description: "Background color for yellow tags, replaced with orange for tritanopia visibility.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6649,7 +6649,7 @@ export default { $description: "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6670,7 +6670,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags, replaced with orange.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6695,7 +6695,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6718,7 +6718,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6741,7 +6741,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6762,7 +6762,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6789,7 +6789,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6812,7 +6812,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6835,7 +6835,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6858,7 +6858,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6883,7 +6883,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6906,7 +6906,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6929,7 +6929,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -6952,7 +6952,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -6978,7 +6978,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7000,7 +7000,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7022,7 +7022,7 @@ export default { $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-border", + name: "cn-component-tooltip-border", attributes: { category: "component", type: "tooltip", @@ -7036,7 +7036,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7064,7 +7064,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7074,8 +7074,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7103,7 +7102,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7114,7 +7113,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7152,7 +7151,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7163,7 +7162,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7201,7 +7200,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7212,7 +7211,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7250,7 +7249,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7261,7 +7260,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7299,7 +7298,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7310,7 +7309,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7338,7 +7337,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7349,7 +7348,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7377,7 +7376,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7398,7 +7397,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7418,7 +7417,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7437,7 +7436,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7457,7 +7456,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7476,7 +7475,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7496,7 +7495,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7515,7 +7514,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7535,7 +7534,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7554,7 +7553,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7574,7 +7573,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7593,7 +7592,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7613,7 +7612,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7632,7 +7631,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7652,7 +7651,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7671,7 +7670,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", @@ -7691,7 +7690,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7742,7 +7741,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7762,7 +7761,7 @@ export default { $type: "color", $value: "{colors.yellow.100}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7780,7 +7779,7 @@ export default { $type: "color", $value: "{colors.pink.200}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7798,7 +7797,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7816,7 +7815,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7836,7 +7835,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7854,7 +7853,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7872,7 +7871,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7893,7 +7892,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7914,7 +7913,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.4)", filePath: "design-tokens/mode/dark/dimmer-tritanopia.json", isSource: true, original: { @@ -7930,7 +7929,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7949,7 +7948,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -7970,7 +7969,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7989,7 +7988,7 @@ export default { $type: "color", $value: "{colors.blue.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8008,7 +8007,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8030,7 +8029,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8056,7 +8055,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8078,7 +8077,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8098,7 +8097,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8122,7 +8121,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8142,7 +8141,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8165,7 +8164,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8192,7 +8191,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8221,7 +8220,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8248,7 +8247,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8291,7 +8290,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8318,7 +8317,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8345,7 +8344,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8372,7 +8371,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8399,7 +8398,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8426,7 +8425,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8446,7 +8445,7 @@ export default { $type: "color", $value: "{colors.cyan.50}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8464,7 +8463,7 @@ export default { $type: "color", $value: "{colors.cyan.100}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8482,7 +8481,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8500,7 +8499,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8518,7 +8517,7 @@ export default { $type: "color", $value: "{colors.cyan.400}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8536,7 +8535,7 @@ export default { $type: "color", $value: "{colors.cyan.500}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8554,7 +8553,7 @@ export default { $type: "color", $value: "{colors.cyan.600}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8572,7 +8571,7 @@ export default { $type: "color", $value: "{colors.cyan.700}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8590,7 +8589,7 @@ export default { $type: "color", $value: "{colors.cyan.800}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8608,7 +8607,7 @@ export default { $type: "color", $value: "{colors.cyan.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8626,7 +8625,7 @@ export default { $type: "color", $value: "{colors.cyan.950}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8646,7 +8645,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8664,7 +8663,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8682,7 +8681,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8700,7 +8699,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8718,7 +8717,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8736,7 +8735,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8754,7 +8753,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8772,7 +8771,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8790,7 +8789,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8808,7 +8807,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8826,7 +8825,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-dark-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/dark-gitness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-dark-desktop-gitness.ts rename to packages/core-design-system/src/styles-esm/dark-gitness.ts index cf40fef162..4666dc247c 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/dark-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:06:48 GMT + * Generated on Tue, 18 Mar 2025 06:43:56 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/dark/default.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/default.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/default.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/dark/default.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/dark/default.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/dark/default.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/dark/default.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/dark/default.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/dark/default.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.2)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/dark/default.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable green text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-green-300) l c h / 0.2)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/dark/default.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/dark/default.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/dark/default.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/dark/default.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-yellow-300) l c h / 0.2)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/dark/default.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-yellow-500) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/dark/default.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/dark/default.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/dark/default.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-purple-300) l c h / 0.2)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/dark/default.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-purple-500) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/dark/default.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1955,7 +1955,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1979,7 +1979,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2003,7 +2003,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2029,7 +2029,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2053,7 +2053,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2077,7 +2077,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2105,7 +2105,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2129,7 +2129,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2155,7 +2155,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2179,7 +2179,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2206,7 +2206,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable green text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2227,7 +2227,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.1)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/dark/default.json", @@ -2247,7 +2247,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2268,7 +2268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-green-300) l c h / 0.2)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/dark/default.json", @@ -2288,7 +2288,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2310,7 +2310,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/default.json", @@ -2330,7 +2330,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2352,7 +2352,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/default.json", @@ -2372,7 +2372,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2399,7 +2399,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2420,7 +2420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/dark/default.json", @@ -2440,7 +2440,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2461,7 +2461,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/dark/default.json", @@ -2481,7 +2481,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2503,7 +2503,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/default.json", @@ -2523,7 +2523,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2545,7 +2545,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/default.json", @@ -2565,7 +2565,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2592,7 +2592,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2613,7 +2613,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2638,7 +2638,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2664,7 +2664,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2686,7 +2686,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2710,7 +2710,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2732,7 +2732,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2754,7 +2754,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2774,7 +2774,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2794,7 +2794,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/dark/default.json", @@ -2814,7 +2814,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2838,7 +2838,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2858,7 +2858,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2881,7 +2881,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-title", + name: "cn-component-dropdown-item-title", attributes: { category: "component", type: "dropdown", @@ -2904,7 +2904,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-description", + name: "cn-component-dropdown-item-description", attributes: { category: "component", type: "dropdown", @@ -2926,7 +2926,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2949,7 +2949,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/dark/default.json", @@ -2969,7 +2969,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -3005,7 +3005,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3025,7 +3025,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.12)", $description: "Green background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/dark/default.json", @@ -3045,7 +3045,7 @@ export default { $description: "Green background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3065,7 +3065,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/dark/default.json", @@ -3085,7 +3085,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3105,7 +3105,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/dark/default.json", @@ -3125,7 +3125,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3147,7 +3147,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3169,7 +3169,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3189,7 +3189,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.12)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/dark/default.json", @@ -3209,7 +3209,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3229,7 +3229,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/dark/default.json", @@ -3249,7 +3249,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3269,7 +3269,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/dark/default.json", @@ -3289,7 +3289,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3311,7 +3311,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3333,7 +3333,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3355,7 +3355,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3377,7 +3377,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3397,7 +3397,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/dark/default.json", @@ -3417,7 +3417,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3437,7 +3437,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/dark/default.json", isSource: true, @@ -3455,7 +3455,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3477,7 +3477,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3499,7 +3499,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3523,7 +3523,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3545,7 +3545,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3567,7 +3567,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3589,7 +3589,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3611,7 +3611,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3635,7 +3635,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3659,7 +3659,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3681,7 +3681,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3704,7 +3704,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3727,7 +3727,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3748,7 +3748,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3761,7 +3761,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Navigation container border.", filePath: "design-tokens/mode/dark/default.json", isSource: true, @@ -3770,7 +3770,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3790,7 +3790,7 @@ export default { $value: "{background.1}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3815,7 +3815,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3841,7 +3841,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3870,7 +3870,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3895,7 +3895,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3909,7 +3909,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--cn-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/dark/default.json", @@ -3921,7 +3921,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3947,7 +3947,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3973,7 +3973,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -4001,7 +4001,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -4014,7 +4014,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/dark/default.json", @@ -4025,7 +4025,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4051,7 +4051,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4075,7 +4075,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4100,7 +4100,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/dark/default.json", @@ -4120,7 +4120,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4146,7 +4146,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4157,7 +4157,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", filePath: "design-tokens/mode/dark/default.json", @@ -4168,7 +4168,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4179,7 +4179,7 @@ export default { }, separator: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", filePath: "design-tokens/mode/dark/default.json", @@ -4190,7 +4190,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4201,7 +4201,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/default.json", isSource: true, @@ -4210,7 +4210,7 @@ export default { $value: "{state.hover}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4221,7 +4221,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/default.json", isSource: true, @@ -4230,7 +4230,7 @@ export default { $value: "{state.selected}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4254,7 +4254,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4278,7 +4278,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4304,7 +4304,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4328,7 +4328,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4353,7 +4353,7 @@ export default { $value: "{text.1}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4374,7 +4374,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4399,7 +4399,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4420,7 +4420,7 @@ export default { $value: "{border.2}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4443,7 +4443,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4467,7 +4467,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4491,7 +4491,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4515,7 +4515,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4540,7 +4540,7 @@ export default { $value: "{text.1}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4561,7 +4561,7 @@ export default { $value: "{text.3}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4587,7 +4587,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4612,7 +4612,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4635,7 +4635,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4658,7 +4658,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4683,7 +4683,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4706,7 +4706,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4729,7 +4729,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4744,7 +4744,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/dark/default.json", @@ -4755,7 +4755,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4781,7 +4781,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4806,7 +4806,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4829,7 +4829,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4854,7 +4854,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4877,7 +4877,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4902,7 +4902,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4925,7 +4925,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4951,7 +4951,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4973,7 +4973,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -4995,7 +4995,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -5017,7 +5017,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5039,7 +5039,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5061,7 +5061,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5083,7 +5083,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5108,7 +5108,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5131,7 +5131,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5156,7 +5156,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5179,7 +5179,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5206,7 +5206,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5229,7 +5229,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5252,7 +5252,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/dark/default.json", @@ -5272,7 +5272,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5284,7 +5284,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/dark/default.json", @@ -5295,7 +5295,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5320,7 +5320,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5346,7 +5346,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5357,7 +5357,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/dark/default.json", @@ -5368,7 +5368,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5392,7 +5392,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5416,7 +5416,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5440,7 +5440,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5466,7 +5466,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5490,7 +5490,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5514,7 +5514,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5543,7 +5543,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5566,7 +5566,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5589,7 +5589,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5610,7 +5610,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags. ", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5635,7 +5635,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5658,7 +5658,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5681,7 +5681,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5702,7 +5702,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags. ", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5727,7 +5727,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5750,7 +5750,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5773,7 +5773,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5794,7 +5794,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5819,7 +5819,7 @@ export default { $description: "Text color for green tags. Ensures readability while maintaining the green color theme.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5842,7 +5842,7 @@ export default { $description: "Background color for green tags. Creates a distinct surface with green theme styling.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5865,7 +5865,7 @@ export default { $description: "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5886,7 +5886,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5911,7 +5911,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5934,7 +5934,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5957,7 +5957,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5978,7 +5978,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -6003,7 +6003,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6026,7 +6026,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6049,7 +6049,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6070,7 +6070,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6095,7 +6095,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6118,7 +6118,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6141,7 +6141,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6162,7 +6162,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6187,7 +6187,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6210,7 +6210,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6233,7 +6233,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6254,7 +6254,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6279,7 +6279,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6302,7 +6302,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6325,7 +6325,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6346,7 +6346,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6371,7 +6371,7 @@ export default { $description: "Text color for purple tags. Ensures readability while maintaining the purple color theme.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6394,7 +6394,7 @@ export default { $description: "Background color for purple tags. Creates a distinct surface with purple theme styling.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6417,7 +6417,7 @@ export default { $description: "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6438,7 +6438,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6463,7 +6463,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6486,7 +6486,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6509,7 +6509,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6530,7 +6530,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6555,7 +6555,7 @@ export default { $description: "Text color for violet tags. Ensures readability while maintaining the violet color theme.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6578,7 +6578,7 @@ export default { $description: "Background color for violet tags. Creates a distinct surface with violet theme styling.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6601,7 +6601,7 @@ export default { $description: "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6622,7 +6622,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6647,7 +6647,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6670,7 +6670,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6693,7 +6693,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6714,7 +6714,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6739,7 +6739,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6762,7 +6762,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6785,7 +6785,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6806,7 +6806,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6833,7 +6833,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6856,7 +6856,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6879,7 +6879,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6891,7 +6891,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/dark/default.json", @@ -6902,7 +6902,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6927,7 +6927,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6950,7 +6950,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6973,7 +6973,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -6996,7 +6996,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -7022,7 +7022,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7044,7 +7044,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7055,7 +7055,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", filePath: "design-tokens/mode/dark/default.json", @@ -7066,7 +7066,7 @@ export default { $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-border", + name: "cn-component-tooltip-border", attributes: { category: "component", type: "tooltip", @@ -7080,7 +7080,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/dark/default.json", @@ -7108,7 +7108,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7118,8 +7118,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/dark/default.json", @@ -7147,7 +7146,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7158,7 +7157,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/dark/default.json", @@ -7196,7 +7195,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7207,7 +7206,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/dark/default.json", @@ -7245,7 +7244,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7256,7 +7255,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/dark/default.json", @@ -7294,7 +7293,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7305,7 +7304,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/dark/default.json", @@ -7343,7 +7342,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7354,7 +7353,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/dark/default.json", @@ -7382,7 +7381,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7393,7 +7392,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/dark/default.json", @@ -7421,7 +7420,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7442,7 +7441,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/dark/default.json", @@ -7462,7 +7461,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7481,7 +7480,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/dark/default.json", @@ -7501,7 +7500,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7520,7 +7519,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/dark/default.json", @@ -7540,7 +7539,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7559,7 +7558,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/dark/default.json", @@ -7579,7 +7578,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7598,7 +7597,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/dark/default.json", @@ -7618,7 +7617,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7637,7 +7636,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/dark/default.json", @@ -7657,7 +7656,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7676,7 +7675,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/dark/default.json", @@ -7696,7 +7695,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7715,7 +7714,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/dark/default.json", @@ -7735,7 +7734,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7786,7 +7785,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7806,7 +7805,7 @@ export default { $type: "color", $value: "{colors.yellow.100}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7824,7 +7823,7 @@ export default { $type: "color", $value: "{colors.pink.200}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7842,7 +7841,7 @@ export default { $type: "color", $value: "{colors.purple.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7860,7 +7859,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7880,7 +7879,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7898,7 +7897,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7916,7 +7915,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7937,7 +7936,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7958,7 +7957,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.4)", filePath: "design-tokens/mode/dark/default.json", isSource: true, original: { @@ -7974,7 +7973,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7993,7 +7992,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8014,7 +8013,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8033,7 +8032,7 @@ export default { $type: "color", $value: "{colors.blue.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8052,7 +8051,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8074,7 +8073,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8100,7 +8099,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8122,7 +8121,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8142,7 +8141,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8166,7 +8165,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8186,7 +8185,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8209,7 +8208,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8236,7 +8235,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8265,7 +8264,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8292,7 +8291,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8335,7 +8334,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8362,7 +8361,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8389,7 +8388,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8416,7 +8415,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8443,7 +8442,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8470,7 +8469,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8490,7 +8489,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8508,7 +8507,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8526,7 +8525,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8544,7 +8543,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8562,7 +8561,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8580,7 +8579,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8598,7 +8597,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8616,7 +8615,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8634,7 +8633,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8652,7 +8651,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8670,7 +8669,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8690,7 +8689,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8708,7 +8707,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8726,7 +8725,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8744,7 +8743,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8762,7 +8761,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8780,7 +8779,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8798,7 +8797,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8816,7 +8815,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8834,7 +8833,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8852,7 +8851,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8870,7 +8869,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-dark-desktop-harness.ts b/packages/core-design-system/src/styles-esm/dark-harness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-dark-desktop-harness.ts rename to packages/core-design-system/src/styles-esm/dark-harness.ts index 42119cade7..20f75ab6ef 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/dark-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:06:48 GMT + * Generated on Tue, 18 Mar 2025 06:43:55 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/dark/default.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/default.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/default.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/dark/default.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/dark/default.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/dark/default.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/dark/default.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/dark/default.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/dark/default.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.2)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/dark/default.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable green text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-green-300) l c h / 0.2)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/dark/default.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/dark/default.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/dark/default.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/dark/default.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-yellow-300) l c h / 0.2)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/dark/default.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-yellow-500) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/dark/default.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/dark/default.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/dark/default.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-purple-300) l c h / 0.2)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/dark/default.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-purple-500) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/dark/default.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1955,7 +1955,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1979,7 +1979,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2003,7 +2003,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2029,7 +2029,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2053,7 +2053,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2077,7 +2077,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2105,7 +2105,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2129,7 +2129,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2155,7 +2155,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2179,7 +2179,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2206,7 +2206,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable green text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2227,7 +2227,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.1)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/dark/default.json", @@ -2247,7 +2247,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2268,7 +2268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-green-300) l c h / 0.2)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/dark/default.json", @@ -2288,7 +2288,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2310,7 +2310,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/default.json", @@ -2330,7 +2330,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2352,7 +2352,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/default.json", @@ -2372,7 +2372,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2399,7 +2399,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2420,7 +2420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/dark/default.json", @@ -2440,7 +2440,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2461,7 +2461,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/dark/default.json", @@ -2481,7 +2481,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2503,7 +2503,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/default.json", @@ -2523,7 +2523,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2545,7 +2545,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/default.json", @@ -2565,7 +2565,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2592,7 +2592,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2613,7 +2613,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2638,7 +2638,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2664,7 +2664,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2686,7 +2686,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2710,7 +2710,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2732,7 +2732,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2754,7 +2754,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2774,7 +2774,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2794,7 +2794,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/dark/default.json", @@ -2814,7 +2814,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2838,7 +2838,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2858,7 +2858,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2881,7 +2881,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-title", + name: "cn-component-dropdown-item-title", attributes: { category: "component", type: "dropdown", @@ -2904,7 +2904,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-description", + name: "cn-component-dropdown-item-description", attributes: { category: "component", type: "dropdown", @@ -2926,7 +2926,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2949,7 +2949,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/dark/default.json", @@ -2969,7 +2969,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -3005,7 +3005,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3025,7 +3025,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.12)", $description: "Green background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/dark/default.json", @@ -3045,7 +3045,7 @@ export default { $description: "Green background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3065,7 +3065,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/dark/default.json", @@ -3085,7 +3085,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3105,7 +3105,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/dark/default.json", @@ -3125,7 +3125,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3147,7 +3147,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3169,7 +3169,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3189,7 +3189,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.12)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/dark/default.json", @@ -3209,7 +3209,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3229,7 +3229,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/dark/default.json", @@ -3249,7 +3249,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3269,7 +3269,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/dark/default.json", @@ -3289,7 +3289,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3311,7 +3311,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3333,7 +3333,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3355,7 +3355,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3377,7 +3377,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3397,7 +3397,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/dark/default.json", @@ -3417,7 +3417,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3437,7 +3437,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/dark/default.json", isSource: true, @@ -3455,7 +3455,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3477,7 +3477,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3499,7 +3499,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3523,7 +3523,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3545,7 +3545,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3567,7 +3567,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3589,7 +3589,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3611,7 +3611,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3635,7 +3635,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3659,7 +3659,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3681,7 +3681,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3704,7 +3704,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3727,7 +3727,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3748,7 +3748,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3761,7 +3761,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Navigation container border.", filePath: "design-tokens/mode/dark/default.json", isSource: true, @@ -3770,7 +3770,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3790,7 +3790,7 @@ export default { $value: "{background.1}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3815,7 +3815,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3841,7 +3841,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3870,7 +3870,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3895,7 +3895,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3909,7 +3909,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--cn-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/dark/default.json", @@ -3921,7 +3921,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3947,7 +3947,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3973,7 +3973,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -4001,7 +4001,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -4014,7 +4014,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/dark/default.json", @@ -4025,7 +4025,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4051,7 +4051,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4075,7 +4075,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4100,7 +4100,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/dark/default.json", @@ -4120,7 +4120,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4146,7 +4146,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4157,7 +4157,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", filePath: "design-tokens/mode/dark/default.json", @@ -4168,7 +4168,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4179,7 +4179,7 @@ export default { }, separator: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", filePath: "design-tokens/mode/dark/default.json", @@ -4190,7 +4190,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4201,7 +4201,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/default.json", isSource: true, @@ -4210,7 +4210,7 @@ export default { $value: "{state.hover}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4221,7 +4221,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/default.json", isSource: true, @@ -4230,7 +4230,7 @@ export default { $value: "{state.selected}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4254,7 +4254,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4278,7 +4278,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4304,7 +4304,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4328,7 +4328,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4353,7 +4353,7 @@ export default { $value: "{text.1}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4374,7 +4374,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4399,7 +4399,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4420,7 +4420,7 @@ export default { $value: "{border.2}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4443,7 +4443,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4467,7 +4467,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4491,7 +4491,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4515,7 +4515,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4540,7 +4540,7 @@ export default { $value: "{text.1}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4561,7 +4561,7 @@ export default { $value: "{text.3}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4587,7 +4587,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4612,7 +4612,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4635,7 +4635,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4658,7 +4658,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4683,7 +4683,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4706,7 +4706,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4729,7 +4729,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4744,7 +4744,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/dark/default.json", @@ -4755,7 +4755,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4781,7 +4781,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4806,7 +4806,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4829,7 +4829,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4854,7 +4854,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4877,7 +4877,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4902,7 +4902,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4925,7 +4925,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4951,7 +4951,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4973,7 +4973,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -4995,7 +4995,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -5017,7 +5017,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5039,7 +5039,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5061,7 +5061,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5083,7 +5083,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5108,7 +5108,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5131,7 +5131,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5156,7 +5156,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5179,7 +5179,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5206,7 +5206,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5229,7 +5229,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5252,7 +5252,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/dark/default.json", @@ -5272,7 +5272,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5284,7 +5284,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/dark/default.json", @@ -5295,7 +5295,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5320,7 +5320,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5346,7 +5346,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5357,7 +5357,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/dark/default.json", @@ -5368,7 +5368,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5392,7 +5392,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5416,7 +5416,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5440,7 +5440,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5466,7 +5466,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5490,7 +5490,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5514,7 +5514,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5543,7 +5543,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5566,7 +5566,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5589,7 +5589,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5610,7 +5610,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags. ", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5635,7 +5635,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5658,7 +5658,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5681,7 +5681,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5702,7 +5702,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags. ", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5727,7 +5727,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5750,7 +5750,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5773,7 +5773,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5794,7 +5794,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5819,7 +5819,7 @@ export default { $description: "Text color for green tags. Ensures readability while maintaining the green color theme.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5842,7 +5842,7 @@ export default { $description: "Background color for green tags. Creates a distinct surface with green theme styling.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5865,7 +5865,7 @@ export default { $description: "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5886,7 +5886,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5911,7 +5911,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5934,7 +5934,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5957,7 +5957,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5978,7 +5978,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -6003,7 +6003,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6026,7 +6026,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6049,7 +6049,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6070,7 +6070,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6095,7 +6095,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6118,7 +6118,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6141,7 +6141,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6162,7 +6162,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6187,7 +6187,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6210,7 +6210,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6233,7 +6233,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6254,7 +6254,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6279,7 +6279,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6302,7 +6302,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6325,7 +6325,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6346,7 +6346,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6371,7 +6371,7 @@ export default { $description: "Text color for purple tags. Ensures readability while maintaining the purple color theme.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6394,7 +6394,7 @@ export default { $description: "Background color for purple tags. Creates a distinct surface with purple theme styling.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6417,7 +6417,7 @@ export default { $description: "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6438,7 +6438,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6463,7 +6463,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6486,7 +6486,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6509,7 +6509,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6530,7 +6530,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6555,7 +6555,7 @@ export default { $description: "Text color for violet tags. Ensures readability while maintaining the violet color theme.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6578,7 +6578,7 @@ export default { $description: "Background color for violet tags. Creates a distinct surface with violet theme styling.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6601,7 +6601,7 @@ export default { $description: "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6622,7 +6622,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6647,7 +6647,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6670,7 +6670,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6693,7 +6693,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6714,7 +6714,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6739,7 +6739,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6762,7 +6762,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6785,7 +6785,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6806,7 +6806,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6833,7 +6833,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6856,7 +6856,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6879,7 +6879,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6891,7 +6891,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/dark/default.json", @@ -6902,7 +6902,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6927,7 +6927,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6950,7 +6950,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6973,7 +6973,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -6996,7 +6996,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -7022,7 +7022,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7044,7 +7044,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7055,7 +7055,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", filePath: "design-tokens/mode/dark/default.json", @@ -7066,7 +7066,7 @@ export default { $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-border", + name: "cn-component-tooltip-border", attributes: { category: "component", type: "tooltip", @@ -7080,7 +7080,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/dark/default.json", @@ -7108,7 +7108,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7118,8 +7118,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/dark/default.json", @@ -7147,7 +7146,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7158,7 +7157,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/dark/default.json", @@ -7196,7 +7195,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7207,7 +7206,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/dark/default.json", @@ -7245,7 +7244,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7256,7 +7255,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/dark/default.json", @@ -7294,7 +7293,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7305,7 +7304,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/dark/default.json", @@ -7343,7 +7342,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7354,7 +7353,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/dark/default.json", @@ -7382,7 +7381,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7393,7 +7392,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/dark/default.json", @@ -7421,7 +7420,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7442,7 +7441,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/dark/default.json", @@ -7462,7 +7461,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7481,7 +7480,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/dark/default.json", @@ -7501,7 +7500,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7520,7 +7519,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/dark/default.json", @@ -7540,7 +7539,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7559,7 +7558,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/dark/default.json", @@ -7579,7 +7578,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7598,7 +7597,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/dark/default.json", @@ -7618,7 +7617,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7637,7 +7636,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/dark/default.json", @@ -7657,7 +7656,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7676,7 +7675,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/dark/default.json", @@ -7696,7 +7695,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7715,7 +7714,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/dark/default.json", @@ -7735,7 +7734,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7786,7 +7785,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7806,7 +7805,7 @@ export default { $type: "color", $value: "{colors.yellow.100}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7824,7 +7823,7 @@ export default { $type: "color", $value: "{colors.pink.200}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7842,7 +7841,7 @@ export default { $type: "color", $value: "{colors.purple.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7860,7 +7859,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7880,7 +7879,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7898,7 +7897,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7916,7 +7915,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7937,7 +7936,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7958,7 +7957,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.4)", filePath: "design-tokens/mode/dark/default.json", isSource: true, original: { @@ -7974,7 +7973,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7993,7 +7992,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8014,7 +8013,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8033,7 +8032,7 @@ export default { $type: "color", $value: "{colors.blue.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8052,7 +8051,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8074,7 +8073,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8100,7 +8099,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8122,7 +8121,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8142,7 +8141,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8166,7 +8165,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8186,7 +8185,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8209,7 +8208,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8236,7 +8235,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8265,7 +8264,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8292,7 +8291,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8335,7 +8334,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8362,7 +8361,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8389,7 +8388,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8416,7 +8415,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8443,7 +8442,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8470,7 +8469,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8490,7 +8489,7 @@ export default { $type: "color", $value: "{colors.cyan.50}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8508,7 +8507,7 @@ export default { $type: "color", $value: "{colors.cyan.100}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8526,7 +8525,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8544,7 +8543,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8562,7 +8561,7 @@ export default { $type: "color", $value: "{colors.cyan.400}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8580,7 +8579,7 @@ export default { $type: "color", $value: "{colors.cyan.500}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8598,7 +8597,7 @@ export default { $type: "color", $value: "{colors.cyan.600}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8616,7 +8615,7 @@ export default { $type: "color", $value: "{colors.cyan.700}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8634,7 +8633,7 @@ export default { $type: "color", $value: "{colors.cyan.800}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8652,7 +8651,7 @@ export default { $type: "color", $value: "{colors.cyan.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8670,7 +8669,7 @@ export default { $type: "color", $value: "{colors.cyan.950}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8690,7 +8689,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8708,7 +8707,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8726,7 +8725,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8744,7 +8743,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8762,7 +8761,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8780,7 +8779,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8798,7 +8797,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8816,7 +8815,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8834,7 +8833,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8852,7 +8851,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8870,7 +8869,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-deuteranopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/dark-high-contrast-deuteranopia-gitness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-dark-high-contrast-deuteranopia-desktop-gitness.ts rename to packages/core-design-system/src/styles-esm/dark-high-contrast-deuteranopia-gitness.ts index f2e2ccd9d4..3a4839873a 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-deuteranopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/dark-high-contrast-deuteranopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:06 GMT + * Generated on Tue, 18 Mar 2025 06:44:08 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast orange text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable cyan text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.6)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.6)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-yellow-300) l c h / 0.6)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-yellow-500) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.6)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.6)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1955,7 +1955,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1979,7 +1979,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2003,7 +2003,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2029,7 +2029,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2053,7 +2053,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2077,7 +2077,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2105,7 +2105,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2129,7 +2129,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2155,7 +2155,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2179,7 +2179,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2206,7 +2206,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable cyan text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2227,7 +2227,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -2247,7 +2247,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2268,7 +2268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.6)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -2288,7 +2288,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2310,7 +2310,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -2330,7 +2330,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2352,7 +2352,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -2372,7 +2372,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2399,7 +2399,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2420,7 +2420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -2440,7 +2440,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2461,7 +2461,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.6)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -2481,7 +2481,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2503,7 +2503,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -2523,7 +2523,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2545,7 +2545,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -2565,7 +2565,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2592,7 +2592,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2613,7 +2613,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2638,7 +2638,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2664,7 +2664,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2686,7 +2686,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2710,7 +2710,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2732,7 +2732,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2754,7 +2754,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2774,7 +2774,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2794,7 +2794,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -2814,7 +2814,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2838,7 +2838,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2858,7 +2858,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2881,7 +2881,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2903,7 +2903,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2926,7 +2926,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: @@ -2947,7 +2947,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2983,7 +2983,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3003,7 +3003,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.12)", $description: "Cyan background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -3023,7 +3023,7 @@ export default { $description: "Cyan background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3043,7 +3043,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -3063,7 +3063,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3083,7 +3083,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -3103,7 +3103,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3125,7 +3125,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3147,7 +3147,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3167,7 +3167,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.12)", $description: "Orange background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -3187,7 +3187,7 @@ export default { $description: "Orange background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3207,7 +3207,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -3227,7 +3227,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3247,7 +3247,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -3267,7 +3267,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3289,7 +3289,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3311,7 +3311,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3333,7 +3333,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3355,7 +3355,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3375,7 +3375,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -3395,7 +3395,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3415,7 +3415,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", isSource: true, @@ -3433,7 +3433,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3455,7 +3455,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3477,7 +3477,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3501,7 +3501,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3523,7 +3523,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3545,7 +3545,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3567,7 +3567,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3589,7 +3589,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3613,7 +3613,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3637,7 +3637,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3659,7 +3659,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3682,7 +3682,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3705,7 +3705,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3726,7 +3726,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3739,7 +3739,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Navigation container border.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", isSource: true, @@ -3748,7 +3748,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3768,7 +3768,7 @@ export default { $value: "{background.1}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3793,7 +3793,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3819,7 +3819,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3848,7 +3848,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3873,7 +3873,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3887,7 +3887,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--cn-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -3899,7 +3899,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3925,7 +3925,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3951,7 +3951,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3979,7 +3979,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3992,7 +3992,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -4003,7 +4003,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4029,7 +4029,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4053,7 +4053,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4078,7 +4078,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -4098,7 +4098,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4124,7 +4124,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4135,7 +4135,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -4146,7 +4146,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4157,7 +4157,7 @@ export default { }, separator: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -4168,7 +4168,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4179,7 +4179,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", isSource: true, @@ -4188,7 +4188,7 @@ export default { $value: "{state.hover}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4199,7 +4199,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", isSource: true, @@ -4208,7 +4208,7 @@ export default { $value: "{state.selected}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4232,7 +4232,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4256,7 +4256,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4282,7 +4282,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4306,7 +4306,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4331,7 +4331,7 @@ export default { $value: "{text.1}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4352,7 +4352,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4377,7 +4377,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4398,7 +4398,7 @@ export default { $value: "{border.2}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4421,7 +4421,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4445,7 +4445,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4469,7 +4469,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4493,7 +4493,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4518,7 +4518,7 @@ export default { $value: "{text.1}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4539,7 +4539,7 @@ export default { $value: "{text.3}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4565,7 +4565,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4590,7 +4590,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4613,7 +4613,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4636,7 +4636,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4661,7 +4661,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4684,7 +4684,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4707,7 +4707,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4722,7 +4722,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -4733,7 +4733,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4759,7 +4759,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4784,7 +4784,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4807,7 +4807,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4832,7 +4832,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4855,7 +4855,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4880,7 +4880,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4903,7 +4903,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4929,7 +4929,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4951,7 +4951,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -4973,7 +4973,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -4995,7 +4995,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5017,7 +5017,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5039,7 +5039,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5061,7 +5061,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5086,7 +5086,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5109,7 +5109,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5134,7 +5134,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5157,7 +5157,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5184,7 +5184,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5207,7 +5207,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5230,7 +5230,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -5250,7 +5250,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5262,7 +5262,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -5273,7 +5273,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5298,7 +5298,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5324,7 +5324,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5335,7 +5335,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -5346,7 +5346,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5370,7 +5370,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5394,7 +5394,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5418,7 +5418,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5444,7 +5444,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5468,7 +5468,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5492,7 +5492,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5521,7 +5521,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5544,7 +5544,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5567,7 +5567,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5588,7 +5588,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5613,7 +5613,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5636,7 +5636,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5659,7 +5659,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5680,7 +5680,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5705,7 +5705,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5728,7 +5728,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5751,7 +5751,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5772,7 +5772,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5797,7 +5797,7 @@ export default { $description: "Text color for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5820,7 +5820,7 @@ export default { $description: "Background color for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5843,7 +5843,7 @@ export default { $description: "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5864,7 +5864,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags, replaced with cyan.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5889,7 +5889,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5912,7 +5912,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5935,7 +5935,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5956,7 +5956,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -5981,7 +5981,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6004,7 +6004,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6027,7 +6027,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6048,7 +6048,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6073,7 +6073,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6096,7 +6096,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6119,7 +6119,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6140,7 +6140,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6165,7 +6165,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6188,7 +6188,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6211,7 +6211,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6232,7 +6232,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6257,7 +6257,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6280,7 +6280,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6303,7 +6303,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6324,7 +6324,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6349,7 +6349,7 @@ export default { $description: "Text color for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6372,7 +6372,7 @@ export default { $description: "Background color for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6395,7 +6395,7 @@ export default { $description: "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6416,7 +6416,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags, replaced with cyan.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6441,7 +6441,7 @@ export default { $description: "Text color for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6464,7 +6464,7 @@ export default { $description: "Background color for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6487,7 +6487,7 @@ export default { $description: "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6508,7 +6508,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags, replaced with orange.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6533,7 +6533,7 @@ export default { $description: "Text color for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6556,7 +6556,7 @@ export default { $description: "Background color for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6579,7 +6579,7 @@ export default { $description: "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6600,7 +6600,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags, replaced with blue.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6625,7 +6625,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6648,7 +6648,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6671,7 +6671,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6692,7 +6692,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6717,7 +6717,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6740,7 +6740,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6763,7 +6763,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6784,7 +6784,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6811,7 +6811,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6834,7 +6834,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6857,7 +6857,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6869,7 +6869,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -6880,7 +6880,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6905,7 +6905,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6928,7 +6928,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6951,7 +6951,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -6974,7 +6974,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -7000,7 +7000,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7022,7 +7022,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7033,7 +7033,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7044,7 +7044,7 @@ export default { $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-border", + name: "cn-component-tooltip-border", attributes: { category: "component", type: "tooltip", @@ -7058,7 +7058,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7086,7 +7086,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7096,8 +7096,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7125,7 +7124,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7136,7 +7135,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7174,7 +7173,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7185,7 +7184,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7223,7 +7222,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7234,7 +7233,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7272,7 +7271,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7283,7 +7282,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7321,7 +7320,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7332,7 +7331,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7360,7 +7359,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7371,7 +7370,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7399,7 +7398,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7420,7 +7419,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7440,7 +7439,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7459,7 +7458,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7479,7 +7478,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7498,7 +7497,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7518,7 +7517,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7537,7 +7536,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7557,7 +7556,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7576,7 +7575,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7596,7 +7595,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7615,7 +7614,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7635,7 +7634,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7654,7 +7653,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7674,7 +7673,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7693,7 +7692,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7713,7 +7712,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7764,7 +7763,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7784,7 +7783,7 @@ export default { $type: "color", $value: "{colors.yellow.100}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7802,7 +7801,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7820,7 +7819,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7838,7 +7837,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7858,7 +7857,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7876,7 +7875,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7894,7 +7893,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7915,7 +7914,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7936,7 +7935,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.4)", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", isSource: true, original: { @@ -7952,7 +7951,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7971,7 +7970,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -7992,7 +7991,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8011,7 +8010,7 @@ export default { $type: "color", $value: "{colors.blue.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8030,7 +8029,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8052,7 +8051,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8078,7 +8077,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8100,7 +8099,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8120,7 +8119,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8144,7 +8143,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8164,7 +8163,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8188,7 +8187,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8216,7 +8215,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8246,7 +8245,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8274,7 +8273,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8317,7 +8316,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8344,7 +8343,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8371,7 +8370,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8398,7 +8397,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8425,7 +8424,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8452,7 +8451,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8472,7 +8471,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8490,7 +8489,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8508,7 +8507,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8526,7 +8525,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8544,7 +8543,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8562,7 +8561,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8580,7 +8579,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8598,7 +8597,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8616,7 +8615,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8634,7 +8633,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8652,7 +8651,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8672,7 +8671,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8690,7 +8689,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8708,7 +8707,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8726,7 +8725,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8744,7 +8743,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8762,7 +8761,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8780,7 +8779,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8798,7 +8797,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8816,7 +8815,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8834,7 +8833,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8852,7 +8851,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-deuteranopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/dark-high-contrast-deuteranopia-harness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-dark-high-contrast-deuteranopia-desktop-harness.ts rename to packages/core-design-system/src/styles-esm/dark-high-contrast-deuteranopia-harness.ts index 3a399a68f5..df053a1c8f 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-deuteranopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/dark-high-contrast-deuteranopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:05 GMT + * Generated on Tue, 18 Mar 2025 06:44:08 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast orange text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable cyan text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.6)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.6)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-yellow-300) l c h / 0.6)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-yellow-500) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.6)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.6)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1955,7 +1955,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1979,7 +1979,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2003,7 +2003,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2029,7 +2029,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2053,7 +2053,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2077,7 +2077,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2105,7 +2105,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2129,7 +2129,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2155,7 +2155,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2179,7 +2179,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2206,7 +2206,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable cyan text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2227,7 +2227,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -2247,7 +2247,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2268,7 +2268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.6)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -2288,7 +2288,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2310,7 +2310,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -2330,7 +2330,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2352,7 +2352,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -2372,7 +2372,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2399,7 +2399,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2420,7 +2420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -2440,7 +2440,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2461,7 +2461,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.6)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -2481,7 +2481,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2503,7 +2503,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -2523,7 +2523,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2545,7 +2545,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -2565,7 +2565,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2592,7 +2592,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2613,7 +2613,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2638,7 +2638,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2664,7 +2664,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2686,7 +2686,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2710,7 +2710,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2732,7 +2732,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2754,7 +2754,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2774,7 +2774,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2794,7 +2794,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -2814,7 +2814,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2838,7 +2838,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2858,7 +2858,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2881,7 +2881,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2903,7 +2903,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2926,7 +2926,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: @@ -2947,7 +2947,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2983,7 +2983,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3003,7 +3003,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.12)", $description: "Cyan background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -3023,7 +3023,7 @@ export default { $description: "Cyan background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3043,7 +3043,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -3063,7 +3063,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3083,7 +3083,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -3103,7 +3103,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3125,7 +3125,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3147,7 +3147,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3167,7 +3167,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.12)", $description: "Orange background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -3187,7 +3187,7 @@ export default { $description: "Orange background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3207,7 +3207,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -3227,7 +3227,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3247,7 +3247,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -3267,7 +3267,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3289,7 +3289,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3311,7 +3311,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3333,7 +3333,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3355,7 +3355,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3375,7 +3375,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -3395,7 +3395,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3415,7 +3415,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", isSource: true, @@ -3433,7 +3433,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3455,7 +3455,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3477,7 +3477,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3501,7 +3501,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3523,7 +3523,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3545,7 +3545,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3567,7 +3567,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3589,7 +3589,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3613,7 +3613,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3637,7 +3637,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3659,7 +3659,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3682,7 +3682,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3705,7 +3705,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3726,7 +3726,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3739,7 +3739,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Navigation container border.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", isSource: true, @@ -3748,7 +3748,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3768,7 +3768,7 @@ export default { $value: "{background.1}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3793,7 +3793,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3819,7 +3819,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3848,7 +3848,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3873,7 +3873,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3887,7 +3887,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--cn-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -3899,7 +3899,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3925,7 +3925,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3951,7 +3951,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3979,7 +3979,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3992,7 +3992,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -4003,7 +4003,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4029,7 +4029,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4053,7 +4053,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4078,7 +4078,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -4098,7 +4098,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4124,7 +4124,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4135,7 +4135,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -4146,7 +4146,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4157,7 +4157,7 @@ export default { }, separator: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -4168,7 +4168,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4179,7 +4179,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", isSource: true, @@ -4188,7 +4188,7 @@ export default { $value: "{state.hover}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4199,7 +4199,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", isSource: true, @@ -4208,7 +4208,7 @@ export default { $value: "{state.selected}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4232,7 +4232,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4256,7 +4256,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4282,7 +4282,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4306,7 +4306,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4331,7 +4331,7 @@ export default { $value: "{text.1}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4352,7 +4352,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4377,7 +4377,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4398,7 +4398,7 @@ export default { $value: "{border.2}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4421,7 +4421,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4445,7 +4445,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4469,7 +4469,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4493,7 +4493,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4518,7 +4518,7 @@ export default { $value: "{text.1}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4539,7 +4539,7 @@ export default { $value: "{text.3}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4565,7 +4565,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4590,7 +4590,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4613,7 +4613,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4636,7 +4636,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4661,7 +4661,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4684,7 +4684,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4707,7 +4707,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4722,7 +4722,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -4733,7 +4733,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4759,7 +4759,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4784,7 +4784,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4807,7 +4807,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4832,7 +4832,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4855,7 +4855,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4880,7 +4880,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4903,7 +4903,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4929,7 +4929,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4951,7 +4951,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -4973,7 +4973,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -4995,7 +4995,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5017,7 +5017,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5039,7 +5039,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5061,7 +5061,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5086,7 +5086,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5109,7 +5109,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5134,7 +5134,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5157,7 +5157,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5184,7 +5184,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5207,7 +5207,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5230,7 +5230,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -5250,7 +5250,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5262,7 +5262,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -5273,7 +5273,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5298,7 +5298,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5324,7 +5324,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5335,7 +5335,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -5346,7 +5346,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5370,7 +5370,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5394,7 +5394,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5418,7 +5418,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5444,7 +5444,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5468,7 +5468,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5492,7 +5492,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5521,7 +5521,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5544,7 +5544,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5567,7 +5567,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5588,7 +5588,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5613,7 +5613,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5636,7 +5636,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5659,7 +5659,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5680,7 +5680,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5705,7 +5705,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5728,7 +5728,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5751,7 +5751,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5772,7 +5772,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5797,7 +5797,7 @@ export default { $description: "Text color for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5820,7 +5820,7 @@ export default { $description: "Background color for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5843,7 +5843,7 @@ export default { $description: "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5864,7 +5864,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags, replaced with cyan.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5889,7 +5889,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5912,7 +5912,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5935,7 +5935,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5956,7 +5956,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -5981,7 +5981,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6004,7 +6004,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6027,7 +6027,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6048,7 +6048,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6073,7 +6073,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6096,7 +6096,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6119,7 +6119,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6140,7 +6140,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6165,7 +6165,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6188,7 +6188,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6211,7 +6211,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6232,7 +6232,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6257,7 +6257,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6280,7 +6280,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6303,7 +6303,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6324,7 +6324,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6349,7 +6349,7 @@ export default { $description: "Text color for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6372,7 +6372,7 @@ export default { $description: "Background color for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6395,7 +6395,7 @@ export default { $description: "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6416,7 +6416,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags, replaced with cyan.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6441,7 +6441,7 @@ export default { $description: "Text color for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6464,7 +6464,7 @@ export default { $description: "Background color for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6487,7 +6487,7 @@ export default { $description: "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6508,7 +6508,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags, replaced with orange.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6533,7 +6533,7 @@ export default { $description: "Text color for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6556,7 +6556,7 @@ export default { $description: "Background color for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6579,7 +6579,7 @@ export default { $description: "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6600,7 +6600,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags, replaced with blue.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6625,7 +6625,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6648,7 +6648,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6671,7 +6671,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6692,7 +6692,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6717,7 +6717,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6740,7 +6740,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6763,7 +6763,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6784,7 +6784,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6811,7 +6811,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6834,7 +6834,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6857,7 +6857,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6869,7 +6869,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -6880,7 +6880,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6905,7 +6905,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6928,7 +6928,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6951,7 +6951,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -6974,7 +6974,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -7000,7 +7000,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7022,7 +7022,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7033,7 +7033,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7044,7 +7044,7 @@ export default { $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-border", + name: "cn-component-tooltip-border", attributes: { category: "component", type: "tooltip", @@ -7058,7 +7058,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7086,7 +7086,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7096,8 +7096,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7125,7 +7124,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7136,7 +7135,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7174,7 +7173,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7185,7 +7184,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7223,7 +7222,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7234,7 +7233,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7272,7 +7271,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7283,7 +7282,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7321,7 +7320,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7332,7 +7331,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7360,7 +7359,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7371,7 +7370,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7399,7 +7398,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7420,7 +7419,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7440,7 +7439,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7459,7 +7458,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7479,7 +7478,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7498,7 +7497,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7518,7 +7517,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7537,7 +7536,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7557,7 +7556,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7576,7 +7575,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7596,7 +7595,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7615,7 +7614,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7635,7 +7634,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7654,7 +7653,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7674,7 +7673,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7693,7 +7692,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", @@ -7713,7 +7712,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7764,7 +7763,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7784,7 +7783,7 @@ export default { $type: "color", $value: "{colors.yellow.100}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7802,7 +7801,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7820,7 +7819,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7838,7 +7837,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7858,7 +7857,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7876,7 +7875,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7894,7 +7893,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7915,7 +7914,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7936,7 +7935,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.4)", filePath: "design-tokens/mode/dark/high-contrast-deuteranopia.json", isSource: true, original: { @@ -7952,7 +7951,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7971,7 +7970,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -7992,7 +7991,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8011,7 +8010,7 @@ export default { $type: "color", $value: "{colors.blue.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8030,7 +8029,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8052,7 +8051,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8078,7 +8077,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8100,7 +8099,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8120,7 +8119,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8144,7 +8143,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8164,7 +8163,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8188,7 +8187,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8216,7 +8215,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8246,7 +8245,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8274,7 +8273,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8317,7 +8316,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8344,7 +8343,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8371,7 +8370,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8398,7 +8397,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8425,7 +8424,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8452,7 +8451,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8472,7 +8471,7 @@ export default { $type: "color", $value: "{colors.cyan.50}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8490,7 +8489,7 @@ export default { $type: "color", $value: "{colors.cyan.100}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8508,7 +8507,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8526,7 +8525,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8544,7 +8543,7 @@ export default { $type: "color", $value: "{colors.cyan.400}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8562,7 +8561,7 @@ export default { $type: "color", $value: "{colors.cyan.500}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8580,7 +8579,7 @@ export default { $type: "color", $value: "{colors.cyan.600}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8598,7 +8597,7 @@ export default { $type: "color", $value: "{colors.cyan.700}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8616,7 +8615,7 @@ export default { $type: "color", $value: "{colors.cyan.800}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8634,7 +8633,7 @@ export default { $type: "color", $value: "{colors.cyan.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8652,7 +8651,7 @@ export default { $type: "color", $value: "{colors.cyan.950}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8672,7 +8671,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8690,7 +8689,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8708,7 +8707,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8726,7 +8725,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8744,7 +8743,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8762,7 +8761,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8780,7 +8779,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8798,7 +8797,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8816,7 +8815,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8834,7 +8833,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8852,7 +8851,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/dark-high-contrast-gitness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-dark-high-contrast-desktop-gitness.ts rename to packages/core-design-system/src/styles-esm/dark-high-contrast-gitness.ts index 963e04c5ff..e0073bfcbe 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/dark-high-contrast-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:06:54 GMT + * Generated on Tue, 18 Mar 2025 06:44:00 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable green text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-green-300) l c h / 0.6)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.6)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-yellow-300) l c h / 0.6)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-yellow-500) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.6)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-purple-300) l c h / 0.6)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-purple-500) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1955,7 +1955,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1979,7 +1979,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2003,7 +2003,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2029,7 +2029,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2053,7 +2053,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2077,7 +2077,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2105,7 +2105,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2129,7 +2129,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2155,7 +2155,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2179,7 +2179,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2206,7 +2206,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable green text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2227,7 +2227,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.1)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -2247,7 +2247,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2268,7 +2268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-green-300) l c h / 0.6)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -2288,7 +2288,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2310,7 +2310,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -2330,7 +2330,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2352,7 +2352,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -2372,7 +2372,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2399,7 +2399,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2420,7 +2420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -2440,7 +2440,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2461,7 +2461,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.6)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -2481,7 +2481,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2503,7 +2503,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -2523,7 +2523,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2545,7 +2545,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -2565,7 +2565,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2592,7 +2592,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2613,7 +2613,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2638,7 +2638,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2664,7 +2664,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2686,7 +2686,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2710,7 +2710,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2732,7 +2732,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2754,7 +2754,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2774,7 +2774,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2794,7 +2794,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -2814,7 +2814,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2838,7 +2838,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2858,7 +2858,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2881,7 +2881,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2903,7 +2903,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2926,7 +2926,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -2946,7 +2946,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2982,7 +2982,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3002,7 +3002,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.12)", $description: "Green background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -3022,7 +3022,7 @@ export default { $description: "Green background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3042,7 +3042,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -3062,7 +3062,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3082,7 +3082,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -3102,7 +3102,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3124,7 +3124,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3146,7 +3146,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3166,7 +3166,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.12)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -3186,7 +3186,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3206,7 +3206,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -3226,7 +3226,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3246,7 +3246,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -3266,7 +3266,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3288,7 +3288,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3310,7 +3310,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3332,7 +3332,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3354,7 +3354,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3374,7 +3374,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -3394,7 +3394,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3414,7 +3414,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/dark/high-contrast.json", isSource: true, @@ -3432,7 +3432,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3454,7 +3454,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3476,7 +3476,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3500,7 +3500,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3522,7 +3522,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3544,7 +3544,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3566,7 +3566,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3588,7 +3588,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3612,7 +3612,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3636,7 +3636,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3658,7 +3658,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3681,7 +3681,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3704,7 +3704,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3725,7 +3725,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3738,7 +3738,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Navigation container border.", filePath: "design-tokens/mode/dark/high-contrast.json", isSource: true, @@ -3747,7 +3747,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3767,7 +3767,7 @@ export default { $value: "{background.1}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3792,7 +3792,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3818,7 +3818,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3847,7 +3847,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3872,7 +3872,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3886,7 +3886,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--cn-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -3898,7 +3898,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3924,7 +3924,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3950,7 +3950,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3978,7 +3978,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3991,7 +3991,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -4002,7 +4002,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4028,7 +4028,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4052,7 +4052,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4077,7 +4077,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -4097,7 +4097,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4123,7 +4123,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4134,7 +4134,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -4145,7 +4145,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4156,7 +4156,7 @@ export default { }, separator: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -4167,7 +4167,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4178,7 +4178,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast.json", isSource: true, @@ -4187,7 +4187,7 @@ export default { $value: "{state.hover}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4198,7 +4198,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast.json", isSource: true, @@ -4207,7 +4207,7 @@ export default { $value: "{state.selected}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4231,7 +4231,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4255,7 +4255,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4281,7 +4281,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4305,7 +4305,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4330,7 +4330,7 @@ export default { $value: "{text.1}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4351,7 +4351,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4376,7 +4376,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4397,7 +4397,7 @@ export default { $value: "{border.2}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4420,7 +4420,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4444,7 +4444,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4468,7 +4468,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4492,7 +4492,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4517,7 +4517,7 @@ export default { $value: "{text.1}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4538,7 +4538,7 @@ export default { $value: "{text.3}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4564,7 +4564,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4589,7 +4589,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4612,7 +4612,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4635,7 +4635,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4660,7 +4660,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4683,7 +4683,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4706,7 +4706,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4721,7 +4721,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -4732,7 +4732,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4758,7 +4758,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4783,7 +4783,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4806,7 +4806,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4831,7 +4831,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4854,7 +4854,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4879,7 +4879,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4902,7 +4902,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4928,7 +4928,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4950,7 +4950,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -4972,7 +4972,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -4994,7 +4994,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5016,7 +5016,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5038,7 +5038,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5060,7 +5060,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5085,7 +5085,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5108,7 +5108,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5133,7 +5133,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5156,7 +5156,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5183,7 +5183,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5206,7 +5206,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5229,7 +5229,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -5249,7 +5249,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5261,7 +5261,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -5272,7 +5272,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5297,7 +5297,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5323,7 +5323,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5334,7 +5334,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -5345,7 +5345,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5369,7 +5369,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5393,7 +5393,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5417,7 +5417,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5443,7 +5443,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5467,7 +5467,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5491,7 +5491,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5520,7 +5520,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5543,7 +5543,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5566,7 +5566,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5587,7 +5587,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags. ", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5612,7 +5612,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5635,7 +5635,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5658,7 +5658,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5679,7 +5679,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags. ", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5704,7 +5704,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5727,7 +5727,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5750,7 +5750,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5771,7 +5771,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5796,7 +5796,7 @@ export default { $description: "Text color for green tags. Ensures readability while maintaining the green color theme.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5819,7 +5819,7 @@ export default { $description: "Background color for green tags. Creates a distinct surface with green theme styling.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5842,7 +5842,7 @@ export default { $description: "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5863,7 +5863,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5888,7 +5888,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5911,7 +5911,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5934,7 +5934,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5955,7 +5955,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -5980,7 +5980,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6003,7 +6003,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6026,7 +6026,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6047,7 +6047,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6072,7 +6072,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6095,7 +6095,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6118,7 +6118,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6139,7 +6139,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6164,7 +6164,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6187,7 +6187,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6210,7 +6210,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6231,7 +6231,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6256,7 +6256,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6279,7 +6279,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6302,7 +6302,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6323,7 +6323,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6348,7 +6348,7 @@ export default { $description: "Text color for purple tags. Ensures readability while maintaining the purple color theme.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6371,7 +6371,7 @@ export default { $description: "Background color for purple tags. Creates a distinct surface with purple theme styling.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6394,7 +6394,7 @@ export default { $description: "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6415,7 +6415,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6440,7 +6440,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6463,7 +6463,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6486,7 +6486,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6507,7 +6507,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6532,7 +6532,7 @@ export default { $description: "Text color for violet tags. Ensures readability while maintaining the violet color theme.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6555,7 +6555,7 @@ export default { $description: "Background color for violet tags. Creates a distinct surface with violet theme styling.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6578,7 +6578,7 @@ export default { $description: "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6599,7 +6599,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6624,7 +6624,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6647,7 +6647,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6670,7 +6670,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6691,7 +6691,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6716,7 +6716,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6739,7 +6739,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6762,7 +6762,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6783,7 +6783,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6810,7 +6810,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6833,7 +6833,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6856,7 +6856,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6868,7 +6868,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -6879,7 +6879,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6904,7 +6904,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6927,7 +6927,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6950,7 +6950,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -6973,7 +6973,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -6999,7 +6999,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7021,7 +7021,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7032,7 +7032,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7043,7 +7043,7 @@ export default { $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-border", + name: "cn-component-tooltip-border", attributes: { category: "component", type: "tooltip", @@ -7057,7 +7057,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7085,7 +7085,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7095,8 +7095,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7124,7 +7123,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7135,7 +7134,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7173,7 +7172,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7184,7 +7183,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7222,7 +7221,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7233,7 +7232,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7271,7 +7270,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7282,7 +7281,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7320,7 +7319,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7331,7 +7330,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7359,7 +7358,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7370,7 +7369,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7398,7 +7397,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7419,7 +7418,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7439,7 +7438,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7458,7 +7457,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7478,7 +7477,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7497,7 +7496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7517,7 +7516,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7536,7 +7535,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7556,7 +7555,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7575,7 +7574,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7595,7 +7594,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7614,7 +7613,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7634,7 +7633,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7653,7 +7652,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7673,7 +7672,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7692,7 +7691,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7712,7 +7711,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7763,7 +7762,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7783,7 +7782,7 @@ export default { $type: "color", $value: "{colors.yellow.100}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7801,7 +7800,7 @@ export default { $type: "color", $value: "{colors.pink.200}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7819,7 +7818,7 @@ export default { $type: "color", $value: "{colors.purple.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7837,7 +7836,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7857,7 +7856,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7875,7 +7874,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7893,7 +7892,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7914,7 +7913,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7935,7 +7934,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.4)", filePath: "design-tokens/mode/dark/high-contrast.json", isSource: true, original: { @@ -7951,7 +7950,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7970,7 +7969,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -7991,7 +7990,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8010,7 +8009,7 @@ export default { $type: "color", $value: "{colors.blue.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8029,7 +8028,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8051,7 +8050,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8077,7 +8076,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8099,7 +8098,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8119,7 +8118,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8143,7 +8142,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8163,7 +8162,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8186,7 +8185,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8213,7 +8212,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8242,7 +8241,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8269,7 +8268,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8312,7 +8311,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8339,7 +8338,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8366,7 +8365,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8393,7 +8392,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8420,7 +8419,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8447,7 +8446,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8467,7 +8466,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8485,7 +8484,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8503,7 +8502,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8521,7 +8520,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8539,7 +8538,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8557,7 +8556,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8575,7 +8574,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8593,7 +8592,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8611,7 +8610,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8629,7 +8628,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8647,7 +8646,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8667,7 +8666,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8685,7 +8684,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8703,7 +8702,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8721,7 +8720,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8739,7 +8738,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8757,7 +8756,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8775,7 +8774,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8793,7 +8792,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8811,7 +8810,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8829,7 +8828,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8847,7 +8846,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-desktop-harness.ts b/packages/core-design-system/src/styles-esm/dark-high-contrast-harness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-dark-high-contrast-desktop-harness.ts rename to packages/core-design-system/src/styles-esm/dark-high-contrast-harness.ts index 3fa8ae6b81..b0e830a6ca 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/dark-high-contrast-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:06:53 GMT + * Generated on Tue, 18 Mar 2025 06:44:00 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable green text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-green-300) l c h / 0.6)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.6)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-yellow-300) l c h / 0.6)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-yellow-500) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.6)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-purple-300) l c h / 0.6)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-purple-500) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1955,7 +1955,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1979,7 +1979,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2003,7 +2003,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2029,7 +2029,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2053,7 +2053,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2077,7 +2077,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2105,7 +2105,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2129,7 +2129,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2155,7 +2155,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2179,7 +2179,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2206,7 +2206,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable green text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2227,7 +2227,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.1)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -2247,7 +2247,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2268,7 +2268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-green-300) l c h / 0.6)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -2288,7 +2288,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2310,7 +2310,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -2330,7 +2330,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2352,7 +2352,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -2372,7 +2372,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2399,7 +2399,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2420,7 +2420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -2440,7 +2440,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2461,7 +2461,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.6)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -2481,7 +2481,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2503,7 +2503,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -2523,7 +2523,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2545,7 +2545,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -2565,7 +2565,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2592,7 +2592,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2613,7 +2613,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2638,7 +2638,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2664,7 +2664,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2686,7 +2686,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2710,7 +2710,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2732,7 +2732,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2754,7 +2754,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2774,7 +2774,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2794,7 +2794,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -2814,7 +2814,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2838,7 +2838,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2858,7 +2858,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2881,7 +2881,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2903,7 +2903,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2926,7 +2926,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -2946,7 +2946,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2982,7 +2982,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3002,7 +3002,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.12)", $description: "Green background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -3022,7 +3022,7 @@ export default { $description: "Green background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3042,7 +3042,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -3062,7 +3062,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3082,7 +3082,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -3102,7 +3102,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3124,7 +3124,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3146,7 +3146,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3166,7 +3166,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.12)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -3186,7 +3186,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3206,7 +3206,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -3226,7 +3226,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3246,7 +3246,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -3266,7 +3266,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3288,7 +3288,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3310,7 +3310,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3332,7 +3332,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3354,7 +3354,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3374,7 +3374,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -3394,7 +3394,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3414,7 +3414,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/dark/high-contrast.json", isSource: true, @@ -3432,7 +3432,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3454,7 +3454,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3476,7 +3476,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3500,7 +3500,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3522,7 +3522,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3544,7 +3544,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3566,7 +3566,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3588,7 +3588,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3612,7 +3612,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3636,7 +3636,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3658,7 +3658,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3681,7 +3681,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3704,7 +3704,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3725,7 +3725,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3738,7 +3738,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Navigation container border.", filePath: "design-tokens/mode/dark/high-contrast.json", isSource: true, @@ -3747,7 +3747,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3767,7 +3767,7 @@ export default { $value: "{background.1}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3792,7 +3792,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3818,7 +3818,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3847,7 +3847,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3872,7 +3872,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3886,7 +3886,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--cn-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -3898,7 +3898,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3924,7 +3924,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3950,7 +3950,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3978,7 +3978,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3991,7 +3991,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -4002,7 +4002,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4028,7 +4028,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4052,7 +4052,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4077,7 +4077,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -4097,7 +4097,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4123,7 +4123,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4134,7 +4134,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -4145,7 +4145,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4156,7 +4156,7 @@ export default { }, separator: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -4167,7 +4167,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4178,7 +4178,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast.json", isSource: true, @@ -4187,7 +4187,7 @@ export default { $value: "{state.hover}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4198,7 +4198,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast.json", isSource: true, @@ -4207,7 +4207,7 @@ export default { $value: "{state.selected}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4231,7 +4231,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4255,7 +4255,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4281,7 +4281,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4305,7 +4305,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4330,7 +4330,7 @@ export default { $value: "{text.1}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4351,7 +4351,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4376,7 +4376,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4397,7 +4397,7 @@ export default { $value: "{border.2}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4420,7 +4420,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4444,7 +4444,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4468,7 +4468,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4492,7 +4492,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4517,7 +4517,7 @@ export default { $value: "{text.1}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4538,7 +4538,7 @@ export default { $value: "{text.3}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4564,7 +4564,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4589,7 +4589,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4612,7 +4612,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4635,7 +4635,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4660,7 +4660,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4683,7 +4683,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4706,7 +4706,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4721,7 +4721,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -4732,7 +4732,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4758,7 +4758,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4783,7 +4783,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4806,7 +4806,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4831,7 +4831,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4854,7 +4854,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4879,7 +4879,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4902,7 +4902,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4928,7 +4928,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4950,7 +4950,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -4972,7 +4972,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -4994,7 +4994,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5016,7 +5016,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5038,7 +5038,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5060,7 +5060,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5085,7 +5085,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5108,7 +5108,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5133,7 +5133,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5156,7 +5156,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5183,7 +5183,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5206,7 +5206,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5229,7 +5229,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -5249,7 +5249,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5261,7 +5261,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -5272,7 +5272,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5297,7 +5297,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5323,7 +5323,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5334,7 +5334,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -5345,7 +5345,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5369,7 +5369,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5393,7 +5393,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5417,7 +5417,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5443,7 +5443,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5467,7 +5467,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5491,7 +5491,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5520,7 +5520,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5543,7 +5543,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5566,7 +5566,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5587,7 +5587,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags. ", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5612,7 +5612,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5635,7 +5635,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5658,7 +5658,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5679,7 +5679,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags. ", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5704,7 +5704,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5727,7 +5727,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5750,7 +5750,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5771,7 +5771,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5796,7 +5796,7 @@ export default { $description: "Text color for green tags. Ensures readability while maintaining the green color theme.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5819,7 +5819,7 @@ export default { $description: "Background color for green tags. Creates a distinct surface with green theme styling.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5842,7 +5842,7 @@ export default { $description: "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5863,7 +5863,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5888,7 +5888,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5911,7 +5911,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5934,7 +5934,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5955,7 +5955,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -5980,7 +5980,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6003,7 +6003,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6026,7 +6026,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6047,7 +6047,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6072,7 +6072,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6095,7 +6095,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6118,7 +6118,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6139,7 +6139,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6164,7 +6164,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6187,7 +6187,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6210,7 +6210,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6231,7 +6231,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6256,7 +6256,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6279,7 +6279,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6302,7 +6302,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6323,7 +6323,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6348,7 +6348,7 @@ export default { $description: "Text color for purple tags. Ensures readability while maintaining the purple color theme.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6371,7 +6371,7 @@ export default { $description: "Background color for purple tags. Creates a distinct surface with purple theme styling.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6394,7 +6394,7 @@ export default { $description: "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6415,7 +6415,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6440,7 +6440,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6463,7 +6463,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6486,7 +6486,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6507,7 +6507,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6532,7 +6532,7 @@ export default { $description: "Text color for violet tags. Ensures readability while maintaining the violet color theme.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6555,7 +6555,7 @@ export default { $description: "Background color for violet tags. Creates a distinct surface with violet theme styling.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6578,7 +6578,7 @@ export default { $description: "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6599,7 +6599,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6624,7 +6624,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6647,7 +6647,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6670,7 +6670,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6691,7 +6691,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6716,7 +6716,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6739,7 +6739,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6762,7 +6762,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6783,7 +6783,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6810,7 +6810,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6833,7 +6833,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6856,7 +6856,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6868,7 +6868,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -6879,7 +6879,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6904,7 +6904,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6927,7 +6927,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6950,7 +6950,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -6973,7 +6973,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -6999,7 +6999,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7021,7 +7021,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7032,7 +7032,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7043,7 +7043,7 @@ export default { $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-border", + name: "cn-component-tooltip-border", attributes: { category: "component", type: "tooltip", @@ -7057,7 +7057,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7085,7 +7085,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7095,8 +7095,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7124,7 +7123,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7135,7 +7134,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7173,7 +7172,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7184,7 +7183,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7222,7 +7221,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7233,7 +7232,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7271,7 +7270,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7282,7 +7281,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7320,7 +7319,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7331,7 +7330,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7359,7 +7358,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7370,7 +7369,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7398,7 +7397,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7419,7 +7418,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7439,7 +7438,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7458,7 +7457,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7478,7 +7477,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7497,7 +7496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7517,7 +7516,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7536,7 +7535,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7556,7 +7555,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7575,7 +7574,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7595,7 +7594,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7614,7 +7613,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7634,7 +7633,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7653,7 +7652,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7673,7 +7672,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7692,7 +7691,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/dark/high-contrast.json", @@ -7712,7 +7711,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7763,7 +7762,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7783,7 +7782,7 @@ export default { $type: "color", $value: "{colors.yellow.100}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7801,7 +7800,7 @@ export default { $type: "color", $value: "{colors.pink.200}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7819,7 +7818,7 @@ export default { $type: "color", $value: "{colors.purple.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7837,7 +7836,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7857,7 +7856,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7875,7 +7874,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7893,7 +7892,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7914,7 +7913,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7935,7 +7934,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.4)", filePath: "design-tokens/mode/dark/high-contrast.json", isSource: true, original: { @@ -7951,7 +7950,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7970,7 +7969,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -7991,7 +7990,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8010,7 +8009,7 @@ export default { $type: "color", $value: "{colors.blue.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8029,7 +8028,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8051,7 +8050,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8077,7 +8076,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8099,7 +8098,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8119,7 +8118,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8143,7 +8142,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8163,7 +8162,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8186,7 +8185,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8213,7 +8212,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8242,7 +8241,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8269,7 +8268,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8312,7 +8311,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8339,7 +8338,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8366,7 +8365,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8393,7 +8392,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8420,7 +8419,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8447,7 +8446,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8467,7 +8466,7 @@ export default { $type: "color", $value: "{colors.cyan.50}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8485,7 +8484,7 @@ export default { $type: "color", $value: "{colors.cyan.100}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8503,7 +8502,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8521,7 +8520,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8539,7 +8538,7 @@ export default { $type: "color", $value: "{colors.cyan.400}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8557,7 +8556,7 @@ export default { $type: "color", $value: "{colors.cyan.500}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8575,7 +8574,7 @@ export default { $type: "color", $value: "{colors.cyan.600}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8593,7 +8592,7 @@ export default { $type: "color", $value: "{colors.cyan.700}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8611,7 +8610,7 @@ export default { $type: "color", $value: "{colors.cyan.800}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8629,7 +8628,7 @@ export default { $type: "color", $value: "{colors.cyan.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8647,7 +8646,7 @@ export default { $type: "color", $value: "{colors.cyan.950}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8667,7 +8666,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8685,7 +8684,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8703,7 +8702,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8721,7 +8720,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8739,7 +8738,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8757,7 +8756,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8775,7 +8774,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8793,7 +8792,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8811,7 +8810,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8829,7 +8828,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8847,7 +8846,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-protanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/dark-high-contrast-protanopia-gitness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-dark-high-contrast-protanopia-desktop-gitness.ts rename to packages/core-design-system/src/styles-esm/dark-high-contrast-protanopia-gitness.ts index f6e6e519eb..78018c1d84 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-protanopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/dark-high-contrast-protanopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:00 GMT + * Generated on Tue, 18 Mar 2025 06:44:05 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable blue text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.6)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.6)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-yellow-300) l c h / 0.6)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-yellow-500) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.6)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-purple-300) l c h / 0.6)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-purple-500) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1955,7 +1955,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1979,7 +1979,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2003,7 +2003,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2029,7 +2029,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2053,7 +2053,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2077,7 +2077,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2105,7 +2105,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2129,7 +2129,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2155,7 +2155,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2179,7 +2179,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2206,7 +2206,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable blue text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2227,7 +2227,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.1)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -2247,7 +2247,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2268,7 +2268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.6)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -2288,7 +2288,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2310,7 +2310,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -2330,7 +2330,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2352,7 +2352,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -2372,7 +2372,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2399,7 +2399,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2420,7 +2420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -2440,7 +2440,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2461,7 +2461,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.6)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -2481,7 +2481,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2503,7 +2503,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -2523,7 +2523,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2545,7 +2545,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -2565,7 +2565,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2592,7 +2592,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2613,7 +2613,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2638,7 +2638,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2664,7 +2664,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2686,7 +2686,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2710,7 +2710,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2732,7 +2732,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2754,7 +2754,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2774,7 +2774,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2794,7 +2794,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -2814,7 +2814,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2838,7 +2838,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2858,7 +2858,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2881,7 +2881,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2903,7 +2903,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2926,7 +2926,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -2946,7 +2946,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2982,7 +2982,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3002,7 +3002,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Blue background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -3022,7 +3022,7 @@ export default { $description: "Blue background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3042,7 +3042,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -3062,7 +3062,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3082,7 +3082,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -3102,7 +3102,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3124,7 +3124,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3146,7 +3146,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3166,7 +3166,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.12)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -3186,7 +3186,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3206,7 +3206,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -3226,7 +3226,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3246,7 +3246,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -3266,7 +3266,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3288,7 +3288,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3310,7 +3310,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3332,7 +3332,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3354,7 +3354,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3374,7 +3374,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -3394,7 +3394,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3414,7 +3414,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", isSource: true, @@ -3432,7 +3432,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3454,7 +3454,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3476,7 +3476,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3500,7 +3500,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3522,7 +3522,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3544,7 +3544,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3566,7 +3566,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3588,7 +3588,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3612,7 +3612,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3636,7 +3636,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3658,7 +3658,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3681,7 +3681,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3704,7 +3704,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3725,7 +3725,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3738,7 +3738,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Navigation container border.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", isSource: true, @@ -3747,7 +3747,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3767,7 +3767,7 @@ export default { $value: "{background.1}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3792,7 +3792,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3818,7 +3818,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3847,7 +3847,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3872,7 +3872,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3886,7 +3886,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--cn-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -3898,7 +3898,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3924,7 +3924,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3950,7 +3950,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3978,7 +3978,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3991,7 +3991,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -4002,7 +4002,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4028,7 +4028,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4052,7 +4052,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4077,7 +4077,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -4097,7 +4097,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4123,7 +4123,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4134,7 +4134,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -4145,7 +4145,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4156,7 +4156,7 @@ export default { }, separator: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -4167,7 +4167,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4178,7 +4178,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", isSource: true, @@ -4187,7 +4187,7 @@ export default { $value: "{state.hover}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4198,7 +4198,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", isSource: true, @@ -4207,7 +4207,7 @@ export default { $value: "{state.selected}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4231,7 +4231,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4255,7 +4255,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4281,7 +4281,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4305,7 +4305,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4330,7 +4330,7 @@ export default { $value: "{text.1}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4351,7 +4351,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4376,7 +4376,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4397,7 +4397,7 @@ export default { $value: "{border.2}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4420,7 +4420,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4444,7 +4444,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4468,7 +4468,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4492,7 +4492,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4517,7 +4517,7 @@ export default { $value: "{text.1}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4538,7 +4538,7 @@ export default { $value: "{text.3}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4564,7 +4564,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4589,7 +4589,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4612,7 +4612,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4635,7 +4635,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4660,7 +4660,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4683,7 +4683,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4706,7 +4706,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4721,7 +4721,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -4732,7 +4732,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4758,7 +4758,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4783,7 +4783,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4806,7 +4806,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4831,7 +4831,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4854,7 +4854,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4879,7 +4879,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4902,7 +4902,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4928,7 +4928,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4950,7 +4950,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -4972,7 +4972,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -4994,7 +4994,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5016,7 +5016,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5038,7 +5038,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5060,7 +5060,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5085,7 +5085,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5108,7 +5108,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5133,7 +5133,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5156,7 +5156,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5183,7 +5183,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5206,7 +5206,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5229,7 +5229,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -5249,7 +5249,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5261,7 +5261,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -5272,7 +5272,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5297,7 +5297,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5323,7 +5323,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5334,7 +5334,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -5345,7 +5345,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5369,7 +5369,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5393,7 +5393,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5417,7 +5417,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5443,7 +5443,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5467,7 +5467,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5491,7 +5491,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5520,7 +5520,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5543,7 +5543,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5566,7 +5566,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5587,7 +5587,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5612,7 +5612,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5635,7 +5635,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5658,7 +5658,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5679,7 +5679,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5704,7 +5704,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5727,7 +5727,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5750,7 +5750,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5771,7 +5771,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5796,7 +5796,7 @@ export default { $description: "Text color for green tags. Adjusted for protanopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5819,7 +5819,7 @@ export default { $description: "Background color for green tags. Adjusted for protanopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5842,7 +5842,7 @@ export default { $description: "Subtle background variation for green tags. Adjusted for protanopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5863,7 +5863,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5888,7 +5888,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5911,7 +5911,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5934,7 +5934,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5955,7 +5955,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -5980,7 +5980,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6003,7 +6003,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6026,7 +6026,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6047,7 +6047,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6072,7 +6072,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6095,7 +6095,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6118,7 +6118,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6139,7 +6139,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6164,7 +6164,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6187,7 +6187,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6210,7 +6210,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6231,7 +6231,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6256,7 +6256,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6279,7 +6279,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6302,7 +6302,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6323,7 +6323,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6348,7 +6348,7 @@ export default { $description: "Text color for purple tags. Ensures readability while maintaining the purple color theme.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6371,7 +6371,7 @@ export default { $description: "Background color for purple tags. Creates a distinct surface with purple theme styling.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6394,7 +6394,7 @@ export default { $description: "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6415,7 +6415,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6440,7 +6440,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6463,7 +6463,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6486,7 +6486,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6507,7 +6507,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6532,7 +6532,7 @@ export default { $description: "Text color for violet tags. Ensures readability while maintaining the violet color theme.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6555,7 +6555,7 @@ export default { $description: "Background color for violet tags. Creates a distinct surface with violet theme styling.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6578,7 +6578,7 @@ export default { $description: "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6599,7 +6599,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6624,7 +6624,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6647,7 +6647,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6670,7 +6670,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6691,7 +6691,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6716,7 +6716,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6739,7 +6739,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6762,7 +6762,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6783,7 +6783,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6810,7 +6810,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6833,7 +6833,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6856,7 +6856,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6868,7 +6868,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -6879,7 +6879,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6904,7 +6904,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6927,7 +6927,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6950,7 +6950,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -6973,7 +6973,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -6999,7 +6999,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7021,7 +7021,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7032,7 +7032,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7043,7 +7043,7 @@ export default { $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-border", + name: "cn-component-tooltip-border", attributes: { category: "component", type: "tooltip", @@ -7057,7 +7057,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7085,7 +7085,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7095,8 +7095,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7124,7 +7123,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7135,7 +7134,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7173,7 +7172,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7184,7 +7183,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7222,7 +7221,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7233,7 +7232,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7271,7 +7270,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7282,7 +7281,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7320,7 +7319,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7331,7 +7330,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7359,7 +7358,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7370,7 +7369,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7398,7 +7397,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7419,7 +7418,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7439,7 +7438,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7458,7 +7457,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7478,7 +7477,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7497,7 +7496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7517,7 +7516,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7536,7 +7535,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7556,7 +7555,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7575,7 +7574,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7595,7 +7594,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7614,7 +7613,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7634,7 +7633,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7653,7 +7652,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7673,7 +7672,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7692,7 +7691,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7712,7 +7711,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7763,7 +7762,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7783,7 +7782,7 @@ export default { $type: "color", $value: "{colors.yellow.100}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7801,7 +7800,7 @@ export default { $type: "color", $value: "{colors.pink.200}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7819,7 +7818,7 @@ export default { $type: "color", $value: "{colors.purple.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7837,7 +7836,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7857,7 +7856,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7875,7 +7874,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7893,7 +7892,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7914,7 +7913,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7935,7 +7934,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.4)", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", isSource: true, original: { @@ -7951,7 +7950,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7970,7 +7969,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -7991,7 +7990,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8010,7 +8009,7 @@ export default { $type: "color", $value: "{colors.blue.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8029,7 +8028,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8051,7 +8050,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8077,7 +8076,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8099,7 +8098,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8119,7 +8118,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8143,7 +8142,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8163,7 +8162,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8186,7 +8185,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8213,7 +8212,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8242,7 +8241,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8269,7 +8268,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8312,7 +8311,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8339,7 +8338,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8366,7 +8365,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8393,7 +8392,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8420,7 +8419,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8447,7 +8446,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8467,7 +8466,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8485,7 +8484,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8503,7 +8502,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8521,7 +8520,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8539,7 +8538,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8557,7 +8556,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8575,7 +8574,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8593,7 +8592,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8611,7 +8610,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8629,7 +8628,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8647,7 +8646,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8667,7 +8666,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8685,7 +8684,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8703,7 +8702,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8721,7 +8720,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8739,7 +8738,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8757,7 +8756,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8775,7 +8774,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8793,7 +8792,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8811,7 +8810,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8829,7 +8828,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8847,7 +8846,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-protanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/dark-high-contrast-protanopia-harness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-dark-high-contrast-protanopia-desktop-harness.ts rename to packages/core-design-system/src/styles-esm/dark-high-contrast-protanopia-harness.ts index 767c02cc91..d0445b2e98 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-protanopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/dark-high-contrast-protanopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:06:59 GMT + * Generated on Tue, 18 Mar 2025 06:44:04 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable blue text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.6)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.6)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-yellow-300) l c h / 0.6)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-yellow-500) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.6)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-purple-300) l c h / 0.6)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-purple-500) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1955,7 +1955,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1979,7 +1979,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2003,7 +2003,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2029,7 +2029,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2053,7 +2053,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2077,7 +2077,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2105,7 +2105,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2129,7 +2129,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2155,7 +2155,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2179,7 +2179,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2206,7 +2206,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable blue text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2227,7 +2227,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.1)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -2247,7 +2247,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2268,7 +2268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.6)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -2288,7 +2288,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2310,7 +2310,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -2330,7 +2330,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2352,7 +2352,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -2372,7 +2372,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2399,7 +2399,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2420,7 +2420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -2440,7 +2440,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2461,7 +2461,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.6)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -2481,7 +2481,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2503,7 +2503,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -2523,7 +2523,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2545,7 +2545,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -2565,7 +2565,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2592,7 +2592,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2613,7 +2613,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2638,7 +2638,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2664,7 +2664,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2686,7 +2686,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2710,7 +2710,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2732,7 +2732,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2754,7 +2754,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2774,7 +2774,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2794,7 +2794,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -2814,7 +2814,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2838,7 +2838,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2858,7 +2858,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2881,7 +2881,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2903,7 +2903,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2926,7 +2926,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -2946,7 +2946,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2982,7 +2982,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3002,7 +3002,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Blue background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -3022,7 +3022,7 @@ export default { $description: "Blue background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3042,7 +3042,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -3062,7 +3062,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3082,7 +3082,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -3102,7 +3102,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3124,7 +3124,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3146,7 +3146,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3166,7 +3166,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.12)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -3186,7 +3186,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3206,7 +3206,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -3226,7 +3226,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3246,7 +3246,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -3266,7 +3266,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3288,7 +3288,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3310,7 +3310,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3332,7 +3332,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3354,7 +3354,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3374,7 +3374,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -3394,7 +3394,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3414,7 +3414,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", isSource: true, @@ -3432,7 +3432,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3454,7 +3454,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3476,7 +3476,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3500,7 +3500,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3522,7 +3522,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3544,7 +3544,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3566,7 +3566,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3588,7 +3588,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3612,7 +3612,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3636,7 +3636,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3658,7 +3658,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3681,7 +3681,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3704,7 +3704,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3725,7 +3725,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3738,7 +3738,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Navigation container border.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", isSource: true, @@ -3747,7 +3747,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3767,7 +3767,7 @@ export default { $value: "{background.1}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3792,7 +3792,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3818,7 +3818,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3847,7 +3847,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3872,7 +3872,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3886,7 +3886,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--cn-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -3898,7 +3898,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3924,7 +3924,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3950,7 +3950,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3978,7 +3978,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3991,7 +3991,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -4002,7 +4002,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4028,7 +4028,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4052,7 +4052,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4077,7 +4077,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -4097,7 +4097,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4123,7 +4123,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4134,7 +4134,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -4145,7 +4145,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4156,7 +4156,7 @@ export default { }, separator: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -4167,7 +4167,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4178,7 +4178,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", isSource: true, @@ -4187,7 +4187,7 @@ export default { $value: "{state.hover}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4198,7 +4198,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", isSource: true, @@ -4207,7 +4207,7 @@ export default { $value: "{state.selected}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4231,7 +4231,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4255,7 +4255,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4281,7 +4281,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4305,7 +4305,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4330,7 +4330,7 @@ export default { $value: "{text.1}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4351,7 +4351,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4376,7 +4376,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4397,7 +4397,7 @@ export default { $value: "{border.2}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4420,7 +4420,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4444,7 +4444,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4468,7 +4468,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4492,7 +4492,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4517,7 +4517,7 @@ export default { $value: "{text.1}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4538,7 +4538,7 @@ export default { $value: "{text.3}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4564,7 +4564,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4589,7 +4589,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4612,7 +4612,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4635,7 +4635,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4660,7 +4660,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4683,7 +4683,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4706,7 +4706,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4721,7 +4721,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -4732,7 +4732,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4758,7 +4758,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4783,7 +4783,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4806,7 +4806,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4831,7 +4831,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4854,7 +4854,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4879,7 +4879,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4902,7 +4902,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4928,7 +4928,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4950,7 +4950,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -4972,7 +4972,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -4994,7 +4994,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5016,7 +5016,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5038,7 +5038,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5060,7 +5060,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5085,7 +5085,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5108,7 +5108,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5133,7 +5133,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5156,7 +5156,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5183,7 +5183,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5206,7 +5206,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5229,7 +5229,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -5249,7 +5249,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5261,7 +5261,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -5272,7 +5272,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5297,7 +5297,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5323,7 +5323,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5334,7 +5334,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -5345,7 +5345,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5369,7 +5369,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5393,7 +5393,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5417,7 +5417,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5443,7 +5443,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5467,7 +5467,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5491,7 +5491,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5520,7 +5520,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5543,7 +5543,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5566,7 +5566,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5587,7 +5587,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5612,7 +5612,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5635,7 +5635,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5658,7 +5658,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5679,7 +5679,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5704,7 +5704,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5727,7 +5727,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5750,7 +5750,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5771,7 +5771,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5796,7 +5796,7 @@ export default { $description: "Text color for green tags. Adjusted for protanopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5819,7 +5819,7 @@ export default { $description: "Background color for green tags. Adjusted for protanopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5842,7 +5842,7 @@ export default { $description: "Subtle background variation for green tags. Adjusted for protanopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5863,7 +5863,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5888,7 +5888,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5911,7 +5911,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5934,7 +5934,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5955,7 +5955,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -5980,7 +5980,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6003,7 +6003,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6026,7 +6026,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6047,7 +6047,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6072,7 +6072,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6095,7 +6095,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6118,7 +6118,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6139,7 +6139,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6164,7 +6164,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6187,7 +6187,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6210,7 +6210,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6231,7 +6231,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6256,7 +6256,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6279,7 +6279,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6302,7 +6302,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6323,7 +6323,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6348,7 +6348,7 @@ export default { $description: "Text color for purple tags. Ensures readability while maintaining the purple color theme.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6371,7 +6371,7 @@ export default { $description: "Background color for purple tags. Creates a distinct surface with purple theme styling.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6394,7 +6394,7 @@ export default { $description: "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6415,7 +6415,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6440,7 +6440,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6463,7 +6463,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6486,7 +6486,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6507,7 +6507,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6532,7 +6532,7 @@ export default { $description: "Text color for violet tags. Ensures readability while maintaining the violet color theme.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6555,7 +6555,7 @@ export default { $description: "Background color for violet tags. Creates a distinct surface with violet theme styling.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6578,7 +6578,7 @@ export default { $description: "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6599,7 +6599,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6624,7 +6624,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6647,7 +6647,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6670,7 +6670,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6691,7 +6691,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6716,7 +6716,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6739,7 +6739,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6762,7 +6762,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6783,7 +6783,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6810,7 +6810,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6833,7 +6833,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6856,7 +6856,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6868,7 +6868,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -6879,7 +6879,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6904,7 +6904,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6927,7 +6927,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6950,7 +6950,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -6973,7 +6973,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -6999,7 +6999,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7021,7 +7021,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7032,7 +7032,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7043,7 +7043,7 @@ export default { $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-border", + name: "cn-component-tooltip-border", attributes: { category: "component", type: "tooltip", @@ -7057,7 +7057,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7085,7 +7085,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7095,8 +7095,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7124,7 +7123,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7135,7 +7134,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7173,7 +7172,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7184,7 +7183,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7222,7 +7221,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7233,7 +7232,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7271,7 +7270,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7282,7 +7281,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7320,7 +7319,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7331,7 +7330,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7359,7 +7358,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7370,7 +7369,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7398,7 +7397,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7419,7 +7418,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7439,7 +7438,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7458,7 +7457,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7478,7 +7477,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7497,7 +7496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7517,7 +7516,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7536,7 +7535,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7556,7 +7555,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7575,7 +7574,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7595,7 +7594,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7614,7 +7613,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7634,7 +7633,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7653,7 +7652,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7673,7 +7672,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7692,7 +7691,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", @@ -7712,7 +7711,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7763,7 +7762,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7783,7 +7782,7 @@ export default { $type: "color", $value: "{colors.yellow.100}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7801,7 +7800,7 @@ export default { $type: "color", $value: "{colors.pink.200}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7819,7 +7818,7 @@ export default { $type: "color", $value: "{colors.purple.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7837,7 +7836,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7857,7 +7856,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7875,7 +7874,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7893,7 +7892,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7914,7 +7913,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7935,7 +7934,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.4)", filePath: "design-tokens/mode/dark/high-contrast-protanopia.json", isSource: true, original: { @@ -7951,7 +7950,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7970,7 +7969,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -7991,7 +7990,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8010,7 +8009,7 @@ export default { $type: "color", $value: "{colors.blue.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8029,7 +8028,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8051,7 +8050,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8077,7 +8076,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8099,7 +8098,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8119,7 +8118,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8143,7 +8142,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8163,7 +8162,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8186,7 +8185,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8213,7 +8212,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8242,7 +8241,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8269,7 +8268,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8312,7 +8311,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8339,7 +8338,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8366,7 +8365,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8393,7 +8392,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8420,7 +8419,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8447,7 +8446,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8467,7 +8466,7 @@ export default { $type: "color", $value: "{colors.cyan.50}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8485,7 +8484,7 @@ export default { $type: "color", $value: "{colors.cyan.100}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8503,7 +8502,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8521,7 +8520,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8539,7 +8538,7 @@ export default { $type: "color", $value: "{colors.cyan.400}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8557,7 +8556,7 @@ export default { $type: "color", $value: "{colors.cyan.500}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8575,7 +8574,7 @@ export default { $type: "color", $value: "{colors.cyan.600}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8593,7 +8592,7 @@ export default { $type: "color", $value: "{colors.cyan.700}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8611,7 +8610,7 @@ export default { $type: "color", $value: "{colors.cyan.800}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8629,7 +8628,7 @@ export default { $type: "color", $value: "{colors.cyan.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8647,7 +8646,7 @@ export default { $type: "color", $value: "{colors.cyan.950}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8667,7 +8666,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8685,7 +8684,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8703,7 +8702,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8721,7 +8720,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8739,7 +8738,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8757,7 +8756,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8775,7 +8774,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8793,7 +8792,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8811,7 +8810,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8829,7 +8828,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8847,7 +8846,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-tritanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/dark-high-contrast-tritanopia-gitness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-dark-high-contrast-tritanopia-desktop-gitness.ts rename to packages/core-design-system/src/styles-esm/dark-high-contrast-tritanopia-gitness.ts index 697744d4e2..d550031f84 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-tritanopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/dark-high-contrast-tritanopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:12 GMT + * Generated on Tue, 18 Mar 2025 06:44:13 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable cyan text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.6)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.6)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable orange text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.6)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.6)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.6)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1955,7 +1955,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1979,7 +1979,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2003,7 +2003,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2029,7 +2029,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2053,7 +2053,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2077,7 +2077,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2105,7 +2105,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2129,7 +2129,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2155,7 +2155,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2179,7 +2179,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2206,7 +2206,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable cyan text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2227,7 +2227,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -2247,7 +2247,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2268,7 +2268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.6)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -2288,7 +2288,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2310,7 +2310,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -2330,7 +2330,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2352,7 +2352,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -2372,7 +2372,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2399,7 +2399,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2420,7 +2420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -2440,7 +2440,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2461,7 +2461,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.6)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -2481,7 +2481,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2503,7 +2503,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -2523,7 +2523,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2545,7 +2545,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -2565,7 +2565,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2592,7 +2592,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2613,7 +2613,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2638,7 +2638,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2664,7 +2664,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2686,7 +2686,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2710,7 +2710,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2732,7 +2732,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2754,7 +2754,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2774,7 +2774,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2794,7 +2794,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -2814,7 +2814,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2838,7 +2838,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2858,7 +2858,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2881,7 +2881,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2903,7 +2903,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2926,7 +2926,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -2946,7 +2946,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2982,7 +2982,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3002,7 +3002,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.12)", $description: "Cyan background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -3022,7 +3022,7 @@ export default { $description: "Cyan background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3042,7 +3042,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -3062,7 +3062,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3082,7 +3082,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -3102,7 +3102,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3124,7 +3124,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3146,7 +3146,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3166,7 +3166,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.12)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -3186,7 +3186,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3206,7 +3206,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -3226,7 +3226,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3246,7 +3246,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -3266,7 +3266,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3288,7 +3288,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3310,7 +3310,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3332,7 +3332,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3354,7 +3354,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3374,7 +3374,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -3394,7 +3394,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3414,7 +3414,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", isSource: true, @@ -3432,7 +3432,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3454,7 +3454,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3476,7 +3476,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3500,7 +3500,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3522,7 +3522,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3544,7 +3544,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3566,7 +3566,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3588,7 +3588,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3612,7 +3612,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3636,7 +3636,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3658,7 +3658,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3681,7 +3681,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3704,7 +3704,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3725,7 +3725,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3738,7 +3738,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Navigation container border.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", isSource: true, @@ -3747,7 +3747,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3767,7 +3767,7 @@ export default { $value: "{background.1}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3792,7 +3792,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3818,7 +3818,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3847,7 +3847,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3872,7 +3872,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3886,7 +3886,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--cn-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -3898,7 +3898,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3924,7 +3924,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3950,7 +3950,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3978,7 +3978,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3991,7 +3991,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -4002,7 +4002,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4028,7 +4028,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4052,7 +4052,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4077,7 +4077,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -4097,7 +4097,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4123,7 +4123,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4134,7 +4134,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -4145,7 +4145,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4156,7 +4156,7 @@ export default { }, separator: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -4167,7 +4167,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4178,7 +4178,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", isSource: true, @@ -4187,7 +4187,7 @@ export default { $value: "{state.hover}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4198,7 +4198,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", isSource: true, @@ -4207,7 +4207,7 @@ export default { $value: "{state.selected}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4231,7 +4231,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4255,7 +4255,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4281,7 +4281,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4305,7 +4305,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4330,7 +4330,7 @@ export default { $value: "{text.1}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4351,7 +4351,7 @@ export default { $value: "{colors.cyan.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4376,7 +4376,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4397,7 +4397,7 @@ export default { $value: "{border.2}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4420,7 +4420,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4444,7 +4444,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4468,7 +4468,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4492,7 +4492,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4517,7 +4517,7 @@ export default { $value: "{text.1}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4538,7 +4538,7 @@ export default { $value: "{text.3}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4564,7 +4564,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4589,7 +4589,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4612,7 +4612,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4635,7 +4635,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4660,7 +4660,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4683,7 +4683,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4706,7 +4706,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4721,7 +4721,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -4732,7 +4732,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4758,7 +4758,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4783,7 +4783,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4806,7 +4806,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4831,7 +4831,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4854,7 +4854,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4879,7 +4879,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4902,7 +4902,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4928,7 +4928,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4950,7 +4950,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -4972,7 +4972,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -4994,7 +4994,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5016,7 +5016,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5038,7 +5038,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5060,7 +5060,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5085,7 +5085,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5108,7 +5108,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5133,7 +5133,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5156,7 +5156,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5183,7 +5183,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5206,7 +5206,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5229,7 +5229,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -5249,7 +5249,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5261,7 +5261,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -5272,7 +5272,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5297,7 +5297,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5323,7 +5323,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5334,7 +5334,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -5345,7 +5345,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5369,7 +5369,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5393,7 +5393,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5417,7 +5417,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5443,7 +5443,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5467,7 +5467,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5491,7 +5491,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5520,7 +5520,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5543,7 +5543,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5566,7 +5566,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5587,7 +5587,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5612,7 +5612,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5635,7 +5635,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5658,7 +5658,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5679,7 +5679,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5704,7 +5704,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5727,7 +5727,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5750,7 +5750,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5771,7 +5771,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5796,7 +5796,7 @@ export default { $description: "Text color for green tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5819,7 +5819,7 @@ export default { $description: "Background color for green tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5842,7 +5842,7 @@ export default { $description: "Subtle background variation for green tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5863,7 +5863,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags, replaced with cyan.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5888,7 +5888,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5911,7 +5911,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5934,7 +5934,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5955,7 +5955,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -5980,7 +5980,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6003,7 +6003,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6026,7 +6026,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6047,7 +6047,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6072,7 +6072,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6095,7 +6095,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6118,7 +6118,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6139,7 +6139,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6164,7 +6164,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6187,7 +6187,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6210,7 +6210,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6231,7 +6231,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6256,7 +6256,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6279,7 +6279,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6302,7 +6302,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6323,7 +6323,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6348,7 +6348,7 @@ export default { $description: "Text color for purple tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6371,7 +6371,7 @@ export default { $description: "Background color for purple tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6394,7 +6394,7 @@ export default { $description: "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6415,7 +6415,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags, replaced with cyan.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6440,7 +6440,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6463,7 +6463,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6486,7 +6486,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6507,7 +6507,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6532,7 +6532,7 @@ export default { $description: "Text color for violet tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6555,7 +6555,7 @@ export default { $description: "Background color for violet tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6578,7 +6578,7 @@ export default { $description: "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6599,7 +6599,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags, replaced with cyan.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6624,7 +6624,7 @@ export default { $description: "Text color for yellow tags, replaced with orange for tritanopia visibility.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6647,7 +6647,7 @@ export default { $description: "Background color for yellow tags, replaced with orange for tritanopia visibility.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6670,7 +6670,7 @@ export default { $description: "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6691,7 +6691,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags, replaced with orange.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6716,7 +6716,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6739,7 +6739,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6762,7 +6762,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6783,7 +6783,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6810,7 +6810,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6833,7 +6833,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6856,7 +6856,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6868,7 +6868,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -6879,7 +6879,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6904,7 +6904,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6927,7 +6927,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6950,7 +6950,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -6973,7 +6973,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -6999,7 +6999,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7021,7 +7021,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7032,7 +7032,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7043,7 +7043,7 @@ export default { $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-border", + name: "cn-component-tooltip-border", attributes: { category: "component", type: "tooltip", @@ -7057,7 +7057,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7085,7 +7085,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7095,8 +7095,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7124,7 +7123,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7135,7 +7134,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7173,7 +7172,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7184,7 +7183,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7222,7 +7221,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7233,7 +7232,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7271,7 +7270,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7282,7 +7281,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7320,7 +7319,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7331,7 +7330,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7359,7 +7358,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7370,7 +7369,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7398,7 +7397,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7419,7 +7418,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7439,7 +7438,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7458,7 +7457,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7478,7 +7477,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7497,7 +7496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7517,7 +7516,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7536,7 +7535,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7556,7 +7555,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7575,7 +7574,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7595,7 +7594,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7614,7 +7613,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7634,7 +7633,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7653,7 +7652,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7673,7 +7672,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7692,7 +7691,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7712,7 +7711,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7763,7 +7762,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7783,7 +7782,7 @@ export default { $type: "color", $value: "{colors.orange.100}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7801,7 +7800,7 @@ export default { $type: "color", $value: "{colors.pink.200}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7819,7 +7818,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7837,7 +7836,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7857,7 +7856,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7875,7 +7874,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7893,7 +7892,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7914,7 +7913,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7935,7 +7934,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.4)", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", isSource: true, original: { @@ -7951,7 +7950,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7970,7 +7969,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -7991,7 +7990,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8010,7 +8009,7 @@ export default { $type: "color", $value: "{colors.blue.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8029,7 +8028,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8051,7 +8050,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8077,7 +8076,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8099,7 +8098,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8119,7 +8118,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8143,7 +8142,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8163,7 +8162,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8186,7 +8185,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8213,7 +8212,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8242,7 +8241,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8269,7 +8268,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8312,7 +8311,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8339,7 +8338,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8366,7 +8365,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8393,7 +8392,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8420,7 +8419,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8447,7 +8446,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8467,7 +8466,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8485,7 +8484,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8503,7 +8502,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8521,7 +8520,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8539,7 +8538,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8557,7 +8556,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8575,7 +8574,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8593,7 +8592,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8611,7 +8610,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8629,7 +8628,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8647,7 +8646,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8667,7 +8666,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8685,7 +8684,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8703,7 +8702,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8721,7 +8720,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8739,7 +8738,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8757,7 +8756,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8775,7 +8774,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8793,7 +8792,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8811,7 +8810,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8829,7 +8828,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8847,7 +8846,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-tritanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/dark-high-contrast-tritanopia-harness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-dark-high-contrast-tritanopia-desktop-harness.ts rename to packages/core-design-system/src/styles-esm/dark-high-contrast-tritanopia-harness.ts index 9d23e54ac1..5b7b23c963 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-high-contrast-tritanopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/dark-high-contrast-tritanopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:11 GMT + * Generated on Tue, 18 Mar 2025 06:44:12 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable cyan text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.6)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.6)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable orange text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.6)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.6)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.6)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1955,7 +1955,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1979,7 +1979,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2003,7 +2003,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2029,7 +2029,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2053,7 +2053,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2077,7 +2077,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2105,7 +2105,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2129,7 +2129,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2155,7 +2155,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2179,7 +2179,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2206,7 +2206,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable cyan text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2227,7 +2227,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -2247,7 +2247,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2268,7 +2268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.6)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -2288,7 +2288,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2310,7 +2310,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -2330,7 +2330,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2352,7 +2352,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -2372,7 +2372,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2399,7 +2399,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2420,7 +2420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -2440,7 +2440,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2461,7 +2461,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.6)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -2481,7 +2481,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2503,7 +2503,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -2523,7 +2523,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2545,7 +2545,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -2565,7 +2565,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2592,7 +2592,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2613,7 +2613,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2638,7 +2638,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2664,7 +2664,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2686,7 +2686,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2710,7 +2710,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2732,7 +2732,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2754,7 +2754,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2774,7 +2774,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2794,7 +2794,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -2814,7 +2814,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2838,7 +2838,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2858,7 +2858,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2881,7 +2881,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2903,7 +2903,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2926,7 +2926,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -2946,7 +2946,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2982,7 +2982,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3002,7 +3002,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.12)", $description: "Cyan background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -3022,7 +3022,7 @@ export default { $description: "Cyan background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3042,7 +3042,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -3062,7 +3062,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3082,7 +3082,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -3102,7 +3102,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3124,7 +3124,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3146,7 +3146,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3166,7 +3166,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.12)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -3186,7 +3186,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3206,7 +3206,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -3226,7 +3226,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3246,7 +3246,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -3266,7 +3266,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3288,7 +3288,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3310,7 +3310,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3332,7 +3332,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3354,7 +3354,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3374,7 +3374,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -3394,7 +3394,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3414,7 +3414,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", isSource: true, @@ -3432,7 +3432,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3454,7 +3454,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3476,7 +3476,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3500,7 +3500,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3522,7 +3522,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3544,7 +3544,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3566,7 +3566,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3588,7 +3588,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3612,7 +3612,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3636,7 +3636,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3658,7 +3658,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3681,7 +3681,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3704,7 +3704,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3725,7 +3725,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3738,7 +3738,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Navigation container border.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", isSource: true, @@ -3747,7 +3747,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3767,7 +3767,7 @@ export default { $value: "{background.1}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3792,7 +3792,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3818,7 +3818,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3847,7 +3847,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3872,7 +3872,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3886,7 +3886,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--cn-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -3898,7 +3898,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3924,7 +3924,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3950,7 +3950,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3978,7 +3978,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3991,7 +3991,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -4002,7 +4002,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4028,7 +4028,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4052,7 +4052,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4077,7 +4077,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -4097,7 +4097,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4123,7 +4123,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4134,7 +4134,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -4145,7 +4145,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4156,7 +4156,7 @@ export default { }, separator: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -4167,7 +4167,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4178,7 +4178,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", isSource: true, @@ -4187,7 +4187,7 @@ export default { $value: "{state.hover}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4198,7 +4198,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", isSource: true, @@ -4207,7 +4207,7 @@ export default { $value: "{state.selected}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4231,7 +4231,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4255,7 +4255,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4281,7 +4281,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4305,7 +4305,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4330,7 +4330,7 @@ export default { $value: "{text.1}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4351,7 +4351,7 @@ export default { $value: "{colors.cyan.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4376,7 +4376,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4397,7 +4397,7 @@ export default { $value: "{border.2}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4420,7 +4420,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4444,7 +4444,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4468,7 +4468,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4492,7 +4492,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4517,7 +4517,7 @@ export default { $value: "{text.1}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4538,7 +4538,7 @@ export default { $value: "{text.3}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4564,7 +4564,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4589,7 +4589,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4612,7 +4612,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4635,7 +4635,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4660,7 +4660,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4683,7 +4683,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4706,7 +4706,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4721,7 +4721,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -4732,7 +4732,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4758,7 +4758,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4783,7 +4783,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4806,7 +4806,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4831,7 +4831,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4854,7 +4854,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4879,7 +4879,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4902,7 +4902,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4928,7 +4928,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4950,7 +4950,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -4972,7 +4972,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -4994,7 +4994,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5016,7 +5016,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5038,7 +5038,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5060,7 +5060,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5085,7 +5085,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5108,7 +5108,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5133,7 +5133,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5156,7 +5156,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5183,7 +5183,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5206,7 +5206,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5229,7 +5229,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -5249,7 +5249,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5261,7 +5261,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -5272,7 +5272,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5297,7 +5297,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5323,7 +5323,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5334,7 +5334,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -5345,7 +5345,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5369,7 +5369,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5393,7 +5393,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5417,7 +5417,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5443,7 +5443,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5467,7 +5467,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5491,7 +5491,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5520,7 +5520,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5543,7 +5543,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5566,7 +5566,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5587,7 +5587,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5612,7 +5612,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5635,7 +5635,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5658,7 +5658,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5679,7 +5679,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5704,7 +5704,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5727,7 +5727,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5750,7 +5750,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5771,7 +5771,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5796,7 +5796,7 @@ export default { $description: "Text color for green tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5819,7 +5819,7 @@ export default { $description: "Background color for green tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5842,7 +5842,7 @@ export default { $description: "Subtle background variation for green tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5863,7 +5863,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags, replaced with cyan.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5888,7 +5888,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5911,7 +5911,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5934,7 +5934,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5955,7 +5955,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -5980,7 +5980,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6003,7 +6003,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6026,7 +6026,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6047,7 +6047,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6072,7 +6072,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6095,7 +6095,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6118,7 +6118,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6139,7 +6139,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6164,7 +6164,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6187,7 +6187,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6210,7 +6210,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6231,7 +6231,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6256,7 +6256,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6279,7 +6279,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6302,7 +6302,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6323,7 +6323,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6348,7 +6348,7 @@ export default { $description: "Text color for purple tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6371,7 +6371,7 @@ export default { $description: "Background color for purple tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6394,7 +6394,7 @@ export default { $description: "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6415,7 +6415,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags, replaced with cyan.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6440,7 +6440,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6463,7 +6463,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6486,7 +6486,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6507,7 +6507,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6532,7 +6532,7 @@ export default { $description: "Text color for violet tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6555,7 +6555,7 @@ export default { $description: "Background color for violet tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6578,7 +6578,7 @@ export default { $description: "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6599,7 +6599,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags, replaced with cyan.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6624,7 +6624,7 @@ export default { $description: "Text color for yellow tags, replaced with orange for tritanopia visibility.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6647,7 +6647,7 @@ export default { $description: "Background color for yellow tags, replaced with orange for tritanopia visibility.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6670,7 +6670,7 @@ export default { $description: "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6691,7 +6691,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags, replaced with orange.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6716,7 +6716,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6739,7 +6739,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6762,7 +6762,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6783,7 +6783,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6810,7 +6810,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6833,7 +6833,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6856,7 +6856,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6868,7 +6868,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -6879,7 +6879,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6904,7 +6904,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6927,7 +6927,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6950,7 +6950,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -6973,7 +6973,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -6999,7 +6999,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7021,7 +7021,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7032,7 +7032,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.7)", $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7043,7 +7043,7 @@ export default { $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-border", + name: "cn-component-tooltip-border", attributes: { category: "component", type: "tooltip", @@ -7057,7 +7057,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7085,7 +7085,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7095,8 +7095,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7124,7 +7123,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7135,7 +7134,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7173,7 +7172,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7184,7 +7183,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7222,7 +7221,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7233,7 +7232,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7271,7 +7270,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7282,7 +7281,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7320,7 +7319,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7331,7 +7330,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7359,7 +7358,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7370,7 +7369,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7398,7 +7397,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7419,7 +7418,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7439,7 +7438,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7458,7 +7457,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7478,7 +7477,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7497,7 +7496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7517,7 +7516,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7536,7 +7535,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7556,7 +7555,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7575,7 +7574,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7595,7 +7594,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7614,7 +7613,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7634,7 +7633,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7653,7 +7652,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7673,7 +7672,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7692,7 +7691,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", @@ -7712,7 +7711,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7763,7 +7762,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7783,7 +7782,7 @@ export default { $type: "color", $value: "{colors.orange.100}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7801,7 +7800,7 @@ export default { $type: "color", $value: "{colors.pink.200}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7819,7 +7818,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7837,7 +7836,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7857,7 +7856,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7875,7 +7874,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7893,7 +7892,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7914,7 +7913,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7935,7 +7934,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.4)", filePath: "design-tokens/mode/dark/high-contrast-tritanopia.json", isSource: true, original: { @@ -7951,7 +7950,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7970,7 +7969,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -7991,7 +7990,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8010,7 +8009,7 @@ export default { $type: "color", $value: "{colors.blue.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8029,7 +8028,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8051,7 +8050,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8077,7 +8076,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8099,7 +8098,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8119,7 +8118,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8143,7 +8142,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8163,7 +8162,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8186,7 +8185,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8213,7 +8212,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8242,7 +8241,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8269,7 +8268,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8312,7 +8311,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8339,7 +8338,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8366,7 +8365,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8393,7 +8392,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8420,7 +8419,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8447,7 +8446,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8467,7 +8466,7 @@ export default { $type: "color", $value: "{colors.cyan.50}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8485,7 +8484,7 @@ export default { $type: "color", $value: "{colors.cyan.100}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8503,7 +8502,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8521,7 +8520,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8539,7 +8538,7 @@ export default { $type: "color", $value: "{colors.cyan.400}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8557,7 +8556,7 @@ export default { $type: "color", $value: "{colors.cyan.500}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8575,7 +8574,7 @@ export default { $type: "color", $value: "{colors.cyan.600}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8593,7 +8592,7 @@ export default { $type: "color", $value: "{colors.cyan.700}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8611,7 +8610,7 @@ export default { $type: "color", $value: "{colors.cyan.800}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8629,7 +8628,7 @@ export default { $type: "color", $value: "{colors.cyan.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8647,7 +8646,7 @@ export default { $type: "color", $value: "{colors.cyan.950}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8667,7 +8666,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8685,7 +8684,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8703,7 +8702,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8721,7 +8720,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8739,7 +8738,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8757,7 +8756,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8775,7 +8774,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8793,7 +8792,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8811,7 +8810,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8829,7 +8828,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8847,7 +8846,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-dark-protanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/dark-protanopia-gitness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-dark-protanopia-desktop-gitness.ts rename to packages/core-design-system/src/styles-esm/dark-protanopia-gitness.ts index fcc62a05a5..f6aa542796 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-protanopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/dark-protanopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:06:56 GMT + * Generated on Tue, 18 Mar 2025 06:44:02 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.2)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable blue text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.2)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-yellow-300) l c h / 0.2)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-yellow-500) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-purple-300) l c h / 0.2)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-purple-500) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1955,7 +1955,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1979,7 +1979,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2003,7 +2003,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2029,7 +2029,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2053,7 +2053,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2077,7 +2077,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2105,7 +2105,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2129,7 +2129,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2155,7 +2155,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2179,7 +2179,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2206,7 +2206,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable blue text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2227,7 +2227,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.1)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -2247,7 +2247,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2268,7 +2268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.2)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -2288,7 +2288,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2310,7 +2310,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -2330,7 +2330,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2352,7 +2352,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -2372,7 +2372,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2399,7 +2399,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2420,7 +2420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -2440,7 +2440,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2461,7 +2461,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -2481,7 +2481,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2503,7 +2503,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -2523,7 +2523,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2545,7 +2545,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -2565,7 +2565,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2592,7 +2592,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2613,7 +2613,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2638,7 +2638,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2664,7 +2664,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2686,7 +2686,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2710,7 +2710,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2732,7 +2732,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2754,7 +2754,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2774,7 +2774,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2794,7 +2794,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -2814,7 +2814,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2838,7 +2838,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2858,7 +2858,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2881,7 +2881,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2903,7 +2903,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2926,7 +2926,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -2946,7 +2946,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2982,7 +2982,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3002,7 +3002,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Blue background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -3022,7 +3022,7 @@ export default { $description: "Blue background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3042,7 +3042,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -3062,7 +3062,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3082,7 +3082,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -3102,7 +3102,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3124,7 +3124,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3146,7 +3146,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3166,7 +3166,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.12)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -3186,7 +3186,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3206,7 +3206,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -3226,7 +3226,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3246,7 +3246,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -3266,7 +3266,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3288,7 +3288,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3310,7 +3310,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3332,7 +3332,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3354,7 +3354,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3374,7 +3374,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -3394,7 +3394,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3414,7 +3414,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/dark/default-protanopia.json", isSource: true, @@ -3432,7 +3432,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3454,7 +3454,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3476,7 +3476,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3500,7 +3500,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3522,7 +3522,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3544,7 +3544,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3566,7 +3566,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3588,7 +3588,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3612,7 +3612,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3636,7 +3636,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3658,7 +3658,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3681,7 +3681,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3704,7 +3704,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3725,7 +3725,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3738,7 +3738,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Navigation container border.", filePath: "design-tokens/mode/dark/default-protanopia.json", isSource: true, @@ -3747,7 +3747,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3767,7 +3767,7 @@ export default { $value: "{background.1}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3792,7 +3792,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3818,7 +3818,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3847,7 +3847,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3872,7 +3872,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3886,7 +3886,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--cn-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -3898,7 +3898,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3924,7 +3924,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3950,7 +3950,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3978,7 +3978,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3991,7 +3991,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -4002,7 +4002,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4028,7 +4028,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4052,7 +4052,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4077,7 +4077,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -4097,7 +4097,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4123,7 +4123,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4134,7 +4134,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -4145,7 +4145,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4156,7 +4156,7 @@ export default { }, separator: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -4167,7 +4167,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4178,7 +4178,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/default-protanopia.json", isSource: true, @@ -4187,7 +4187,7 @@ export default { $value: "{state.hover}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4198,7 +4198,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/default-protanopia.json", isSource: true, @@ -4207,7 +4207,7 @@ export default { $value: "{state.selected}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4231,7 +4231,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4255,7 +4255,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4281,7 +4281,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4305,7 +4305,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4330,7 +4330,7 @@ export default { $value: "{text.1}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4351,7 +4351,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4376,7 +4376,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4397,7 +4397,7 @@ export default { $value: "{border.2}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4420,7 +4420,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4444,7 +4444,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4468,7 +4468,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4492,7 +4492,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4517,7 +4517,7 @@ export default { $value: "{text.1}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4538,7 +4538,7 @@ export default { $value: "{text.3}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4564,7 +4564,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4589,7 +4589,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4612,7 +4612,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4635,7 +4635,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4660,7 +4660,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4683,7 +4683,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4706,7 +4706,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4721,7 +4721,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -4732,7 +4732,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4758,7 +4758,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4783,7 +4783,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4806,7 +4806,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4831,7 +4831,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4854,7 +4854,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4879,7 +4879,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4902,7 +4902,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4928,7 +4928,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4950,7 +4950,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -4972,7 +4972,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -4994,7 +4994,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5016,7 +5016,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5038,7 +5038,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5060,7 +5060,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5085,7 +5085,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5108,7 +5108,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5133,7 +5133,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5156,7 +5156,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5183,7 +5183,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5206,7 +5206,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5229,7 +5229,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -5249,7 +5249,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5261,7 +5261,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -5272,7 +5272,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5297,7 +5297,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5323,7 +5323,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5334,7 +5334,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -5345,7 +5345,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5369,7 +5369,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5393,7 +5393,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5417,7 +5417,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5443,7 +5443,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5467,7 +5467,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5491,7 +5491,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5520,7 +5520,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5543,7 +5543,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5566,7 +5566,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5587,7 +5587,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5612,7 +5612,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5635,7 +5635,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5658,7 +5658,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5679,7 +5679,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5704,7 +5704,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5727,7 +5727,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5750,7 +5750,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5771,7 +5771,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5796,7 +5796,7 @@ export default { $description: "Text color for green tags. Adjusted for protanopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5819,7 +5819,7 @@ export default { $description: "Background color for green tags. Adjusted for protanopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5842,7 +5842,7 @@ export default { $description: "Subtle background variation for green tags. Adjusted for protanopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5863,7 +5863,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5888,7 +5888,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5911,7 +5911,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5934,7 +5934,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5955,7 +5955,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -5980,7 +5980,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6003,7 +6003,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6026,7 +6026,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6047,7 +6047,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6072,7 +6072,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6095,7 +6095,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6118,7 +6118,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6139,7 +6139,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6164,7 +6164,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6187,7 +6187,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6210,7 +6210,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6231,7 +6231,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6256,7 +6256,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6279,7 +6279,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6302,7 +6302,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6323,7 +6323,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6348,7 +6348,7 @@ export default { $description: "Text color for purple tags. Ensures readability while maintaining the purple color theme.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6371,7 +6371,7 @@ export default { $description: "Background color for purple tags. Creates a distinct surface with purple theme styling.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6394,7 +6394,7 @@ export default { $description: "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6415,7 +6415,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6440,7 +6440,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6463,7 +6463,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6486,7 +6486,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6507,7 +6507,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6532,7 +6532,7 @@ export default { $description: "Text color for violet tags. Ensures readability while maintaining the violet color theme.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6555,7 +6555,7 @@ export default { $description: "Background color for violet tags. Creates a distinct surface with violet theme styling.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6578,7 +6578,7 @@ export default { $description: "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6599,7 +6599,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6624,7 +6624,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6647,7 +6647,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6670,7 +6670,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6691,7 +6691,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6716,7 +6716,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6739,7 +6739,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6762,7 +6762,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6783,7 +6783,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6810,7 +6810,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6833,7 +6833,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6856,7 +6856,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6868,7 +6868,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -6879,7 +6879,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6904,7 +6904,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6927,7 +6927,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6950,7 +6950,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -6973,7 +6973,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -6999,7 +6999,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7021,7 +7021,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7032,7 +7032,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7043,7 +7043,7 @@ export default { $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-border", + name: "cn-component-tooltip-border", attributes: { category: "component", type: "tooltip", @@ -7057,7 +7057,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7085,7 +7085,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7095,8 +7095,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7124,7 +7123,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7135,7 +7134,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7173,7 +7172,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7184,7 +7183,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7222,7 +7221,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7233,7 +7232,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7271,7 +7270,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7282,7 +7281,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7320,7 +7319,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7331,7 +7330,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7359,7 +7358,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7370,7 +7369,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7398,7 +7397,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7419,7 +7418,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7439,7 +7438,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7458,7 +7457,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7478,7 +7477,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7497,7 +7496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7517,7 +7516,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7536,7 +7535,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7556,7 +7555,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7575,7 +7574,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7595,7 +7594,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7614,7 +7613,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7634,7 +7633,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7653,7 +7652,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7673,7 +7672,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7692,7 +7691,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7712,7 +7711,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7763,7 +7762,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7783,7 +7782,7 @@ export default { $type: "color", $value: "{colors.yellow.100}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7801,7 +7800,7 @@ export default { $type: "color", $value: "{colors.pink.200}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7819,7 +7818,7 @@ export default { $type: "color", $value: "{colors.purple.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7837,7 +7836,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7857,7 +7856,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7875,7 +7874,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7893,7 +7892,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7914,7 +7913,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7935,7 +7934,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.4)", filePath: "design-tokens/mode/dark/default-protanopia.json", isSource: true, original: { @@ -7951,7 +7950,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7970,7 +7969,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -7991,7 +7990,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8010,7 +8009,7 @@ export default { $type: "color", $value: "{colors.blue.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8029,7 +8028,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8051,7 +8050,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8077,7 +8076,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8099,7 +8098,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8119,7 +8118,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8143,7 +8142,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8163,7 +8162,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8186,7 +8185,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8213,7 +8212,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8242,7 +8241,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8269,7 +8268,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8312,7 +8311,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8339,7 +8338,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8366,7 +8365,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8393,7 +8392,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8420,7 +8419,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8447,7 +8446,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8467,7 +8466,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8485,7 +8484,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8503,7 +8502,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8521,7 +8520,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8539,7 +8538,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8557,7 +8556,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8575,7 +8574,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8593,7 +8592,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8611,7 +8610,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8629,7 +8628,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8647,7 +8646,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8667,7 +8666,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8685,7 +8684,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8703,7 +8702,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8721,7 +8720,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8739,7 +8738,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8757,7 +8756,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8775,7 +8774,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8793,7 +8792,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8811,7 +8810,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8829,7 +8828,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8847,7 +8846,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-dark-protanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/dark-protanopia-harness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-dark-protanopia-desktop-harness.ts rename to packages/core-design-system/src/styles-esm/dark-protanopia-harness.ts index 230961c761..0c877c7c70 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-protanopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/dark-protanopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:06:55 GMT + * Generated on Tue, 18 Mar 2025 06:44:01 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.2)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable blue text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.2)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-yellow-300) l c h / 0.2)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-yellow-500) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-purple-300) l c h / 0.2)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-purple-500) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1955,7 +1955,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1979,7 +1979,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2003,7 +2003,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2029,7 +2029,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2053,7 +2053,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2077,7 +2077,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2105,7 +2105,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2129,7 +2129,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2155,7 +2155,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2179,7 +2179,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2206,7 +2206,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable blue text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2227,7 +2227,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.1)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -2247,7 +2247,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2268,7 +2268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.2)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -2288,7 +2288,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2310,7 +2310,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -2330,7 +2330,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2352,7 +2352,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -2372,7 +2372,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2399,7 +2399,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2420,7 +2420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -2440,7 +2440,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2461,7 +2461,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -2481,7 +2481,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2503,7 +2503,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -2523,7 +2523,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2545,7 +2545,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -2565,7 +2565,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2592,7 +2592,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2613,7 +2613,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2638,7 +2638,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2664,7 +2664,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2686,7 +2686,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2710,7 +2710,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2732,7 +2732,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2754,7 +2754,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2774,7 +2774,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2794,7 +2794,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -2814,7 +2814,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2838,7 +2838,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2858,7 +2858,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2881,7 +2881,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2903,7 +2903,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2926,7 +2926,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -2946,7 +2946,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2982,7 +2982,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3002,7 +3002,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Blue background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -3022,7 +3022,7 @@ export default { $description: "Blue background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3042,7 +3042,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -3062,7 +3062,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3082,7 +3082,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -3102,7 +3102,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3124,7 +3124,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3146,7 +3146,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3166,7 +3166,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.12)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -3186,7 +3186,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3206,7 +3206,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -3226,7 +3226,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3246,7 +3246,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -3266,7 +3266,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3288,7 +3288,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3310,7 +3310,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3332,7 +3332,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3354,7 +3354,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3374,7 +3374,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -3394,7 +3394,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3414,7 +3414,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/dark/default-protanopia.json", isSource: true, @@ -3432,7 +3432,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3454,7 +3454,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3476,7 +3476,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3500,7 +3500,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3522,7 +3522,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3544,7 +3544,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3566,7 +3566,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3588,7 +3588,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3612,7 +3612,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3636,7 +3636,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3658,7 +3658,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3681,7 +3681,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3704,7 +3704,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3725,7 +3725,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3738,7 +3738,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Navigation container border.", filePath: "design-tokens/mode/dark/default-protanopia.json", isSource: true, @@ -3747,7 +3747,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3767,7 +3767,7 @@ export default { $value: "{background.1}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3792,7 +3792,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3818,7 +3818,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3847,7 +3847,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3872,7 +3872,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3886,7 +3886,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--cn-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -3898,7 +3898,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3924,7 +3924,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3950,7 +3950,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3978,7 +3978,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3991,7 +3991,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -4002,7 +4002,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4028,7 +4028,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4052,7 +4052,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4077,7 +4077,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -4097,7 +4097,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4123,7 +4123,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4134,7 +4134,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -4145,7 +4145,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4156,7 +4156,7 @@ export default { }, separator: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -4167,7 +4167,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4178,7 +4178,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/default-protanopia.json", isSource: true, @@ -4187,7 +4187,7 @@ export default { $value: "{state.hover}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4198,7 +4198,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/default-protanopia.json", isSource: true, @@ -4207,7 +4207,7 @@ export default { $value: "{state.selected}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4231,7 +4231,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4255,7 +4255,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4281,7 +4281,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4305,7 +4305,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4330,7 +4330,7 @@ export default { $value: "{text.1}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4351,7 +4351,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4376,7 +4376,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4397,7 +4397,7 @@ export default { $value: "{border.2}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4420,7 +4420,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4444,7 +4444,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4468,7 +4468,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4492,7 +4492,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4517,7 +4517,7 @@ export default { $value: "{text.1}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4538,7 +4538,7 @@ export default { $value: "{text.3}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4564,7 +4564,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4589,7 +4589,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4612,7 +4612,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4635,7 +4635,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4660,7 +4660,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4683,7 +4683,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4706,7 +4706,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4721,7 +4721,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -4732,7 +4732,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4758,7 +4758,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4783,7 +4783,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4806,7 +4806,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4831,7 +4831,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4854,7 +4854,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4879,7 +4879,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4902,7 +4902,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4928,7 +4928,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4950,7 +4950,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -4972,7 +4972,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -4994,7 +4994,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5016,7 +5016,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5038,7 +5038,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5060,7 +5060,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5085,7 +5085,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5108,7 +5108,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5133,7 +5133,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5156,7 +5156,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5183,7 +5183,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5206,7 +5206,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5229,7 +5229,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -5249,7 +5249,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5261,7 +5261,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -5272,7 +5272,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5297,7 +5297,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5323,7 +5323,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5334,7 +5334,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -5345,7 +5345,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5369,7 +5369,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5393,7 +5393,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5417,7 +5417,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5443,7 +5443,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5467,7 +5467,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5491,7 +5491,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5520,7 +5520,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5543,7 +5543,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5566,7 +5566,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5587,7 +5587,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5612,7 +5612,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5635,7 +5635,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5658,7 +5658,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5679,7 +5679,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5704,7 +5704,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5727,7 +5727,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5750,7 +5750,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5771,7 +5771,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5796,7 +5796,7 @@ export default { $description: "Text color for green tags. Adjusted for protanopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5819,7 +5819,7 @@ export default { $description: "Background color for green tags. Adjusted for protanopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5842,7 +5842,7 @@ export default { $description: "Subtle background variation for green tags. Adjusted for protanopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5863,7 +5863,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5888,7 +5888,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5911,7 +5911,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5934,7 +5934,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5955,7 +5955,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -5980,7 +5980,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6003,7 +6003,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6026,7 +6026,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6047,7 +6047,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6072,7 +6072,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6095,7 +6095,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6118,7 +6118,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6139,7 +6139,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6164,7 +6164,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6187,7 +6187,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6210,7 +6210,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6231,7 +6231,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6256,7 +6256,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6279,7 +6279,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6302,7 +6302,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6323,7 +6323,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6348,7 +6348,7 @@ export default { $description: "Text color for purple tags. Ensures readability while maintaining the purple color theme.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6371,7 +6371,7 @@ export default { $description: "Background color for purple tags. Creates a distinct surface with purple theme styling.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6394,7 +6394,7 @@ export default { $description: "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6415,7 +6415,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6440,7 +6440,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6463,7 +6463,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6486,7 +6486,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6507,7 +6507,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6532,7 +6532,7 @@ export default { $description: "Text color for violet tags. Ensures readability while maintaining the violet color theme.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6555,7 +6555,7 @@ export default { $description: "Background color for violet tags. Creates a distinct surface with violet theme styling.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6578,7 +6578,7 @@ export default { $description: "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6599,7 +6599,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6624,7 +6624,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6647,7 +6647,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6670,7 +6670,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6691,7 +6691,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6716,7 +6716,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6739,7 +6739,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6762,7 +6762,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6783,7 +6783,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6810,7 +6810,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6833,7 +6833,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6856,7 +6856,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6868,7 +6868,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -6879,7 +6879,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6904,7 +6904,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6927,7 +6927,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6950,7 +6950,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -6973,7 +6973,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -6999,7 +6999,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7021,7 +7021,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7032,7 +7032,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7043,7 +7043,7 @@ export default { $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-border", + name: "cn-component-tooltip-border", attributes: { category: "component", type: "tooltip", @@ -7057,7 +7057,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7085,7 +7085,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7095,8 +7095,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7124,7 +7123,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7135,7 +7134,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7173,7 +7172,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7184,7 +7183,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7222,7 +7221,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7233,7 +7232,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7271,7 +7270,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7282,7 +7281,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7320,7 +7319,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7331,7 +7330,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7359,7 +7358,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7370,7 +7369,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7398,7 +7397,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7419,7 +7418,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7439,7 +7438,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7458,7 +7457,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7478,7 +7477,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7497,7 +7496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7517,7 +7516,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7536,7 +7535,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7556,7 +7555,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7575,7 +7574,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7595,7 +7594,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7614,7 +7613,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7634,7 +7633,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7653,7 +7652,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7673,7 +7672,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7692,7 +7691,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/dark/default-protanopia.json", @@ -7712,7 +7711,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7763,7 +7762,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7783,7 +7782,7 @@ export default { $type: "color", $value: "{colors.yellow.100}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7801,7 +7800,7 @@ export default { $type: "color", $value: "{colors.pink.200}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7819,7 +7818,7 @@ export default { $type: "color", $value: "{colors.purple.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7837,7 +7836,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7857,7 +7856,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7875,7 +7874,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7893,7 +7892,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7914,7 +7913,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7935,7 +7934,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.4)", filePath: "design-tokens/mode/dark/default-protanopia.json", isSource: true, original: { @@ -7951,7 +7950,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7970,7 +7969,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -7991,7 +7990,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8010,7 +8009,7 @@ export default { $type: "color", $value: "{colors.blue.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8029,7 +8028,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8051,7 +8050,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8077,7 +8076,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8099,7 +8098,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8119,7 +8118,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8143,7 +8142,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8163,7 +8162,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8186,7 +8185,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8213,7 +8212,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8242,7 +8241,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8269,7 +8268,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8312,7 +8311,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8339,7 +8338,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8366,7 +8365,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8393,7 +8392,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8420,7 +8419,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8447,7 +8446,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8467,7 +8466,7 @@ export default { $type: "color", $value: "{colors.cyan.50}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8485,7 +8484,7 @@ export default { $type: "color", $value: "{colors.cyan.100}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8503,7 +8502,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8521,7 +8520,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8539,7 +8538,7 @@ export default { $type: "color", $value: "{colors.cyan.400}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8557,7 +8556,7 @@ export default { $type: "color", $value: "{colors.cyan.500}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8575,7 +8574,7 @@ export default { $type: "color", $value: "{colors.cyan.600}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8593,7 +8592,7 @@ export default { $type: "color", $value: "{colors.cyan.700}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8611,7 +8610,7 @@ export default { $type: "color", $value: "{colors.cyan.800}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8629,7 +8628,7 @@ export default { $type: "color", $value: "{colors.cyan.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8647,7 +8646,7 @@ export default { $type: "color", $value: "{colors.cyan.950}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8667,7 +8666,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8685,7 +8684,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8703,7 +8702,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8721,7 +8720,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8739,7 +8738,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8757,7 +8756,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8775,7 +8774,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8793,7 +8792,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8811,7 +8810,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8829,7 +8828,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8847,7 +8846,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-dark-tritanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/dark-tritanopia-gitness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-dark-tritanopia-desktop-gitness.ts rename to packages/core-design-system/src/styles-esm/dark-tritanopia-gitness.ts index 859fc11440..171e075dfe 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-tritanopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/dark-tritanopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:09 GMT + * Generated on Tue, 18 Mar 2025 06:44:10 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.2)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable cyan text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.2)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable orange text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.2)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1955,7 +1955,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1979,7 +1979,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2003,7 +2003,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2029,7 +2029,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2053,7 +2053,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2077,7 +2077,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2105,7 +2105,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2129,7 +2129,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2155,7 +2155,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2179,7 +2179,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2206,7 +2206,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable cyan text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2227,7 +2227,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -2247,7 +2247,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2268,7 +2268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.2)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -2288,7 +2288,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2310,7 +2310,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -2330,7 +2330,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2352,7 +2352,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -2372,7 +2372,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2399,7 +2399,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2420,7 +2420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -2440,7 +2440,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2461,7 +2461,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -2481,7 +2481,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2503,7 +2503,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -2523,7 +2523,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2545,7 +2545,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -2565,7 +2565,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2592,7 +2592,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2613,7 +2613,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2638,7 +2638,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2664,7 +2664,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2686,7 +2686,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2710,7 +2710,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2732,7 +2732,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2754,7 +2754,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2774,7 +2774,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2794,7 +2794,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -2814,7 +2814,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2838,7 +2838,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2858,7 +2858,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2881,7 +2881,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2903,7 +2903,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2926,7 +2926,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -2946,7 +2946,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2982,7 +2982,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3002,7 +3002,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.12)", $description: "Cyan background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -3022,7 +3022,7 @@ export default { $description: "Cyan background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3042,7 +3042,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -3062,7 +3062,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3082,7 +3082,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -3102,7 +3102,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3124,7 +3124,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3146,7 +3146,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3166,7 +3166,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.12)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -3186,7 +3186,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3206,7 +3206,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -3226,7 +3226,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3246,7 +3246,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -3266,7 +3266,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3288,7 +3288,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3310,7 +3310,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3332,7 +3332,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3354,7 +3354,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3374,7 +3374,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -3394,7 +3394,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3414,7 +3414,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/dark/default-tritanopia.json", isSource: true, @@ -3432,7 +3432,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3454,7 +3454,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3476,7 +3476,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3500,7 +3500,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3522,7 +3522,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3544,7 +3544,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3566,7 +3566,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3588,7 +3588,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3612,7 +3612,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3636,7 +3636,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3658,7 +3658,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3681,7 +3681,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3704,7 +3704,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3725,7 +3725,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3738,7 +3738,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Navigation container border.", filePath: "design-tokens/mode/dark/default-tritanopia.json", isSource: true, @@ -3747,7 +3747,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3767,7 +3767,7 @@ export default { $value: "{background.1}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3792,7 +3792,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3818,7 +3818,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3847,7 +3847,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3872,7 +3872,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3886,7 +3886,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--cn-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -3898,7 +3898,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3924,7 +3924,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3950,7 +3950,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3978,7 +3978,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3991,7 +3991,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -4002,7 +4002,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4028,7 +4028,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4052,7 +4052,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4077,7 +4077,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -4097,7 +4097,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4123,7 +4123,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4134,7 +4134,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -4145,7 +4145,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4156,7 +4156,7 @@ export default { }, separator: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -4167,7 +4167,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4178,7 +4178,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/default-tritanopia.json", isSource: true, @@ -4187,7 +4187,7 @@ export default { $value: "{state.hover}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4198,7 +4198,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/default-tritanopia.json", isSource: true, @@ -4207,7 +4207,7 @@ export default { $value: "{state.selected}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4231,7 +4231,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4255,7 +4255,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4281,7 +4281,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4305,7 +4305,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4330,7 +4330,7 @@ export default { $value: "{text.1}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4351,7 +4351,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4376,7 +4376,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4397,7 +4397,7 @@ export default { $value: "{border.2}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4420,7 +4420,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4444,7 +4444,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4468,7 +4468,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4492,7 +4492,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4517,7 +4517,7 @@ export default { $value: "{text.1}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4538,7 +4538,7 @@ export default { $value: "{text.3}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4564,7 +4564,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4589,7 +4589,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4612,7 +4612,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4635,7 +4635,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4660,7 +4660,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4683,7 +4683,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4706,7 +4706,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4721,7 +4721,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -4732,7 +4732,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4758,7 +4758,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4783,7 +4783,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4806,7 +4806,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4831,7 +4831,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4854,7 +4854,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4879,7 +4879,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4902,7 +4902,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4928,7 +4928,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4950,7 +4950,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -4972,7 +4972,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -4994,7 +4994,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5016,7 +5016,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5038,7 +5038,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5060,7 +5060,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5085,7 +5085,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5108,7 +5108,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5133,7 +5133,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5156,7 +5156,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5183,7 +5183,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5206,7 +5206,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5229,7 +5229,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -5249,7 +5249,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5261,7 +5261,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -5272,7 +5272,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5297,7 +5297,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5323,7 +5323,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5334,7 +5334,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -5345,7 +5345,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5369,7 +5369,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5393,7 +5393,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5417,7 +5417,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5443,7 +5443,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5467,7 +5467,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5491,7 +5491,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5520,7 +5520,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5543,7 +5543,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5566,7 +5566,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5587,7 +5587,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5612,7 +5612,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5635,7 +5635,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5658,7 +5658,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5679,7 +5679,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5704,7 +5704,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5727,7 +5727,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5750,7 +5750,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5771,7 +5771,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5796,7 +5796,7 @@ export default { $description: "Text color for green tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5819,7 +5819,7 @@ export default { $description: "Background color for green tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5842,7 +5842,7 @@ export default { $description: "Subtle background variation for green tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5863,7 +5863,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags, replaced with cyan.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5888,7 +5888,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5911,7 +5911,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5934,7 +5934,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5955,7 +5955,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -5980,7 +5980,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6003,7 +6003,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6026,7 +6026,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6047,7 +6047,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6072,7 +6072,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6095,7 +6095,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6118,7 +6118,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6139,7 +6139,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6164,7 +6164,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6187,7 +6187,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6210,7 +6210,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6231,7 +6231,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6256,7 +6256,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6279,7 +6279,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6302,7 +6302,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6323,7 +6323,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6348,7 +6348,7 @@ export default { $description: "Text color for purple tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6371,7 +6371,7 @@ export default { $description: "Background color for purple tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6394,7 +6394,7 @@ export default { $description: "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6415,7 +6415,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags, replaced with cyan.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6440,7 +6440,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6463,7 +6463,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6486,7 +6486,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6507,7 +6507,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6532,7 +6532,7 @@ export default { $description: "Text color for violet tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6555,7 +6555,7 @@ export default { $description: "Background color for violet tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6578,7 +6578,7 @@ export default { $description: "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6599,7 +6599,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags, replaced with cyan.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6624,7 +6624,7 @@ export default { $description: "Text color for yellow tags, replaced with orange for tritanopia visibility.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6647,7 +6647,7 @@ export default { $description: "Background color for yellow tags, replaced with orange for tritanopia visibility.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6670,7 +6670,7 @@ export default { $description: "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6691,7 +6691,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags, replaced with orange.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6716,7 +6716,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6739,7 +6739,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6762,7 +6762,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6783,7 +6783,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6810,7 +6810,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6833,7 +6833,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6856,7 +6856,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6868,7 +6868,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -6879,7 +6879,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6904,7 +6904,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6927,7 +6927,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6950,7 +6950,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -6973,7 +6973,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -6999,7 +6999,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7021,7 +7021,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7032,7 +7032,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7043,7 +7043,7 @@ export default { $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-border", + name: "cn-component-tooltip-border", attributes: { category: "component", type: "tooltip", @@ -7057,7 +7057,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7085,7 +7085,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7095,8 +7095,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7124,7 +7123,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7135,7 +7134,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7173,7 +7172,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7184,7 +7183,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7222,7 +7221,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7233,7 +7232,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7271,7 +7270,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7282,7 +7281,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7320,7 +7319,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7331,7 +7330,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7359,7 +7358,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7370,7 +7369,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7398,7 +7397,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7419,7 +7418,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7439,7 +7438,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7458,7 +7457,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7478,7 +7477,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7497,7 +7496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7517,7 +7516,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7536,7 +7535,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7556,7 +7555,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7575,7 +7574,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7595,7 +7594,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7614,7 +7613,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7634,7 +7633,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7653,7 +7652,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7673,7 +7672,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7692,7 +7691,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7712,7 +7711,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7763,7 +7762,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7783,7 +7782,7 @@ export default { $type: "color", $value: "{colors.yellow.100}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7801,7 +7800,7 @@ export default { $type: "color", $value: "{colors.pink.200}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7819,7 +7818,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7837,7 +7836,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7857,7 +7856,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7875,7 +7874,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7893,7 +7892,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7914,7 +7913,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7935,7 +7934,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.4)", filePath: "design-tokens/mode/dark/default-tritanopia.json", isSource: true, original: { @@ -7951,7 +7950,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7970,7 +7969,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -7991,7 +7990,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8010,7 +8009,7 @@ export default { $type: "color", $value: "{colors.blue.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8029,7 +8028,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8051,7 +8050,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8077,7 +8076,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8099,7 +8098,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8119,7 +8118,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8143,7 +8142,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8163,7 +8162,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8186,7 +8185,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8213,7 +8212,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8242,7 +8241,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8269,7 +8268,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8312,7 +8311,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8339,7 +8338,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8366,7 +8365,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8393,7 +8392,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8420,7 +8419,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8447,7 +8446,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8467,7 +8466,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8485,7 +8484,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8503,7 +8502,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8521,7 +8520,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8539,7 +8538,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8557,7 +8556,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8575,7 +8574,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8593,7 +8592,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8611,7 +8610,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8629,7 +8628,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8647,7 +8646,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8667,7 +8666,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8685,7 +8684,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8703,7 +8702,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8721,7 +8720,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8739,7 +8738,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8757,7 +8756,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8775,7 +8774,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8793,7 +8792,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8811,7 +8810,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8829,7 +8828,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8847,7 +8846,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-dark-tritanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/dark-tritanopia-harness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-dark-tritanopia-desktop-harness.ts rename to packages/core-design-system/src/styles-esm/dark-tritanopia-harness.ts index 1fb6d3287f..9b86fc5edb 100644 --- a/packages/core-design-system/src/styles-esm/source-dark-tritanopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/dark-tritanopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:07 GMT + * Generated on Tue, 18 Mar 2025 06:44:09 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.2)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable cyan text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.2)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable orange text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.2)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.2)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1955,7 +1955,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1979,7 +1979,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2003,7 +2003,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2029,7 +2029,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2053,7 +2053,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2077,7 +2077,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2105,7 +2105,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2129,7 +2129,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2155,7 +2155,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2179,7 +2179,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2206,7 +2206,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable cyan text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2227,7 +2227,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.1)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -2247,7 +2247,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2268,7 +2268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.2)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -2288,7 +2288,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2310,7 +2310,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -2330,7 +2330,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2352,7 +2352,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -2372,7 +2372,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2399,7 +2399,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2420,7 +2420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -2440,7 +2440,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2461,7 +2461,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.2)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -2481,7 +2481,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2503,7 +2503,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -2523,7 +2523,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2545,7 +2545,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -2565,7 +2565,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2592,7 +2592,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2613,7 +2613,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2638,7 +2638,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2664,7 +2664,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2686,7 +2686,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2710,7 +2710,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2732,7 +2732,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2754,7 +2754,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2774,7 +2774,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2794,7 +2794,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -2814,7 +2814,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2838,7 +2838,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2858,7 +2858,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2881,7 +2881,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2903,7 +2903,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2926,7 +2926,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -2946,7 +2946,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2982,7 +2982,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3002,7 +3002,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.12)", $description: "Cyan background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -3022,7 +3022,7 @@ export default { $description: "Cyan background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3042,7 +3042,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -3062,7 +3062,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3082,7 +3082,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -3102,7 +3102,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3124,7 +3124,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3146,7 +3146,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3166,7 +3166,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.12)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -3186,7 +3186,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3206,7 +3206,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -3226,7 +3226,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3246,7 +3246,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -3266,7 +3266,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3288,7 +3288,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3310,7 +3310,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3332,7 +3332,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3354,7 +3354,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3374,7 +3374,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -3394,7 +3394,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3414,7 +3414,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/dark/default-tritanopia.json", isSource: true, @@ -3432,7 +3432,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3454,7 +3454,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3476,7 +3476,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3500,7 +3500,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3522,7 +3522,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3544,7 +3544,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3566,7 +3566,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3588,7 +3588,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3612,7 +3612,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3636,7 +3636,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3658,7 +3658,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3681,7 +3681,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3704,7 +3704,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3725,7 +3725,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3738,7 +3738,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Navigation container border.", filePath: "design-tokens/mode/dark/default-tritanopia.json", isSource: true, @@ -3747,7 +3747,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3767,7 +3767,7 @@ export default { $value: "{background.1}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3792,7 +3792,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3818,7 +3818,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3847,7 +3847,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3872,7 +3872,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3886,7 +3886,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--canary-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(74.82% 51.93 49.87) 0%, lch(from var(--cn-colors-chrome-800) l c h / 0.4) 30%, lch(74.82% 51.93 49.87) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -3898,7 +3898,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3924,7 +3924,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3950,7 +3950,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3978,7 +3978,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3991,7 +3991,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -4002,7 +4002,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4028,7 +4028,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4052,7 +4052,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4077,7 +4077,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -4097,7 +4097,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4123,7 +4123,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4134,7 +4134,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -4145,7 +4145,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4156,7 +4156,7 @@ export default { }, separator: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -4167,7 +4167,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4178,7 +4178,7 @@ export default { }, hover: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.08)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.08)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/dark/default-tritanopia.json", isSource: true, @@ -4187,7 +4187,7 @@ export default { $value: "{state.hover}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4198,7 +4198,7 @@ export default { }, selected: { $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/dark/default-tritanopia.json", isSource: true, @@ -4207,7 +4207,7 @@ export default { $value: "{state.selected}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4231,7 +4231,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4255,7 +4255,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4281,7 +4281,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4305,7 +4305,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4330,7 +4330,7 @@ export default { $value: "{text.1}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4351,7 +4351,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4376,7 +4376,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4397,7 +4397,7 @@ export default { $value: "{border.2}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4420,7 +4420,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4444,7 +4444,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4468,7 +4468,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4492,7 +4492,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4517,7 +4517,7 @@ export default { $value: "{text.1}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4538,7 +4538,7 @@ export default { $value: "{text.3}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4564,7 +4564,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4589,7 +4589,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4612,7 +4612,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4635,7 +4635,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4660,7 +4660,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4683,7 +4683,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4706,7 +4706,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4721,7 +4721,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -4732,7 +4732,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4758,7 +4758,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4783,7 +4783,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4806,7 +4806,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4831,7 +4831,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4854,7 +4854,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4879,7 +4879,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4902,7 +4902,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4928,7 +4928,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4950,7 +4950,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -4972,7 +4972,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -4994,7 +4994,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5016,7 +5016,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5038,7 +5038,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5060,7 +5060,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5085,7 +5085,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5108,7 +5108,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5133,7 +5133,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5156,7 +5156,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5183,7 +5183,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5206,7 +5206,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5229,7 +5229,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -5249,7 +5249,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5261,7 +5261,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -5272,7 +5272,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5297,7 +5297,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5323,7 +5323,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5334,7 +5334,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -5345,7 +5345,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5369,7 +5369,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5393,7 +5393,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5417,7 +5417,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5443,7 +5443,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5467,7 +5467,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5491,7 +5491,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5520,7 +5520,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5543,7 +5543,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5566,7 +5566,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5587,7 +5587,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5612,7 +5612,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5635,7 +5635,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5658,7 +5658,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5679,7 +5679,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5704,7 +5704,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5727,7 +5727,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5750,7 +5750,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5771,7 +5771,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5796,7 +5796,7 @@ export default { $description: "Text color for green tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5819,7 +5819,7 @@ export default { $description: "Background color for green tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5842,7 +5842,7 @@ export default { $description: "Subtle background variation for green tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5863,7 +5863,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags, replaced with cyan.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5888,7 +5888,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5911,7 +5911,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5934,7 +5934,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5955,7 +5955,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -5980,7 +5980,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6003,7 +6003,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6026,7 +6026,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6047,7 +6047,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6072,7 +6072,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6095,7 +6095,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6118,7 +6118,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6139,7 +6139,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6164,7 +6164,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6187,7 +6187,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6210,7 +6210,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6231,7 +6231,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6256,7 +6256,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6279,7 +6279,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6302,7 +6302,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6323,7 +6323,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6348,7 +6348,7 @@ export default { $description: "Text color for purple tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6371,7 +6371,7 @@ export default { $description: "Background color for purple tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6394,7 +6394,7 @@ export default { $description: "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6415,7 +6415,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags, replaced with cyan.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6440,7 +6440,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6463,7 +6463,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6486,7 +6486,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6507,7 +6507,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6532,7 +6532,7 @@ export default { $description: "Text color for violet tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6555,7 +6555,7 @@ export default { $description: "Background color for violet tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6578,7 +6578,7 @@ export default { $description: "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6599,7 +6599,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags, replaced with cyan.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6624,7 +6624,7 @@ export default { $description: "Text color for yellow tags, replaced with orange for tritanopia visibility.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6647,7 +6647,7 @@ export default { $description: "Background color for yellow tags, replaced with orange for tritanopia visibility.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6670,7 +6670,7 @@ export default { $description: "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6691,7 +6691,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags, replaced with orange.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6716,7 +6716,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6739,7 +6739,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6762,7 +6762,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6783,7 +6783,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6810,7 +6810,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6833,7 +6833,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6856,7 +6856,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6868,7 +6868,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -6879,7 +6879,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6904,7 +6904,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6927,7 +6927,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6950,7 +6950,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -6973,7 +6973,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -6999,7 +6999,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7021,7 +7021,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7032,7 +7032,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-850) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-850) l c h / 0.7)", $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7043,7 +7043,7 @@ export default { $description: "Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-border", + name: "cn-component-tooltip-border", attributes: { category: "component", type: "tooltip", @@ -7057,7 +7057,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7085,7 +7085,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7095,8 +7095,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7124,7 +7123,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7135,7 +7134,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-pure-black) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7173,7 +7172,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7184,7 +7183,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7222,7 +7221,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7233,7 +7232,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7271,7 +7270,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7282,7 +7281,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-pure-black) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-pure-black) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7320,7 +7319,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7331,7 +7330,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-pure-black) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7359,7 +7358,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7370,7 +7369,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-pure-white) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7398,7 +7397,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7419,7 +7418,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7439,7 +7438,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7458,7 +7457,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7478,7 +7477,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7497,7 +7496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7517,7 +7516,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7536,7 +7535,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7556,7 +7555,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7575,7 +7574,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7595,7 +7594,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7614,7 +7613,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.5)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7634,7 +7633,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7653,7 +7652,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-black) l c h / 0.6)", + $value: "lch(from var(--cn-colors-pure-black) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7673,7 +7672,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7692,7 +7691,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-pure-white) l c h / 0.1)", + $value: "lch(from var(--cn-colors-pure-white) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/dark/default-tritanopia.json", @@ -7712,7 +7711,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7763,7 +7762,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7783,7 +7782,7 @@ export default { $type: "color", $value: "{colors.yellow.100}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7801,7 +7800,7 @@ export default { $type: "color", $value: "{colors.pink.200}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7819,7 +7818,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7837,7 +7836,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7857,7 +7856,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7875,7 +7874,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7893,7 +7892,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7914,7 +7913,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7935,7 +7934,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-800) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-800) l c h / 0.4)", filePath: "design-tokens/mode/dark/default-tritanopia.json", isSource: true, original: { @@ -7951,7 +7950,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7970,7 +7969,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -7991,7 +7990,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8010,7 +8009,7 @@ export default { $type: "color", $value: "{colors.blue.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8029,7 +8028,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8051,7 +8050,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8077,7 +8076,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8099,7 +8098,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8119,7 +8118,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8143,7 +8142,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8163,7 +8162,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8186,7 +8185,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8213,7 +8212,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8242,7 +8241,7 @@ export default { $type: "color", $value: "{colors.chrome.800}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8269,7 +8268,7 @@ export default { $type: "color", $value: "{colors.chrome.850}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8312,7 +8311,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8339,7 +8338,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8366,7 +8365,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8393,7 +8392,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8420,7 +8419,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8447,7 +8446,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8467,7 +8466,7 @@ export default { $type: "color", $value: "{colors.cyan.50}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8485,7 +8484,7 @@ export default { $type: "color", $value: "{colors.cyan.100}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8503,7 +8502,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8521,7 +8520,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8539,7 +8538,7 @@ export default { $type: "color", $value: "{colors.cyan.400}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8557,7 +8556,7 @@ export default { $type: "color", $value: "{colors.cyan.500}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8575,7 +8574,7 @@ export default { $type: "color", $value: "{colors.cyan.600}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8593,7 +8592,7 @@ export default { $type: "color", $value: "{colors.cyan.700}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8611,7 +8610,7 @@ export default { $type: "color", $value: "{colors.cyan.800}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8629,7 +8628,7 @@ export default { $type: "color", $value: "{colors.cyan.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8647,7 +8646,7 @@ export default { $type: "color", $value: "{colors.cyan.950}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8667,7 +8666,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8685,7 +8684,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8703,7 +8702,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8721,7 +8720,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8739,7 +8738,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8757,7 +8756,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8775,7 +8774,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8793,7 +8792,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8811,7 +8810,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8829,7 +8828,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8847,7 +8846,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/index.ts b/packages/core-design-system/src/styles-esm/index.ts index 3240e9c6fd..02ca60d26e 100644 --- a/packages/core-design-system/src/styles-esm/index.ts +++ b/packages/core-design-system/src/styles-esm/index.ts @@ -1,59 +1,59 @@ /** * Harness Design System * DO NOT UPDATE IT MANUALLY - * Generated on Mon, 17 Mar 2025 12:07:32 GMT + * Generated on Tue, 18 Mar 2025 06:44:26 GMT */ /* Theme files - Combined */ export const designSystemThemeMap = { -'source-dark-desktop-gitness': 'source-dark-desktop-gitness', -'source-dark-desktop-harness': 'source-dark-desktop-harness', -'source-dark-deuteranopia-desktop-gitness': 'source-dark-deuteranopia-desktop-gitness', -'source-dark-deuteranopia-desktop-harness': 'source-dark-deuteranopia-desktop-harness', -'source-dark-dimmer-desktop-gitness': 'source-dark-dimmer-desktop-gitness', -'source-dark-dimmer-desktop-harness': 'source-dark-dimmer-desktop-harness', -'source-dark-dimmer-deuteranopia-desktop-gitness': 'source-dark-dimmer-deuteranopia-desktop-gitness', -'source-dark-dimmer-deuteranopia-desktop-harness': 'source-dark-dimmer-deuteranopia-desktop-harness', -'source-dark-dimmer-protanopia-desktop-gitness': 'source-dark-dimmer-protanopia-desktop-gitness', -'source-dark-dimmer-protanopia-desktop-harness': 'source-dark-dimmer-protanopia-desktop-harness', -'source-dark-dimmer-tritanopia-desktop-gitness': 'source-dark-dimmer-tritanopia-desktop-gitness', -'source-dark-dimmer-tritanopia-desktop-harness': 'source-dark-dimmer-tritanopia-desktop-harness', -'source-dark-high-contrast-desktop-gitness': 'source-dark-high-contrast-desktop-gitness', -'source-dark-high-contrast-desktop-harness': 'source-dark-high-contrast-desktop-harness', -'source-dark-high-contrast-deuteranopia-desktop-gitness': 'source-dark-high-contrast-deuteranopia-desktop-gitness', -'source-dark-high-contrast-deuteranopia-desktop-harness': 'source-dark-high-contrast-deuteranopia-desktop-harness', -'source-dark-high-contrast-protanopia-desktop-gitness': 'source-dark-high-contrast-protanopia-desktop-gitness', -'source-dark-high-contrast-protanopia-desktop-harness': 'source-dark-high-contrast-protanopia-desktop-harness', -'source-dark-high-contrast-tritanopia-desktop-gitness': 'source-dark-high-contrast-tritanopia-desktop-gitness', -'source-dark-high-contrast-tritanopia-desktop-harness': 'source-dark-high-contrast-tritanopia-desktop-harness', -'source-dark-protanopia-desktop-gitness': 'source-dark-protanopia-desktop-gitness', -'source-dark-protanopia-desktop-harness': 'source-dark-protanopia-desktop-harness', -'source-dark-tritanopia-desktop-gitness': 'source-dark-tritanopia-desktop-gitness', -'source-dark-tritanopia-desktop-harness': 'source-dark-tritanopia-desktop-harness', -'source-light-desktop-gitness': 'source-light-desktop-gitness', -'source-light-desktop-harness': 'source-light-desktop-harness', -'source-light-deuteranopia-desktop-gitness': 'source-light-deuteranopia-desktop-gitness', -'source-light-deuteranopia-desktop-harness': 'source-light-deuteranopia-desktop-harness', -'source-light-dimmer-desktop-gitness': 'source-light-dimmer-desktop-gitness', -'source-light-dimmer-desktop-harness': 'source-light-dimmer-desktop-harness', -'source-light-dimmer-deuteranopia-desktop-gitness': 'source-light-dimmer-deuteranopia-desktop-gitness', -'source-light-dimmer-deuteranopia-desktop-harness': 'source-light-dimmer-deuteranopia-desktop-harness', -'source-light-dimmer-protanopia-desktop-gitness': 'source-light-dimmer-protanopia-desktop-gitness', -'source-light-dimmer-protanopia-desktop-harness': 'source-light-dimmer-protanopia-desktop-harness', -'source-light-dimmer-tritanopia-desktop-gitness': 'source-light-dimmer-tritanopia-desktop-gitness', -'source-light-dimmer-tritanopia-desktop-harness': 'source-light-dimmer-tritanopia-desktop-harness', -'source-light-high-contrast-desktop-gitness': 'source-light-high-contrast-desktop-gitness', -'source-light-high-contrast-desktop-harness': 'source-light-high-contrast-desktop-harness', -'source-light-high-contrast-deuteranopia-desktop-gitness': 'source-light-high-contrast-deuteranopia-desktop-gitness', -'source-light-high-contrast-deuteranopia-desktop-harness': 'source-light-high-contrast-deuteranopia-desktop-harness', -'source-light-high-contrast-protanopia-desktop-gitness': 'source-light-high-contrast-protanopia-desktop-gitness', -'source-light-high-contrast-protanopia-desktop-harness': 'source-light-high-contrast-protanopia-desktop-harness', -'source-light-high-contrast-tritanopia-desktop-gitness': 'source-light-high-contrast-tritanopia-desktop-gitness', -'source-light-high-contrast-tritanopia-desktop-harness': 'source-light-high-contrast-tritanopia-desktop-harness', -'source-light-protanopia-desktop-gitness': 'source-light-protanopia-desktop-gitness', -'source-light-protanopia-desktop-harness': 'source-light-protanopia-desktop-harness', -'source-light-tritanopia-desktop-gitness': 'source-light-tritanopia-desktop-gitness', -'source-light-tritanopia-desktop-harness': 'source-light-tritanopia-desktop-harness', +'dark-deuteranopia-gitness': 'dark-deuteranopia-gitness', +'dark-deuteranopia-harness': 'dark-deuteranopia-harness', +'dark-dimmer-deuteranopia-gitness': 'dark-dimmer-deuteranopia-gitness', +'dark-dimmer-deuteranopia-harness': 'dark-dimmer-deuteranopia-harness', +'dark-dimmer-gitness': 'dark-dimmer-gitness', +'dark-dimmer-harness': 'dark-dimmer-harness', +'dark-dimmer-protanopia-gitness': 'dark-dimmer-protanopia-gitness', +'dark-dimmer-protanopia-harness': 'dark-dimmer-protanopia-harness', +'dark-dimmer-tritanopia-gitness': 'dark-dimmer-tritanopia-gitness', +'dark-dimmer-tritanopia-harness': 'dark-dimmer-tritanopia-harness', +'dark-gitness': 'dark-gitness', +'dark-harness': 'dark-harness', +'dark-high-contrast-deuteranopia-gitness': 'dark-high-contrast-deuteranopia-gitness', +'dark-high-contrast-deuteranopia-harness': 'dark-high-contrast-deuteranopia-harness', +'dark-high-contrast-gitness': 'dark-high-contrast-gitness', +'dark-high-contrast-harness': 'dark-high-contrast-harness', +'dark-high-contrast-protanopia-gitness': 'dark-high-contrast-protanopia-gitness', +'dark-high-contrast-protanopia-harness': 'dark-high-contrast-protanopia-harness', +'dark-high-contrast-tritanopia-gitness': 'dark-high-contrast-tritanopia-gitness', +'dark-high-contrast-tritanopia-harness': 'dark-high-contrast-tritanopia-harness', +'dark-protanopia-gitness': 'dark-protanopia-gitness', +'dark-protanopia-harness': 'dark-protanopia-harness', +'dark-tritanopia-gitness': 'dark-tritanopia-gitness', +'dark-tritanopia-harness': 'dark-tritanopia-harness', +'light-deuteranopia-gitness': 'light-deuteranopia-gitness', +'light-deuteranopia-harness': 'light-deuteranopia-harness', +'light-dimmer-deuteranopia-gitness': 'light-dimmer-deuteranopia-gitness', +'light-dimmer-deuteranopia-harness': 'light-dimmer-deuteranopia-harness', +'light-dimmer-gitness': 'light-dimmer-gitness', +'light-dimmer-harness': 'light-dimmer-harness', +'light-dimmer-protanopia-gitness': 'light-dimmer-protanopia-gitness', +'light-dimmer-protanopia-harness': 'light-dimmer-protanopia-harness', +'light-dimmer-tritanopia-gitness': 'light-dimmer-tritanopia-gitness', +'light-dimmer-tritanopia-harness': 'light-dimmer-tritanopia-harness', +'light-gitness': 'light-gitness', +'light-harness': 'light-harness', +'light-high-contrast-deuteranopia-gitness': 'light-high-contrast-deuteranopia-gitness', +'light-high-contrast-deuteranopia-harness': 'light-high-contrast-deuteranopia-harness', +'light-high-contrast-gitness': 'light-high-contrast-gitness', +'light-high-contrast-harness': 'light-high-contrast-harness', +'light-high-contrast-protanopia-gitness': 'light-high-contrast-protanopia-gitness', +'light-high-contrast-protanopia-harness': 'light-high-contrast-protanopia-harness', +'light-high-contrast-tritanopia-gitness': 'light-high-contrast-tritanopia-gitness', +'light-high-contrast-tritanopia-harness': 'light-high-contrast-tritanopia-harness', +'light-protanopia-gitness': 'light-protanopia-gitness', +'light-protanopia-harness': 'light-protanopia-harness', +'light-tritanopia-gitness': 'light-tritanopia-gitness', +'light-tritanopia-harness': 'light-tritanopia-harness', } /* Core tokens */ @@ -63,53 +63,53 @@ export { default as components } from './components'; export { default as core } from './core'; /* Theme files - Dark */ -export { default as sourceDarkDesktopGitness } from './source-dark-desktop-gitness'; -export { default as sourceDarkDesktopHarness } from './source-dark-desktop-harness'; -export { default as sourceDarkDeuteranopiaDesktopGitness } from './source-dark-deuteranopia-desktop-gitness'; -export { default as sourceDarkDeuteranopiaDesktopHarness } from './source-dark-deuteranopia-desktop-harness'; -export { default as sourceDarkDimmerDesktopGitness } from './source-dark-dimmer-desktop-gitness'; -export { default as sourceDarkDimmerDesktopHarness } from './source-dark-dimmer-desktop-harness'; -export { default as sourceDarkDimmerDeuteranopiaDesktopGitness } from './source-dark-dimmer-deuteranopia-desktop-gitness'; -export { default as sourceDarkDimmerDeuteranopiaDesktopHarness } from './source-dark-dimmer-deuteranopia-desktop-harness'; -export { default as sourceDarkDimmerProtanopiaDesktopGitness } from './source-dark-dimmer-protanopia-desktop-gitness'; -export { default as sourceDarkDimmerProtanopiaDesktopHarness } from './source-dark-dimmer-protanopia-desktop-harness'; -export { default as sourceDarkDimmerTritanopiaDesktopGitness } from './source-dark-dimmer-tritanopia-desktop-gitness'; -export { default as sourceDarkDimmerTritanopiaDesktopHarness } from './source-dark-dimmer-tritanopia-desktop-harness'; -export { default as sourceDarkHighContrastDesktopGitness } from './source-dark-high-contrast-desktop-gitness'; -export { default as sourceDarkHighContrastDesktopHarness } from './source-dark-high-contrast-desktop-harness'; -export { default as sourceDarkHighContrastDeuteranopiaDesktopGitness } from './source-dark-high-contrast-deuteranopia-desktop-gitness'; -export { default as sourceDarkHighContrastDeuteranopiaDesktopHarness } from './source-dark-high-contrast-deuteranopia-desktop-harness'; -export { default as sourceDarkHighContrastProtanopiaDesktopGitness } from './source-dark-high-contrast-protanopia-desktop-gitness'; -export { default as sourceDarkHighContrastProtanopiaDesktopHarness } from './source-dark-high-contrast-protanopia-desktop-harness'; -export { default as sourceDarkHighContrastTritanopiaDesktopGitness } from './source-dark-high-contrast-tritanopia-desktop-gitness'; -export { default as sourceDarkHighContrastTritanopiaDesktopHarness } from './source-dark-high-contrast-tritanopia-desktop-harness'; -export { default as sourceDarkProtanopiaDesktopGitness } from './source-dark-protanopia-desktop-gitness'; -export { default as sourceDarkProtanopiaDesktopHarness } from './source-dark-protanopia-desktop-harness'; -export { default as sourceDarkTritanopiaDesktopGitness } from './source-dark-tritanopia-desktop-gitness'; -export { default as sourceDarkTritanopiaDesktopHarness } from './source-dark-tritanopia-desktop-harness'; +export { default as darkDeuteranopiaGitness } from './dark-deuteranopia-gitness'; +export { default as darkDeuteranopiaHarness } from './dark-deuteranopia-harness'; +export { default as darkDimmerDeuteranopiaGitness } from './dark-dimmer-deuteranopia-gitness'; +export { default as darkDimmerDeuteranopiaHarness } from './dark-dimmer-deuteranopia-harness'; +export { default as darkDimmerGitness } from './dark-dimmer-gitness'; +export { default as darkDimmerHarness } from './dark-dimmer-harness'; +export { default as darkDimmerProtanopiaGitness } from './dark-dimmer-protanopia-gitness'; +export { default as darkDimmerProtanopiaHarness } from './dark-dimmer-protanopia-harness'; +export { default as darkDimmerTritanopiaGitness } from './dark-dimmer-tritanopia-gitness'; +export { default as darkDimmerTritanopiaHarness } from './dark-dimmer-tritanopia-harness'; +export { default as darkGitness } from './dark-gitness'; +export { default as darkHarness } from './dark-harness'; +export { default as darkHighContrastDeuteranopiaGitness } from './dark-high-contrast-deuteranopia-gitness'; +export { default as darkHighContrastDeuteranopiaHarness } from './dark-high-contrast-deuteranopia-harness'; +export { default as darkHighContrastGitness } from './dark-high-contrast-gitness'; +export { default as darkHighContrastHarness } from './dark-high-contrast-harness'; +export { default as darkHighContrastProtanopiaGitness } from './dark-high-contrast-protanopia-gitness'; +export { default as darkHighContrastProtanopiaHarness } from './dark-high-contrast-protanopia-harness'; +export { default as darkHighContrastTritanopiaGitness } from './dark-high-contrast-tritanopia-gitness'; +export { default as darkHighContrastTritanopiaHarness } from './dark-high-contrast-tritanopia-harness'; +export { default as darkProtanopiaGitness } from './dark-protanopia-gitness'; +export { default as darkProtanopiaHarness } from './dark-protanopia-harness'; +export { default as darkTritanopiaGitness } from './dark-tritanopia-gitness'; +export { default as darkTritanopiaHarness } from './dark-tritanopia-harness'; /* Theme files - Light */ -export { default as sourceLightDesktopGitness } from './source-light-desktop-gitness'; -export { default as sourceLightDesktopHarness } from './source-light-desktop-harness'; -export { default as sourceLightDeuteranopiaDesktopGitness } from './source-light-deuteranopia-desktop-gitness'; -export { default as sourceLightDeuteranopiaDesktopHarness } from './source-light-deuteranopia-desktop-harness'; -export { default as sourceLightDimmerDesktopGitness } from './source-light-dimmer-desktop-gitness'; -export { default as sourceLightDimmerDesktopHarness } from './source-light-dimmer-desktop-harness'; -export { default as sourceLightDimmerDeuteranopiaDesktopGitness } from './source-light-dimmer-deuteranopia-desktop-gitness'; -export { default as sourceLightDimmerDeuteranopiaDesktopHarness } from './source-light-dimmer-deuteranopia-desktop-harness'; -export { default as sourceLightDimmerProtanopiaDesktopGitness } from './source-light-dimmer-protanopia-desktop-gitness'; -export { default as sourceLightDimmerProtanopiaDesktopHarness } from './source-light-dimmer-protanopia-desktop-harness'; -export { default as sourceLightDimmerTritanopiaDesktopGitness } from './source-light-dimmer-tritanopia-desktop-gitness'; -export { default as sourceLightDimmerTritanopiaDesktopHarness } from './source-light-dimmer-tritanopia-desktop-harness'; -export { default as sourceLightHighContrastDesktopGitness } from './source-light-high-contrast-desktop-gitness'; -export { default as sourceLightHighContrastDesktopHarness } from './source-light-high-contrast-desktop-harness'; -export { default as sourceLightHighContrastDeuteranopiaDesktopGitness } from './source-light-high-contrast-deuteranopia-desktop-gitness'; -export { default as sourceLightHighContrastDeuteranopiaDesktopHarness } from './source-light-high-contrast-deuteranopia-desktop-harness'; -export { default as sourceLightHighContrastProtanopiaDesktopGitness } from './source-light-high-contrast-protanopia-desktop-gitness'; -export { default as sourceLightHighContrastProtanopiaDesktopHarness } from './source-light-high-contrast-protanopia-desktop-harness'; -export { default as sourceLightHighContrastTritanopiaDesktopGitness } from './source-light-high-contrast-tritanopia-desktop-gitness'; -export { default as sourceLightHighContrastTritanopiaDesktopHarness } from './source-light-high-contrast-tritanopia-desktop-harness'; -export { default as sourceLightProtanopiaDesktopGitness } from './source-light-protanopia-desktop-gitness'; -export { default as sourceLightProtanopiaDesktopHarness } from './source-light-protanopia-desktop-harness'; -export { default as sourceLightTritanopiaDesktopGitness } from './source-light-tritanopia-desktop-gitness'; -export { default as sourceLightTritanopiaDesktopHarness } from './source-light-tritanopia-desktop-harness';; +export { default as lightDeuteranopiaGitness } from './light-deuteranopia-gitness'; +export { default as lightDeuteranopiaHarness } from './light-deuteranopia-harness'; +export { default as lightDimmerDeuteranopiaGitness } from './light-dimmer-deuteranopia-gitness'; +export { default as lightDimmerDeuteranopiaHarness } from './light-dimmer-deuteranopia-harness'; +export { default as lightDimmerGitness } from './light-dimmer-gitness'; +export { default as lightDimmerHarness } from './light-dimmer-harness'; +export { default as lightDimmerProtanopiaGitness } from './light-dimmer-protanopia-gitness'; +export { default as lightDimmerProtanopiaHarness } from './light-dimmer-protanopia-harness'; +export { default as lightDimmerTritanopiaGitness } from './light-dimmer-tritanopia-gitness'; +export { default as lightDimmerTritanopiaHarness } from './light-dimmer-tritanopia-harness'; +export { default as lightGitness } from './light-gitness'; +export { default as lightHarness } from './light-harness'; +export { default as lightHighContrastDeuteranopiaGitness } from './light-high-contrast-deuteranopia-gitness'; +export { default as lightHighContrastDeuteranopiaHarness } from './light-high-contrast-deuteranopia-harness'; +export { default as lightHighContrastGitness } from './light-high-contrast-gitness'; +export { default as lightHighContrastHarness } from './light-high-contrast-harness'; +export { default as lightHighContrastProtanopiaGitness } from './light-high-contrast-protanopia-gitness'; +export { default as lightHighContrastProtanopiaHarness } from './light-high-contrast-protanopia-harness'; +export { default as lightHighContrastTritanopiaGitness } from './light-high-contrast-tritanopia-gitness'; +export { default as lightHighContrastTritanopiaHarness } from './light-high-contrast-tritanopia-harness'; +export { default as lightProtanopiaGitness } from './light-protanopia-gitness'; +export { default as lightProtanopiaHarness } from './light-protanopia-harness'; +export { default as lightTritanopiaGitness } from './light-tritanopia-gitness'; +export { default as lightTritanopiaHarness } from './light-tritanopia-harness';; diff --git a/packages/core-design-system/src/styles-esm/source-light-deuteranopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/light-deuteranopia-gitness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-light-deuteranopia-desktop-gitness.ts rename to packages/core-design-system/src/styles-esm/light-deuteranopia-gitness.ts index f94b1d88e7..cbc230a898 100644 --- a/packages/core-design-system/src/styles-esm/source-light-deuteranopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/light-deuteranopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:24 GMT + * Generated on Tue, 18 Mar 2025 06:44:20 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.15)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.2)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast orange text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-600) l c h / 0.2)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable cyan text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.2)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.2)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-yellow-400) l c h / 0.2)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-yellow-200) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.2)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.2)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1955,7 +1955,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1979,7 +1979,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2003,7 +2003,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2029,7 +2029,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2053,7 +2053,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2077,7 +2077,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2105,7 +2105,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2129,7 +2129,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2155,7 +2155,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2179,7 +2179,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2206,7 +2206,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable cyan text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2227,7 +2227,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.12)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.12)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -2247,7 +2247,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2268,7 +2268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.25)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -2288,7 +2288,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2310,7 +2310,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.15)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -2330,7 +2330,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2352,7 +2352,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -2372,7 +2372,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2399,7 +2399,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2420,7 +2420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.12)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.12)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -2440,7 +2440,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2461,7 +2461,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.2)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -2481,7 +2481,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2503,7 +2503,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -2523,7 +2523,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2545,7 +2545,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.25)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -2565,7 +2565,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2592,7 +2592,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2613,7 +2613,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2638,7 +2638,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2664,7 +2664,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2686,7 +2686,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2710,7 +2710,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2732,7 +2732,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2754,7 +2754,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2774,7 +2774,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2794,7 +2794,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -2814,7 +2814,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2838,7 +2838,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2858,7 +2858,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2881,7 +2881,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2903,7 +2903,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2926,7 +2926,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -2946,7 +2946,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2982,7 +2982,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3002,7 +3002,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.12)", $description: "Cyan background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -3022,7 +3022,7 @@ export default { $description: "Cyan background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3042,7 +3042,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -3062,7 +3062,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3082,7 +3082,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -3102,7 +3102,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3124,7 +3124,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3146,7 +3146,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3166,7 +3166,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.12)", $description: "Orange background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -3186,7 +3186,7 @@ export default { $description: "Orange background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3206,7 +3206,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -3226,7 +3226,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3246,7 +3246,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -3266,7 +3266,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3288,7 +3288,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3310,7 +3310,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3332,7 +3332,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3354,7 +3354,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3374,7 +3374,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -3394,7 +3394,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3414,7 +3414,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/light/default-deuteranopia.json", isSource: true, @@ -3432,7 +3432,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3454,7 +3454,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3476,7 +3476,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3500,7 +3500,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3522,7 +3522,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3544,7 +3544,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3566,7 +3566,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3588,7 +3588,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3612,7 +3612,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3636,7 +3636,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3658,7 +3658,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3681,7 +3681,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3704,7 +3704,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3725,7 +3725,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3738,7 +3738,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Navigation container border.", filePath: "design-tokens/mode/light/default-deuteranopia.json", isSource: true, @@ -3747,7 +3747,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3767,7 +3767,7 @@ export default { $value: "{background.2}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3792,7 +3792,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3818,7 +3818,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3847,7 +3847,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3872,7 +3872,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3886,7 +3886,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.4) 30%, lch(63.38% 78.04 52.26) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--cn-colors-chrome-200) l c h / 0.4) 30%, lch(63.38% 78.04 52.26) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -3898,7 +3898,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3924,7 +3924,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3950,7 +3950,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3978,7 +3978,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3991,7 +3991,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -4002,7 +4002,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4028,7 +4028,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4052,7 +4052,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4077,7 +4077,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -4097,7 +4097,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4123,7 +4123,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4145,7 +4145,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4167,7 +4167,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4187,7 +4187,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.15)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/light/default-deuteranopia.json", isSource: true, @@ -4205,7 +4205,7 @@ export default { $value: "{colors.chrome.700}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4225,7 +4225,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.2)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/light/default-deuteranopia.json", isSource: true, @@ -4243,7 +4243,7 @@ export default { $value: "{colors.chrome.700}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4267,7 +4267,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4291,7 +4291,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4317,7 +4317,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4341,7 +4341,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4366,7 +4366,7 @@ export default { $value: "{colors.chrome.50}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4387,7 +4387,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4412,7 +4412,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4433,7 +4433,7 @@ export default { $value: "{colors.chrome.800}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4456,7 +4456,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4480,7 +4480,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4504,7 +4504,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4528,7 +4528,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4553,7 +4553,7 @@ export default { $value: "{colors.pure.white}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4574,7 +4574,7 @@ export default { $value: "{colors.chrome.500}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4600,7 +4600,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4625,7 +4625,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4648,7 +4648,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4671,7 +4671,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4696,7 +4696,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4719,7 +4719,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4742,7 +4742,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4768,7 +4768,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4794,7 +4794,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4819,7 +4819,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4842,7 +4842,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4867,7 +4867,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4890,7 +4890,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4915,7 +4915,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4938,7 +4938,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4964,7 +4964,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4986,7 +4986,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -5008,7 +5008,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -5030,7 +5030,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5052,7 +5052,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5074,7 +5074,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5096,7 +5096,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5121,7 +5121,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5144,7 +5144,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5169,7 +5169,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5192,7 +5192,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5219,7 +5219,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5242,7 +5242,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5265,7 +5265,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -5285,7 +5285,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5297,7 +5297,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -5308,7 +5308,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5333,7 +5333,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5359,7 +5359,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5370,7 +5370,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -5381,7 +5381,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5405,7 +5405,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5429,7 +5429,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5453,7 +5453,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5479,7 +5479,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5503,7 +5503,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5527,7 +5527,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5556,7 +5556,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5579,7 +5579,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5602,7 +5602,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5623,7 +5623,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5648,7 +5648,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5671,7 +5671,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5694,7 +5694,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5715,7 +5715,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5740,7 +5740,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5763,7 +5763,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5786,7 +5786,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5807,7 +5807,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5832,7 +5832,7 @@ export default { $description: "Text color for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5855,7 +5855,7 @@ export default { $description: "Background color for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5878,7 +5878,7 @@ export default { $description: "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5899,7 +5899,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags, replaced with cyan.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5924,7 +5924,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5947,7 +5947,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5970,7 +5970,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5991,7 +5991,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -6016,7 +6016,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6039,7 +6039,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6062,7 +6062,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6083,7 +6083,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6108,7 +6108,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6131,7 +6131,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6154,7 +6154,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6175,7 +6175,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6200,7 +6200,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6223,7 +6223,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6246,7 +6246,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6267,7 +6267,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6292,7 +6292,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6315,7 +6315,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6338,7 +6338,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6359,7 +6359,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6384,7 +6384,7 @@ export default { $description: "Text color for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6407,7 +6407,7 @@ export default { $description: "Background color for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6430,7 +6430,7 @@ export default { $description: "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6451,7 +6451,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags, replaced with cyan.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6476,7 +6476,7 @@ export default { $description: "Text color for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6499,7 +6499,7 @@ export default { $description: "Background color for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6522,7 +6522,7 @@ export default { $description: "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6543,7 +6543,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags, replaced with orange.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6568,7 +6568,7 @@ export default { $description: "Text color for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6591,7 +6591,7 @@ export default { $description: "Background color for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6614,7 +6614,7 @@ export default { $description: "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6635,7 +6635,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags, replaced with blue.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6660,7 +6660,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6683,7 +6683,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6706,7 +6706,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6727,7 +6727,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6752,7 +6752,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6775,7 +6775,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6798,7 +6798,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6819,7 +6819,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6846,7 +6846,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6869,7 +6869,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6892,7 +6892,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6904,7 +6904,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -6915,7 +6915,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6940,7 +6940,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6963,7 +6963,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6986,7 +6986,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -7009,7 +7009,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -7035,7 +7035,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7057,7 +7057,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7071,7 +7071,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7099,7 +7099,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7109,8 +7109,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7138,7 +7137,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7149,7 +7148,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7187,7 +7186,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7198,7 +7197,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7236,7 +7235,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7247,7 +7246,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-chrome-300) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7285,7 +7284,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7296,7 +7295,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-chrome-300) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7334,7 +7333,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7345,7 +7344,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7373,7 +7372,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7384,7 +7383,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-chrome-900) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7412,7 +7411,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7433,7 +7432,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7453,7 +7452,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7472,7 +7471,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7492,7 +7491,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7511,7 +7510,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7531,7 +7530,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7550,7 +7549,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7570,7 +7569,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7589,7 +7588,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7609,7 +7608,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7628,7 +7627,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7648,7 +7647,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7667,7 +7666,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7687,7 +7686,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7706,7 +7705,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-900) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7726,7 +7725,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7777,7 +7776,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7797,7 +7796,7 @@ export default { $type: "color", $value: "{colors.yellow.200}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7815,7 +7814,7 @@ export default { $type: "color", $value: "{colors.pink.300}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7833,7 +7832,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7851,7 +7850,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7871,7 +7870,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7889,7 +7888,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7907,7 +7906,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7928,7 +7927,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7949,7 +7948,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.4)", filePath: "design-tokens/mode/light/default-deuteranopia.json", isSource: true, original: { @@ -7965,7 +7964,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7984,7 +7983,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8005,7 +8004,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8024,7 +8023,7 @@ export default { $type: "color", $value: "{colors.blue.400}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8043,7 +8042,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8065,7 +8064,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8091,7 +8090,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8113,7 +8112,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8133,7 +8132,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8157,7 +8156,7 @@ export default { $type: "color", $value: "{colors.chrome.500}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8177,7 +8176,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8200,7 +8199,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8227,7 +8226,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8256,7 +8255,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8283,7 +8282,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8326,7 +8325,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8353,7 +8352,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8380,7 +8379,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8407,7 +8406,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8434,7 +8433,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8461,7 +8460,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8481,7 +8480,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8499,7 +8498,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8517,7 +8516,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8535,7 +8534,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8553,7 +8552,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8571,7 +8570,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8589,7 +8588,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8607,7 +8606,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8625,7 +8624,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8643,7 +8642,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8661,7 +8660,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8681,7 +8680,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8699,7 +8698,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8717,7 +8716,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8735,7 +8734,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8753,7 +8752,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8771,7 +8770,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8789,7 +8788,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8807,7 +8806,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8825,7 +8824,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8843,7 +8842,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8861,7 +8860,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-light-deuteranopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/light-deuteranopia-harness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-light-deuteranopia-desktop-harness.ts rename to packages/core-design-system/src/styles-esm/light-deuteranopia-harness.ts index 5745239660..f143159443 100644 --- a/packages/core-design-system/src/styles-esm/source-light-deuteranopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/light-deuteranopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:23 GMT + * Generated on Tue, 18 Mar 2025 06:44:19 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.15)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.2)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast orange text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-600) l c h / 0.2)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable cyan text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.2)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.2)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-yellow-400) l c h / 0.2)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-yellow-200) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.2)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.2)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1955,7 +1955,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1979,7 +1979,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2003,7 +2003,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2029,7 +2029,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2053,7 +2053,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2077,7 +2077,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2105,7 +2105,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2129,7 +2129,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2155,7 +2155,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2179,7 +2179,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2206,7 +2206,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable cyan text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2227,7 +2227,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.12)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.12)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -2247,7 +2247,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2268,7 +2268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.25)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -2288,7 +2288,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2310,7 +2310,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.15)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -2330,7 +2330,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2352,7 +2352,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -2372,7 +2372,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2399,7 +2399,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2420,7 +2420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.12)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.12)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -2440,7 +2440,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2461,7 +2461,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.2)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -2481,7 +2481,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2503,7 +2503,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -2523,7 +2523,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2545,7 +2545,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.25)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -2565,7 +2565,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2592,7 +2592,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2613,7 +2613,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2638,7 +2638,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2664,7 +2664,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2686,7 +2686,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2710,7 +2710,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2732,7 +2732,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2754,7 +2754,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2774,7 +2774,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2794,7 +2794,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -2814,7 +2814,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2838,7 +2838,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2858,7 +2858,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2881,7 +2881,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2903,7 +2903,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2926,7 +2926,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -2946,7 +2946,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2982,7 +2982,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3002,7 +3002,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.12)", $description: "Cyan background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -3022,7 +3022,7 @@ export default { $description: "Cyan background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3042,7 +3042,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -3062,7 +3062,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3082,7 +3082,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -3102,7 +3102,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3124,7 +3124,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3146,7 +3146,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3166,7 +3166,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.12)", $description: "Orange background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -3186,7 +3186,7 @@ export default { $description: "Orange background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3206,7 +3206,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -3226,7 +3226,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3246,7 +3246,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -3266,7 +3266,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3288,7 +3288,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3310,7 +3310,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3332,7 +3332,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3354,7 +3354,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3374,7 +3374,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -3394,7 +3394,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3414,7 +3414,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/light/default-deuteranopia.json", isSource: true, @@ -3432,7 +3432,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3454,7 +3454,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3476,7 +3476,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3500,7 +3500,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3522,7 +3522,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3544,7 +3544,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3566,7 +3566,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3588,7 +3588,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3612,7 +3612,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3636,7 +3636,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3658,7 +3658,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3681,7 +3681,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3704,7 +3704,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3725,7 +3725,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3738,7 +3738,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Navigation container border.", filePath: "design-tokens/mode/light/default-deuteranopia.json", isSource: true, @@ -3747,7 +3747,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3767,7 +3767,7 @@ export default { $value: "{background.2}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3792,7 +3792,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3818,7 +3818,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3847,7 +3847,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3872,7 +3872,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3886,7 +3886,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.4) 30%, lch(63.38% 78.04 52.26) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--cn-colors-chrome-200) l c h / 0.4) 30%, lch(63.38% 78.04 52.26) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -3898,7 +3898,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3924,7 +3924,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3950,7 +3950,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3978,7 +3978,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3991,7 +3991,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -4002,7 +4002,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4028,7 +4028,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4052,7 +4052,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4077,7 +4077,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -4097,7 +4097,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4123,7 +4123,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4145,7 +4145,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4167,7 +4167,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4187,7 +4187,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.15)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/light/default-deuteranopia.json", isSource: true, @@ -4205,7 +4205,7 @@ export default { $value: "{colors.chrome.700}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4225,7 +4225,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.2)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/light/default-deuteranopia.json", isSource: true, @@ -4243,7 +4243,7 @@ export default { $value: "{colors.chrome.700}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4267,7 +4267,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4291,7 +4291,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4317,7 +4317,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4341,7 +4341,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4366,7 +4366,7 @@ export default { $value: "{colors.chrome.50}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4387,7 +4387,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4412,7 +4412,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4433,7 +4433,7 @@ export default { $value: "{colors.chrome.800}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4456,7 +4456,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4480,7 +4480,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4504,7 +4504,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4528,7 +4528,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4553,7 +4553,7 @@ export default { $value: "{colors.pure.white}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4574,7 +4574,7 @@ export default { $value: "{colors.chrome.500}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4600,7 +4600,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4625,7 +4625,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4648,7 +4648,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4671,7 +4671,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4696,7 +4696,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4719,7 +4719,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4742,7 +4742,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4768,7 +4768,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4794,7 +4794,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4819,7 +4819,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4842,7 +4842,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4867,7 +4867,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4890,7 +4890,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4915,7 +4915,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4938,7 +4938,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4964,7 +4964,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4986,7 +4986,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -5008,7 +5008,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -5030,7 +5030,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5052,7 +5052,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5074,7 +5074,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5096,7 +5096,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5121,7 +5121,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5144,7 +5144,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5169,7 +5169,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5192,7 +5192,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5219,7 +5219,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5242,7 +5242,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5265,7 +5265,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -5285,7 +5285,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5297,7 +5297,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -5308,7 +5308,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5333,7 +5333,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5359,7 +5359,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5370,7 +5370,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -5381,7 +5381,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5405,7 +5405,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5429,7 +5429,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5453,7 +5453,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5479,7 +5479,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5503,7 +5503,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5527,7 +5527,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5556,7 +5556,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5579,7 +5579,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5602,7 +5602,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5623,7 +5623,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5648,7 +5648,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5671,7 +5671,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5694,7 +5694,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5715,7 +5715,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5740,7 +5740,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5763,7 +5763,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5786,7 +5786,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5807,7 +5807,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5832,7 +5832,7 @@ export default { $description: "Text color for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5855,7 +5855,7 @@ export default { $description: "Background color for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5878,7 +5878,7 @@ export default { $description: "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5899,7 +5899,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags, replaced with cyan.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5924,7 +5924,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5947,7 +5947,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5970,7 +5970,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5991,7 +5991,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -6016,7 +6016,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6039,7 +6039,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6062,7 +6062,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6083,7 +6083,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6108,7 +6108,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6131,7 +6131,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6154,7 +6154,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6175,7 +6175,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6200,7 +6200,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6223,7 +6223,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6246,7 +6246,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6267,7 +6267,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6292,7 +6292,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6315,7 +6315,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6338,7 +6338,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6359,7 +6359,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6384,7 +6384,7 @@ export default { $description: "Text color for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6407,7 +6407,7 @@ export default { $description: "Background color for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6430,7 +6430,7 @@ export default { $description: "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6451,7 +6451,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags, replaced with cyan.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6476,7 +6476,7 @@ export default { $description: "Text color for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6499,7 +6499,7 @@ export default { $description: "Background color for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6522,7 +6522,7 @@ export default { $description: "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6543,7 +6543,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags, replaced with orange.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6568,7 +6568,7 @@ export default { $description: "Text color for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6591,7 +6591,7 @@ export default { $description: "Background color for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6614,7 +6614,7 @@ export default { $description: "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6635,7 +6635,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags, replaced with blue.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6660,7 +6660,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6683,7 +6683,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6706,7 +6706,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6727,7 +6727,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6752,7 +6752,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6775,7 +6775,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6798,7 +6798,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6819,7 +6819,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6846,7 +6846,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6869,7 +6869,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6892,7 +6892,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6904,7 +6904,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -6915,7 +6915,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6940,7 +6940,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6963,7 +6963,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6986,7 +6986,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -7009,7 +7009,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -7035,7 +7035,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7057,7 +7057,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7071,7 +7071,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7099,7 +7099,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7109,8 +7109,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7138,7 +7137,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7149,7 +7148,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7187,7 +7186,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7198,7 +7197,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7236,7 +7235,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7247,7 +7246,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-chrome-300) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7285,7 +7284,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7296,7 +7295,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-chrome-300) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7334,7 +7333,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7345,7 +7344,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7373,7 +7372,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7384,7 +7383,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-chrome-900) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7412,7 +7411,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7433,7 +7432,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7453,7 +7452,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7472,7 +7471,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7492,7 +7491,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7511,7 +7510,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7531,7 +7530,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7550,7 +7549,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7570,7 +7569,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7589,7 +7588,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7609,7 +7608,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7628,7 +7627,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7648,7 +7647,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7667,7 +7666,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7687,7 +7686,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7706,7 +7705,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-900) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/light/default-deuteranopia.json", @@ -7726,7 +7725,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7777,7 +7776,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7797,7 +7796,7 @@ export default { $type: "color", $value: "{colors.yellow.200}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7815,7 +7814,7 @@ export default { $type: "color", $value: "{colors.pink.300}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7833,7 +7832,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7851,7 +7850,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7871,7 +7870,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7889,7 +7888,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7907,7 +7906,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7928,7 +7927,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7949,7 +7948,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.4)", filePath: "design-tokens/mode/light/default-deuteranopia.json", isSource: true, original: { @@ -7965,7 +7964,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7984,7 +7983,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8005,7 +8004,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8024,7 +8023,7 @@ export default { $type: "color", $value: "{colors.blue.400}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8043,7 +8042,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8065,7 +8064,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8091,7 +8090,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8113,7 +8112,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8133,7 +8132,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8157,7 +8156,7 @@ export default { $type: "color", $value: "{colors.chrome.500}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8177,7 +8176,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8200,7 +8199,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8227,7 +8226,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8256,7 +8255,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8283,7 +8282,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8326,7 +8325,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8353,7 +8352,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8380,7 +8379,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8407,7 +8406,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8434,7 +8433,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8461,7 +8460,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8481,7 +8480,7 @@ export default { $type: "color", $value: "{colors.cyan.50}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8499,7 +8498,7 @@ export default { $type: "color", $value: "{colors.cyan.100}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8517,7 +8516,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8535,7 +8534,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8553,7 +8552,7 @@ export default { $type: "color", $value: "{colors.cyan.400}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8571,7 +8570,7 @@ export default { $type: "color", $value: "{colors.cyan.500}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8589,7 +8588,7 @@ export default { $type: "color", $value: "{colors.cyan.600}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8607,7 +8606,7 @@ export default { $type: "color", $value: "{colors.cyan.700}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8625,7 +8624,7 @@ export default { $type: "color", $value: "{colors.cyan.800}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8643,7 +8642,7 @@ export default { $type: "color", $value: "{colors.cyan.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8661,7 +8660,7 @@ export default { $type: "color", $value: "{colors.cyan.950}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8681,7 +8680,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8699,7 +8698,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8717,7 +8716,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8735,7 +8734,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8753,7 +8752,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8771,7 +8770,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8789,7 +8788,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8807,7 +8806,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8825,7 +8824,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8843,7 +8842,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8861,7 +8860,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-light-dimmer-deuteranopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/light-dimmer-deuteranopia-gitness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-light-dimmer-deuteranopia-desktop-gitness.ts rename to packages/core-design-system/src/styles-esm/light-dimmer-deuteranopia-gitness.ts index 6188042d3f..f5b3cf934f 100644 --- a/packages/core-design-system/src/styles-esm/source-light-dimmer-deuteranopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/light-dimmer-deuteranopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:25 GMT + * Generated on Tue, 18 Mar 2025 06:44:21 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -253,7 +253,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -273,7 +273,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -292,7 +292,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -312,7 +312,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -333,7 +333,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -354,7 +354,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -375,7 +375,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -396,7 +396,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -417,7 +417,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.1)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -437,7 +437,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -456,7 +456,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.15)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -476,7 +476,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -498,7 +498,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -520,7 +520,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -531,7 +531,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -542,7 +542,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -568,7 +568,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -590,7 +590,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -612,7 +612,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -623,7 +623,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for accordion items. Provides visual separation between accordion panels.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -634,7 +634,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -659,7 +659,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -682,7 +682,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -705,7 +705,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -717,7 +717,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -728,7 +728,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -753,7 +753,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast orange text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -776,7 +776,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -797,7 +797,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.08)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -817,7 +817,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -838,7 +838,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.15)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.15)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -858,7 +858,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -884,7 +884,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -906,7 +906,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -917,7 +917,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -928,7 +928,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -953,7 +953,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -976,7 +976,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -999,7 +999,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1024,7 +1024,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1045,7 +1045,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.07)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.07)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -1065,7 +1065,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1086,7 +1086,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.3)", + $value: "lch(from var(--cn-colors-chrome-600) l c h / 0.3)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -1106,7 +1106,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1131,7 +1131,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable cyan text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1152,7 +1152,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.3)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -1172,7 +1172,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1193,7 +1193,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.07)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.07)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -1213,7 +1213,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1238,7 +1238,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1259,7 +1259,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.3)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -1279,7 +1279,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1300,7 +1300,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.07)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -1320,7 +1320,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1345,7 +1345,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1366,7 +1366,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-yellow-300) l c h / 0.3)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -1386,7 +1386,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1407,7 +1407,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.07)", + $value: "lch(from var(--cn-colors-yellow-200) l c h / 0.07)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -1427,7 +1427,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1452,7 +1452,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1473,7 +1473,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.3)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -1493,7 +1493,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1514,7 +1514,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.07)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -1534,7 +1534,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1559,7 +1559,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1580,7 +1580,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.3)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -1600,7 +1600,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1621,7 +1621,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.07)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -1641,7 +1641,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1666,7 +1666,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1689,7 +1689,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1714,7 +1714,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1740,7 +1740,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1762,7 +1762,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1784,7 +1784,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1809,7 +1809,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1832,7 +1832,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1855,7 +1855,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1880,7 +1880,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1903,7 +1903,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1926,7 +1926,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1949,7 +1949,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1973,7 +1973,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1997,7 +1997,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2010,7 +2010,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -2021,7 +2021,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2047,7 +2047,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2071,7 +2071,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2095,7 +2095,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2123,7 +2123,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2147,7 +2147,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2173,7 +2173,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2197,7 +2197,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2224,7 +2224,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable cyan text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2245,7 +2245,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.08)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.08)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -2265,7 +2265,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2286,7 +2286,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.3)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -2306,7 +2306,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2328,7 +2328,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.1)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -2348,7 +2348,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2370,7 +2370,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.15)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.15)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -2390,7 +2390,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2417,7 +2417,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2438,7 +2438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.08)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.08)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -2458,7 +2458,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2479,7 +2479,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.3)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -2499,7 +2499,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2521,7 +2521,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.1)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -2541,7 +2541,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2563,7 +2563,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.15)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -2583,7 +2583,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2610,7 +2610,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2631,7 +2631,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2656,7 +2656,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2682,7 +2682,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2693,7 +2693,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -2704,7 +2704,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2728,7 +2728,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2750,7 +2750,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2772,7 +2772,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2783,7 +2783,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for dialog components.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", isSource: true, @@ -2792,7 +2792,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2812,7 +2812,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -2832,7 +2832,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2856,7 +2856,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2867,7 +2867,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for dropdown menus container.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", isSource: true, @@ -2876,7 +2876,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2899,7 +2899,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2921,7 +2921,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2944,7 +2944,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.07)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -2964,7 +2964,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -3000,7 +3000,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3020,7 +3020,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.08)", $description: "Cyan background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -3040,7 +3040,7 @@ export default { $description: "Cyan background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3060,7 +3060,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.12)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -3080,7 +3080,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3100,7 +3100,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.15)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -3120,7 +3120,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3142,7 +3142,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3164,7 +3164,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3184,7 +3184,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.08)", $description: "Orange background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -3204,7 +3204,7 @@ export default { $description: "Orange background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3224,7 +3224,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.12)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -3244,7 +3244,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3264,7 +3264,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.15)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -3284,7 +3284,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3306,7 +3306,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3328,7 +3328,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3350,7 +3350,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3372,7 +3372,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3392,7 +3392,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.08)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -3412,7 +3412,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3432,7 +3432,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", isSource: true, @@ -3450,7 +3450,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3472,7 +3472,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3494,7 +3494,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3518,7 +3518,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3540,7 +3540,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3562,7 +3562,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3584,7 +3584,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3595,7 +3595,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -3606,7 +3606,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3630,7 +3630,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3654,7 +3654,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3676,7 +3676,7 @@ export default { $description: "Visited state color for text links, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3699,7 +3699,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3722,7 +3722,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3743,7 +3743,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3756,7 +3756,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Navigation container border.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", isSource: true, @@ -3765,7 +3765,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3785,7 +3785,7 @@ export default { $value: "{background.2}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3810,7 +3810,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3836,7 +3836,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3865,7 +3865,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3890,7 +3890,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3904,7 +3904,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.3) 30%, lch(63.38% 78.04 52.26) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--cn-colors-chrome-200) l c h / 0.3) 30%, lch(63.38% 78.04 52.26) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -3916,7 +3916,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3942,7 +3942,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3968,7 +3968,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3996,7 +3996,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -4009,7 +4009,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -4020,7 +4020,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4046,7 +4046,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4059,7 +4059,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -4070,7 +4070,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4095,7 +4095,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -4115,7 +4115,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4141,7 +4141,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4163,7 +4163,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4185,7 +4185,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4205,7 +4205,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.15)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", isSource: true, @@ -4223,7 +4223,7 @@ export default { $value: "{colors.chrome.700}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4243,7 +4243,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.2)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", isSource: true, @@ -4261,7 +4261,7 @@ export default { $value: "{colors.chrome.700}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4285,7 +4285,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4309,7 +4309,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4335,7 +4335,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4359,7 +4359,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4384,7 +4384,7 @@ export default { $value: "{colors.chrome.50}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4405,7 +4405,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4430,7 +4430,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4451,7 +4451,7 @@ export default { $value: "{colors.chrome.800}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4474,7 +4474,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4498,7 +4498,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4522,7 +4522,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4546,7 +4546,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4571,7 +4571,7 @@ export default { $value: "{colors.pure.white}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4592,7 +4592,7 @@ export default { $value: "{colors.chrome.500}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4618,7 +4618,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4643,7 +4643,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4666,7 +4666,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4689,7 +4689,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4714,7 +4714,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4737,7 +4737,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4760,7 +4760,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4775,7 +4775,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -4786,7 +4786,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4812,7 +4812,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4837,7 +4837,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4860,7 +4860,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4885,7 +4885,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4908,7 +4908,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4933,7 +4933,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4956,7 +4956,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4982,7 +4982,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -5004,7 +5004,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -5026,7 +5026,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -5048,7 +5048,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5070,7 +5070,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5092,7 +5092,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5114,7 +5114,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5139,7 +5139,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5162,7 +5162,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5187,7 +5187,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5210,7 +5210,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5237,7 +5237,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5260,7 +5260,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5283,7 +5283,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.07)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.07)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -5303,7 +5303,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5315,7 +5315,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -5326,7 +5326,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5351,7 +5351,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5377,7 +5377,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5388,7 +5388,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -5399,7 +5399,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5423,7 +5423,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5447,7 +5447,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5471,7 +5471,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5497,7 +5497,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5521,7 +5521,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5534,7 +5534,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -5545,7 +5545,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5574,7 +5574,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5597,7 +5597,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5620,7 +5620,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5641,7 +5641,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5666,7 +5666,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5689,7 +5689,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5712,7 +5712,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5733,7 +5733,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5758,7 +5758,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5781,7 +5781,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5804,7 +5804,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5825,7 +5825,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5850,7 +5850,7 @@ export default { $description: "Text color for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5873,7 +5873,7 @@ export default { $description: "Background color for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5896,7 +5896,7 @@ export default { $description: "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5917,7 +5917,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags, replaced with cyan.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5942,7 +5942,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5965,7 +5965,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5988,7 +5988,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -6009,7 +6009,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -6034,7 +6034,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6057,7 +6057,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6080,7 +6080,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6101,7 +6101,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6126,7 +6126,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6149,7 +6149,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6172,7 +6172,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6193,7 +6193,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6218,7 +6218,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6241,7 +6241,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6264,7 +6264,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6285,7 +6285,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6310,7 +6310,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6333,7 +6333,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6356,7 +6356,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6377,7 +6377,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6402,7 +6402,7 @@ export default { $description: "Text color for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6425,7 +6425,7 @@ export default { $description: "Background color for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6448,7 +6448,7 @@ export default { $description: "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6469,7 +6469,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags, replaced with cyan.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6494,7 +6494,7 @@ export default { $description: "Text color for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6517,7 +6517,7 @@ export default { $description: "Background color for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6540,7 +6540,7 @@ export default { $description: "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6561,7 +6561,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags, replaced with orange.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6586,7 +6586,7 @@ export default { $description: "Text color for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6609,7 +6609,7 @@ export default { $description: "Background color for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6632,7 +6632,7 @@ export default { $description: "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6653,7 +6653,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags, replaced with blue.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6678,7 +6678,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6701,7 +6701,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6724,7 +6724,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6745,7 +6745,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6770,7 +6770,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6793,7 +6793,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6816,7 +6816,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6837,7 +6837,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6864,7 +6864,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6887,7 +6887,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6910,7 +6910,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6922,7 +6922,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -6933,7 +6933,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6958,7 +6958,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6981,7 +6981,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -7004,7 +7004,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -7027,7 +7027,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -7053,7 +7053,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7075,7 +7075,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7089,7 +7089,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7117,7 +7117,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7127,8 +7127,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7156,7 +7155,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7167,7 +7166,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + "0 1px 3px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.4), 0 1px 2px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7205,7 +7204,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7216,7 +7215,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + "0 4px 6px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.35), 0 2px 4px -2px lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7254,7 +7253,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7265,7 +7264,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + "0 10px 15px -3px lch(from var(--cn-colors-chrome-300) l c h / 0.35), 0 4px 6px -4px lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7303,7 +7302,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7314,7 +7313,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + "0 20px 25px -5px lch(from var(--cn-colors-chrome-300) l c h / 0.35), 0 8px 10px -6px lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7352,7 +7351,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7363,7 +7362,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + "0 25px 50px -12px lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7391,7 +7390,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7402,7 +7401,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-chrome-900) l c h / 0.07)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7430,7 +7429,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7451,7 +7450,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7471,7 +7470,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7490,7 +7489,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7510,7 +7509,7 @@ export default { $description: "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7529,7 +7528,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7549,7 +7548,7 @@ export default { $description: "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7568,7 +7567,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7588,7 +7587,7 @@ export default { $description: "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7607,7 +7606,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7627,7 +7626,7 @@ export default { $description: "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7646,7 +7645,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7666,7 +7665,7 @@ export default { $description: "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7685,7 +7684,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7705,7 +7704,7 @@ export default { $description: "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7724,7 +7723,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + $value: "lch(from var(--cn-colors-chrome-900) l c h / 0.07)", $description: "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7744,7 +7743,7 @@ export default { $description: "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7794,7 +7793,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7814,7 +7813,7 @@ export default { $type: "color", $value: "{colors.yellow.200}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7832,7 +7831,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7850,7 +7849,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7868,7 +7867,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7888,7 +7887,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7906,7 +7905,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7924,7 +7923,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7945,7 +7944,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7966,7 +7965,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.3)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.3)", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", isSource: true, original: { @@ -7982,7 +7981,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8001,7 +8000,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8022,7 +8021,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8041,7 +8040,7 @@ export default { $type: "color", $value: "{colors.blue.400}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8060,7 +8059,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8082,7 +8081,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8108,7 +8107,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8130,7 +8129,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8150,7 +8149,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8174,7 +8173,7 @@ export default { $type: "color", $value: "{colors.chrome.500}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8194,7 +8193,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8217,7 +8216,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8244,7 +8243,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8273,7 +8272,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8300,7 +8299,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8343,7 +8342,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8370,7 +8369,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8397,7 +8396,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8424,7 +8423,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8451,7 +8450,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8478,7 +8477,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8498,7 +8497,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8516,7 +8515,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8534,7 +8533,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8552,7 +8551,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8570,7 +8569,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8588,7 +8587,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8606,7 +8605,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8624,7 +8623,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8642,7 +8641,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8660,7 +8659,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8678,7 +8677,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8698,7 +8697,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8716,7 +8715,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8734,7 +8733,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8752,7 +8751,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8770,7 +8769,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8788,7 +8787,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8806,7 +8805,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8824,7 +8823,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8842,7 +8841,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8860,7 +8859,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8878,7 +8877,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-light-dimmer-deuteranopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/light-dimmer-deuteranopia-harness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-light-dimmer-deuteranopia-desktop-harness.ts rename to packages/core-design-system/src/styles-esm/light-dimmer-deuteranopia-harness.ts index 95a25fa612..772c10e156 100644 --- a/packages/core-design-system/src/styles-esm/source-light-dimmer-deuteranopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/light-dimmer-deuteranopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:25 GMT + * Generated on Tue, 18 Mar 2025 06:44:21 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -253,7 +253,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -273,7 +273,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -292,7 +292,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -312,7 +312,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -333,7 +333,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -354,7 +354,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -375,7 +375,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -396,7 +396,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -417,7 +417,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.1)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -437,7 +437,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -456,7 +456,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.15)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -476,7 +476,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -498,7 +498,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -520,7 +520,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -531,7 +531,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -542,7 +542,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -568,7 +568,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -590,7 +590,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -612,7 +612,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -623,7 +623,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for accordion items. Provides visual separation between accordion panels.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -634,7 +634,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -659,7 +659,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -682,7 +682,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -705,7 +705,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -717,7 +717,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -728,7 +728,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -753,7 +753,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast orange text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -776,7 +776,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -797,7 +797,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.08)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -817,7 +817,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -838,7 +838,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.15)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.15)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -858,7 +858,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -884,7 +884,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -906,7 +906,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -917,7 +917,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -928,7 +928,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -953,7 +953,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -976,7 +976,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -999,7 +999,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1024,7 +1024,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1045,7 +1045,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.07)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.07)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -1065,7 +1065,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1086,7 +1086,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.3)", + $value: "lch(from var(--cn-colors-chrome-600) l c h / 0.3)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -1106,7 +1106,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1131,7 +1131,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable cyan text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1152,7 +1152,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.3)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -1172,7 +1172,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1193,7 +1193,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.07)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.07)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -1213,7 +1213,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1238,7 +1238,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1259,7 +1259,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.3)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -1279,7 +1279,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1300,7 +1300,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.07)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -1320,7 +1320,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1345,7 +1345,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1366,7 +1366,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-yellow-300) l c h / 0.3)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -1386,7 +1386,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1407,7 +1407,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.07)", + $value: "lch(from var(--cn-colors-yellow-200) l c h / 0.07)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -1427,7 +1427,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1452,7 +1452,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1473,7 +1473,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.3)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -1493,7 +1493,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1514,7 +1514,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.07)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -1534,7 +1534,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1559,7 +1559,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1580,7 +1580,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.3)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -1600,7 +1600,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1621,7 +1621,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.07)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -1641,7 +1641,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1666,7 +1666,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1689,7 +1689,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1714,7 +1714,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1740,7 +1740,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1762,7 +1762,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1784,7 +1784,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1809,7 +1809,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1832,7 +1832,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1855,7 +1855,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1880,7 +1880,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1903,7 +1903,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1926,7 +1926,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1949,7 +1949,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1973,7 +1973,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1997,7 +1997,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2010,7 +2010,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -2021,7 +2021,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2047,7 +2047,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2071,7 +2071,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2095,7 +2095,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2123,7 +2123,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2147,7 +2147,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2173,7 +2173,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2197,7 +2197,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2224,7 +2224,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable cyan text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2245,7 +2245,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.08)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.08)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -2265,7 +2265,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2286,7 +2286,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.3)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -2306,7 +2306,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2328,7 +2328,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.1)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -2348,7 +2348,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2370,7 +2370,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.15)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.15)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -2390,7 +2390,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2417,7 +2417,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2438,7 +2438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.08)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.08)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -2458,7 +2458,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2479,7 +2479,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.3)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -2499,7 +2499,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2521,7 +2521,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.1)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -2541,7 +2541,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2563,7 +2563,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.15)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -2583,7 +2583,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2610,7 +2610,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2631,7 +2631,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2656,7 +2656,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2682,7 +2682,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2693,7 +2693,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -2704,7 +2704,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2728,7 +2728,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2750,7 +2750,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2772,7 +2772,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2783,7 +2783,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for dialog components.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", isSource: true, @@ -2792,7 +2792,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2812,7 +2812,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -2832,7 +2832,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2856,7 +2856,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2867,7 +2867,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for dropdown menus container.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", isSource: true, @@ -2876,7 +2876,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2899,7 +2899,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2921,7 +2921,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2944,7 +2944,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.07)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -2964,7 +2964,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -3000,7 +3000,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3020,7 +3020,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.08)", $description: "Cyan background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -3040,7 +3040,7 @@ export default { $description: "Cyan background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3060,7 +3060,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.12)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -3080,7 +3080,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3100,7 +3100,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.15)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -3120,7 +3120,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3142,7 +3142,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3164,7 +3164,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3184,7 +3184,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.08)", $description: "Orange background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -3204,7 +3204,7 @@ export default { $description: "Orange background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3224,7 +3224,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.12)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -3244,7 +3244,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3264,7 +3264,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.15)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -3284,7 +3284,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3306,7 +3306,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3328,7 +3328,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3350,7 +3350,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3372,7 +3372,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3392,7 +3392,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.08)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -3412,7 +3412,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3432,7 +3432,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", isSource: true, @@ -3450,7 +3450,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3472,7 +3472,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3494,7 +3494,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3518,7 +3518,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3540,7 +3540,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3562,7 +3562,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3584,7 +3584,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3595,7 +3595,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -3606,7 +3606,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3630,7 +3630,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3654,7 +3654,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3676,7 +3676,7 @@ export default { $description: "Visited state color for text links, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3699,7 +3699,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3722,7 +3722,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3743,7 +3743,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3756,7 +3756,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Navigation container border.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", isSource: true, @@ -3765,7 +3765,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3785,7 +3785,7 @@ export default { $value: "{background.2}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3810,7 +3810,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3836,7 +3836,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3865,7 +3865,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3890,7 +3890,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3904,7 +3904,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.3) 30%, lch(63.38% 78.04 52.26) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--cn-colors-chrome-200) l c h / 0.3) 30%, lch(63.38% 78.04 52.26) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -3916,7 +3916,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3942,7 +3942,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3968,7 +3968,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3996,7 +3996,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -4009,7 +4009,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -4020,7 +4020,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4046,7 +4046,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4059,7 +4059,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -4070,7 +4070,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4095,7 +4095,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -4115,7 +4115,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4141,7 +4141,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4163,7 +4163,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4185,7 +4185,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4205,7 +4205,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.15)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", isSource: true, @@ -4223,7 +4223,7 @@ export default { $value: "{colors.chrome.700}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4243,7 +4243,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.2)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", isSource: true, @@ -4261,7 +4261,7 @@ export default { $value: "{colors.chrome.700}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4285,7 +4285,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4309,7 +4309,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4335,7 +4335,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4359,7 +4359,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4384,7 +4384,7 @@ export default { $value: "{colors.chrome.50}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4405,7 +4405,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4430,7 +4430,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4451,7 +4451,7 @@ export default { $value: "{colors.chrome.800}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4474,7 +4474,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4498,7 +4498,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4522,7 +4522,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4546,7 +4546,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4571,7 +4571,7 @@ export default { $value: "{colors.pure.white}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4592,7 +4592,7 @@ export default { $value: "{colors.chrome.500}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4618,7 +4618,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4643,7 +4643,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4666,7 +4666,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4689,7 +4689,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4714,7 +4714,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4737,7 +4737,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4760,7 +4760,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4775,7 +4775,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -4786,7 +4786,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4812,7 +4812,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4837,7 +4837,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4860,7 +4860,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4885,7 +4885,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4908,7 +4908,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4933,7 +4933,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4956,7 +4956,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4982,7 +4982,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -5004,7 +5004,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -5026,7 +5026,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -5048,7 +5048,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5070,7 +5070,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5092,7 +5092,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5114,7 +5114,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5139,7 +5139,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5162,7 +5162,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5187,7 +5187,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5210,7 +5210,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5237,7 +5237,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5260,7 +5260,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5283,7 +5283,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.07)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.07)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -5303,7 +5303,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5315,7 +5315,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -5326,7 +5326,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5351,7 +5351,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5377,7 +5377,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5388,7 +5388,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -5399,7 +5399,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5423,7 +5423,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5447,7 +5447,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5471,7 +5471,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5497,7 +5497,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5521,7 +5521,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5534,7 +5534,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -5545,7 +5545,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5574,7 +5574,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5597,7 +5597,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5620,7 +5620,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5641,7 +5641,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5666,7 +5666,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5689,7 +5689,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5712,7 +5712,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5733,7 +5733,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5758,7 +5758,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5781,7 +5781,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5804,7 +5804,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5825,7 +5825,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5850,7 +5850,7 @@ export default { $description: "Text color for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5873,7 +5873,7 @@ export default { $description: "Background color for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5896,7 +5896,7 @@ export default { $description: "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5917,7 +5917,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags, replaced with cyan.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5942,7 +5942,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5965,7 +5965,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5988,7 +5988,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -6009,7 +6009,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -6034,7 +6034,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6057,7 +6057,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6080,7 +6080,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6101,7 +6101,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6126,7 +6126,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6149,7 +6149,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6172,7 +6172,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6193,7 +6193,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6218,7 +6218,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6241,7 +6241,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6264,7 +6264,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6285,7 +6285,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6310,7 +6310,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6333,7 +6333,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6356,7 +6356,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6377,7 +6377,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6402,7 +6402,7 @@ export default { $description: "Text color for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6425,7 +6425,7 @@ export default { $description: "Background color for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6448,7 +6448,7 @@ export default { $description: "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6469,7 +6469,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags, replaced with cyan.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6494,7 +6494,7 @@ export default { $description: "Text color for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6517,7 +6517,7 @@ export default { $description: "Background color for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6540,7 +6540,7 @@ export default { $description: "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6561,7 +6561,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags, replaced with orange.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6586,7 +6586,7 @@ export default { $description: "Text color for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6609,7 +6609,7 @@ export default { $description: "Background color for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6632,7 +6632,7 @@ export default { $description: "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6653,7 +6653,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags, replaced with blue.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6678,7 +6678,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6701,7 +6701,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6724,7 +6724,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6745,7 +6745,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6770,7 +6770,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6793,7 +6793,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6816,7 +6816,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6837,7 +6837,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6864,7 +6864,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6887,7 +6887,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6910,7 +6910,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6922,7 +6922,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -6933,7 +6933,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6958,7 +6958,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6981,7 +6981,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -7004,7 +7004,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -7027,7 +7027,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -7053,7 +7053,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7075,7 +7075,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7089,7 +7089,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7117,7 +7117,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7127,8 +7127,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7156,7 +7155,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7167,7 +7166,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + "0 1px 3px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.4), 0 1px 2px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7205,7 +7204,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7216,7 +7215,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + "0 4px 6px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.35), 0 2px 4px -2px lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7254,7 +7253,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7265,7 +7264,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + "0 10px 15px -3px lch(from var(--cn-colors-chrome-300) l c h / 0.35), 0 4px 6px -4px lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7303,7 +7302,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7314,7 +7313,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + "0 20px 25px -5px lch(from var(--cn-colors-chrome-300) l c h / 0.35), 0 8px 10px -6px lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7352,7 +7351,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7363,7 +7362,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + "0 25px 50px -12px lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7391,7 +7390,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7402,7 +7401,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-chrome-900) l c h / 0.07)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7430,7 +7429,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7451,7 +7450,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7471,7 +7470,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7490,7 +7489,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7510,7 +7509,7 @@ export default { $description: "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7529,7 +7528,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7549,7 +7548,7 @@ export default { $description: "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7568,7 +7567,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7588,7 +7587,7 @@ export default { $description: "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7607,7 +7606,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7627,7 +7626,7 @@ export default { $description: "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7646,7 +7645,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7666,7 +7665,7 @@ export default { $description: "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7685,7 +7684,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7705,7 +7704,7 @@ export default { $description: "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7724,7 +7723,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + $value: "lch(from var(--cn-colors-chrome-900) l c h / 0.07)", $description: "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", @@ -7744,7 +7743,7 @@ export default { $description: "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7794,7 +7793,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7814,7 +7813,7 @@ export default { $type: "color", $value: "{colors.yellow.200}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7832,7 +7831,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7850,7 +7849,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7868,7 +7867,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7888,7 +7887,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7906,7 +7905,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7924,7 +7923,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7945,7 +7944,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7966,7 +7965,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.3)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.3)", filePath: "design-tokens/mode/light/dimmer-deuteranopia.json", isSource: true, original: { @@ -7982,7 +7981,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8001,7 +8000,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8022,7 +8021,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8041,7 +8040,7 @@ export default { $type: "color", $value: "{colors.blue.400}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8060,7 +8059,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8082,7 +8081,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8108,7 +8107,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8130,7 +8129,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8150,7 +8149,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8174,7 +8173,7 @@ export default { $type: "color", $value: "{colors.chrome.500}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8194,7 +8193,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8217,7 +8216,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8244,7 +8243,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8273,7 +8272,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8300,7 +8299,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8343,7 +8342,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8370,7 +8369,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8397,7 +8396,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8424,7 +8423,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8451,7 +8450,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8478,7 +8477,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8498,7 +8497,7 @@ export default { $type: "color", $value: "{colors.cyan.50}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8516,7 +8515,7 @@ export default { $type: "color", $value: "{colors.cyan.100}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8534,7 +8533,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8552,7 +8551,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8570,7 +8569,7 @@ export default { $type: "color", $value: "{colors.cyan.400}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8588,7 +8587,7 @@ export default { $type: "color", $value: "{colors.cyan.500}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8606,7 +8605,7 @@ export default { $type: "color", $value: "{colors.cyan.600}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8624,7 +8623,7 @@ export default { $type: "color", $value: "{colors.cyan.700}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8642,7 +8641,7 @@ export default { $type: "color", $value: "{colors.cyan.800}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8660,7 +8659,7 @@ export default { $type: "color", $value: "{colors.cyan.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8678,7 +8677,7 @@ export default { $type: "color", $value: "{colors.cyan.950}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8698,7 +8697,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8716,7 +8715,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8734,7 +8733,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8752,7 +8751,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8770,7 +8769,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8788,7 +8787,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8806,7 +8805,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8824,7 +8823,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8842,7 +8841,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8860,7 +8859,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8878,7 +8877,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-light-dimmer-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/light-dimmer-gitness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-light-dimmer-desktop-gitness.ts rename to packages/core-design-system/src/styles-esm/light-dimmer-gitness.ts index f9d7766d76..02bb03bdd8 100644 --- a/packages/core-design-system/src/styles-esm/source-light-dimmer-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/light-dimmer-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:15 GMT + * Generated on Tue, 18 Mar 2025 06:44:14 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -253,7 +253,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", filePath: "design-tokens/mode/light/dimmer.json", @@ -273,7 +273,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -292,7 +292,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/light/dimmer.json", @@ -312,7 +312,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -333,7 +333,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -354,7 +354,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -375,7 +375,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -396,7 +396,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -417,7 +417,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.1)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/light/dimmer.json", @@ -437,7 +437,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -456,7 +456,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.15)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/light/dimmer.json", @@ -476,7 +476,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -498,7 +498,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -520,7 +520,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -531,7 +531,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/light/dimmer.json", @@ -542,7 +542,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -568,7 +568,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -590,7 +590,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -612,7 +612,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -623,7 +623,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for accordion items. Provides visual separation between accordion panels.", filePath: "design-tokens/mode/light/dimmer.json", @@ -634,7 +634,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -659,7 +659,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -682,7 +682,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -705,7 +705,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -717,7 +717,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/light/dimmer.json", @@ -728,7 +728,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -753,7 +753,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -776,7 +776,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -797,7 +797,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.08)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/light/dimmer.json", @@ -817,7 +817,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -838,7 +838,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.15)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/light/dimmer.json", @@ -858,7 +858,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -884,7 +884,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -906,7 +906,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -917,7 +917,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/light/dimmer.json", @@ -928,7 +928,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -953,7 +953,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -976,7 +976,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -999,7 +999,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1024,7 +1024,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1045,7 +1045,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.07)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.07)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/light/dimmer.json", @@ -1065,7 +1065,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1086,7 +1086,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.3)", + $value: "lch(from var(--cn-colors-chrome-600) l c h / 0.3)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/light/dimmer.json", @@ -1106,7 +1106,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1131,7 +1131,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable green text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1152,7 +1152,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-green-300) l c h / 0.3)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/light/dimmer.json", @@ -1172,7 +1172,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1193,7 +1193,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-200) l c h / 0.07)", + $value: "lch(from var(--cn-colors-green-200) l c h / 0.07)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/light/dimmer.json", @@ -1213,7 +1213,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1238,7 +1238,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1259,7 +1259,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.3)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/light/dimmer.json", @@ -1279,7 +1279,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1300,7 +1300,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.07)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/light/dimmer.json", @@ -1320,7 +1320,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1345,7 +1345,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1366,7 +1366,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-yellow-300) l c h / 0.3)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/light/dimmer.json", @@ -1386,7 +1386,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1407,7 +1407,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.07)", + $value: "lch(from var(--cn-colors-yellow-200) l c h / 0.07)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/light/dimmer.json", @@ -1427,7 +1427,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1452,7 +1452,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1473,7 +1473,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.3)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/light/dimmer.json", @@ -1493,7 +1493,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1514,7 +1514,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.07)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/light/dimmer.json", @@ -1534,7 +1534,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1559,7 +1559,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1580,7 +1580,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-purple-300) l c h / 0.3)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/light/dimmer.json", @@ -1600,7 +1600,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1621,7 +1621,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-purple-300) l c h / 0.07)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/light/dimmer.json", @@ -1641,7 +1641,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1666,7 +1666,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1689,7 +1689,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1714,7 +1714,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1740,7 +1740,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1762,7 +1762,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1784,7 +1784,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1809,7 +1809,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1832,7 +1832,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1855,7 +1855,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1880,7 +1880,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1903,7 +1903,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1926,7 +1926,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1949,7 +1949,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1973,7 +1973,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1997,7 +1997,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2010,7 +2010,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", filePath: "design-tokens/mode/light/dimmer.json", @@ -2021,7 +2021,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2047,7 +2047,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2071,7 +2071,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2095,7 +2095,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2123,7 +2123,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2147,7 +2147,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2173,7 +2173,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2197,7 +2197,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2224,7 +2224,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable green text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2245,7 +2245,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-200) l c h / 0.08)", + $value: "lch(from var(--cn-colors-green-200) l c h / 0.08)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/light/dimmer.json", @@ -2265,7 +2265,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2286,7 +2286,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-green-300) l c h / 0.3)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/light/dimmer.json", @@ -2306,7 +2306,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2328,7 +2328,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-green-200) l c h / 0.1)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/dimmer.json", @@ -2348,7 +2348,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2370,7 +2370,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-200) l c h / 0.15)", + $value: "lch(from var(--cn-colors-green-200) l c h / 0.15)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/dimmer.json", @@ -2390,7 +2390,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2417,7 +2417,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2438,7 +2438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.08)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.08)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/light/dimmer.json", @@ -2458,7 +2458,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2479,7 +2479,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.3)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/light/dimmer.json", @@ -2499,7 +2499,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2521,7 +2521,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/dimmer.json", @@ -2541,7 +2541,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2563,7 +2563,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.15)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/dimmer.json", @@ -2583,7 +2583,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2610,7 +2610,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2631,7 +2631,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2656,7 +2656,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2682,7 +2682,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2693,7 +2693,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", filePath: "design-tokens/mode/light/dimmer.json", @@ -2704,7 +2704,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2728,7 +2728,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2750,7 +2750,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2772,7 +2772,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2783,7 +2783,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for dialog components.", filePath: "design-tokens/mode/light/dimmer.json", isSource: true, @@ -2792,7 +2792,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2812,7 +2812,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/light/dimmer.json", @@ -2832,7 +2832,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2856,7 +2856,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2867,7 +2867,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for dropdown menus container.", filePath: "design-tokens/mode/light/dimmer.json", isSource: true, @@ -2876,7 +2876,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2899,7 +2899,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2921,7 +2921,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2944,7 +2944,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.07)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/light/dimmer.json", @@ -2964,7 +2964,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -3000,7 +3000,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3020,7 +3020,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.08)", $description: "Green background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/light/dimmer.json", @@ -3040,7 +3040,7 @@ export default { $description: "Green background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3060,7 +3060,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.12)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/light/dimmer.json", @@ -3080,7 +3080,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3100,7 +3100,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.15)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/light/dimmer.json", @@ -3120,7 +3120,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3142,7 +3142,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3164,7 +3164,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3184,7 +3184,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.08)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/light/dimmer.json", @@ -3204,7 +3204,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3224,7 +3224,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.12)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/light/dimmer.json", @@ -3244,7 +3244,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3264,7 +3264,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.15)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/light/dimmer.json", @@ -3284,7 +3284,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3306,7 +3306,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3328,7 +3328,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3350,7 +3350,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3372,7 +3372,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3392,7 +3392,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.08)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/light/dimmer.json", @@ -3412,7 +3412,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3432,7 +3432,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/light/dimmer.json", isSource: true, @@ -3450,7 +3450,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3472,7 +3472,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3494,7 +3494,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3518,7 +3518,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3540,7 +3540,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3562,7 +3562,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3584,7 +3584,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3595,7 +3595,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", filePath: "design-tokens/mode/light/dimmer.json", @@ -3606,7 +3606,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3630,7 +3630,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3654,7 +3654,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3676,7 +3676,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3699,7 +3699,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3722,7 +3722,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3743,7 +3743,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3756,7 +3756,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Navigation container border.", filePath: "design-tokens/mode/light/dimmer.json", isSource: true, @@ -3765,7 +3765,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3785,7 +3785,7 @@ export default { $value: "{background.2}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3810,7 +3810,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3836,7 +3836,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3865,7 +3865,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3890,7 +3890,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3904,7 +3904,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.3) 30%, lch(63.38% 78.04 52.26) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--cn-colors-chrome-200) l c h / 0.3) 30%, lch(63.38% 78.04 52.26) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/light/dimmer.json", @@ -3916,7 +3916,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3942,7 +3942,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3968,7 +3968,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3996,7 +3996,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -4009,7 +4009,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/light/dimmer.json", @@ -4020,7 +4020,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4046,7 +4046,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4059,7 +4059,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", filePath: "design-tokens/mode/light/dimmer.json", @@ -4070,7 +4070,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4095,7 +4095,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/light/dimmer.json", @@ -4115,7 +4115,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4141,7 +4141,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4163,7 +4163,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4185,7 +4185,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4205,7 +4205,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.15)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/light/dimmer.json", isSource: true, @@ -4223,7 +4223,7 @@ export default { $value: "{colors.chrome.700}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4243,7 +4243,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.2)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/light/dimmer.json", isSource: true, @@ -4261,7 +4261,7 @@ export default { $value: "{colors.chrome.700}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4285,7 +4285,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4309,7 +4309,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4335,7 +4335,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4359,7 +4359,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4384,7 +4384,7 @@ export default { $value: "{colors.chrome.50}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4405,7 +4405,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4430,7 +4430,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4451,7 +4451,7 @@ export default { $value: "{colors.chrome.800}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4474,7 +4474,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4498,7 +4498,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4522,7 +4522,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4546,7 +4546,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4571,7 +4571,7 @@ export default { $value: "{colors.pure.white}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4592,7 +4592,7 @@ export default { $value: "{colors.chrome.500}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4618,7 +4618,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4643,7 +4643,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4666,7 +4666,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4689,7 +4689,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4714,7 +4714,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4737,7 +4737,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4760,7 +4760,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4775,7 +4775,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/light/dimmer.json", @@ -4786,7 +4786,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4812,7 +4812,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4837,7 +4837,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4860,7 +4860,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4885,7 +4885,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4908,7 +4908,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4933,7 +4933,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4956,7 +4956,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4982,7 +4982,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -5004,7 +5004,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -5026,7 +5026,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -5048,7 +5048,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5070,7 +5070,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5092,7 +5092,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5114,7 +5114,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5139,7 +5139,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5162,7 +5162,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5187,7 +5187,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5210,7 +5210,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5237,7 +5237,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5260,7 +5260,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5283,7 +5283,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.07)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.07)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/light/dimmer.json", @@ -5303,7 +5303,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5315,7 +5315,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/light/dimmer.json", @@ -5326,7 +5326,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5351,7 +5351,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5377,7 +5377,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5388,7 +5388,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/light/dimmer.json", @@ -5399,7 +5399,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5423,7 +5423,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5447,7 +5447,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5471,7 +5471,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5497,7 +5497,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5521,7 +5521,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5534,7 +5534,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", filePath: "design-tokens/mode/light/dimmer.json", @@ -5545,7 +5545,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5574,7 +5574,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5597,7 +5597,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5620,7 +5620,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5641,7 +5641,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags. ", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5666,7 +5666,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5689,7 +5689,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5712,7 +5712,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5733,7 +5733,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags. ", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5758,7 +5758,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5781,7 +5781,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5804,7 +5804,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5825,7 +5825,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5850,7 +5850,7 @@ export default { $description: "Text color for green tags. Ensures readability while maintaining the green color theme.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5873,7 +5873,7 @@ export default { $description: "Background color for green tags. Creates a distinct surface with green theme styling.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5896,7 +5896,7 @@ export default { $description: "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5917,7 +5917,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5942,7 +5942,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5965,7 +5965,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5988,7 +5988,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -6009,7 +6009,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -6034,7 +6034,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6057,7 +6057,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6080,7 +6080,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6101,7 +6101,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6126,7 +6126,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6149,7 +6149,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6172,7 +6172,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6193,7 +6193,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6218,7 +6218,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6241,7 +6241,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6264,7 +6264,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6285,7 +6285,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6310,7 +6310,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6333,7 +6333,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6356,7 +6356,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6377,7 +6377,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6402,7 +6402,7 @@ export default { $description: "Text color for purple tags. Ensures readability while maintaining the purple color theme.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6425,7 +6425,7 @@ export default { $description: "Background color for purple tags. Creates a distinct surface with purple theme styling.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6448,7 +6448,7 @@ export default { $description: "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6469,7 +6469,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6494,7 +6494,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6517,7 +6517,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6540,7 +6540,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6561,7 +6561,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6586,7 +6586,7 @@ export default { $description: "Text color for violet tags. Ensures readability while maintaining the violet color theme.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6609,7 +6609,7 @@ export default { $description: "Background color for violet tags. Creates a distinct surface with violet theme styling.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6632,7 +6632,7 @@ export default { $description: "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6653,7 +6653,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6678,7 +6678,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6701,7 +6701,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6724,7 +6724,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6745,7 +6745,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6770,7 +6770,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6793,7 +6793,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6816,7 +6816,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6837,7 +6837,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6864,7 +6864,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6887,7 +6887,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6910,7 +6910,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6922,7 +6922,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/light/dimmer.json", @@ -6933,7 +6933,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6958,7 +6958,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6981,7 +6981,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -7004,7 +7004,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -7027,7 +7027,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -7053,7 +7053,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7075,7 +7075,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7089,7 +7089,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7117,7 +7117,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7127,8 +7127,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7156,7 +7155,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7167,7 +7166,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + "0 1px 3px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.4), 0 1px 2px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7205,7 +7204,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7216,7 +7215,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + "0 4px 6px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.35), 0 2px 4px -2px lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7254,7 +7253,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7265,7 +7264,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + "0 10px 15px -3px lch(from var(--cn-colors-chrome-300) l c h / 0.35), 0 4px 6px -4px lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7303,7 +7302,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7314,7 +7313,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + "0 20px 25px -5px lch(from var(--cn-colors-chrome-300) l c h / 0.35), 0 8px 10px -6px lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7352,7 +7351,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7363,7 +7362,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + "0 25px 50px -12px lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7391,7 +7390,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7402,7 +7401,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-chrome-900) l c h / 0.07)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7430,7 +7429,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7451,7 +7450,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7471,7 +7470,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7490,7 +7489,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7510,7 +7509,7 @@ export default { $description: "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7529,7 +7528,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7549,7 +7548,7 @@ export default { $description: "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7568,7 +7567,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7588,7 +7587,7 @@ export default { $description: "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7607,7 +7606,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7627,7 +7626,7 @@ export default { $description: "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7646,7 +7645,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7666,7 +7665,7 @@ export default { $description: "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7685,7 +7684,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7705,7 +7704,7 @@ export default { $description: "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7724,7 +7723,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + $value: "lch(from var(--cn-colors-chrome-900) l c h / 0.07)", $description: "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7744,7 +7743,7 @@ export default { $description: "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7794,7 +7793,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7814,7 +7813,7 @@ export default { $type: "color", $value: "{colors.yellow.200}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7832,7 +7831,7 @@ export default { $type: "color", $value: "{colors.pink.300}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7850,7 +7849,7 @@ export default { $type: "color", $value: "{colors.purple.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7868,7 +7867,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7888,7 +7887,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7906,7 +7905,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7924,7 +7923,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7945,7 +7944,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7966,7 +7965,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.3)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.3)", filePath: "design-tokens/mode/light/dimmer.json", isSource: true, original: { @@ -7982,7 +7981,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8001,7 +8000,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8022,7 +8021,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8041,7 +8040,7 @@ export default { $type: "color", $value: "{colors.blue.400}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8060,7 +8059,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8082,7 +8081,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8108,7 +8107,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8130,7 +8129,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8150,7 +8149,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8174,7 +8173,7 @@ export default { $type: "color", $value: "{colors.chrome.500}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8194,7 +8193,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8217,7 +8216,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8244,7 +8243,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8273,7 +8272,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8300,7 +8299,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8343,7 +8342,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8370,7 +8369,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8397,7 +8396,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8424,7 +8423,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8451,7 +8450,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8478,7 +8477,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8498,7 +8497,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8516,7 +8515,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8534,7 +8533,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8552,7 +8551,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8570,7 +8569,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8588,7 +8587,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8606,7 +8605,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8624,7 +8623,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8642,7 +8641,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8660,7 +8659,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8678,7 +8677,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8698,7 +8697,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8716,7 +8715,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8734,7 +8733,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8752,7 +8751,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8770,7 +8769,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8788,7 +8787,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8806,7 +8805,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8824,7 +8823,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8842,7 +8841,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8860,7 +8859,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8878,7 +8877,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-light-dimmer-desktop-harness.ts b/packages/core-design-system/src/styles-esm/light-dimmer-harness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-light-dimmer-desktop-harness.ts rename to packages/core-design-system/src/styles-esm/light-dimmer-harness.ts index c1a8523924..58a326f7c0 100644 --- a/packages/core-design-system/src/styles-esm/source-light-dimmer-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/light-dimmer-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:14 GMT + * Generated on Tue, 18 Mar 2025 06:44:14 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -253,7 +253,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", filePath: "design-tokens/mode/light/dimmer.json", @@ -273,7 +273,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -292,7 +292,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/light/dimmer.json", @@ -312,7 +312,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -333,7 +333,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -354,7 +354,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -375,7 +375,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -396,7 +396,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -417,7 +417,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.1)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/light/dimmer.json", @@ -437,7 +437,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -456,7 +456,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.15)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/light/dimmer.json", @@ -476,7 +476,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -498,7 +498,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -520,7 +520,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -531,7 +531,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/light/dimmer.json", @@ -542,7 +542,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -568,7 +568,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -590,7 +590,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -612,7 +612,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -623,7 +623,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for accordion items. Provides visual separation between accordion panels.", filePath: "design-tokens/mode/light/dimmer.json", @@ -634,7 +634,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -659,7 +659,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -682,7 +682,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -705,7 +705,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -717,7 +717,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/light/dimmer.json", @@ -728,7 +728,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -753,7 +753,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -776,7 +776,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -797,7 +797,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.08)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/light/dimmer.json", @@ -817,7 +817,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -838,7 +838,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.15)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/light/dimmer.json", @@ -858,7 +858,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -884,7 +884,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -906,7 +906,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -917,7 +917,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/light/dimmer.json", @@ -928,7 +928,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -953,7 +953,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -976,7 +976,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -999,7 +999,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1024,7 +1024,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1045,7 +1045,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.07)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.07)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/light/dimmer.json", @@ -1065,7 +1065,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1086,7 +1086,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.3)", + $value: "lch(from var(--cn-colors-chrome-600) l c h / 0.3)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/light/dimmer.json", @@ -1106,7 +1106,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1131,7 +1131,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable green text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1152,7 +1152,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-green-300) l c h / 0.3)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/light/dimmer.json", @@ -1172,7 +1172,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1193,7 +1193,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-200) l c h / 0.07)", + $value: "lch(from var(--cn-colors-green-200) l c h / 0.07)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/light/dimmer.json", @@ -1213,7 +1213,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1238,7 +1238,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1259,7 +1259,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.3)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/light/dimmer.json", @@ -1279,7 +1279,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1300,7 +1300,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.07)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/light/dimmer.json", @@ -1320,7 +1320,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1345,7 +1345,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1366,7 +1366,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-yellow-300) l c h / 0.3)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/light/dimmer.json", @@ -1386,7 +1386,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1407,7 +1407,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.07)", + $value: "lch(from var(--cn-colors-yellow-200) l c h / 0.07)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/light/dimmer.json", @@ -1427,7 +1427,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1452,7 +1452,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1473,7 +1473,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.3)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/light/dimmer.json", @@ -1493,7 +1493,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1514,7 +1514,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.07)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/light/dimmer.json", @@ -1534,7 +1534,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1559,7 +1559,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1580,7 +1580,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-purple-300) l c h / 0.3)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/light/dimmer.json", @@ -1600,7 +1600,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1621,7 +1621,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-purple-300) l c h / 0.07)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/light/dimmer.json", @@ -1641,7 +1641,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1666,7 +1666,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1689,7 +1689,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1714,7 +1714,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1740,7 +1740,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1762,7 +1762,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1784,7 +1784,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1809,7 +1809,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1832,7 +1832,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1855,7 +1855,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1880,7 +1880,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1903,7 +1903,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1926,7 +1926,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1949,7 +1949,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1973,7 +1973,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1997,7 +1997,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2010,7 +2010,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", filePath: "design-tokens/mode/light/dimmer.json", @@ -2021,7 +2021,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2047,7 +2047,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2071,7 +2071,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2095,7 +2095,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2123,7 +2123,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2147,7 +2147,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2173,7 +2173,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2197,7 +2197,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2224,7 +2224,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable green text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2245,7 +2245,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-200) l c h / 0.08)", + $value: "lch(from var(--cn-colors-green-200) l c h / 0.08)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/light/dimmer.json", @@ -2265,7 +2265,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2286,7 +2286,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-green-300) l c h / 0.3)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/light/dimmer.json", @@ -2306,7 +2306,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2328,7 +2328,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-green-200) l c h / 0.1)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/dimmer.json", @@ -2348,7 +2348,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2370,7 +2370,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-200) l c h / 0.15)", + $value: "lch(from var(--cn-colors-green-200) l c h / 0.15)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/dimmer.json", @@ -2390,7 +2390,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2417,7 +2417,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2438,7 +2438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.08)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.08)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/light/dimmer.json", @@ -2458,7 +2458,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2479,7 +2479,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.3)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/light/dimmer.json", @@ -2499,7 +2499,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2521,7 +2521,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/dimmer.json", @@ -2541,7 +2541,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2563,7 +2563,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.15)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/dimmer.json", @@ -2583,7 +2583,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2610,7 +2610,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2631,7 +2631,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2656,7 +2656,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2682,7 +2682,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2693,7 +2693,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", filePath: "design-tokens/mode/light/dimmer.json", @@ -2704,7 +2704,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2728,7 +2728,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2750,7 +2750,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2772,7 +2772,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2783,7 +2783,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for dialog components.", filePath: "design-tokens/mode/light/dimmer.json", isSource: true, @@ -2792,7 +2792,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2812,7 +2812,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/light/dimmer.json", @@ -2832,7 +2832,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2856,7 +2856,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2867,7 +2867,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for dropdown menus container.", filePath: "design-tokens/mode/light/dimmer.json", isSource: true, @@ -2876,7 +2876,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2899,7 +2899,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2921,7 +2921,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2944,7 +2944,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.07)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/light/dimmer.json", @@ -2964,7 +2964,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -3000,7 +3000,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3020,7 +3020,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.08)", $description: "Green background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/light/dimmer.json", @@ -3040,7 +3040,7 @@ export default { $description: "Green background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3060,7 +3060,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.12)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/light/dimmer.json", @@ -3080,7 +3080,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3100,7 +3100,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.15)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/light/dimmer.json", @@ -3120,7 +3120,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3142,7 +3142,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3164,7 +3164,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3184,7 +3184,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.08)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/light/dimmer.json", @@ -3204,7 +3204,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3224,7 +3224,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.12)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/light/dimmer.json", @@ -3244,7 +3244,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3264,7 +3264,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.15)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/light/dimmer.json", @@ -3284,7 +3284,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3306,7 +3306,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3328,7 +3328,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3350,7 +3350,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3372,7 +3372,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3392,7 +3392,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.08)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/light/dimmer.json", @@ -3412,7 +3412,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3432,7 +3432,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/light/dimmer.json", isSource: true, @@ -3450,7 +3450,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3472,7 +3472,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3494,7 +3494,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3518,7 +3518,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3540,7 +3540,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3562,7 +3562,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3584,7 +3584,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3595,7 +3595,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", filePath: "design-tokens/mode/light/dimmer.json", @@ -3606,7 +3606,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3630,7 +3630,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3654,7 +3654,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3676,7 +3676,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3699,7 +3699,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3722,7 +3722,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3743,7 +3743,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3756,7 +3756,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Navigation container border.", filePath: "design-tokens/mode/light/dimmer.json", isSource: true, @@ -3765,7 +3765,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3785,7 +3785,7 @@ export default { $value: "{background.2}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3810,7 +3810,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3836,7 +3836,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3865,7 +3865,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3890,7 +3890,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3904,7 +3904,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.3) 30%, lch(63.38% 78.04 52.26) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--cn-colors-chrome-200) l c h / 0.3) 30%, lch(63.38% 78.04 52.26) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/light/dimmer.json", @@ -3916,7 +3916,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3942,7 +3942,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3968,7 +3968,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3996,7 +3996,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -4009,7 +4009,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/light/dimmer.json", @@ -4020,7 +4020,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4046,7 +4046,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4059,7 +4059,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", filePath: "design-tokens/mode/light/dimmer.json", @@ -4070,7 +4070,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4095,7 +4095,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/light/dimmer.json", @@ -4115,7 +4115,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4141,7 +4141,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4163,7 +4163,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4185,7 +4185,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4205,7 +4205,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.15)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/light/dimmer.json", isSource: true, @@ -4223,7 +4223,7 @@ export default { $value: "{colors.chrome.700}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4243,7 +4243,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.2)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/light/dimmer.json", isSource: true, @@ -4261,7 +4261,7 @@ export default { $value: "{colors.chrome.700}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4285,7 +4285,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4309,7 +4309,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4335,7 +4335,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4359,7 +4359,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4384,7 +4384,7 @@ export default { $value: "{colors.chrome.50}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4405,7 +4405,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4430,7 +4430,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4451,7 +4451,7 @@ export default { $value: "{colors.chrome.800}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4474,7 +4474,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4498,7 +4498,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4522,7 +4522,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4546,7 +4546,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4571,7 +4571,7 @@ export default { $value: "{colors.pure.white}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4592,7 +4592,7 @@ export default { $value: "{colors.chrome.500}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4618,7 +4618,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4643,7 +4643,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4666,7 +4666,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4689,7 +4689,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4714,7 +4714,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4737,7 +4737,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4760,7 +4760,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4775,7 +4775,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/light/dimmer.json", @@ -4786,7 +4786,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4812,7 +4812,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4837,7 +4837,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4860,7 +4860,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4885,7 +4885,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4908,7 +4908,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4933,7 +4933,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4956,7 +4956,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4982,7 +4982,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -5004,7 +5004,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -5026,7 +5026,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -5048,7 +5048,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5070,7 +5070,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5092,7 +5092,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5114,7 +5114,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5139,7 +5139,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5162,7 +5162,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5187,7 +5187,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5210,7 +5210,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5237,7 +5237,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5260,7 +5260,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5283,7 +5283,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.07)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.07)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/light/dimmer.json", @@ -5303,7 +5303,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5315,7 +5315,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/light/dimmer.json", @@ -5326,7 +5326,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5351,7 +5351,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5377,7 +5377,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5388,7 +5388,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/light/dimmer.json", @@ -5399,7 +5399,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5423,7 +5423,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5447,7 +5447,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5471,7 +5471,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5497,7 +5497,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5521,7 +5521,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5534,7 +5534,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", filePath: "design-tokens/mode/light/dimmer.json", @@ -5545,7 +5545,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5574,7 +5574,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5597,7 +5597,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5620,7 +5620,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5641,7 +5641,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags. ", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5666,7 +5666,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5689,7 +5689,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5712,7 +5712,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5733,7 +5733,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags. ", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5758,7 +5758,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5781,7 +5781,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5804,7 +5804,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5825,7 +5825,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5850,7 +5850,7 @@ export default { $description: "Text color for green tags. Ensures readability while maintaining the green color theme.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5873,7 +5873,7 @@ export default { $description: "Background color for green tags. Creates a distinct surface with green theme styling.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5896,7 +5896,7 @@ export default { $description: "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5917,7 +5917,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5942,7 +5942,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5965,7 +5965,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5988,7 +5988,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -6009,7 +6009,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -6034,7 +6034,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6057,7 +6057,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6080,7 +6080,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6101,7 +6101,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6126,7 +6126,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6149,7 +6149,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6172,7 +6172,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6193,7 +6193,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6218,7 +6218,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6241,7 +6241,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6264,7 +6264,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6285,7 +6285,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6310,7 +6310,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6333,7 +6333,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6356,7 +6356,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6377,7 +6377,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6402,7 +6402,7 @@ export default { $description: "Text color for purple tags. Ensures readability while maintaining the purple color theme.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6425,7 +6425,7 @@ export default { $description: "Background color for purple tags. Creates a distinct surface with purple theme styling.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6448,7 +6448,7 @@ export default { $description: "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6469,7 +6469,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6494,7 +6494,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6517,7 +6517,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6540,7 +6540,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6561,7 +6561,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6586,7 +6586,7 @@ export default { $description: "Text color for violet tags. Ensures readability while maintaining the violet color theme.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6609,7 +6609,7 @@ export default { $description: "Background color for violet tags. Creates a distinct surface with violet theme styling.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6632,7 +6632,7 @@ export default { $description: "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6653,7 +6653,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6678,7 +6678,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6701,7 +6701,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6724,7 +6724,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6745,7 +6745,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6770,7 +6770,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6793,7 +6793,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6816,7 +6816,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6837,7 +6837,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6864,7 +6864,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6887,7 +6887,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6910,7 +6910,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6922,7 +6922,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/light/dimmer.json", @@ -6933,7 +6933,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6958,7 +6958,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6981,7 +6981,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -7004,7 +7004,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -7027,7 +7027,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -7053,7 +7053,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7075,7 +7075,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7089,7 +7089,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7117,7 +7117,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7127,8 +7127,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7156,7 +7155,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7167,7 +7166,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + "0 1px 3px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.4), 0 1px 2px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7205,7 +7204,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7216,7 +7215,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + "0 4px 6px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.35), 0 2px 4px -2px lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7254,7 +7253,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7265,7 +7264,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + "0 10px 15px -3px lch(from var(--cn-colors-chrome-300) l c h / 0.35), 0 4px 6px -4px lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7303,7 +7302,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7314,7 +7313,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + "0 20px 25px -5px lch(from var(--cn-colors-chrome-300) l c h / 0.35), 0 8px 10px -6px lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7352,7 +7351,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7363,7 +7362,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + "0 25px 50px -12px lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7391,7 +7390,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7402,7 +7401,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-chrome-900) l c h / 0.07)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7430,7 +7429,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7451,7 +7450,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7471,7 +7470,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7490,7 +7489,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7510,7 +7509,7 @@ export default { $description: "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7529,7 +7528,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7549,7 +7548,7 @@ export default { $description: "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7568,7 +7567,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7588,7 +7587,7 @@ export default { $description: "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7607,7 +7606,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7627,7 +7626,7 @@ export default { $description: "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7646,7 +7645,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7666,7 +7665,7 @@ export default { $description: "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7685,7 +7684,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7705,7 +7704,7 @@ export default { $description: "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7724,7 +7723,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + $value: "lch(from var(--cn-colors-chrome-900) l c h / 0.07)", $description: "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/light/dimmer.json", @@ -7744,7 +7743,7 @@ export default { $description: "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7794,7 +7793,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7814,7 +7813,7 @@ export default { $type: "color", $value: "{colors.yellow.200}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7832,7 +7831,7 @@ export default { $type: "color", $value: "{colors.pink.300}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7850,7 +7849,7 @@ export default { $type: "color", $value: "{colors.purple.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7868,7 +7867,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7888,7 +7887,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7906,7 +7905,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7924,7 +7923,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7945,7 +7944,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7966,7 +7965,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.3)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.3)", filePath: "design-tokens/mode/light/dimmer.json", isSource: true, original: { @@ -7982,7 +7981,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8001,7 +8000,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8022,7 +8021,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8041,7 +8040,7 @@ export default { $type: "color", $value: "{colors.blue.400}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8060,7 +8059,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8082,7 +8081,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8108,7 +8107,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8130,7 +8129,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8150,7 +8149,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8174,7 +8173,7 @@ export default { $type: "color", $value: "{colors.chrome.500}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8194,7 +8193,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8217,7 +8216,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8244,7 +8243,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8273,7 +8272,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8300,7 +8299,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8343,7 +8342,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8370,7 +8369,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8397,7 +8396,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8424,7 +8423,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8451,7 +8450,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8478,7 +8477,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8498,7 +8497,7 @@ export default { $type: "color", $value: "{colors.cyan.50}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8516,7 +8515,7 @@ export default { $type: "color", $value: "{colors.cyan.100}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8534,7 +8533,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8552,7 +8551,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8570,7 +8569,7 @@ export default { $type: "color", $value: "{colors.cyan.400}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8588,7 +8587,7 @@ export default { $type: "color", $value: "{colors.cyan.500}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8606,7 +8605,7 @@ export default { $type: "color", $value: "{colors.cyan.600}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8624,7 +8623,7 @@ export default { $type: "color", $value: "{colors.cyan.700}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8642,7 +8641,7 @@ export default { $type: "color", $value: "{colors.cyan.800}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8660,7 +8659,7 @@ export default { $type: "color", $value: "{colors.cyan.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8678,7 +8677,7 @@ export default { $type: "color", $value: "{colors.cyan.950}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8698,7 +8697,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8716,7 +8715,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8734,7 +8733,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8752,7 +8751,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8770,7 +8769,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8788,7 +8787,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8806,7 +8805,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8824,7 +8823,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8842,7 +8841,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8860,7 +8859,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8878,7 +8877,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-light-dimmer-protanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/light-dimmer-protanopia-gitness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-light-dimmer-protanopia-desktop-gitness.ts rename to packages/core-design-system/src/styles-esm/light-dimmer-protanopia-gitness.ts index 8bddecedae..98d786316b 100644 --- a/packages/core-design-system/src/styles-esm/source-light-dimmer-protanopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/light-dimmer-protanopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:20 GMT + * Generated on Tue, 18 Mar 2025 06:44:17 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states. Using blue instead of green for protanopia visibility.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -253,7 +253,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -273,7 +273,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -292,7 +292,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -312,7 +312,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -333,7 +333,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -354,7 +354,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing. Using blue instead of green for protanopia visibility.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -375,7 +375,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -396,7 +396,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -417,7 +417,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.1)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -437,7 +437,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -456,7 +456,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.15)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -476,7 +476,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -498,7 +498,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -520,7 +520,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -531,7 +531,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -542,7 +542,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -568,7 +568,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -590,7 +590,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -612,7 +612,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -623,7 +623,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for accordion items. Provides visual separation between accordion panels.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -634,7 +634,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -659,7 +659,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -682,7 +682,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -705,7 +705,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -717,7 +717,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -728,7 +728,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -753,7 +753,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -776,7 +776,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -797,7 +797,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.08)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -817,7 +817,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -838,7 +838,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.15)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -858,7 +858,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -884,7 +884,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -906,7 +906,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -917,7 +917,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -928,7 +928,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -953,7 +953,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -976,7 +976,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -999,7 +999,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1024,7 +1024,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1045,7 +1045,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.07)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.07)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -1065,7 +1065,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1086,7 +1086,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.3)", + $value: "lch(from var(--cn-colors-chrome-600) l c h / 0.3)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -1106,7 +1106,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1131,7 +1131,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable blue text. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1152,7 +1152,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.3)", $description: "Border color for success badges. Provides subtle definition for success state indicators. Using blue instead of green for protanopia visibility.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -1172,7 +1172,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1193,7 +1193,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-200) l c h / 0.07)", + $value: "lch(from var(--cn-colors-blue-200) l c h / 0.07)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator. Using blue instead of green for protanopia visibility.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -1213,7 +1213,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1238,7 +1238,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1259,7 +1259,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.3)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -1279,7 +1279,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1300,7 +1300,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.07)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -1320,7 +1320,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1345,7 +1345,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1366,7 +1366,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-yellow-300) l c h / 0.3)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -1386,7 +1386,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1407,7 +1407,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.07)", + $value: "lch(from var(--cn-colors-yellow-200) l c h / 0.07)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -1427,7 +1427,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1452,7 +1452,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1473,7 +1473,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.3)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -1493,7 +1493,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1514,7 +1514,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.07)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -1534,7 +1534,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1559,7 +1559,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1580,7 +1580,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-purple-300) l c h / 0.3)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -1600,7 +1600,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1621,7 +1621,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-purple-300) l c h / 0.07)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -1641,7 +1641,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1666,7 +1666,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1689,7 +1689,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1714,7 +1714,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1740,7 +1740,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1762,7 +1762,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1784,7 +1784,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1809,7 +1809,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1832,7 +1832,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1855,7 +1855,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1880,7 +1880,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1903,7 +1903,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1926,7 +1926,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1949,7 +1949,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1973,7 +1973,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1997,7 +1997,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2010,7 +2010,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -2021,7 +2021,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2047,7 +2047,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2071,7 +2071,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2095,7 +2095,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2123,7 +2123,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2147,7 +2147,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2173,7 +2173,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2197,7 +2197,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2224,7 +2224,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable blue text. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2245,7 +2245,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-200) l c h / 0.08)", + $value: "lch(from var(--cn-colors-blue-200) l c h / 0.08)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling. Using blue instead of green for protanopia visibility.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -2265,7 +2265,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2286,7 +2286,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.3)", $description: "Border color for success buttons. Provides definition for positive action buttons. Using blue instead of green for protanopia visibility.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -2306,7 +2306,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2328,7 +2328,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-blue-200) l c h / 0.1)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction. Using blue instead of green for protanopia visibility.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -2348,7 +2348,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2370,7 +2370,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-200) l c h / 0.15)", + $value: "lch(from var(--cn-colors-blue-200) l c h / 0.15)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. Using blue instead of green for protanopia visibility.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -2390,7 +2390,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2417,7 +2417,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2438,7 +2438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.08)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.08)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -2458,7 +2458,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2479,7 +2479,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.3)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -2499,7 +2499,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2521,7 +2521,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -2541,7 +2541,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2563,7 +2563,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.15)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -2583,7 +2583,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2610,7 +2610,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2631,7 +2631,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2656,7 +2656,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2682,7 +2682,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2693,7 +2693,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -2704,7 +2704,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2728,7 +2728,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2750,7 +2750,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2772,7 +2772,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2783,7 +2783,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for dialog components.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", isSource: true, @@ -2792,7 +2792,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2812,7 +2812,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -2832,7 +2832,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2856,7 +2856,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2867,7 +2867,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for dropdown menus container.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", isSource: true, @@ -2876,7 +2876,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2899,7 +2899,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2921,7 +2921,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2944,7 +2944,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.07)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -2964,7 +2964,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -3000,7 +3000,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3020,7 +3020,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.08)", $description: "Blue background highlighting newly added code lines while maintaining readability. Using blue instead of green for protanopia visibility.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -3040,7 +3040,7 @@ export default { $description: "Blue background highlighting newly added code lines while maintaining readability. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3060,7 +3060,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for line numbers of added code, providing visual connection to added content. Using blue instead of green for protanopia visibility.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -3080,7 +3080,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3100,7 +3100,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.15)", $description: "Stronger emphasis color for specific character changes within added lines. Using blue instead of green for protanopia visibility.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -3120,7 +3120,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3142,7 +3142,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3164,7 +3164,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3184,7 +3184,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.08)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -3204,7 +3204,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3224,7 +3224,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.12)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -3244,7 +3244,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3264,7 +3264,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.15)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -3284,7 +3284,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3306,7 +3306,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3328,7 +3328,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3350,7 +3350,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3372,7 +3372,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3392,7 +3392,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.08)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -3412,7 +3412,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3432,7 +3432,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", isSource: true, @@ -3450,7 +3450,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3472,7 +3472,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3494,7 +3494,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3518,7 +3518,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3540,7 +3540,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3562,7 +3562,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3584,7 +3584,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3595,7 +3595,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -3606,7 +3606,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3630,7 +3630,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3654,7 +3654,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3676,7 +3676,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3699,7 +3699,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3722,7 +3722,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3743,7 +3743,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3756,7 +3756,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Navigation container border.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", isSource: true, @@ -3765,7 +3765,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3785,7 +3785,7 @@ export default { $value: "{background.2}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3810,7 +3810,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3836,7 +3836,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3865,7 +3865,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3890,7 +3890,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3904,7 +3904,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.3) 30%, lch(63.38% 78.04 52.26) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--cn-colors-chrome-200) l c h / 0.3) 30%, lch(63.38% 78.04 52.26) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -3916,7 +3916,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3942,7 +3942,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3968,7 +3968,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3996,7 +3996,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -4009,7 +4009,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -4020,7 +4020,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4046,7 +4046,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4059,7 +4059,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -4070,7 +4070,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4095,7 +4095,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -4115,7 +4115,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4141,7 +4141,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4163,7 +4163,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4185,7 +4185,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4205,7 +4205,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.15)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", isSource: true, @@ -4223,7 +4223,7 @@ export default { $value: "{colors.chrome.700}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4243,7 +4243,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.2)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", isSource: true, @@ -4261,7 +4261,7 @@ export default { $value: "{colors.chrome.700}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4285,7 +4285,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4309,7 +4309,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4335,7 +4335,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4359,7 +4359,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4384,7 +4384,7 @@ export default { $value: "{colors.chrome.50}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4405,7 +4405,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4430,7 +4430,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4451,7 +4451,7 @@ export default { $value: "{colors.chrome.800}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4474,7 +4474,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4498,7 +4498,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4522,7 +4522,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4546,7 +4546,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4571,7 +4571,7 @@ export default { $value: "{colors.pure.white}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4592,7 +4592,7 @@ export default { $value: "{colors.chrome.500}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4618,7 +4618,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4643,7 +4643,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4666,7 +4666,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4689,7 +4689,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4714,7 +4714,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4737,7 +4737,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4760,7 +4760,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4775,7 +4775,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -4786,7 +4786,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4812,7 +4812,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4837,7 +4837,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4860,7 +4860,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4885,7 +4885,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4908,7 +4908,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4933,7 +4933,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4956,7 +4956,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4982,7 +4982,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -5004,7 +5004,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -5026,7 +5026,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -5048,7 +5048,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5070,7 +5070,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5092,7 +5092,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5114,7 +5114,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5139,7 +5139,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5162,7 +5162,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5187,7 +5187,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5210,7 +5210,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5237,7 +5237,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5260,7 +5260,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5283,7 +5283,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.07)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.07)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -5303,7 +5303,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5315,7 +5315,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -5326,7 +5326,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5351,7 +5351,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5377,7 +5377,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5388,7 +5388,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -5399,7 +5399,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5423,7 +5423,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5447,7 +5447,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5471,7 +5471,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5497,7 +5497,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5521,7 +5521,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5534,7 +5534,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -5545,7 +5545,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5574,7 +5574,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5597,7 +5597,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5620,7 +5620,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5641,7 +5641,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5666,7 +5666,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5689,7 +5689,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5712,7 +5712,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5733,7 +5733,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5758,7 +5758,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5781,7 +5781,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5804,7 +5804,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5825,7 +5825,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5850,7 +5850,7 @@ export default { $description: "Text color for green tags. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5873,7 +5873,7 @@ export default { $description: "Background color for green tags. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5896,7 +5896,7 @@ export default { $description: "Subtle background variation for green tags. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5919,7 +5919,7 @@ export default { $description: "Border color for green tags. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5944,7 +5944,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5967,7 +5967,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5990,7 +5990,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -6011,7 +6011,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -6036,7 +6036,7 @@ export default { $description: "Text color for lime tags. Using blue instead of lime/green for protanopia visibility.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6059,7 +6059,7 @@ export default { $description: "Background color for lime tags. Using blue instead of lime/green for protanopia visibility.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6082,7 +6082,7 @@ export default { $description: "Subtle background variation for lime tags. Using blue instead of lime/green for protanopia visibility.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6105,7 +6105,7 @@ export default { $description: "Border color for lime tags. Using blue instead of lime/green for protanopia visibility.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6130,7 +6130,7 @@ export default { $description: "Text color for mint tags. Using blue instead of mint/green for protanopia visibility.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6153,7 +6153,7 @@ export default { $description: "Background color for mint tags. Using blue instead of mint/green for protanopia visibility.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6176,7 +6176,7 @@ export default { $description: "Subtle background variation for mint tags. Using blue instead of mint/green for protanopia visibility.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6199,7 +6199,7 @@ export default { $description: "Border color for mint tags. Using blue instead of mint/green for protanopia visibility.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6224,7 +6224,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6247,7 +6247,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6270,7 +6270,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6291,7 +6291,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6316,7 +6316,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6339,7 +6339,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6362,7 +6362,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6383,7 +6383,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6408,7 +6408,7 @@ export default { $description: "Text color for purple tags. Ensures readability while maintaining the purple color theme.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6431,7 +6431,7 @@ export default { $description: "Background color for purple tags. Creates a distinct surface with purple theme styling.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6454,7 +6454,7 @@ export default { $description: "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6475,7 +6475,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6500,7 +6500,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6523,7 +6523,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6546,7 +6546,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6567,7 +6567,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6592,7 +6592,7 @@ export default { $description: "Text color for violet tags. Ensures readability while maintaining the violet color theme.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6615,7 +6615,7 @@ export default { $description: "Background color for violet tags. Creates a distinct surface with violet theme styling.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6638,7 +6638,7 @@ export default { $description: "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6659,7 +6659,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6684,7 +6684,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6707,7 +6707,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6730,7 +6730,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6751,7 +6751,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6776,7 +6776,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6799,7 +6799,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6822,7 +6822,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6843,7 +6843,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6870,7 +6870,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6893,7 +6893,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6916,7 +6916,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6928,7 +6928,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -6939,7 +6939,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6964,7 +6964,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6987,7 +6987,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -7010,7 +7010,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -7033,7 +7033,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -7059,7 +7059,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7081,7 +7081,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7095,7 +7095,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7123,7 +7123,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7133,8 +7133,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7162,7 +7161,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7173,7 +7172,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + "0 1px 3px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.4), 0 1px 2px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7211,7 +7210,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7222,7 +7221,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + "0 4px 6px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.35), 0 2px 4px -2px lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7260,7 +7259,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7271,7 +7270,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + "0 10px 15px -3px lch(from var(--cn-colors-chrome-300) l c h / 0.35), 0 4px 6px -4px lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7309,7 +7308,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7320,7 +7319,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + "0 20px 25px -5px lch(from var(--cn-colors-chrome-300) l c h / 0.35), 0 8px 10px -6px lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7358,7 +7357,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7369,7 +7368,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + "0 25px 50px -12px lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7397,7 +7396,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7408,7 +7407,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-chrome-900) l c h / 0.07)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7436,7 +7435,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7457,7 +7456,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7477,7 +7476,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7496,7 +7495,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7516,7 +7515,7 @@ export default { $description: "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7535,7 +7534,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7555,7 +7554,7 @@ export default { $description: "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7574,7 +7573,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7594,7 +7593,7 @@ export default { $description: "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7613,7 +7612,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7633,7 +7632,7 @@ export default { $description: "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7652,7 +7651,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7672,7 +7671,7 @@ export default { $description: "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7691,7 +7690,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7711,7 +7710,7 @@ export default { $description: "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7730,7 +7729,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + $value: "lch(from var(--cn-colors-chrome-900) l c h / 0.07)", $description: "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7750,7 +7749,7 @@ export default { $description: "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7800,7 +7799,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7820,7 +7819,7 @@ export default { $type: "color", $value: "{colors.yellow.200}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7838,7 +7837,7 @@ export default { $type: "color", $value: "{colors.pink.300}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7856,7 +7855,7 @@ export default { $type: "color", $value: "{colors.purple.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7874,7 +7873,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7894,7 +7893,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7912,7 +7911,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7930,7 +7929,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7951,7 +7950,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7972,7 +7971,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.3)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.3)", filePath: "design-tokens/mode/light/dimmer-protanopia.json", isSource: true, original: { @@ -7988,7 +7987,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8007,7 +8006,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8028,7 +8027,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8047,7 +8046,7 @@ export default { $type: "color", $value: "{colors.blue.400}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8066,7 +8065,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8088,7 +8087,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8114,7 +8113,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8136,7 +8135,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8156,7 +8155,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8180,7 +8179,7 @@ export default { $type: "color", $value: "{colors.chrome.500}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8200,7 +8199,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8223,7 +8222,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8250,7 +8249,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8279,7 +8278,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8306,7 +8305,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8349,7 +8348,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8376,7 +8375,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8403,7 +8402,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8430,7 +8429,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8457,7 +8456,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8484,7 +8483,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8504,7 +8503,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8522,7 +8521,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8540,7 +8539,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8558,7 +8557,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8576,7 +8575,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8594,7 +8593,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8612,7 +8611,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8630,7 +8629,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8648,7 +8647,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8666,7 +8665,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8684,7 +8683,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8704,7 +8703,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8722,7 +8721,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8740,7 +8739,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8758,7 +8757,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8776,7 +8775,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8794,7 +8793,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8812,7 +8811,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8830,7 +8829,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8848,7 +8847,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8866,7 +8865,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8884,7 +8883,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-light-dimmer-protanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/light-dimmer-protanopia-harness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-light-dimmer-protanopia-desktop-harness.ts rename to packages/core-design-system/src/styles-esm/light-dimmer-protanopia-harness.ts index d0939796cd..983771bcd5 100644 --- a/packages/core-design-system/src/styles-esm/source-light-dimmer-protanopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/light-dimmer-protanopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:20 GMT + * Generated on Tue, 18 Mar 2025 06:44:17 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states. Using blue instead of green for protanopia visibility.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -253,7 +253,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -273,7 +273,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -292,7 +292,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -312,7 +312,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -333,7 +333,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -354,7 +354,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing. Using blue instead of green for protanopia visibility.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -375,7 +375,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -396,7 +396,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -417,7 +417,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.1)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -437,7 +437,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -456,7 +456,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.15)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -476,7 +476,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -498,7 +498,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -520,7 +520,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -531,7 +531,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -542,7 +542,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -568,7 +568,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -590,7 +590,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -612,7 +612,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -623,7 +623,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for accordion items. Provides visual separation between accordion panels.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -634,7 +634,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -659,7 +659,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -682,7 +682,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -705,7 +705,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -717,7 +717,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -728,7 +728,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -753,7 +753,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -776,7 +776,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -797,7 +797,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.08)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -817,7 +817,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -838,7 +838,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.15)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -858,7 +858,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -884,7 +884,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -906,7 +906,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -917,7 +917,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -928,7 +928,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -953,7 +953,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -976,7 +976,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -999,7 +999,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1024,7 +1024,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1045,7 +1045,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.07)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.07)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -1065,7 +1065,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1086,7 +1086,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.3)", + $value: "lch(from var(--cn-colors-chrome-600) l c h / 0.3)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -1106,7 +1106,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1131,7 +1131,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable blue text. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1152,7 +1152,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.3)", $description: "Border color for success badges. Provides subtle definition for success state indicators. Using blue instead of green for protanopia visibility.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -1172,7 +1172,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1193,7 +1193,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-200) l c h / 0.07)", + $value: "lch(from var(--cn-colors-blue-200) l c h / 0.07)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator. Using blue instead of green for protanopia visibility.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -1213,7 +1213,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1238,7 +1238,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1259,7 +1259,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.3)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -1279,7 +1279,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1300,7 +1300,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.07)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -1320,7 +1320,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1345,7 +1345,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1366,7 +1366,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-yellow-300) l c h / 0.3)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -1386,7 +1386,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1407,7 +1407,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.07)", + $value: "lch(from var(--cn-colors-yellow-200) l c h / 0.07)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -1427,7 +1427,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1452,7 +1452,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1473,7 +1473,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.3)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -1493,7 +1493,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1514,7 +1514,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.07)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -1534,7 +1534,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1559,7 +1559,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1580,7 +1580,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-purple-300) l c h / 0.3)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -1600,7 +1600,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1621,7 +1621,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-purple-300) l c h / 0.07)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -1641,7 +1641,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1666,7 +1666,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1689,7 +1689,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1714,7 +1714,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1740,7 +1740,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1762,7 +1762,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1784,7 +1784,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1809,7 +1809,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1832,7 +1832,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1855,7 +1855,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1880,7 +1880,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1903,7 +1903,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1926,7 +1926,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1949,7 +1949,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1973,7 +1973,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1997,7 +1997,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2010,7 +2010,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -2021,7 +2021,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2047,7 +2047,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2071,7 +2071,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2095,7 +2095,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2123,7 +2123,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2147,7 +2147,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2173,7 +2173,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2197,7 +2197,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2224,7 +2224,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable blue text. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2245,7 +2245,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-200) l c h / 0.08)", + $value: "lch(from var(--cn-colors-blue-200) l c h / 0.08)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling. Using blue instead of green for protanopia visibility.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -2265,7 +2265,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2286,7 +2286,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.3)", $description: "Border color for success buttons. Provides definition for positive action buttons. Using blue instead of green for protanopia visibility.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -2306,7 +2306,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2328,7 +2328,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-blue-200) l c h / 0.1)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction. Using blue instead of green for protanopia visibility.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -2348,7 +2348,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2370,7 +2370,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-200) l c h / 0.15)", + $value: "lch(from var(--cn-colors-blue-200) l c h / 0.15)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. Using blue instead of green for protanopia visibility.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -2390,7 +2390,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2417,7 +2417,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2438,7 +2438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.08)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.08)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -2458,7 +2458,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2479,7 +2479,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.3)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -2499,7 +2499,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2521,7 +2521,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -2541,7 +2541,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2563,7 +2563,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.15)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -2583,7 +2583,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2610,7 +2610,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2631,7 +2631,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2656,7 +2656,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2682,7 +2682,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2693,7 +2693,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -2704,7 +2704,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2728,7 +2728,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2750,7 +2750,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2772,7 +2772,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2783,7 +2783,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for dialog components.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", isSource: true, @@ -2792,7 +2792,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2812,7 +2812,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -2832,7 +2832,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2856,7 +2856,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2867,7 +2867,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for dropdown menus container.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", isSource: true, @@ -2876,7 +2876,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2899,7 +2899,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2921,7 +2921,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2944,7 +2944,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.07)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -2964,7 +2964,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -3000,7 +3000,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3020,7 +3020,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.08)", $description: "Blue background highlighting newly added code lines while maintaining readability. Using blue instead of green for protanopia visibility.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -3040,7 +3040,7 @@ export default { $description: "Blue background highlighting newly added code lines while maintaining readability. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3060,7 +3060,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for line numbers of added code, providing visual connection to added content. Using blue instead of green for protanopia visibility.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -3080,7 +3080,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3100,7 +3100,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.15)", $description: "Stronger emphasis color for specific character changes within added lines. Using blue instead of green for protanopia visibility.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -3120,7 +3120,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3142,7 +3142,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3164,7 +3164,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3184,7 +3184,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.08)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -3204,7 +3204,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3224,7 +3224,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.12)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -3244,7 +3244,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3264,7 +3264,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.15)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -3284,7 +3284,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3306,7 +3306,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3328,7 +3328,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3350,7 +3350,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3372,7 +3372,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3392,7 +3392,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.08)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -3412,7 +3412,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3432,7 +3432,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", isSource: true, @@ -3450,7 +3450,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3472,7 +3472,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3494,7 +3494,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3518,7 +3518,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3540,7 +3540,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3562,7 +3562,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3584,7 +3584,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3595,7 +3595,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -3606,7 +3606,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3630,7 +3630,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3654,7 +3654,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3676,7 +3676,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3699,7 +3699,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3722,7 +3722,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3743,7 +3743,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3756,7 +3756,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Navigation container border.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", isSource: true, @@ -3765,7 +3765,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3785,7 +3785,7 @@ export default { $value: "{background.2}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3810,7 +3810,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3836,7 +3836,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3865,7 +3865,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3890,7 +3890,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3904,7 +3904,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.3) 30%, lch(63.38% 78.04 52.26) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--cn-colors-chrome-200) l c h / 0.3) 30%, lch(63.38% 78.04 52.26) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -3916,7 +3916,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3942,7 +3942,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3968,7 +3968,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3996,7 +3996,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -4009,7 +4009,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -4020,7 +4020,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4046,7 +4046,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4059,7 +4059,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -4070,7 +4070,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4095,7 +4095,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -4115,7 +4115,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4141,7 +4141,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4163,7 +4163,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4185,7 +4185,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4205,7 +4205,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.15)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", isSource: true, @@ -4223,7 +4223,7 @@ export default { $value: "{colors.chrome.700}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4243,7 +4243,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.2)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", isSource: true, @@ -4261,7 +4261,7 @@ export default { $value: "{colors.chrome.700}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4285,7 +4285,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4309,7 +4309,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4335,7 +4335,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4359,7 +4359,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4384,7 +4384,7 @@ export default { $value: "{colors.chrome.50}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4405,7 +4405,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4430,7 +4430,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4451,7 +4451,7 @@ export default { $value: "{colors.chrome.800}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4474,7 +4474,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4498,7 +4498,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4522,7 +4522,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4546,7 +4546,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4571,7 +4571,7 @@ export default { $value: "{colors.pure.white}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4592,7 +4592,7 @@ export default { $value: "{colors.chrome.500}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4618,7 +4618,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4643,7 +4643,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4666,7 +4666,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4689,7 +4689,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4714,7 +4714,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4737,7 +4737,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4760,7 +4760,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4775,7 +4775,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -4786,7 +4786,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4812,7 +4812,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4837,7 +4837,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4860,7 +4860,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4885,7 +4885,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4908,7 +4908,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4933,7 +4933,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4956,7 +4956,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4982,7 +4982,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -5004,7 +5004,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -5026,7 +5026,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -5048,7 +5048,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5070,7 +5070,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5092,7 +5092,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5114,7 +5114,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5139,7 +5139,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5162,7 +5162,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5187,7 +5187,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5210,7 +5210,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5237,7 +5237,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5260,7 +5260,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5283,7 +5283,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.07)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.07)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -5303,7 +5303,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5315,7 +5315,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -5326,7 +5326,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5351,7 +5351,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5377,7 +5377,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5388,7 +5388,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -5399,7 +5399,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5423,7 +5423,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5447,7 +5447,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5471,7 +5471,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5497,7 +5497,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5521,7 +5521,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5534,7 +5534,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -5545,7 +5545,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5574,7 +5574,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5597,7 +5597,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5620,7 +5620,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5641,7 +5641,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5666,7 +5666,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5689,7 +5689,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5712,7 +5712,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5733,7 +5733,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5758,7 +5758,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5781,7 +5781,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5804,7 +5804,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5825,7 +5825,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5850,7 +5850,7 @@ export default { $description: "Text color for green tags. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5873,7 +5873,7 @@ export default { $description: "Background color for green tags. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5896,7 +5896,7 @@ export default { $description: "Subtle background variation for green tags. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5919,7 +5919,7 @@ export default { $description: "Border color for green tags. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5944,7 +5944,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5967,7 +5967,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5990,7 +5990,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -6011,7 +6011,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -6036,7 +6036,7 @@ export default { $description: "Text color for lime tags. Using blue instead of lime/green for protanopia visibility.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6059,7 +6059,7 @@ export default { $description: "Background color for lime tags. Using blue instead of lime/green for protanopia visibility.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6082,7 +6082,7 @@ export default { $description: "Subtle background variation for lime tags. Using blue instead of lime/green for protanopia visibility.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6105,7 +6105,7 @@ export default { $description: "Border color for lime tags. Using blue instead of lime/green for protanopia visibility.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6130,7 +6130,7 @@ export default { $description: "Text color for mint tags. Using blue instead of mint/green for protanopia visibility.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6153,7 +6153,7 @@ export default { $description: "Background color for mint tags. Using blue instead of mint/green for protanopia visibility.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6176,7 +6176,7 @@ export default { $description: "Subtle background variation for mint tags. Using blue instead of mint/green for protanopia visibility.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6199,7 +6199,7 @@ export default { $description: "Border color for mint tags. Using blue instead of mint/green for protanopia visibility.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6224,7 +6224,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6247,7 +6247,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6270,7 +6270,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6291,7 +6291,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6316,7 +6316,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6339,7 +6339,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6362,7 +6362,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6383,7 +6383,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6408,7 +6408,7 @@ export default { $description: "Text color for purple tags. Ensures readability while maintaining the purple color theme.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6431,7 +6431,7 @@ export default { $description: "Background color for purple tags. Creates a distinct surface with purple theme styling.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6454,7 +6454,7 @@ export default { $description: "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6475,7 +6475,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6500,7 +6500,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6523,7 +6523,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6546,7 +6546,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6567,7 +6567,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6592,7 +6592,7 @@ export default { $description: "Text color for violet tags. Ensures readability while maintaining the violet color theme.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6615,7 +6615,7 @@ export default { $description: "Background color for violet tags. Creates a distinct surface with violet theme styling.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6638,7 +6638,7 @@ export default { $description: "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6659,7 +6659,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6684,7 +6684,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6707,7 +6707,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6730,7 +6730,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6751,7 +6751,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6776,7 +6776,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6799,7 +6799,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6822,7 +6822,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6843,7 +6843,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6870,7 +6870,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6893,7 +6893,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6916,7 +6916,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6928,7 +6928,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -6939,7 +6939,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6964,7 +6964,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6987,7 +6987,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -7010,7 +7010,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -7033,7 +7033,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -7059,7 +7059,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7081,7 +7081,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7095,7 +7095,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7123,7 +7123,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7133,8 +7133,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7162,7 +7161,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7173,7 +7172,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + "0 1px 3px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.4), 0 1px 2px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7211,7 +7210,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7222,7 +7221,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + "0 4px 6px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.35), 0 2px 4px -2px lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7260,7 +7259,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7271,7 +7270,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + "0 10px 15px -3px lch(from var(--cn-colors-chrome-300) l c h / 0.35), 0 4px 6px -4px lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7309,7 +7308,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7320,7 +7319,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + "0 20px 25px -5px lch(from var(--cn-colors-chrome-300) l c h / 0.35), 0 8px 10px -6px lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7358,7 +7357,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7369,7 +7368,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + "0 25px 50px -12px lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7397,7 +7396,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7408,7 +7407,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-chrome-900) l c h / 0.07)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7436,7 +7435,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7457,7 +7456,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7477,7 +7476,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7496,7 +7495,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7516,7 +7515,7 @@ export default { $description: "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7535,7 +7534,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7555,7 +7554,7 @@ export default { $description: "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7574,7 +7573,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7594,7 +7593,7 @@ export default { $description: "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7613,7 +7612,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7633,7 +7632,7 @@ export default { $description: "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7652,7 +7651,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7672,7 +7671,7 @@ export default { $description: "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7691,7 +7690,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7711,7 +7710,7 @@ export default { $description: "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7730,7 +7729,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + $value: "lch(from var(--cn-colors-chrome-900) l c h / 0.07)", $description: "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/light/dimmer-protanopia.json", @@ -7750,7 +7749,7 @@ export default { $description: "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7800,7 +7799,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7820,7 +7819,7 @@ export default { $type: "color", $value: "{colors.yellow.200}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7838,7 +7837,7 @@ export default { $type: "color", $value: "{colors.pink.300}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7856,7 +7855,7 @@ export default { $type: "color", $value: "{colors.purple.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7874,7 +7873,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7894,7 +7893,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7912,7 +7911,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7930,7 +7929,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7951,7 +7950,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7972,7 +7971,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.3)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.3)", filePath: "design-tokens/mode/light/dimmer-protanopia.json", isSource: true, original: { @@ -7988,7 +7987,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8007,7 +8006,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8028,7 +8027,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8047,7 +8046,7 @@ export default { $type: "color", $value: "{colors.blue.400}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8066,7 +8065,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8088,7 +8087,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8114,7 +8113,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8136,7 +8135,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8156,7 +8155,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8180,7 +8179,7 @@ export default { $type: "color", $value: "{colors.chrome.500}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8200,7 +8199,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8223,7 +8222,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8250,7 +8249,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8279,7 +8278,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8306,7 +8305,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8349,7 +8348,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8376,7 +8375,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8403,7 +8402,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8430,7 +8429,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8457,7 +8456,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8484,7 +8483,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8504,7 +8503,7 @@ export default { $type: "color", $value: "{colors.cyan.50}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8522,7 +8521,7 @@ export default { $type: "color", $value: "{colors.cyan.100}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8540,7 +8539,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8558,7 +8557,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8576,7 +8575,7 @@ export default { $type: "color", $value: "{colors.cyan.400}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8594,7 +8593,7 @@ export default { $type: "color", $value: "{colors.cyan.500}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8612,7 +8611,7 @@ export default { $type: "color", $value: "{colors.cyan.600}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8630,7 +8629,7 @@ export default { $type: "color", $value: "{colors.cyan.700}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8648,7 +8647,7 @@ export default { $type: "color", $value: "{colors.cyan.800}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8666,7 +8665,7 @@ export default { $type: "color", $value: "{colors.cyan.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8684,7 +8683,7 @@ export default { $type: "color", $value: "{colors.cyan.950}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8704,7 +8703,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8722,7 +8721,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8740,7 +8739,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8758,7 +8757,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8776,7 +8775,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8794,7 +8793,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8812,7 +8811,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8830,7 +8829,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8848,7 +8847,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8866,7 +8865,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8884,7 +8883,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-light-dimmer-tritanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/light-dimmer-tritanopia-gitness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-light-dimmer-tritanopia-desktop-gitness.ts rename to packages/core-design-system/src/styles-esm/light-dimmer-tritanopia-gitness.ts index eebf420c90..57585e864f 100644 --- a/packages/core-design-system/src/styles-esm/source-light-dimmer-tritanopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/light-dimmer-tritanopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:30 GMT + * Generated on Tue, 18 Mar 2025 06:44:25 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -253,7 +253,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -273,7 +273,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -292,7 +292,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -312,7 +312,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -333,7 +333,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -354,7 +354,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -375,7 +375,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -396,7 +396,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -417,7 +417,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.1)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -437,7 +437,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -456,7 +456,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.15)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -476,7 +476,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -498,7 +498,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -520,7 +520,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -531,7 +531,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -542,7 +542,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -568,7 +568,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -590,7 +590,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -612,7 +612,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -623,7 +623,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for accordion items. Provides visual separation between accordion panels.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -634,7 +634,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -659,7 +659,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -682,7 +682,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -705,7 +705,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -717,7 +717,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -728,7 +728,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -753,7 +753,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -776,7 +776,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -797,7 +797,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.08)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -817,7 +817,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -838,7 +838,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.15)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -858,7 +858,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -884,7 +884,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -906,7 +906,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -917,7 +917,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -928,7 +928,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -953,7 +953,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -976,7 +976,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -999,7 +999,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1024,7 +1024,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1045,7 +1045,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.07)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.07)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -1065,7 +1065,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1086,7 +1086,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.3)", + $value: "lch(from var(--cn-colors-chrome-600) l c h / 0.3)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -1106,7 +1106,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1131,7 +1131,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable cyan text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1152,7 +1152,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.3)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -1172,7 +1172,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1193,7 +1193,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.07)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.07)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -1213,7 +1213,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1238,7 +1238,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1259,7 +1259,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.3)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -1279,7 +1279,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1300,7 +1300,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.07)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -1320,7 +1320,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1345,7 +1345,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable orange text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1366,7 +1366,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.3)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -1386,7 +1386,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1407,7 +1407,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-200) l c h / 0.07)", + $value: "lch(from var(--cn-colors-orange-200) l c h / 0.07)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -1427,7 +1427,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1452,7 +1452,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1473,7 +1473,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.3)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -1493,7 +1493,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1514,7 +1514,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.07)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -1534,7 +1534,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1559,7 +1559,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1580,7 +1580,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.3)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -1600,7 +1600,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1621,7 +1621,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.07)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -1641,7 +1641,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1666,7 +1666,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1689,7 +1689,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1714,7 +1714,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1740,7 +1740,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1762,7 +1762,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1784,7 +1784,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1809,7 +1809,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1832,7 +1832,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1855,7 +1855,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1880,7 +1880,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1903,7 +1903,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1926,7 +1926,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1949,7 +1949,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1973,7 +1973,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1997,7 +1997,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2010,7 +2010,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -2021,7 +2021,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2047,7 +2047,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2071,7 +2071,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2095,7 +2095,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2123,7 +2123,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2147,7 +2147,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2173,7 +2173,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2197,7 +2197,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2224,7 +2224,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable cyan text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2245,7 +2245,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.08)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.08)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -2265,7 +2265,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2286,7 +2286,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.3)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -2306,7 +2306,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2328,7 +2328,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.1)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -2348,7 +2348,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2370,7 +2370,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.15)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.15)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -2390,7 +2390,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2417,7 +2417,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2438,7 +2438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.08)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.08)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -2458,7 +2458,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2479,7 +2479,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.3)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -2499,7 +2499,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2521,7 +2521,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -2541,7 +2541,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2563,7 +2563,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.15)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -2583,7 +2583,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2610,7 +2610,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2631,7 +2631,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2656,7 +2656,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2682,7 +2682,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2693,7 +2693,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -2704,7 +2704,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2728,7 +2728,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2750,7 +2750,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2772,7 +2772,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2783,7 +2783,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for dialog components.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", isSource: true, @@ -2792,7 +2792,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2812,7 +2812,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -2832,7 +2832,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2856,7 +2856,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2867,7 +2867,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for dropdown menus container.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", isSource: true, @@ -2876,7 +2876,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2899,7 +2899,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2921,7 +2921,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2944,7 +2944,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.07)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -2964,7 +2964,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -3000,7 +3000,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3020,7 +3020,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.08)", $description: "Cyan background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -3040,7 +3040,7 @@ export default { $description: "Cyan background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3060,7 +3060,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.12)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -3080,7 +3080,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3100,7 +3100,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.15)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -3120,7 +3120,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3142,7 +3142,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3164,7 +3164,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3184,7 +3184,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.08)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -3204,7 +3204,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3224,7 +3224,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.12)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -3244,7 +3244,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3264,7 +3264,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.15)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -3284,7 +3284,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3306,7 +3306,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3328,7 +3328,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3350,7 +3350,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3372,7 +3372,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3392,7 +3392,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.08)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -3412,7 +3412,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3432,7 +3432,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", isSource: true, @@ -3450,7 +3450,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3472,7 +3472,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3494,7 +3494,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3518,7 +3518,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3540,7 +3540,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3562,7 +3562,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3584,7 +3584,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3595,7 +3595,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -3606,7 +3606,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3630,7 +3630,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3654,7 +3654,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3676,7 +3676,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3699,7 +3699,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3722,7 +3722,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3743,7 +3743,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3756,7 +3756,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Navigation container border.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", isSource: true, @@ -3765,7 +3765,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3785,7 +3785,7 @@ export default { $value: "{background.2}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3810,7 +3810,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3836,7 +3836,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3865,7 +3865,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3890,7 +3890,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3904,7 +3904,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.3) 30%, lch(63.38% 78.04 52.26) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--cn-colors-chrome-200) l c h / 0.3) 30%, lch(63.38% 78.04 52.26) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -3916,7 +3916,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3942,7 +3942,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3968,7 +3968,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3996,7 +3996,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -4009,7 +4009,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -4020,7 +4020,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4046,7 +4046,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4059,7 +4059,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -4070,7 +4070,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4095,7 +4095,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -4115,7 +4115,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4141,7 +4141,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4163,7 +4163,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4185,7 +4185,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4205,7 +4205,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.15)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", isSource: true, @@ -4223,7 +4223,7 @@ export default { $value: "{colors.chrome.700}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4243,7 +4243,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.2)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", isSource: true, @@ -4261,7 +4261,7 @@ export default { $value: "{colors.chrome.700}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4285,7 +4285,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4309,7 +4309,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4335,7 +4335,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4359,7 +4359,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4384,7 +4384,7 @@ export default { $value: "{colors.chrome.50}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4405,7 +4405,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4430,7 +4430,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4451,7 +4451,7 @@ export default { $value: "{colors.chrome.800}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4474,7 +4474,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4498,7 +4498,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4522,7 +4522,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4546,7 +4546,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4571,7 +4571,7 @@ export default { $value: "{colors.pure.white}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4592,7 +4592,7 @@ export default { $value: "{colors.chrome.500}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4618,7 +4618,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4643,7 +4643,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4666,7 +4666,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4689,7 +4689,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4714,7 +4714,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4737,7 +4737,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4760,7 +4760,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4775,7 +4775,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -4786,7 +4786,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4812,7 +4812,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4837,7 +4837,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4860,7 +4860,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4885,7 +4885,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4908,7 +4908,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4933,7 +4933,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4956,7 +4956,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4982,7 +4982,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -5004,7 +5004,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -5026,7 +5026,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -5048,7 +5048,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5070,7 +5070,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5092,7 +5092,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5114,7 +5114,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5139,7 +5139,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5162,7 +5162,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5187,7 +5187,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5210,7 +5210,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5237,7 +5237,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5260,7 +5260,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5283,7 +5283,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.07)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.07)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -5303,7 +5303,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5315,7 +5315,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -5326,7 +5326,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5351,7 +5351,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5377,7 +5377,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5388,7 +5388,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -5399,7 +5399,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5423,7 +5423,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5447,7 +5447,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5471,7 +5471,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5497,7 +5497,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5521,7 +5521,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5534,7 +5534,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -5545,7 +5545,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5574,7 +5574,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5597,7 +5597,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5620,7 +5620,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5641,7 +5641,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags. ", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5666,7 +5666,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5689,7 +5689,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5712,7 +5712,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5733,7 +5733,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags. ", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5758,7 +5758,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5781,7 +5781,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5804,7 +5804,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5825,7 +5825,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5850,7 +5850,7 @@ export default { $description: "Text color for green tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5873,7 +5873,7 @@ export default { $description: "Background color for green tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5896,7 +5896,7 @@ export default { $description: "Subtle background variation for green tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5917,7 +5917,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags, replaced with cyan.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5942,7 +5942,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5965,7 +5965,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5988,7 +5988,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -6009,7 +6009,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -6034,7 +6034,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6057,7 +6057,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6080,7 +6080,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6101,7 +6101,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6126,7 +6126,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6149,7 +6149,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6172,7 +6172,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6193,7 +6193,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6218,7 +6218,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6241,7 +6241,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6264,7 +6264,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6285,7 +6285,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6310,7 +6310,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6333,7 +6333,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6356,7 +6356,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6377,7 +6377,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6402,7 +6402,7 @@ export default { $description: "Text color for purple tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6425,7 +6425,7 @@ export default { $description: "Background color for purple tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6448,7 +6448,7 @@ export default { $description: "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6469,7 +6469,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags, replaced with cyan.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6494,7 +6494,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6517,7 +6517,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6540,7 +6540,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6561,7 +6561,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6586,7 +6586,7 @@ export default { $description: "Text color for violet tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6609,7 +6609,7 @@ export default { $description: "Background color for violet tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6632,7 +6632,7 @@ export default { $description: "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6653,7 +6653,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags, replaced with cyan.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6678,7 +6678,7 @@ export default { $description: "Text color for yellow tags, replaced with orange for tritanopia visibility.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6701,7 +6701,7 @@ export default { $description: "Background color for yellow tags, replaced with orange for tritanopia visibility.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6724,7 +6724,7 @@ export default { $description: "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6745,7 +6745,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags, replaced with orange.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6770,7 +6770,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6793,7 +6793,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6816,7 +6816,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6837,7 +6837,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6864,7 +6864,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6887,7 +6887,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6910,7 +6910,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6922,7 +6922,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -6933,7 +6933,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6958,7 +6958,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6981,7 +6981,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -7004,7 +7004,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -7027,7 +7027,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -7053,7 +7053,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7075,7 +7075,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7089,7 +7089,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7117,7 +7117,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7127,8 +7127,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7156,7 +7155,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7167,7 +7166,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + "0 1px 3px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.4), 0 1px 2px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7205,7 +7204,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7216,7 +7215,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + "0 4px 6px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.35), 0 2px 4px -2px lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7254,7 +7253,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7265,7 +7264,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + "0 10px 15px -3px lch(from var(--cn-colors-chrome-300) l c h / 0.35), 0 4px 6px -4px lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7303,7 +7302,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7314,7 +7313,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + "0 20px 25px -5px lch(from var(--cn-colors-chrome-300) l c h / 0.35), 0 8px 10px -6px lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7352,7 +7351,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7363,7 +7362,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + "0 25px 50px -12px lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7391,7 +7390,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7402,7 +7401,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-chrome-900) l c h / 0.07)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7430,7 +7429,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7451,7 +7450,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7471,7 +7470,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7490,7 +7489,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7510,7 +7509,7 @@ export default { $description: "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7529,7 +7528,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7549,7 +7548,7 @@ export default { $description: "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7568,7 +7567,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7588,7 +7587,7 @@ export default { $description: "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7607,7 +7606,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7627,7 +7626,7 @@ export default { $description: "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7646,7 +7645,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7666,7 +7665,7 @@ export default { $description: "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7685,7 +7684,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7705,7 +7704,7 @@ export default { $description: "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7724,7 +7723,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + $value: "lch(from var(--cn-colors-chrome-900) l c h / 0.07)", $description: "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7744,7 +7743,7 @@ export default { $description: "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7794,7 +7793,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7814,7 +7813,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7832,7 +7831,7 @@ export default { $type: "color", $value: "{colors.pink.300}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7850,7 +7849,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7868,7 +7867,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7888,7 +7887,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7906,7 +7905,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7924,7 +7923,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7945,7 +7944,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7966,7 +7965,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.3)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.3)", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", isSource: true, original: { @@ -7982,7 +7981,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8001,7 +8000,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8022,7 +8021,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8041,7 +8040,7 @@ export default { $type: "color", $value: "{colors.blue.400}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8060,7 +8059,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8082,7 +8081,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8108,7 +8107,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8130,7 +8129,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8150,7 +8149,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8174,7 +8173,7 @@ export default { $type: "color", $value: "{colors.chrome.500}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8194,7 +8193,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8217,7 +8216,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8244,7 +8243,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8273,7 +8272,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8300,7 +8299,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8343,7 +8342,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8370,7 +8369,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8397,7 +8396,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8424,7 +8423,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8451,7 +8450,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8478,7 +8477,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8498,7 +8497,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8516,7 +8515,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8534,7 +8533,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8552,7 +8551,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8570,7 +8569,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8588,7 +8587,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8606,7 +8605,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8624,7 +8623,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8642,7 +8641,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8660,7 +8659,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8678,7 +8677,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8698,7 +8697,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8716,7 +8715,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8734,7 +8733,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8752,7 +8751,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8770,7 +8769,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8788,7 +8787,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8806,7 +8805,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8824,7 +8823,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8842,7 +8841,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8860,7 +8859,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8878,7 +8877,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-light-dimmer-tritanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/light-dimmer-tritanopia-harness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-light-dimmer-tritanopia-desktop-harness.ts rename to packages/core-design-system/src/styles-esm/light-dimmer-tritanopia-harness.ts index 90f4d9e1ba..d9f312d1f8 100644 --- a/packages/core-design-system/src/styles-esm/source-light-dimmer-tritanopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/light-dimmer-tritanopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:29 GMT + * Generated on Tue, 18 Mar 2025 06:44:25 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -253,7 +253,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -273,7 +273,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -292,7 +292,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -312,7 +312,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -333,7 +333,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -354,7 +354,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -375,7 +375,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -396,7 +396,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -417,7 +417,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.1)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -437,7 +437,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -456,7 +456,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.15)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -476,7 +476,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -498,7 +498,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -520,7 +520,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -531,7 +531,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -542,7 +542,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -568,7 +568,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -590,7 +590,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -612,7 +612,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -623,7 +623,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for accordion items. Provides visual separation between accordion panels.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -634,7 +634,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -659,7 +659,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -682,7 +682,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -705,7 +705,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -717,7 +717,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -728,7 +728,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -753,7 +753,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -776,7 +776,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -797,7 +797,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.08)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -817,7 +817,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -838,7 +838,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.15)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -858,7 +858,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -884,7 +884,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -906,7 +906,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -917,7 +917,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -928,7 +928,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -953,7 +953,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -976,7 +976,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -999,7 +999,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1024,7 +1024,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1045,7 +1045,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.07)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.07)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -1065,7 +1065,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1086,7 +1086,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.3)", + $value: "lch(from var(--cn-colors-chrome-600) l c h / 0.3)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -1106,7 +1106,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1131,7 +1131,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable cyan text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1152,7 +1152,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.3)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -1172,7 +1172,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1193,7 +1193,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.07)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.07)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -1213,7 +1213,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1238,7 +1238,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1259,7 +1259,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.3)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -1279,7 +1279,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1300,7 +1300,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.07)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -1320,7 +1320,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1345,7 +1345,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable orange text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1366,7 +1366,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.3)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -1386,7 +1386,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1407,7 +1407,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-200) l c h / 0.07)", + $value: "lch(from var(--cn-colors-orange-200) l c h / 0.07)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -1427,7 +1427,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1452,7 +1452,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1473,7 +1473,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.3)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -1493,7 +1493,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1514,7 +1514,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.07)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -1534,7 +1534,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1559,7 +1559,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1580,7 +1580,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.3)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -1600,7 +1600,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1621,7 +1621,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.07)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -1641,7 +1641,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1666,7 +1666,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1689,7 +1689,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1714,7 +1714,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1740,7 +1740,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1762,7 +1762,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1784,7 +1784,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1809,7 +1809,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1832,7 +1832,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1855,7 +1855,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1880,7 +1880,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1903,7 +1903,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1926,7 +1926,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1949,7 +1949,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1973,7 +1973,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1997,7 +1997,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2010,7 +2010,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -2021,7 +2021,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2047,7 +2047,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2071,7 +2071,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2095,7 +2095,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2123,7 +2123,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2147,7 +2147,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2173,7 +2173,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2197,7 +2197,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2224,7 +2224,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable cyan text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2245,7 +2245,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.08)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.08)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -2265,7 +2265,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2286,7 +2286,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.3)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -2306,7 +2306,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2328,7 +2328,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.1)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -2348,7 +2348,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2370,7 +2370,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.15)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.15)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -2390,7 +2390,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2417,7 +2417,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2438,7 +2438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.08)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.08)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -2458,7 +2458,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2479,7 +2479,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.3)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.3)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -2499,7 +2499,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2521,7 +2521,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -2541,7 +2541,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2563,7 +2563,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.15)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -2583,7 +2583,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2610,7 +2610,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2631,7 +2631,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2656,7 +2656,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2682,7 +2682,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2693,7 +2693,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -2704,7 +2704,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2728,7 +2728,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2750,7 +2750,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2772,7 +2772,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2783,7 +2783,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for dialog components.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", isSource: true, @@ -2792,7 +2792,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2812,7 +2812,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -2832,7 +2832,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2856,7 +2856,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2867,7 +2867,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for dropdown menus container.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", isSource: true, @@ -2876,7 +2876,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2899,7 +2899,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2921,7 +2921,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2944,7 +2944,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.07)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.07)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -2964,7 +2964,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -3000,7 +3000,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3020,7 +3020,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.08)", $description: "Cyan background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -3040,7 +3040,7 @@ export default { $description: "Cyan background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3060,7 +3060,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.12)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -3080,7 +3080,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3100,7 +3100,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.15)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -3120,7 +3120,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3142,7 +3142,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3164,7 +3164,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3184,7 +3184,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.08)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -3204,7 +3204,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3224,7 +3224,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.12)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -3244,7 +3244,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3264,7 +3264,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.15)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -3284,7 +3284,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3306,7 +3306,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3328,7 +3328,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3350,7 +3350,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3372,7 +3372,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3392,7 +3392,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.08)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.08)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -3412,7 +3412,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3432,7 +3432,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", isSource: true, @@ -3450,7 +3450,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3472,7 +3472,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3494,7 +3494,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3518,7 +3518,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3540,7 +3540,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3562,7 +3562,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3584,7 +3584,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3595,7 +3595,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -3606,7 +3606,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3630,7 +3630,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3654,7 +3654,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3676,7 +3676,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3699,7 +3699,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3722,7 +3722,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3743,7 +3743,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3756,7 +3756,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Navigation container border.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", isSource: true, @@ -3765,7 +3765,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3785,7 +3785,7 @@ export default { $value: "{background.2}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3810,7 +3810,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3836,7 +3836,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3865,7 +3865,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3890,7 +3890,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3904,7 +3904,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.3) 30%, lch(63.38% 78.04 52.26) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--cn-colors-chrome-200) l c h / 0.3) 30%, lch(63.38% 78.04 52.26) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -3916,7 +3916,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3942,7 +3942,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3968,7 +3968,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3996,7 +3996,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -4009,7 +4009,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -4020,7 +4020,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4046,7 +4046,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4059,7 +4059,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -4070,7 +4070,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4095,7 +4095,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -4115,7 +4115,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4141,7 +4141,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4163,7 +4163,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4185,7 +4185,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4205,7 +4205,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.15)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", isSource: true, @@ -4223,7 +4223,7 @@ export default { $value: "{colors.chrome.700}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4243,7 +4243,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.2)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", isSource: true, @@ -4261,7 +4261,7 @@ export default { $value: "{colors.chrome.700}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4285,7 +4285,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4309,7 +4309,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4335,7 +4335,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4359,7 +4359,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4384,7 +4384,7 @@ export default { $value: "{colors.chrome.50}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4405,7 +4405,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4430,7 +4430,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4451,7 +4451,7 @@ export default { $value: "{colors.chrome.800}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4474,7 +4474,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4498,7 +4498,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4522,7 +4522,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4546,7 +4546,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4571,7 +4571,7 @@ export default { $value: "{colors.pure.white}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4592,7 +4592,7 @@ export default { $value: "{colors.chrome.500}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4618,7 +4618,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4643,7 +4643,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4666,7 +4666,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4689,7 +4689,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4714,7 +4714,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4737,7 +4737,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4760,7 +4760,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4775,7 +4775,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -4786,7 +4786,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4812,7 +4812,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4837,7 +4837,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4860,7 +4860,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4885,7 +4885,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4908,7 +4908,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4933,7 +4933,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4956,7 +4956,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4982,7 +4982,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -5004,7 +5004,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -5026,7 +5026,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -5048,7 +5048,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5070,7 +5070,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5092,7 +5092,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5114,7 +5114,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5139,7 +5139,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5162,7 +5162,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5187,7 +5187,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5210,7 +5210,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5237,7 +5237,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5260,7 +5260,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5283,7 +5283,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.07)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.07)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -5303,7 +5303,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5315,7 +5315,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -5326,7 +5326,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5351,7 +5351,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5377,7 +5377,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5388,7 +5388,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -5399,7 +5399,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5423,7 +5423,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5447,7 +5447,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5471,7 +5471,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5497,7 +5497,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5521,7 +5521,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5534,7 +5534,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -5545,7 +5545,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5574,7 +5574,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5597,7 +5597,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5620,7 +5620,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5641,7 +5641,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags. ", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5666,7 +5666,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5689,7 +5689,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5712,7 +5712,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5733,7 +5733,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags. ", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5758,7 +5758,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5781,7 +5781,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5804,7 +5804,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5825,7 +5825,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5850,7 +5850,7 @@ export default { $description: "Text color for green tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5873,7 +5873,7 @@ export default { $description: "Background color for green tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5896,7 +5896,7 @@ export default { $description: "Subtle background variation for green tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5917,7 +5917,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags, replaced with cyan.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5942,7 +5942,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5965,7 +5965,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5988,7 +5988,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -6009,7 +6009,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -6034,7 +6034,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6057,7 +6057,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6080,7 +6080,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6101,7 +6101,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6126,7 +6126,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6149,7 +6149,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6172,7 +6172,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6193,7 +6193,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6218,7 +6218,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6241,7 +6241,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6264,7 +6264,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6285,7 +6285,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6310,7 +6310,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6333,7 +6333,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6356,7 +6356,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6377,7 +6377,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6402,7 +6402,7 @@ export default { $description: "Text color for purple tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6425,7 +6425,7 @@ export default { $description: "Background color for purple tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6448,7 +6448,7 @@ export default { $description: "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6469,7 +6469,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags, replaced with cyan.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6494,7 +6494,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6517,7 +6517,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6540,7 +6540,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6561,7 +6561,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6586,7 +6586,7 @@ export default { $description: "Text color for violet tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6609,7 +6609,7 @@ export default { $description: "Background color for violet tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6632,7 +6632,7 @@ export default { $description: "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6653,7 +6653,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags, replaced with cyan.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6678,7 +6678,7 @@ export default { $description: "Text color for yellow tags, replaced with orange for tritanopia visibility.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6701,7 +6701,7 @@ export default { $description: "Background color for yellow tags, replaced with orange for tritanopia visibility.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6724,7 +6724,7 @@ export default { $description: "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6745,7 +6745,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags, replaced with orange.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6770,7 +6770,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6793,7 +6793,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6816,7 +6816,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6837,7 +6837,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6864,7 +6864,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6887,7 +6887,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6910,7 +6910,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6922,7 +6922,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -6933,7 +6933,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6958,7 +6958,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6981,7 +6981,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -7004,7 +7004,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -7027,7 +7027,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -7053,7 +7053,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7075,7 +7075,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7089,7 +7089,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7117,7 +7117,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7127,8 +7127,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7156,7 +7155,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7167,7 +7166,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.4), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + "0 1px 3px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.4), 0 1px 2px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7205,7 +7204,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7216,7 +7215,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + "0 4px 6px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.35), 0 2px 4px -2px lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7254,7 +7253,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7265,7 +7264,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + "0 10px 15px -3px lch(from var(--cn-colors-chrome-300) l c h / 0.35), 0 4px 6px -4px lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7303,7 +7302,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7314,7 +7313,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.35), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + "0 20px 25px -5px lch(from var(--cn-colors-chrome-300) l c h / 0.35), 0 8px 10px -6px lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7352,7 +7351,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7363,7 +7362,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + "0 25px 50px -12px lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7391,7 +7390,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7402,7 +7401,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-chrome-900) l c h / 0.07)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7430,7 +7429,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7451,7 +7450,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7471,7 +7470,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7490,7 +7489,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7510,7 +7509,7 @@ export default { $description: "Light shadow color with 40% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7529,7 +7528,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7549,7 +7548,7 @@ export default { $description: "Medium shadow color with 40% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7568,7 +7567,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7588,7 +7587,7 @@ export default { $description: "Medium shadow color with 35% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7607,7 +7606,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7627,7 +7626,7 @@ export default { $description: "Deep shadow color with 35% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7646,7 +7645,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.35)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.35)", $description: "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7666,7 +7665,7 @@ export default { $description: "Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7685,7 +7684,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", $description: "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7705,7 +7704,7 @@ export default { $description: "Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7724,7 +7723,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.07)", + $value: "lch(from var(--cn-colors-chrome-900) l c h / 0.07)", $description: "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", @@ -7744,7 +7743,7 @@ export default { $description: "Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7794,7 +7793,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7814,7 +7813,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7832,7 +7831,7 @@ export default { $type: "color", $value: "{colors.pink.300}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7850,7 +7849,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7868,7 +7867,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7888,7 +7887,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7906,7 +7905,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7924,7 +7923,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7945,7 +7944,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7966,7 +7965,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.3)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.3)", filePath: "design-tokens/mode/light/dimmer-tritanopia.json", isSource: true, original: { @@ -7982,7 +7981,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8001,7 +8000,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8022,7 +8021,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8041,7 +8040,7 @@ export default { $type: "color", $value: "{colors.blue.400}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8060,7 +8059,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8082,7 +8081,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8108,7 +8107,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8130,7 +8129,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8150,7 +8149,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8174,7 +8173,7 @@ export default { $type: "color", $value: "{colors.chrome.500}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8194,7 +8193,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8217,7 +8216,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8244,7 +8243,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8273,7 +8272,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8300,7 +8299,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8343,7 +8342,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8370,7 +8369,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8397,7 +8396,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8424,7 +8423,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8451,7 +8450,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8478,7 +8477,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8498,7 +8497,7 @@ export default { $type: "color", $value: "{colors.cyan.50}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8516,7 +8515,7 @@ export default { $type: "color", $value: "{colors.cyan.100}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8534,7 +8533,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8552,7 +8551,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8570,7 +8569,7 @@ export default { $type: "color", $value: "{colors.cyan.400}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8588,7 +8587,7 @@ export default { $type: "color", $value: "{colors.cyan.500}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8606,7 +8605,7 @@ export default { $type: "color", $value: "{colors.cyan.600}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8624,7 +8623,7 @@ export default { $type: "color", $value: "{colors.cyan.700}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8642,7 +8641,7 @@ export default { $type: "color", $value: "{colors.cyan.800}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8660,7 +8659,7 @@ export default { $type: "color", $value: "{colors.cyan.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8678,7 +8677,7 @@ export default { $type: "color", $value: "{colors.cyan.950}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8698,7 +8697,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8716,7 +8715,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8734,7 +8733,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8752,7 +8751,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8770,7 +8769,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8788,7 +8787,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8806,7 +8805,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8824,7 +8823,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8842,7 +8841,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8860,7 +8859,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8878,7 +8877,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-light-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/light-gitness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-light-desktop-gitness.ts rename to packages/core-design-system/src/styles-esm/light-gitness.ts index b063a8b18f..3613daac76 100644 --- a/packages/core-design-system/src/styles-esm/source-light-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/light-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:06:53 GMT + * Generated on Tue, 18 Mar 2025 06:43:59 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/light/default.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.15)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/light/default.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.2)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/light/default.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/light/default.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/light/default.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/light/default.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/light/default.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/light/default.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/light/default.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-600) l c h / 0.2)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/light/default.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable green text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-green-400) l c h / 0.2)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/light/default.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-green-200) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/light/default.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.2)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/light/default.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/light/default.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-yellow-400) l c h / 0.2)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/light/default.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-yellow-200) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/light/default.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.2)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/light/default.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/light/default.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-purple-400) l c h / 0.2)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/light/default.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-purple-300) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/light/default.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1955,7 +1955,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1979,7 +1979,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2003,7 +2003,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2029,7 +2029,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2053,7 +2053,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2077,7 +2077,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2105,7 +2105,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2129,7 +2129,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2155,7 +2155,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2179,7 +2179,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2206,7 +2206,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable green text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2227,7 +2227,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-200) l c h / 0.12)", + $value: "lch(from var(--cn-colors-green-200) l c h / 0.12)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/light/default.json", @@ -2247,7 +2247,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2268,7 +2268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-400) l c h / 0.25)", + $value: "lch(from var(--cn-colors-green-400) l c h / 0.25)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/light/default.json", @@ -2288,7 +2288,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2310,7 +2310,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-200) l c h / 0.15)", + $value: "lch(from var(--cn-colors-green-200) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/default.json", @@ -2330,7 +2330,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2352,7 +2352,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-200) l c h / 0.25)", + $value: "lch(from var(--cn-colors-green-200) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/default.json", @@ -2372,7 +2372,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2399,7 +2399,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2420,7 +2420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.12)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/light/default.json", @@ -2440,7 +2440,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2461,7 +2461,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.2)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/light/default.json", @@ -2481,7 +2481,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2503,7 +2503,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/default.json", @@ -2523,7 +2523,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2545,7 +2545,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/default.json", @@ -2565,7 +2565,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2592,7 +2592,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2613,7 +2613,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2638,7 +2638,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2664,7 +2664,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2686,7 +2686,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2710,7 +2710,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2732,7 +2732,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2754,7 +2754,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2774,7 +2774,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2794,7 +2794,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/light/default.json", @@ -2814,7 +2814,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2838,7 +2838,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2858,7 +2858,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2881,7 +2881,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2903,7 +2903,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2926,7 +2926,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/light/default.json", @@ -2946,7 +2946,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2982,7 +2982,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3002,7 +3002,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.12)", $description: "Green background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/light/default.json", @@ -3022,7 +3022,7 @@ export default { $description: "Green background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3042,7 +3042,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/light/default.json", @@ -3062,7 +3062,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3082,7 +3082,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/light/default.json", @@ -3102,7 +3102,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3124,7 +3124,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3146,7 +3146,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3166,7 +3166,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.12)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/light/default.json", @@ -3186,7 +3186,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3206,7 +3206,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/light/default.json", @@ -3226,7 +3226,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3246,7 +3246,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/light/default.json", @@ -3266,7 +3266,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3288,7 +3288,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3310,7 +3310,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3332,7 +3332,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3354,7 +3354,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3374,7 +3374,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/light/default.json", @@ -3394,7 +3394,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3414,7 +3414,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/light/default.json", isSource: true, @@ -3432,7 +3432,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3454,7 +3454,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3476,7 +3476,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3500,7 +3500,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3522,7 +3522,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3544,7 +3544,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3566,7 +3566,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3588,7 +3588,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3612,7 +3612,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3636,7 +3636,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3658,7 +3658,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3681,7 +3681,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3704,7 +3704,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3725,7 +3725,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3738,7 +3738,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Navigation container border.", filePath: "design-tokens/mode/light/default.json", isSource: true, @@ -3747,7 +3747,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3767,7 +3767,7 @@ export default { $value: "{background.2}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3792,7 +3792,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3818,7 +3818,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3847,7 +3847,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3872,7 +3872,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3886,7 +3886,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.4) 30%, lch(63.38% 78.04 52.26) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--cn-colors-chrome-200) l c h / 0.4) 30%, lch(63.38% 78.04 52.26) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/light/default.json", @@ -3898,7 +3898,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3924,7 +3924,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3950,7 +3950,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3978,7 +3978,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3991,7 +3991,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/light/default.json", @@ -4002,7 +4002,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4028,7 +4028,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4052,7 +4052,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4077,7 +4077,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/light/default.json", @@ -4097,7 +4097,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4123,7 +4123,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4145,7 +4145,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4167,7 +4167,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4187,7 +4187,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.15)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/light/default.json", isSource: true, @@ -4205,7 +4205,7 @@ export default { $value: "{colors.chrome.700}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4225,7 +4225,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.2)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/light/default.json", isSource: true, @@ -4243,7 +4243,7 @@ export default { $value: "{colors.chrome.700}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4267,7 +4267,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4291,7 +4291,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4317,7 +4317,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4341,7 +4341,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4366,7 +4366,7 @@ export default { $value: "{colors.chrome.50}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4387,7 +4387,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4412,7 +4412,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4433,7 +4433,7 @@ export default { $value: "{colors.chrome.800}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4456,7 +4456,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4480,7 +4480,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4504,7 +4504,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4528,7 +4528,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4553,7 +4553,7 @@ export default { $value: "{colors.pure.white}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4574,7 +4574,7 @@ export default { $value: "{colors.chrome.500}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4600,7 +4600,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4625,7 +4625,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4648,7 +4648,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4671,7 +4671,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4696,7 +4696,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4719,7 +4719,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4742,7 +4742,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4768,7 +4768,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4794,7 +4794,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4819,7 +4819,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4842,7 +4842,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4867,7 +4867,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4890,7 +4890,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4915,7 +4915,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4938,7 +4938,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4964,7 +4964,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4986,7 +4986,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -5008,7 +5008,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -5030,7 +5030,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5052,7 +5052,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5074,7 +5074,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5096,7 +5096,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5121,7 +5121,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5144,7 +5144,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5169,7 +5169,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5192,7 +5192,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5219,7 +5219,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5242,7 +5242,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5265,7 +5265,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/light/default.json", @@ -5285,7 +5285,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5297,7 +5297,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/light/default.json", @@ -5308,7 +5308,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5333,7 +5333,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5359,7 +5359,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5370,7 +5370,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/light/default.json", @@ -5381,7 +5381,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5405,7 +5405,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5429,7 +5429,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5453,7 +5453,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5479,7 +5479,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5503,7 +5503,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5527,7 +5527,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5556,7 +5556,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5579,7 +5579,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5602,7 +5602,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5623,7 +5623,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags. ", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5648,7 +5648,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5671,7 +5671,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5694,7 +5694,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5715,7 +5715,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags. ", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5740,7 +5740,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5763,7 +5763,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5786,7 +5786,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5807,7 +5807,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5832,7 +5832,7 @@ export default { $description: "Text color for green tags. Ensures readability while maintaining the green color theme.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5855,7 +5855,7 @@ export default { $description: "Background color for green tags. Creates a distinct surface with green theme styling.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5878,7 +5878,7 @@ export default { $description: "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5899,7 +5899,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5924,7 +5924,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5947,7 +5947,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5970,7 +5970,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5991,7 +5991,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -6016,7 +6016,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6039,7 +6039,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6062,7 +6062,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6083,7 +6083,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6108,7 +6108,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6131,7 +6131,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6154,7 +6154,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6175,7 +6175,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6200,7 +6200,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6223,7 +6223,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6246,7 +6246,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6267,7 +6267,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6292,7 +6292,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6315,7 +6315,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6338,7 +6338,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6359,7 +6359,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6384,7 +6384,7 @@ export default { $description: "Text color for purple tags. Ensures readability while maintaining the purple color theme.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6407,7 +6407,7 @@ export default { $description: "Background color for purple tags. Creates a distinct surface with purple theme styling.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6430,7 +6430,7 @@ export default { $description: "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6451,7 +6451,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6476,7 +6476,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6499,7 +6499,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6522,7 +6522,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6543,7 +6543,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6568,7 +6568,7 @@ export default { $description: "Text color for violet tags. Ensures readability while maintaining the violet color theme.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6591,7 +6591,7 @@ export default { $description: "Background color for violet tags. Creates a distinct surface with violet theme styling.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6614,7 +6614,7 @@ export default { $description: "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6635,7 +6635,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6660,7 +6660,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6683,7 +6683,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6706,7 +6706,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6727,7 +6727,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6752,7 +6752,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6775,7 +6775,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6798,7 +6798,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6819,7 +6819,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6846,7 +6846,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6869,7 +6869,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6892,7 +6892,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6904,7 +6904,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/light/default.json", @@ -6915,7 +6915,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6940,7 +6940,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6963,7 +6963,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6986,7 +6986,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -7009,7 +7009,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -7035,7 +7035,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7057,7 +7057,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7071,7 +7071,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/light/default.json", @@ -7099,7 +7099,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7109,8 +7109,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/light/default.json", @@ -7138,7 +7137,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7149,7 +7148,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/light/default.json", @@ -7187,7 +7186,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7198,7 +7197,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/light/default.json", @@ -7236,7 +7235,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7247,7 +7246,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-chrome-300) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/light/default.json", @@ -7285,7 +7284,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7296,7 +7295,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-chrome-300) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/light/default.json", @@ -7334,7 +7333,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7345,7 +7344,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/light/default.json", @@ -7373,7 +7372,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7384,7 +7383,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-chrome-900) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/light/default.json", @@ -7412,7 +7411,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7433,7 +7432,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/light/default.json", @@ -7453,7 +7452,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7472,7 +7471,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/light/default.json", @@ -7492,7 +7491,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7511,7 +7510,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/light/default.json", @@ -7531,7 +7530,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7550,7 +7549,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/light/default.json", @@ -7570,7 +7569,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7589,7 +7588,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/light/default.json", @@ -7609,7 +7608,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7628,7 +7627,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/light/default.json", @@ -7648,7 +7647,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7667,7 +7666,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/light/default.json", @@ -7687,7 +7686,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7706,7 +7705,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-900) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/light/default.json", @@ -7726,7 +7725,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7777,7 +7776,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7797,7 +7796,7 @@ export default { $type: "color", $value: "{colors.yellow.200}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7815,7 +7814,7 @@ export default { $type: "color", $value: "{colors.pink.300}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7833,7 +7832,7 @@ export default { $type: "color", $value: "{colors.purple.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7851,7 +7850,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7871,7 +7870,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7889,7 +7888,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7907,7 +7906,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7928,7 +7927,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7949,7 +7948,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.4)", filePath: "design-tokens/mode/light/default.json", isSource: true, original: { @@ -7965,7 +7964,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7984,7 +7983,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8005,7 +8004,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8024,7 +8023,7 @@ export default { $type: "color", $value: "{colors.blue.400}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8043,7 +8042,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8065,7 +8064,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8091,7 +8090,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8113,7 +8112,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8133,7 +8132,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8157,7 +8156,7 @@ export default { $type: "color", $value: "{colors.chrome.500}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8177,7 +8176,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8200,7 +8199,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8227,7 +8226,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8256,7 +8255,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8283,7 +8282,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8326,7 +8325,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8353,7 +8352,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8380,7 +8379,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8407,7 +8406,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8434,7 +8433,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8461,7 +8460,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8481,7 +8480,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8499,7 +8498,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8517,7 +8516,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8535,7 +8534,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8553,7 +8552,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8571,7 +8570,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8589,7 +8588,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8607,7 +8606,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8625,7 +8624,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8643,7 +8642,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8661,7 +8660,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8681,7 +8680,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8699,7 +8698,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8717,7 +8716,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8735,7 +8734,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8753,7 +8752,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8771,7 +8770,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8789,7 +8788,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8807,7 +8806,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8825,7 +8824,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8843,7 +8842,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8861,7 +8860,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-light-desktop-harness.ts b/packages/core-design-system/src/styles-esm/light-harness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-light-desktop-harness.ts rename to packages/core-design-system/src/styles-esm/light-harness.ts index 09629adbdd..5d0397c7fd 100644 --- a/packages/core-design-system/src/styles-esm/source-light-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/light-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:06:52 GMT + * Generated on Tue, 18 Mar 2025 06:43:59 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/light/default.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.15)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/light/default.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.2)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/light/default.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/light/default.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/light/default.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/light/default.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/light/default.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/light/default.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/light/default.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-600) l c h / 0.2)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/light/default.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable green text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-green-400) l c h / 0.2)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/light/default.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-green-200) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/light/default.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.2)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/light/default.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/light/default.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-yellow-400) l c h / 0.2)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/light/default.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-yellow-200) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/light/default.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.2)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/light/default.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/light/default.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-purple-400) l c h / 0.2)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/light/default.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-purple-300) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/light/default.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1955,7 +1955,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1979,7 +1979,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2003,7 +2003,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2029,7 +2029,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2053,7 +2053,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2077,7 +2077,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2105,7 +2105,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2129,7 +2129,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2155,7 +2155,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2179,7 +2179,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2206,7 +2206,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable green text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2227,7 +2227,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-200) l c h / 0.12)", + $value: "lch(from var(--cn-colors-green-200) l c h / 0.12)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/light/default.json", @@ -2247,7 +2247,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2268,7 +2268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-400) l c h / 0.25)", + $value: "lch(from var(--cn-colors-green-400) l c h / 0.25)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/light/default.json", @@ -2288,7 +2288,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2310,7 +2310,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-200) l c h / 0.15)", + $value: "lch(from var(--cn-colors-green-200) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/default.json", @@ -2330,7 +2330,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2352,7 +2352,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-200) l c h / 0.25)", + $value: "lch(from var(--cn-colors-green-200) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/default.json", @@ -2372,7 +2372,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2399,7 +2399,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2420,7 +2420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.12)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/light/default.json", @@ -2440,7 +2440,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2461,7 +2461,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.2)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/light/default.json", @@ -2481,7 +2481,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2503,7 +2503,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/default.json", @@ -2523,7 +2523,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2545,7 +2545,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/default.json", @@ -2565,7 +2565,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2592,7 +2592,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2613,7 +2613,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2638,7 +2638,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2664,7 +2664,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2686,7 +2686,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2710,7 +2710,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2732,7 +2732,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2754,7 +2754,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2774,7 +2774,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2794,7 +2794,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/light/default.json", @@ -2814,7 +2814,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2838,7 +2838,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2858,7 +2858,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2881,7 +2881,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2903,7 +2903,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2926,7 +2926,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/light/default.json", @@ -2946,7 +2946,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2982,7 +2982,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3002,7 +3002,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.12)", $description: "Green background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/light/default.json", @@ -3022,7 +3022,7 @@ export default { $description: "Green background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3042,7 +3042,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/light/default.json", @@ -3062,7 +3062,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3082,7 +3082,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-green-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/light/default.json", @@ -3102,7 +3102,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3124,7 +3124,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3146,7 +3146,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3166,7 +3166,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.12)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/light/default.json", @@ -3186,7 +3186,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3206,7 +3206,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/light/default.json", @@ -3226,7 +3226,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3246,7 +3246,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/light/default.json", @@ -3266,7 +3266,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3288,7 +3288,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3310,7 +3310,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3332,7 +3332,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3354,7 +3354,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3374,7 +3374,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/light/default.json", @@ -3394,7 +3394,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3414,7 +3414,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/light/default.json", isSource: true, @@ -3432,7 +3432,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3454,7 +3454,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3476,7 +3476,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3500,7 +3500,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3522,7 +3522,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3544,7 +3544,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3566,7 +3566,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3588,7 +3588,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3612,7 +3612,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3636,7 +3636,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3658,7 +3658,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3681,7 +3681,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3704,7 +3704,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3725,7 +3725,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3738,7 +3738,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Navigation container border.", filePath: "design-tokens/mode/light/default.json", isSource: true, @@ -3747,7 +3747,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3767,7 +3767,7 @@ export default { $value: "{background.2}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3792,7 +3792,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3818,7 +3818,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3847,7 +3847,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3872,7 +3872,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3886,7 +3886,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.4) 30%, lch(63.38% 78.04 52.26) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--cn-colors-chrome-200) l c h / 0.4) 30%, lch(63.38% 78.04 52.26) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/light/default.json", @@ -3898,7 +3898,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3924,7 +3924,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3950,7 +3950,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3978,7 +3978,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3991,7 +3991,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/light/default.json", @@ -4002,7 +4002,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4028,7 +4028,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4052,7 +4052,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4077,7 +4077,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/light/default.json", @@ -4097,7 +4097,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4123,7 +4123,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4145,7 +4145,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4167,7 +4167,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4187,7 +4187,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.15)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/light/default.json", isSource: true, @@ -4205,7 +4205,7 @@ export default { $value: "{colors.chrome.700}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4225,7 +4225,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.2)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/light/default.json", isSource: true, @@ -4243,7 +4243,7 @@ export default { $value: "{colors.chrome.700}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4267,7 +4267,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4291,7 +4291,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4317,7 +4317,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4341,7 +4341,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4366,7 +4366,7 @@ export default { $value: "{colors.chrome.50}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4387,7 +4387,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4412,7 +4412,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4433,7 +4433,7 @@ export default { $value: "{colors.chrome.800}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4456,7 +4456,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4480,7 +4480,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4504,7 +4504,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4528,7 +4528,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4553,7 +4553,7 @@ export default { $value: "{colors.pure.white}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4574,7 +4574,7 @@ export default { $value: "{colors.chrome.500}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4600,7 +4600,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4625,7 +4625,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4648,7 +4648,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4671,7 +4671,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4696,7 +4696,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4719,7 +4719,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4742,7 +4742,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4768,7 +4768,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4794,7 +4794,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4819,7 +4819,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4842,7 +4842,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4867,7 +4867,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4890,7 +4890,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4915,7 +4915,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4938,7 +4938,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4964,7 +4964,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4986,7 +4986,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -5008,7 +5008,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -5030,7 +5030,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5052,7 +5052,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5074,7 +5074,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5096,7 +5096,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5121,7 +5121,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5144,7 +5144,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5169,7 +5169,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5192,7 +5192,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5219,7 +5219,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5242,7 +5242,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5265,7 +5265,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/light/default.json", @@ -5285,7 +5285,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5297,7 +5297,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/light/default.json", @@ -5308,7 +5308,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5333,7 +5333,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5359,7 +5359,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5370,7 +5370,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/light/default.json", @@ -5381,7 +5381,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5405,7 +5405,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5429,7 +5429,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5453,7 +5453,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5479,7 +5479,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5503,7 +5503,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5527,7 +5527,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5556,7 +5556,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5579,7 +5579,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5602,7 +5602,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5623,7 +5623,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags. ", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5648,7 +5648,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5671,7 +5671,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5694,7 +5694,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5715,7 +5715,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags. ", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5740,7 +5740,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5763,7 +5763,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5786,7 +5786,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5807,7 +5807,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5832,7 +5832,7 @@ export default { $description: "Text color for green tags. Ensures readability while maintaining the green color theme.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5855,7 +5855,7 @@ export default { $description: "Background color for green tags. Creates a distinct surface with green theme styling.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5878,7 +5878,7 @@ export default { $description: "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5899,7 +5899,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5924,7 +5924,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5947,7 +5947,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5970,7 +5970,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5991,7 +5991,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -6016,7 +6016,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6039,7 +6039,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6062,7 +6062,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6083,7 +6083,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6108,7 +6108,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6131,7 +6131,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6154,7 +6154,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6175,7 +6175,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6200,7 +6200,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6223,7 +6223,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6246,7 +6246,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6267,7 +6267,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6292,7 +6292,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6315,7 +6315,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6338,7 +6338,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6359,7 +6359,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6384,7 +6384,7 @@ export default { $description: "Text color for purple tags. Ensures readability while maintaining the purple color theme.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6407,7 +6407,7 @@ export default { $description: "Background color for purple tags. Creates a distinct surface with purple theme styling.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6430,7 +6430,7 @@ export default { $description: "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6451,7 +6451,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6476,7 +6476,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6499,7 +6499,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6522,7 +6522,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6543,7 +6543,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6568,7 +6568,7 @@ export default { $description: "Text color for violet tags. Ensures readability while maintaining the violet color theme.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6591,7 +6591,7 @@ export default { $description: "Background color for violet tags. Creates a distinct surface with violet theme styling.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6614,7 +6614,7 @@ export default { $description: "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6635,7 +6635,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6660,7 +6660,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6683,7 +6683,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6706,7 +6706,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6727,7 +6727,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6752,7 +6752,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6775,7 +6775,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6798,7 +6798,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6819,7 +6819,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6846,7 +6846,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6869,7 +6869,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6892,7 +6892,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6904,7 +6904,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/light/default.json", @@ -6915,7 +6915,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6940,7 +6940,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6963,7 +6963,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6986,7 +6986,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -7009,7 +7009,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -7035,7 +7035,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7057,7 +7057,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7071,7 +7071,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/light/default.json", @@ -7099,7 +7099,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7109,8 +7109,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/light/default.json", @@ -7138,7 +7137,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7149,7 +7148,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/light/default.json", @@ -7187,7 +7186,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7198,7 +7197,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/light/default.json", @@ -7236,7 +7235,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7247,7 +7246,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-chrome-300) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/light/default.json", @@ -7285,7 +7284,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7296,7 +7295,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-chrome-300) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/light/default.json", @@ -7334,7 +7333,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7345,7 +7344,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/light/default.json", @@ -7373,7 +7372,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7384,7 +7383,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-chrome-900) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/light/default.json", @@ -7412,7 +7411,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7433,7 +7432,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/light/default.json", @@ -7453,7 +7452,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7472,7 +7471,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/light/default.json", @@ -7492,7 +7491,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7511,7 +7510,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/light/default.json", @@ -7531,7 +7530,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7550,7 +7549,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/light/default.json", @@ -7570,7 +7569,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7589,7 +7588,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/light/default.json", @@ -7609,7 +7608,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7628,7 +7627,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/light/default.json", @@ -7648,7 +7647,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7667,7 +7666,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/light/default.json", @@ -7687,7 +7686,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7706,7 +7705,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-900) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/light/default.json", @@ -7726,7 +7725,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7777,7 +7776,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7797,7 +7796,7 @@ export default { $type: "color", $value: "{colors.yellow.200}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7815,7 +7814,7 @@ export default { $type: "color", $value: "{colors.pink.300}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7833,7 +7832,7 @@ export default { $type: "color", $value: "{colors.purple.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7851,7 +7850,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7871,7 +7870,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7889,7 +7888,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7907,7 +7906,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7928,7 +7927,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7949,7 +7948,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.4)", filePath: "design-tokens/mode/light/default.json", isSource: true, original: { @@ -7965,7 +7964,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7984,7 +7983,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8005,7 +8004,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8024,7 +8023,7 @@ export default { $type: "color", $value: "{colors.blue.400}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8043,7 +8042,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8065,7 +8064,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8091,7 +8090,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8113,7 +8112,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8133,7 +8132,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8157,7 +8156,7 @@ export default { $type: "color", $value: "{colors.chrome.500}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8177,7 +8176,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8200,7 +8199,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8227,7 +8226,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8256,7 +8255,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8283,7 +8282,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8326,7 +8325,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8353,7 +8352,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8380,7 +8379,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8407,7 +8406,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8434,7 +8433,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8461,7 +8460,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8481,7 +8480,7 @@ export default { $type: "color", $value: "{colors.cyan.50}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8499,7 +8498,7 @@ export default { $type: "color", $value: "{colors.cyan.100}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8517,7 +8516,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8535,7 +8534,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8553,7 +8552,7 @@ export default { $type: "color", $value: "{colors.cyan.400}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8571,7 +8570,7 @@ export default { $type: "color", $value: "{colors.cyan.500}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8589,7 +8588,7 @@ export default { $type: "color", $value: "{colors.cyan.600}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8607,7 +8606,7 @@ export default { $type: "color", $value: "{colors.cyan.700}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8625,7 +8624,7 @@ export default { $type: "color", $value: "{colors.cyan.800}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8643,7 +8642,7 @@ export default { $type: "color", $value: "{colors.cyan.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8661,7 +8660,7 @@ export default { $type: "color", $value: "{colors.cyan.950}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8681,7 +8680,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8699,7 +8698,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8717,7 +8716,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8735,7 +8734,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8753,7 +8752,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8771,7 +8770,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8789,7 +8788,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8807,7 +8806,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8825,7 +8824,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8843,7 +8842,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8861,7 +8860,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-light-high-contrast-deuteranopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/light-high-contrast-deuteranopia-gitness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-light-high-contrast-deuteranopia-desktop-gitness.ts rename to packages/core-design-system/src/styles-esm/light-high-contrast-deuteranopia-gitness.ts index d7745fcf40..092933d00f 100644 --- a/packages/core-design-system/src/styles-esm/source-light-high-contrast-deuteranopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/light-high-contrast-deuteranopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:27 GMT + * Generated on Tue, 18 Mar 2025 06:44:23 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.15)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.2)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast orange text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-600) l c h / 0.6)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable cyan text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.6)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.6)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-yellow-400) l c h / 0.6)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-yellow-200) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.6)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.6)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1956,7 +1956,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1981,7 +1981,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2006,7 +2006,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2033,7 +2033,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2058,7 +2058,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2083,7 +2083,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2112,7 +2112,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2137,7 +2137,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2164,7 +2164,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2189,7 +2189,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2216,7 +2216,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable cyan text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2237,7 +2237,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.1)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -2257,7 +2257,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2278,7 +2278,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.6)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -2298,7 +2298,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2320,7 +2320,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: @@ -2341,7 +2341,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2363,7 +2363,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: @@ -2384,7 +2384,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2411,7 +2411,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2432,7 +2432,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -2452,7 +2452,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2473,7 +2473,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.6)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -2493,7 +2493,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2515,7 +2515,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: @@ -2536,7 +2536,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2558,7 +2558,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.25)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: @@ -2579,7 +2579,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2606,7 +2606,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2627,7 +2627,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2652,7 +2652,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2678,7 +2678,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2700,7 +2700,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2724,7 +2724,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2746,7 +2746,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2768,7 +2768,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2788,7 +2788,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2808,7 +2808,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -2828,7 +2828,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2852,7 +2852,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2872,7 +2872,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2895,7 +2895,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2918,7 +2918,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2941,7 +2941,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: @@ -2962,7 +2962,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2998,7 +2998,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3018,7 +3018,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.12)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.12)", $description: "Cyan background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -3038,7 +3038,7 @@ export default { $description: "Cyan background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3058,7 +3058,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -3078,7 +3078,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3098,7 +3098,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -3118,7 +3118,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3140,7 +3140,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3162,7 +3162,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3182,7 +3182,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.12)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.12)", $description: "Orange background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -3202,7 +3202,7 @@ export default { $description: "Orange background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3222,7 +3222,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -3242,7 +3242,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3262,7 +3262,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.25)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -3282,7 +3282,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3304,7 +3304,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3326,7 +3326,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3348,7 +3348,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3370,7 +3370,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3390,7 +3390,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-400) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-400) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -3410,7 +3410,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3430,7 +3430,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-400) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", isSource: true, @@ -3448,7 +3448,7 @@ export default { $value: "{colors.blue.400}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3470,7 +3470,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3492,7 +3492,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3516,7 +3516,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3538,7 +3538,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3560,7 +3560,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3582,7 +3582,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3604,7 +3604,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3628,7 +3628,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3652,7 +3652,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3674,7 +3674,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3697,7 +3697,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3720,7 +3720,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3741,7 +3741,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3754,7 +3754,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Navigation container border.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", isSource: true, @@ -3763,7 +3763,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3783,7 +3783,7 @@ export default { $value: "{background.2}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3808,7 +3808,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3835,7 +3835,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3864,7 +3864,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3889,7 +3889,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3903,7 +3903,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(54.81% 69.74 52.27) 0%, lch(from var(--canary-colors-chrome-300) l c h / 0.4) 30%, lch(54.81% 69.74 52.27) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(54.81% 69.74 52.27) 0%, lch(from var(--cn-colors-chrome-300) l c h / 0.4) 30%, lch(54.81% 69.74 52.27) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: @@ -3916,7 +3916,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3943,7 +3943,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3970,7 +3970,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3999,7 +3999,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -4012,7 +4012,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: @@ -4024,7 +4024,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4051,7 +4051,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4076,7 +4076,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4101,7 +4101,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -4121,7 +4121,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4147,7 +4147,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4169,7 +4169,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4191,7 +4191,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4211,7 +4211,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.15)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", isSource: true, @@ -4229,7 +4229,7 @@ export default { $value: "{colors.chrome.700}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4249,7 +4249,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.2)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", isSource: true, @@ -4267,7 +4267,7 @@ export default { $value: "{colors.chrome.700}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4292,7 +4292,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4317,7 +4317,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4344,7 +4344,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4369,7 +4369,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4394,7 +4394,7 @@ export default { $value: "{colors.chrome.50}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4415,7 +4415,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4440,7 +4440,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4461,7 +4461,7 @@ export default { $value: "{colors.chrome.800}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4484,7 +4484,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4509,7 +4509,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4534,7 +4534,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4559,7 +4559,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4584,7 +4584,7 @@ export default { $value: "{colors.pure.white}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4605,7 +4605,7 @@ export default { $value: "{colors.chrome.500}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4631,7 +4631,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4656,7 +4656,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4679,7 +4679,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4702,7 +4702,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4727,7 +4727,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4750,7 +4750,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4773,7 +4773,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4788,7 +4788,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -4799,7 +4799,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4825,7 +4825,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4850,7 +4850,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4873,7 +4873,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4898,7 +4898,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4921,7 +4921,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4946,7 +4946,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4969,7 +4969,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4995,7 +4995,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -5017,7 +5017,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -5039,7 +5039,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -5061,7 +5061,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5083,7 +5083,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5105,7 +5105,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5127,7 +5127,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5152,7 +5152,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5175,7 +5175,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5200,7 +5200,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5223,7 +5223,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5250,7 +5250,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5273,7 +5273,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5296,7 +5296,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -5316,7 +5316,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5328,7 +5328,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -5339,7 +5339,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5364,7 +5364,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5390,7 +5390,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5401,7 +5401,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -5412,7 +5412,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5437,7 +5437,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5462,7 +5462,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5487,7 +5487,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5514,7 +5514,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5539,7 +5539,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5564,7 +5564,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5593,7 +5593,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5616,7 +5616,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5639,7 +5639,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5660,7 +5660,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5685,7 +5685,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5708,7 +5708,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5731,7 +5731,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5752,7 +5752,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5777,7 +5777,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5800,7 +5800,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5823,7 +5823,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5844,7 +5844,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5869,7 +5869,7 @@ export default { $description: "Text color for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5892,7 +5892,7 @@ export default { $description: "Background color for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5915,7 +5915,7 @@ export default { $description: "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5936,7 +5936,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags, replaced with cyan.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5961,7 +5961,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5984,7 +5984,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -6007,7 +6007,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -6028,7 +6028,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -6053,7 +6053,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6076,7 +6076,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6099,7 +6099,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6120,7 +6120,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6145,7 +6145,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6168,7 +6168,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6191,7 +6191,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6212,7 +6212,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6237,7 +6237,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6260,7 +6260,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6283,7 +6283,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6304,7 +6304,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6329,7 +6329,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6352,7 +6352,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6375,7 +6375,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6396,7 +6396,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6421,7 +6421,7 @@ export default { $description: "Text color for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6444,7 +6444,7 @@ export default { $description: "Background color for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6467,7 +6467,7 @@ export default { $description: "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6488,7 +6488,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags, replaced with cyan.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6513,7 +6513,7 @@ export default { $description: "Text color for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6536,7 +6536,7 @@ export default { $description: "Background color for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6559,7 +6559,7 @@ export default { $description: "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6580,7 +6580,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags, replaced with orange.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6605,7 +6605,7 @@ export default { $description: "Text color for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6628,7 +6628,7 @@ export default { $description: "Background color for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6651,7 +6651,7 @@ export default { $description: "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6672,7 +6672,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags, replaced with blue.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6697,7 +6697,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6720,7 +6720,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6743,7 +6743,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6764,7 +6764,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6789,7 +6789,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6812,7 +6812,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6835,7 +6835,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6856,7 +6856,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6883,7 +6883,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6906,7 +6906,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6929,7 +6929,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6941,7 +6941,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -6952,7 +6952,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6977,7 +6977,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -7000,7 +7000,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -7023,7 +7023,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -7046,7 +7046,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -7072,7 +7072,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7094,7 +7094,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7108,7 +7108,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-chrome-950) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-chrome-950) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7136,7 +7136,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7146,8 +7146,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7175,7 +7174,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7186,7 +7185,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-chrome-950) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7224,7 +7223,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7235,7 +7234,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-chrome-950) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7273,7 +7272,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7284,7 +7283,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-chrome-950) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7322,7 +7321,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7333,7 +7332,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-chrome-950) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7371,7 +7370,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7382,7 +7381,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7410,7 +7409,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7421,7 +7420,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-chrome-950) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7449,7 +7448,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7470,7 +7469,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7490,7 +7489,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7509,7 +7508,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7529,7 +7528,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7548,7 +7547,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7568,7 +7567,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7587,7 +7586,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7607,7 +7606,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7626,7 +7625,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7646,7 +7645,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7665,7 +7664,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7685,7 +7684,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7704,7 +7703,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7724,7 +7723,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7743,7 +7742,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7763,7 +7762,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7813,7 +7812,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7833,7 +7832,7 @@ export default { $type: "color", $value: "{colors.yellow.200}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7851,7 +7850,7 @@ export default { $type: "color", $value: "{colors.orange.400}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7869,7 +7868,7 @@ export default { $type: "color", $value: "{colors.cyan.400}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7887,7 +7886,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7907,7 +7906,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7925,7 +7924,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7943,7 +7942,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7964,7 +7963,7 @@ export default { $type: "color", $value: "{colors.orange.400}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7985,7 +7984,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", isSource: true, original: { @@ -8001,7 +8000,7 @@ export default { $type: "color", $value: "{colors.chrome.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8020,7 +8019,7 @@ export default { $type: "color", $value: "{colors.orange.400}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8041,7 +8040,7 @@ export default { $type: "color", $value: "{colors.chrome.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8060,7 +8059,7 @@ export default { $type: "color", $value: "{colors.blue.500}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8079,7 +8078,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8102,7 +8101,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8129,7 +8128,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8152,7 +8151,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8173,7 +8172,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8198,7 +8197,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8219,7 +8218,7 @@ export default { $type: "color", $value: "{colors.chrome.700}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8243,7 +8242,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8271,7 +8270,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8301,7 +8300,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8329,7 +8328,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8372,7 +8371,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8399,7 +8398,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8426,7 +8425,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8453,7 +8452,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8480,7 +8479,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8507,7 +8506,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8527,7 +8526,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8545,7 +8544,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8563,7 +8562,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8581,7 +8580,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8599,7 +8598,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8617,7 +8616,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8635,7 +8634,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8653,7 +8652,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8671,7 +8670,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8689,7 +8688,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8707,7 +8706,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8727,7 +8726,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8745,7 +8744,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8763,7 +8762,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8781,7 +8780,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8799,7 +8798,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8817,7 +8816,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8835,7 +8834,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8853,7 +8852,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8871,7 +8870,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8889,7 +8888,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8907,7 +8906,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-light-high-contrast-deuteranopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/light-high-contrast-deuteranopia-harness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-light-high-contrast-deuteranopia-desktop-harness.ts rename to packages/core-design-system/src/styles-esm/light-high-contrast-deuteranopia-harness.ts index e498d64d70..cdc098ac71 100644 --- a/packages/core-design-system/src/styles-esm/source-light-high-contrast-deuteranopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/light-high-contrast-deuteranopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:26 GMT + * Generated on Tue, 18 Mar 2025 06:44:22 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.15)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.2)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast orange text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-500) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-600) l c h / 0.6)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable cyan text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.6)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.6)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-yellow-400) l c h / 0.6)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-yellow-200) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.6)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.6)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1956,7 +1956,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1981,7 +1981,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2006,7 +2006,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2033,7 +2033,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2058,7 +2058,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2083,7 +2083,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2112,7 +2112,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2137,7 +2137,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2164,7 +2164,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2189,7 +2189,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2216,7 +2216,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable cyan text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2237,7 +2237,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.1)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -2257,7 +2257,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2278,7 +2278,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.6)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -2298,7 +2298,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2320,7 +2320,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: @@ -2341,7 +2341,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2363,7 +2363,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: @@ -2384,7 +2384,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2411,7 +2411,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2432,7 +2432,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -2452,7 +2452,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2473,7 +2473,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.6)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -2493,7 +2493,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2515,7 +2515,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: @@ -2536,7 +2536,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2558,7 +2558,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.25)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: @@ -2579,7 +2579,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2606,7 +2606,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2627,7 +2627,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2652,7 +2652,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2678,7 +2678,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2700,7 +2700,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2724,7 +2724,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2746,7 +2746,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2768,7 +2768,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2788,7 +2788,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2808,7 +2808,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -2828,7 +2828,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2852,7 +2852,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2872,7 +2872,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2895,7 +2895,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2918,7 +2918,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2941,7 +2941,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: @@ -2962,7 +2962,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2998,7 +2998,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3018,7 +3018,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.12)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.12)", $description: "Cyan background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -3038,7 +3038,7 @@ export default { $description: "Cyan background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3058,7 +3058,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -3078,7 +3078,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3098,7 +3098,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -3118,7 +3118,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3140,7 +3140,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3162,7 +3162,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3182,7 +3182,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.12)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.12)", $description: "Orange background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -3202,7 +3202,7 @@ export default { $description: "Orange background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3222,7 +3222,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -3242,7 +3242,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3262,7 +3262,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.25)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -3282,7 +3282,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3304,7 +3304,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3326,7 +3326,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3348,7 +3348,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3370,7 +3370,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3390,7 +3390,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-400) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-400) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -3410,7 +3410,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3430,7 +3430,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-400) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", isSource: true, @@ -3448,7 +3448,7 @@ export default { $value: "{colors.blue.400}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3470,7 +3470,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3492,7 +3492,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3516,7 +3516,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3538,7 +3538,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3560,7 +3560,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3582,7 +3582,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3604,7 +3604,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3628,7 +3628,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3652,7 +3652,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3674,7 +3674,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3697,7 +3697,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3720,7 +3720,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3741,7 +3741,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3754,7 +3754,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Navigation container border.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", isSource: true, @@ -3763,7 +3763,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3783,7 +3783,7 @@ export default { $value: "{background.2}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3808,7 +3808,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3835,7 +3835,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3864,7 +3864,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3889,7 +3889,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3903,7 +3903,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(54.81% 69.74 52.27) 0%, lch(from var(--canary-colors-chrome-300) l c h / 0.4) 30%, lch(54.81% 69.74 52.27) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(54.81% 69.74 52.27) 0%, lch(from var(--cn-colors-chrome-300) l c h / 0.4) 30%, lch(54.81% 69.74 52.27) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: @@ -3916,7 +3916,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3943,7 +3943,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3970,7 +3970,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3999,7 +3999,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -4012,7 +4012,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: @@ -4024,7 +4024,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4051,7 +4051,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4076,7 +4076,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4101,7 +4101,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -4121,7 +4121,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4147,7 +4147,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4169,7 +4169,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4191,7 +4191,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4211,7 +4211,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.15)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", isSource: true, @@ -4229,7 +4229,7 @@ export default { $value: "{colors.chrome.700}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4249,7 +4249,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.2)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", isSource: true, @@ -4267,7 +4267,7 @@ export default { $value: "{colors.chrome.700}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4292,7 +4292,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4317,7 +4317,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4344,7 +4344,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4369,7 +4369,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4394,7 +4394,7 @@ export default { $value: "{colors.chrome.50}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4415,7 +4415,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4440,7 +4440,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4461,7 +4461,7 @@ export default { $value: "{colors.chrome.800}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4484,7 +4484,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4509,7 +4509,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4534,7 +4534,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4559,7 +4559,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4584,7 +4584,7 @@ export default { $value: "{colors.pure.white}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4605,7 +4605,7 @@ export default { $value: "{colors.chrome.500}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4631,7 +4631,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4656,7 +4656,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4679,7 +4679,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4702,7 +4702,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4727,7 +4727,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4750,7 +4750,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4773,7 +4773,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4788,7 +4788,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -4799,7 +4799,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4825,7 +4825,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4850,7 +4850,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4873,7 +4873,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4898,7 +4898,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4921,7 +4921,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4946,7 +4946,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4969,7 +4969,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4995,7 +4995,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -5017,7 +5017,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -5039,7 +5039,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -5061,7 +5061,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5083,7 +5083,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5105,7 +5105,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5127,7 +5127,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5152,7 +5152,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5175,7 +5175,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5200,7 +5200,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5223,7 +5223,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5250,7 +5250,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5273,7 +5273,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5296,7 +5296,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -5316,7 +5316,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5328,7 +5328,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -5339,7 +5339,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5364,7 +5364,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5390,7 +5390,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5401,7 +5401,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -5412,7 +5412,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5437,7 +5437,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5462,7 +5462,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5487,7 +5487,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5514,7 +5514,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5539,7 +5539,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5564,7 +5564,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5593,7 +5593,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5616,7 +5616,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5639,7 +5639,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5660,7 +5660,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5685,7 +5685,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5708,7 +5708,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5731,7 +5731,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5752,7 +5752,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5777,7 +5777,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5800,7 +5800,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5823,7 +5823,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5844,7 +5844,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5869,7 +5869,7 @@ export default { $description: "Text color for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5892,7 +5892,7 @@ export default { $description: "Background color for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5915,7 +5915,7 @@ export default { $description: "Subtle background variation for green tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5936,7 +5936,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags, replaced with cyan.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5961,7 +5961,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5984,7 +5984,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -6007,7 +6007,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -6028,7 +6028,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -6053,7 +6053,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6076,7 +6076,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6099,7 +6099,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6120,7 +6120,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6145,7 +6145,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6168,7 +6168,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6191,7 +6191,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6212,7 +6212,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6237,7 +6237,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6260,7 +6260,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6283,7 +6283,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6304,7 +6304,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6329,7 +6329,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6352,7 +6352,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6375,7 +6375,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6396,7 +6396,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6421,7 +6421,7 @@ export default { $description: "Text color for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6444,7 +6444,7 @@ export default { $description: "Background color for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6467,7 +6467,7 @@ export default { $description: "Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6488,7 +6488,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags, replaced with cyan.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6513,7 +6513,7 @@ export default { $description: "Text color for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6536,7 +6536,7 @@ export default { $description: "Background color for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6559,7 +6559,7 @@ export default { $description: "Subtle background variation for red tags, replaced with orange for deuteranopia visibility.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6580,7 +6580,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags, replaced with orange.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6605,7 +6605,7 @@ export default { $description: "Text color for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6628,7 +6628,7 @@ export default { $description: "Background color for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6651,7 +6651,7 @@ export default { $description: "Subtle background variation for violet tags, replaced with blue for deuteranopia visibility.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6672,7 +6672,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags, replaced with blue.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6697,7 +6697,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6720,7 +6720,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6743,7 +6743,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6764,7 +6764,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6789,7 +6789,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6812,7 +6812,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6835,7 +6835,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6856,7 +6856,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6883,7 +6883,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6906,7 +6906,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6929,7 +6929,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6941,7 +6941,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -6952,7 +6952,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6977,7 +6977,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -7000,7 +7000,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -7023,7 +7023,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -7046,7 +7046,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -7072,7 +7072,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7094,7 +7094,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7108,7 +7108,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-chrome-950) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-chrome-950) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7136,7 +7136,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7146,8 +7146,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7175,7 +7174,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7186,7 +7185,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-chrome-950) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7224,7 +7223,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7235,7 +7234,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-chrome-950) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7273,7 +7272,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7284,7 +7283,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-chrome-950) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7322,7 +7321,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7333,7 +7332,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-chrome-950) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7371,7 +7370,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7382,7 +7381,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7410,7 +7409,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7421,7 +7420,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-chrome-950) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7449,7 +7448,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7470,7 +7469,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7490,7 +7489,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7509,7 +7508,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7529,7 +7528,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7548,7 +7547,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7568,7 +7567,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7587,7 +7586,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7607,7 +7606,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7626,7 +7625,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7646,7 +7645,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7665,7 +7664,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7685,7 +7684,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7704,7 +7703,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7724,7 +7723,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7743,7 +7742,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", @@ -7763,7 +7762,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7813,7 +7812,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7833,7 +7832,7 @@ export default { $type: "color", $value: "{colors.yellow.200}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7851,7 +7850,7 @@ export default { $type: "color", $value: "{colors.orange.400}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7869,7 +7868,7 @@ export default { $type: "color", $value: "{colors.cyan.400}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7887,7 +7886,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7907,7 +7906,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7925,7 +7924,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7943,7 +7942,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7964,7 +7963,7 @@ export default { $type: "color", $value: "{colors.orange.400}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7985,7 +7984,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", filePath: "design-tokens/mode/light/high-contrast-deuteranopia.json", isSource: true, original: { @@ -8001,7 +8000,7 @@ export default { $type: "color", $value: "{colors.chrome.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8020,7 +8019,7 @@ export default { $type: "color", $value: "{colors.orange.400}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8041,7 +8040,7 @@ export default { $type: "color", $value: "{colors.chrome.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8060,7 +8059,7 @@ export default { $type: "color", $value: "{colors.blue.500}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8079,7 +8078,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8102,7 +8101,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8129,7 +8128,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8152,7 +8151,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8173,7 +8172,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8198,7 +8197,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8219,7 +8218,7 @@ export default { $type: "color", $value: "{colors.chrome.700}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8243,7 +8242,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8271,7 +8270,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8301,7 +8300,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8329,7 +8328,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8372,7 +8371,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8399,7 +8398,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8426,7 +8425,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8453,7 +8452,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8480,7 +8479,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8507,7 +8506,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8527,7 +8526,7 @@ export default { $type: "color", $value: "{colors.cyan.50}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8545,7 +8544,7 @@ export default { $type: "color", $value: "{colors.cyan.100}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8563,7 +8562,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8581,7 +8580,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8599,7 +8598,7 @@ export default { $type: "color", $value: "{colors.cyan.400}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8617,7 +8616,7 @@ export default { $type: "color", $value: "{colors.cyan.500}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8635,7 +8634,7 @@ export default { $type: "color", $value: "{colors.cyan.600}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8653,7 +8652,7 @@ export default { $type: "color", $value: "{colors.cyan.700}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8671,7 +8670,7 @@ export default { $type: "color", $value: "{colors.cyan.800}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8689,7 +8688,7 @@ export default { $type: "color", $value: "{colors.cyan.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8707,7 +8706,7 @@ export default { $type: "color", $value: "{colors.cyan.950}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8727,7 +8726,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8745,7 +8744,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8763,7 +8762,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8781,7 +8780,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8799,7 +8798,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8817,7 +8816,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8835,7 +8834,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8853,7 +8852,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8871,7 +8870,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8889,7 +8888,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8907,7 +8906,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-light-high-contrast-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/light-high-contrast-gitness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-light-high-contrast-desktop-gitness.ts rename to packages/core-design-system/src/styles-esm/light-high-contrast-gitness.ts index 7d3f09386d..0c9eee23f0 100644 --- a/packages/core-design-system/src/styles-esm/source-light-high-contrast-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/light-high-contrast-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:16 GMT + * Generated on Tue, 18 Mar 2025 06:44:15 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.15)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.2)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-600) l c h / 0.6)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable green text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-green-400) l c h / 0.6)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-green-300) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.6)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-yellow-400) l c h / 0.6)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-yellow-200) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.6)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-purple-400) l c h / 0.6)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-purple-300) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1955,7 +1955,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1979,7 +1979,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2003,7 +2003,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2029,7 +2029,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2053,7 +2053,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2077,7 +2077,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2105,7 +2105,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2129,7 +2129,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2155,7 +2155,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2179,7 +2179,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2206,7 +2206,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable green text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2227,7 +2227,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-green-300) l c h / 0.1)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -2247,7 +2247,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2268,7 +2268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-green-400) l c h / 0.6)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -2288,7 +2288,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2310,7 +2310,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-green-300) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -2330,7 +2330,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2352,7 +2352,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-300) l c h / 0.25)", + $value: "lch(from var(--cn-colors-green-300) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -2372,7 +2372,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2399,7 +2399,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2420,7 +2420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -2440,7 +2440,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2461,7 +2461,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.6)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -2481,7 +2481,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2503,7 +2503,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -2523,7 +2523,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2545,7 +2545,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -2565,7 +2565,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2592,7 +2592,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2613,7 +2613,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2638,7 +2638,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2664,7 +2664,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2686,7 +2686,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2710,7 +2710,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2732,7 +2732,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2754,7 +2754,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2774,7 +2774,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2794,7 +2794,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -2814,7 +2814,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2838,7 +2838,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2858,7 +2858,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2881,7 +2881,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2903,7 +2903,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2926,7 +2926,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -2946,7 +2946,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2982,7 +2982,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3002,7 +3002,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-400) l c h / 0.12)", + $value: "lch(from var(--cn-colors-green-400) l c h / 0.12)", $description: "Green background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -3022,7 +3022,7 @@ export default { $description: "Green background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3042,7 +3042,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-green-400) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -3062,7 +3062,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3082,7 +3082,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-400) l c h / 0.25)", + $value: "lch(from var(--cn-colors-green-400) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -3102,7 +3102,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3124,7 +3124,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3146,7 +3146,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3166,7 +3166,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.12)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -3186,7 +3186,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3206,7 +3206,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -3226,7 +3226,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3246,7 +3246,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -3266,7 +3266,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3288,7 +3288,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3310,7 +3310,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3332,7 +3332,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3354,7 +3354,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3374,7 +3374,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-400) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-400) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -3394,7 +3394,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3414,7 +3414,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-400) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/light/high-contrast.json", isSource: true, @@ -3432,7 +3432,7 @@ export default { $value: "{colors.blue.400}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3454,7 +3454,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3476,7 +3476,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3500,7 +3500,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3522,7 +3522,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3544,7 +3544,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3566,7 +3566,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3588,7 +3588,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3612,7 +3612,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3636,7 +3636,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3658,7 +3658,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3681,7 +3681,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3704,7 +3704,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3725,7 +3725,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3738,7 +3738,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Navigation container border.", filePath: "design-tokens/mode/light/high-contrast.json", isSource: true, @@ -3747,7 +3747,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3767,7 +3767,7 @@ export default { $value: "{background.2}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3792,7 +3792,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3818,7 +3818,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3847,7 +3847,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3872,7 +3872,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3886,7 +3886,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(54.81% 69.74 52.27) 0%, lch(from var(--canary-colors-chrome-300) l c h / 0.4) 30%, lch(54.81% 69.74 52.27) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(54.81% 69.74 52.27) 0%, lch(from var(--cn-colors-chrome-300) l c h / 0.4) 30%, lch(54.81% 69.74 52.27) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -3898,7 +3898,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3924,7 +3924,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3950,7 +3950,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3978,7 +3978,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3991,7 +3991,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -4002,7 +4002,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4028,7 +4028,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4052,7 +4052,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4077,7 +4077,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -4097,7 +4097,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4123,7 +4123,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4145,7 +4145,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4167,7 +4167,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4187,7 +4187,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.15)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/light/high-contrast.json", isSource: true, @@ -4205,7 +4205,7 @@ export default { $value: "{colors.chrome.700}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4225,7 +4225,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.2)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/light/high-contrast.json", isSource: true, @@ -4243,7 +4243,7 @@ export default { $value: "{colors.chrome.700}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4267,7 +4267,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4291,7 +4291,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4317,7 +4317,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4341,7 +4341,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4366,7 +4366,7 @@ export default { $value: "{colors.chrome.50}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4387,7 +4387,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4412,7 +4412,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4433,7 +4433,7 @@ export default { $value: "{colors.chrome.800}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4456,7 +4456,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4480,7 +4480,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4504,7 +4504,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4528,7 +4528,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4553,7 +4553,7 @@ export default { $value: "{colors.pure.white}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4574,7 +4574,7 @@ export default { $value: "{colors.chrome.500}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4600,7 +4600,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4625,7 +4625,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4648,7 +4648,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4671,7 +4671,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4696,7 +4696,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4719,7 +4719,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4742,7 +4742,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4757,7 +4757,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -4768,7 +4768,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4794,7 +4794,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4819,7 +4819,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4842,7 +4842,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4867,7 +4867,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4890,7 +4890,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4915,7 +4915,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4938,7 +4938,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4964,7 +4964,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4986,7 +4986,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -5008,7 +5008,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -5030,7 +5030,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5052,7 +5052,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5074,7 +5074,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5096,7 +5096,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5121,7 +5121,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5144,7 +5144,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5169,7 +5169,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5192,7 +5192,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5219,7 +5219,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5242,7 +5242,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5265,7 +5265,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -5285,7 +5285,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5297,7 +5297,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -5308,7 +5308,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5333,7 +5333,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5359,7 +5359,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5370,7 +5370,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -5381,7 +5381,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5405,7 +5405,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5429,7 +5429,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5453,7 +5453,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5479,7 +5479,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5503,7 +5503,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5527,7 +5527,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5556,7 +5556,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5579,7 +5579,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5602,7 +5602,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5623,7 +5623,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags. ", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5648,7 +5648,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5671,7 +5671,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5694,7 +5694,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5715,7 +5715,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags. ", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5740,7 +5740,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5763,7 +5763,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5786,7 +5786,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5807,7 +5807,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5832,7 +5832,7 @@ export default { $description: "Text color for green tags. Ensures readability while maintaining the green color theme.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5855,7 +5855,7 @@ export default { $description: "Background color for green tags. Creates a distinct surface with green theme styling.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5878,7 +5878,7 @@ export default { $description: "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5899,7 +5899,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5924,7 +5924,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5947,7 +5947,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5970,7 +5970,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5991,7 +5991,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -6016,7 +6016,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6039,7 +6039,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6062,7 +6062,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6083,7 +6083,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6108,7 +6108,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6131,7 +6131,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6154,7 +6154,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6175,7 +6175,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6200,7 +6200,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6223,7 +6223,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6246,7 +6246,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6267,7 +6267,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6292,7 +6292,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6315,7 +6315,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6338,7 +6338,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6359,7 +6359,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6384,7 +6384,7 @@ export default { $description: "Text color for purple tags. Ensures readability while maintaining the purple color theme.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6407,7 +6407,7 @@ export default { $description: "Background color for purple tags. Creates a distinct surface with purple theme styling.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6430,7 +6430,7 @@ export default { $description: "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6451,7 +6451,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6476,7 +6476,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6499,7 +6499,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6522,7 +6522,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6543,7 +6543,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6568,7 +6568,7 @@ export default { $description: "Text color for violet tags. Ensures readability while maintaining the violet color theme.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6591,7 +6591,7 @@ export default { $description: "Background color for violet tags. Creates a distinct surface with violet theme styling.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6614,7 +6614,7 @@ export default { $description: "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6635,7 +6635,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6660,7 +6660,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6683,7 +6683,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6706,7 +6706,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6727,7 +6727,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6752,7 +6752,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6775,7 +6775,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6798,7 +6798,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6819,7 +6819,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6846,7 +6846,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6869,7 +6869,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6892,7 +6892,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6904,7 +6904,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -6915,7 +6915,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6940,7 +6940,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6963,7 +6963,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6986,7 +6986,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -7009,7 +7009,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -7035,7 +7035,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7057,7 +7057,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7071,7 +7071,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-chrome-950) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-chrome-950) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7099,7 +7099,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7109,8 +7109,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7138,7 +7137,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7149,7 +7148,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-chrome-950) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7187,7 +7186,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7198,7 +7197,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-chrome-950) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7236,7 +7235,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7247,7 +7246,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-chrome-950) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7285,7 +7284,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7296,7 +7295,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-chrome-950) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7334,7 +7333,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7345,7 +7344,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7373,7 +7372,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7384,7 +7383,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-chrome-950) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7412,7 +7411,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7433,7 +7432,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7453,7 +7452,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7472,7 +7471,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7492,7 +7491,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7511,7 +7510,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7531,7 +7530,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7550,7 +7549,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7570,7 +7569,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7589,7 +7588,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7609,7 +7608,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7628,7 +7627,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7648,7 +7647,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7667,7 +7666,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7687,7 +7686,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7706,7 +7705,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7726,7 +7725,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7776,7 +7775,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7796,7 +7795,7 @@ export default { $type: "color", $value: "{colors.yellow.200}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7814,7 +7813,7 @@ export default { $type: "color", $value: "{colors.pink.400}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7832,7 +7831,7 @@ export default { $type: "color", $value: "{colors.purple.400}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7850,7 +7849,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7870,7 +7869,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7888,7 +7887,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7906,7 +7905,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7927,7 +7926,7 @@ export default { $type: "color", $value: "{colors.orange.400}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7948,7 +7947,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", filePath: "design-tokens/mode/light/high-contrast.json", isSource: true, original: { @@ -7964,7 +7963,7 @@ export default { $type: "color", $value: "{colors.chrome.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7983,7 +7982,7 @@ export default { $type: "color", $value: "{colors.orange.400}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8004,7 +8003,7 @@ export default { $type: "color", $value: "{colors.chrome.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8023,7 +8022,7 @@ export default { $type: "color", $value: "{colors.blue.500}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8042,7 +8041,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8064,7 +8063,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8090,7 +8089,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8112,7 +8111,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8132,7 +8131,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8156,7 +8155,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8176,7 +8175,7 @@ export default { $type: "color", $value: "{colors.chrome.700}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8199,7 +8198,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8226,7 +8225,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8255,7 +8254,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8282,7 +8281,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8325,7 +8324,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8352,7 +8351,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8379,7 +8378,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8406,7 +8405,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8433,7 +8432,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8460,7 +8459,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8480,7 +8479,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8498,7 +8497,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8516,7 +8515,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8534,7 +8533,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8552,7 +8551,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8570,7 +8569,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8588,7 +8587,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8606,7 +8605,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8624,7 +8623,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8642,7 +8641,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8660,7 +8659,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8680,7 +8679,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8698,7 +8697,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8716,7 +8715,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8734,7 +8733,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8752,7 +8751,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8770,7 +8769,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8788,7 +8787,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8806,7 +8805,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8824,7 +8823,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8842,7 +8841,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8860,7 +8859,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-light-high-contrast-desktop-harness.ts b/packages/core-design-system/src/styles-esm/light-high-contrast-harness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-light-high-contrast-desktop-harness.ts rename to packages/core-design-system/src/styles-esm/light-high-contrast-harness.ts index dcddbb9b92..23d4b05763 100644 --- a/packages/core-design-system/src/styles-esm/source-light-high-contrast-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/light-high-contrast-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:15 GMT + * Generated on Tue, 18 Mar 2025 06:44:14 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.15)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.2)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-600) l c h / 0.6)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable green text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-green-400) l c h / 0.6)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-green-300) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.6)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-yellow-400) l c h / 0.6)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-yellow-200) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.6)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-purple-400) l c h / 0.6)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-purple-300) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1955,7 +1955,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1979,7 +1979,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2003,7 +2003,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2029,7 +2029,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2053,7 +2053,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2077,7 +2077,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2105,7 +2105,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2129,7 +2129,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2155,7 +2155,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2179,7 +2179,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2206,7 +2206,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable green text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2227,7 +2227,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-green-300) l c h / 0.1)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -2247,7 +2247,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2268,7 +2268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-green-400) l c h / 0.6)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -2288,7 +2288,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2310,7 +2310,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-green-300) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -2330,7 +2330,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2352,7 +2352,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-300) l c h / 0.25)", + $value: "lch(from var(--cn-colors-green-300) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -2372,7 +2372,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2399,7 +2399,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2420,7 +2420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -2440,7 +2440,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2461,7 +2461,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.6)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -2481,7 +2481,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2503,7 +2503,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -2523,7 +2523,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2545,7 +2545,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -2565,7 +2565,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2592,7 +2592,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2613,7 +2613,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2638,7 +2638,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2664,7 +2664,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2686,7 +2686,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2710,7 +2710,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2732,7 +2732,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2754,7 +2754,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2774,7 +2774,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2794,7 +2794,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -2814,7 +2814,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2838,7 +2838,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2858,7 +2858,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2881,7 +2881,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2903,7 +2903,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2926,7 +2926,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -2946,7 +2946,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2982,7 +2982,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3002,7 +3002,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-400) l c h / 0.12)", + $value: "lch(from var(--cn-colors-green-400) l c h / 0.12)", $description: "Green background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -3022,7 +3022,7 @@ export default { $description: "Green background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3042,7 +3042,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-green-400) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -3062,7 +3062,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3082,7 +3082,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-green-400) l c h / 0.25)", + $value: "lch(from var(--cn-colors-green-400) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -3102,7 +3102,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3124,7 +3124,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3146,7 +3146,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3166,7 +3166,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.12)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -3186,7 +3186,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3206,7 +3206,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -3226,7 +3226,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3246,7 +3246,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -3266,7 +3266,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3288,7 +3288,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3310,7 +3310,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3332,7 +3332,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3354,7 +3354,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3374,7 +3374,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-400) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-400) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -3394,7 +3394,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3414,7 +3414,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-400) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/light/high-contrast.json", isSource: true, @@ -3432,7 +3432,7 @@ export default { $value: "{colors.blue.400}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3454,7 +3454,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3476,7 +3476,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3500,7 +3500,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3522,7 +3522,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3544,7 +3544,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3566,7 +3566,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3588,7 +3588,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3612,7 +3612,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3636,7 +3636,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3658,7 +3658,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3681,7 +3681,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3704,7 +3704,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3725,7 +3725,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3738,7 +3738,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Navigation container border.", filePath: "design-tokens/mode/light/high-contrast.json", isSource: true, @@ -3747,7 +3747,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3767,7 +3767,7 @@ export default { $value: "{background.2}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3792,7 +3792,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3818,7 +3818,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3847,7 +3847,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3872,7 +3872,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3886,7 +3886,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(54.81% 69.74 52.27) 0%, lch(from var(--canary-colors-chrome-300) l c h / 0.4) 30%, lch(54.81% 69.74 52.27) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(54.81% 69.74 52.27) 0%, lch(from var(--cn-colors-chrome-300) l c h / 0.4) 30%, lch(54.81% 69.74 52.27) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -3898,7 +3898,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3924,7 +3924,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3950,7 +3950,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3978,7 +3978,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3991,7 +3991,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -4002,7 +4002,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4028,7 +4028,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4052,7 +4052,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4077,7 +4077,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -4097,7 +4097,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4123,7 +4123,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4145,7 +4145,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4167,7 +4167,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4187,7 +4187,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.15)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/light/high-contrast.json", isSource: true, @@ -4205,7 +4205,7 @@ export default { $value: "{colors.chrome.700}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4225,7 +4225,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.2)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/light/high-contrast.json", isSource: true, @@ -4243,7 +4243,7 @@ export default { $value: "{colors.chrome.700}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4267,7 +4267,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4291,7 +4291,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4317,7 +4317,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4341,7 +4341,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4366,7 +4366,7 @@ export default { $value: "{colors.chrome.50}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4387,7 +4387,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4412,7 +4412,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4433,7 +4433,7 @@ export default { $value: "{colors.chrome.800}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4456,7 +4456,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4480,7 +4480,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4504,7 +4504,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4528,7 +4528,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4553,7 +4553,7 @@ export default { $value: "{colors.pure.white}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4574,7 +4574,7 @@ export default { $value: "{colors.chrome.500}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4600,7 +4600,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4625,7 +4625,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4648,7 +4648,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4671,7 +4671,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4696,7 +4696,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4719,7 +4719,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4742,7 +4742,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4757,7 +4757,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -4768,7 +4768,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4794,7 +4794,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4819,7 +4819,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4842,7 +4842,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4867,7 +4867,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4890,7 +4890,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4915,7 +4915,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4938,7 +4938,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4964,7 +4964,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4986,7 +4986,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -5008,7 +5008,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -5030,7 +5030,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5052,7 +5052,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5074,7 +5074,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5096,7 +5096,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5121,7 +5121,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5144,7 +5144,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5169,7 +5169,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5192,7 +5192,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5219,7 +5219,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5242,7 +5242,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5265,7 +5265,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -5285,7 +5285,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5297,7 +5297,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -5308,7 +5308,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5333,7 +5333,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5359,7 +5359,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5370,7 +5370,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -5381,7 +5381,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5405,7 +5405,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5429,7 +5429,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5453,7 +5453,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5479,7 +5479,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5503,7 +5503,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5527,7 +5527,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5556,7 +5556,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5579,7 +5579,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5602,7 +5602,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5623,7 +5623,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags. ", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5648,7 +5648,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5671,7 +5671,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5694,7 +5694,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5715,7 +5715,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags. ", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5740,7 +5740,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5763,7 +5763,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5786,7 +5786,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5807,7 +5807,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5832,7 +5832,7 @@ export default { $description: "Text color for green tags. Ensures readability while maintaining the green color theme.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5855,7 +5855,7 @@ export default { $description: "Background color for green tags. Creates a distinct surface with green theme styling.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5878,7 +5878,7 @@ export default { $description: "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5899,7 +5899,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5924,7 +5924,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5947,7 +5947,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5970,7 +5970,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5991,7 +5991,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -6016,7 +6016,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6039,7 +6039,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6062,7 +6062,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6083,7 +6083,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6108,7 +6108,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6131,7 +6131,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6154,7 +6154,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6175,7 +6175,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6200,7 +6200,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6223,7 +6223,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6246,7 +6246,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6267,7 +6267,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6292,7 +6292,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6315,7 +6315,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6338,7 +6338,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6359,7 +6359,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6384,7 +6384,7 @@ export default { $description: "Text color for purple tags. Ensures readability while maintaining the purple color theme.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6407,7 +6407,7 @@ export default { $description: "Background color for purple tags. Creates a distinct surface with purple theme styling.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6430,7 +6430,7 @@ export default { $description: "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6451,7 +6451,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6476,7 +6476,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6499,7 +6499,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6522,7 +6522,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6543,7 +6543,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6568,7 +6568,7 @@ export default { $description: "Text color for violet tags. Ensures readability while maintaining the violet color theme.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6591,7 +6591,7 @@ export default { $description: "Background color for violet tags. Creates a distinct surface with violet theme styling.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6614,7 +6614,7 @@ export default { $description: "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6635,7 +6635,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6660,7 +6660,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6683,7 +6683,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6706,7 +6706,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6727,7 +6727,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6752,7 +6752,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6775,7 +6775,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6798,7 +6798,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6819,7 +6819,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6846,7 +6846,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6869,7 +6869,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6892,7 +6892,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6904,7 +6904,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -6915,7 +6915,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6940,7 +6940,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6963,7 +6963,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6986,7 +6986,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -7009,7 +7009,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -7035,7 +7035,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7057,7 +7057,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7071,7 +7071,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-chrome-950) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-chrome-950) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7099,7 +7099,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7109,8 +7109,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7138,7 +7137,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7149,7 +7148,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-chrome-950) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7187,7 +7186,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7198,7 +7197,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-chrome-950) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7236,7 +7235,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7247,7 +7246,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-chrome-950) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7285,7 +7284,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7296,7 +7295,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-chrome-950) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7334,7 +7333,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7345,7 +7344,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7373,7 +7372,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7384,7 +7383,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-chrome-950) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7412,7 +7411,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7433,7 +7432,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7453,7 +7452,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7472,7 +7471,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7492,7 +7491,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7511,7 +7510,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7531,7 +7530,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7550,7 +7549,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7570,7 +7569,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7589,7 +7588,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7609,7 +7608,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7628,7 +7627,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7648,7 +7647,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7667,7 +7666,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7687,7 +7686,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7706,7 +7705,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/light/high-contrast.json", @@ -7726,7 +7725,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7776,7 +7775,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7796,7 +7795,7 @@ export default { $type: "color", $value: "{colors.yellow.200}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7814,7 +7813,7 @@ export default { $type: "color", $value: "{colors.pink.400}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7832,7 +7831,7 @@ export default { $type: "color", $value: "{colors.purple.400}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7850,7 +7849,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7870,7 +7869,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7888,7 +7887,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7906,7 +7905,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7927,7 +7926,7 @@ export default { $type: "color", $value: "{colors.orange.400}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7948,7 +7947,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", filePath: "design-tokens/mode/light/high-contrast.json", isSource: true, original: { @@ -7964,7 +7963,7 @@ export default { $type: "color", $value: "{colors.chrome.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7983,7 +7982,7 @@ export default { $type: "color", $value: "{colors.orange.400}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8004,7 +8003,7 @@ export default { $type: "color", $value: "{colors.chrome.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8023,7 +8022,7 @@ export default { $type: "color", $value: "{colors.blue.500}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8042,7 +8041,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8064,7 +8063,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8090,7 +8089,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8112,7 +8111,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8132,7 +8131,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8156,7 +8155,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8176,7 +8175,7 @@ export default { $type: "color", $value: "{colors.chrome.700}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8199,7 +8198,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8226,7 +8225,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8255,7 +8254,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8282,7 +8281,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8325,7 +8324,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8352,7 +8351,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8379,7 +8378,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8406,7 +8405,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8433,7 +8432,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8460,7 +8459,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8480,7 +8479,7 @@ export default { $type: "color", $value: "{colors.cyan.50}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8498,7 +8497,7 @@ export default { $type: "color", $value: "{colors.cyan.100}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8516,7 +8515,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8534,7 +8533,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8552,7 +8551,7 @@ export default { $type: "color", $value: "{colors.cyan.400}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8570,7 +8569,7 @@ export default { $type: "color", $value: "{colors.cyan.500}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8588,7 +8587,7 @@ export default { $type: "color", $value: "{colors.cyan.600}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8606,7 +8605,7 @@ export default { $type: "color", $value: "{colors.cyan.700}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8624,7 +8623,7 @@ export default { $type: "color", $value: "{colors.cyan.800}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8642,7 +8641,7 @@ export default { $type: "color", $value: "{colors.cyan.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8660,7 +8659,7 @@ export default { $type: "color", $value: "{colors.cyan.950}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8680,7 +8679,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8698,7 +8697,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8716,7 +8715,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8734,7 +8733,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8752,7 +8751,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8770,7 +8769,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8788,7 +8787,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8806,7 +8805,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8824,7 +8823,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8842,7 +8841,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8860,7 +8859,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-light-high-contrast-protanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/light-high-contrast-protanopia-gitness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-light-high-contrast-protanopia-desktop-gitness.ts rename to packages/core-design-system/src/styles-esm/light-high-contrast-protanopia-gitness.ts index fc1d2b0f7d..a12fca52f5 100644 --- a/packages/core-design-system/src/styles-esm/source-light-high-contrast-protanopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/light-high-contrast-protanopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:22 GMT + * Generated on Tue, 18 Mar 2025 06:44:19 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Adjusted for protanopia using blue instead of green.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Adjusted for protanopia using blue instead of green.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.15)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.2)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-600) l c h / 0.6)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-blue-400) l c h / 0.6)", $description: "Border color for success badges. Adjusted for protanopia using blue instead of green.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.1)", $description: "Background color for success badges. Adjusted for protanopia using blue instead of green.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.6)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-yellow-400) l c h / 0.6)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-yellow-200) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.6)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-purple-400) l c h / 0.6)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-purple-300) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1955,7 +1955,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1979,7 +1979,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2003,7 +2003,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2029,7 +2029,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2053,7 +2053,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2077,7 +2077,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2105,7 +2105,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2129,7 +2129,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2155,7 +2155,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2179,7 +2179,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2206,7 +2206,7 @@ export default { $description: "Text color for success buttons. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2227,7 +2227,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.1)", $description: "Background color for success buttons. Adjusted for protanopia using blue instead of green.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -2247,7 +2247,7 @@ export default { $description: "Background color for success buttons. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2268,7 +2268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-blue-400) l c h / 0.6)", $description: "Border color for success buttons. Adjusted for protanopia using blue instead of green.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -2288,7 +2288,7 @@ export default { $description: "Border color for success buttons. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2310,7 +2310,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.15)", $description: "Hover state background color for success buttons. Adjusted for protanopia using blue instead of green.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -2330,7 +2330,7 @@ export default { $description: "Hover state background color for success buttons. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2352,7 +2352,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.25)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.25)", $description: "Active state background color for success buttons. Adjusted for protanopia using blue instead of green.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -2372,7 +2372,7 @@ export default { $description: "Active state background color for success buttons. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2399,7 +2399,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2420,7 +2420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -2440,7 +2440,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2461,7 +2461,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.6)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -2481,7 +2481,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2503,7 +2503,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -2523,7 +2523,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2545,7 +2545,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -2565,7 +2565,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2592,7 +2592,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2613,7 +2613,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2638,7 +2638,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2664,7 +2664,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2686,7 +2686,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2710,7 +2710,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2732,7 +2732,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2754,7 +2754,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2774,7 +2774,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2794,7 +2794,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -2814,7 +2814,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2838,7 +2838,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2858,7 +2858,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2881,7 +2881,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2903,7 +2903,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2926,7 +2926,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: @@ -2947,7 +2947,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2983,7 +2983,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3003,7 +3003,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-400) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-400) l c h / 0.12)", $description: "Blue background highlighting newly added code lines. Adjusted for protanopia using blue instead of green.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -3023,7 +3023,7 @@ export default { $description: "Blue background highlighting newly added code lines. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3043,7 +3043,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-400) l c h / 0.2)", $description: "Background for line numbers of added code. Adjusted for protanopia using blue instead of green.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -3063,7 +3063,7 @@ export default { $description: "Background for line numbers of added code. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3083,7 +3083,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-400) l c h / 0.25)", + $value: "lch(from var(--cn-colors-blue-400) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines. Adjusted for protanopia using blue instead of green.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -3103,7 +3103,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3125,7 +3125,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3147,7 +3147,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3167,7 +3167,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.12)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -3187,7 +3187,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3207,7 +3207,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -3227,7 +3227,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3247,7 +3247,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -3267,7 +3267,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3289,7 +3289,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3311,7 +3311,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3333,7 +3333,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3355,7 +3355,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3375,7 +3375,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-400) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-400) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -3395,7 +3395,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3415,7 +3415,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-400) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", isSource: true, @@ -3433,7 +3433,7 @@ export default { $value: "{colors.blue.400}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3455,7 +3455,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3477,7 +3477,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3501,7 +3501,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3523,7 +3523,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3545,7 +3545,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3567,7 +3567,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3589,7 +3589,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3613,7 +3613,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3637,7 +3637,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3659,7 +3659,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3682,7 +3682,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3705,7 +3705,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3726,7 +3726,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3739,7 +3739,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Navigation container border.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", isSource: true, @@ -3748,7 +3748,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3768,7 +3768,7 @@ export default { $value: "{background.2}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3793,7 +3793,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3819,7 +3819,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3848,7 +3848,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3873,7 +3873,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3887,7 +3887,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(54.81% 69.74 52.27) 0%, lch(from var(--canary-colors-chrome-300) l c h / 0.4) 30%, lch(54.81% 69.74 52.27) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(54.81% 69.74 52.27) 0%, lch(from var(--cn-colors-chrome-300) l c h / 0.4) 30%, lch(54.81% 69.74 52.27) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -3899,7 +3899,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3925,7 +3925,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3951,7 +3951,7 @@ export default { $description: "Border color for completed pipeline states. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3979,7 +3979,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3992,7 +3992,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -4003,7 +4003,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4029,7 +4029,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4053,7 +4053,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4078,7 +4078,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -4098,7 +4098,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4124,7 +4124,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4146,7 +4146,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4168,7 +4168,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4188,7 +4188,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.15)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", isSource: true, @@ -4206,7 +4206,7 @@ export default { $value: "{colors.chrome.700}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4226,7 +4226,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.2)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", isSource: true, @@ -4244,7 +4244,7 @@ export default { $value: "{colors.chrome.700}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4268,7 +4268,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4292,7 +4292,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4318,7 +4318,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4342,7 +4342,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4367,7 +4367,7 @@ export default { $value: "{colors.chrome.50}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4390,7 +4390,7 @@ export default { $description: "Icon color for Logo in sidebar navigation. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4415,7 +4415,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4436,7 +4436,7 @@ export default { $value: "{colors.chrome.800}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4459,7 +4459,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4483,7 +4483,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4507,7 +4507,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4531,7 +4531,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4556,7 +4556,7 @@ export default { $value: "{colors.pure.white}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4577,7 +4577,7 @@ export default { $value: "{colors.chrome.500}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4603,7 +4603,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4628,7 +4628,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4651,7 +4651,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4674,7 +4674,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4699,7 +4699,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4722,7 +4722,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4745,7 +4745,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4760,7 +4760,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -4771,7 +4771,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4797,7 +4797,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4822,7 +4822,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4845,7 +4845,7 @@ export default { $description: "Filled portion color for slider tracks. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4870,7 +4870,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4893,7 +4893,7 @@ export default { $description: "Color for segment markers on the filled track portion. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4918,7 +4918,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4941,7 +4941,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4967,7 +4967,7 @@ export default { $description: "Color for success status indicators. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4989,7 +4989,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -5011,7 +5011,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -5033,7 +5033,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5055,7 +5055,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5077,7 +5077,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5099,7 +5099,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5124,7 +5124,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5147,7 +5147,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5172,7 +5172,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5195,7 +5195,7 @@ export default { $description: "Background color for the selected state of switch controls. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5222,7 +5222,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5245,7 +5245,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5268,7 +5268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -5288,7 +5288,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5300,7 +5300,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -5311,7 +5311,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5336,7 +5336,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5362,7 +5362,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5373,7 +5373,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -5384,7 +5384,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5408,7 +5408,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5432,7 +5432,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5456,7 +5456,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5482,7 +5482,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5506,7 +5506,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5530,7 +5530,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5559,7 +5559,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5582,7 +5582,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5605,7 +5605,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5626,7 +5626,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags. ", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5651,7 +5651,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5674,7 +5674,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5697,7 +5697,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5718,7 +5718,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags. ", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5743,7 +5743,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5766,7 +5766,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5789,7 +5789,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5810,7 +5810,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5835,7 +5835,7 @@ export default { $description: "Text color for green tags. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5858,7 +5858,7 @@ export default { $description: "Background color for green tags. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5881,7 +5881,7 @@ export default { $description: "Subtle background variation for green tags. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5904,7 +5904,7 @@ export default { $description: "Border color for green tags. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5929,7 +5929,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5952,7 +5952,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5975,7 +5975,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5996,7 +5996,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -6021,7 +6021,7 @@ export default { $description: "Text color for lime tags. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6044,7 +6044,7 @@ export default { $description: "Background color for lime tags. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6067,7 +6067,7 @@ export default { $description: "Subtle background variation for lime tags. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6090,7 +6090,7 @@ export default { $description: "Border color for lime tags. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6115,7 +6115,7 @@ export default { $description: "Text color for mint tags. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6138,7 +6138,7 @@ export default { $description: "Background color for mint tags. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6161,7 +6161,7 @@ export default { $description: "Subtle background variation for mint tags. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6184,7 +6184,7 @@ export default { $description: "Border color for mint tags. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6209,7 +6209,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6232,7 +6232,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6255,7 +6255,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6276,7 +6276,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6301,7 +6301,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6324,7 +6324,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6347,7 +6347,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6368,7 +6368,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6393,7 +6393,7 @@ export default { $description: "Text color for purple tags. Ensures readability while maintaining the purple color theme.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6416,7 +6416,7 @@ export default { $description: "Background color for purple tags. Creates a distinct surface with purple theme styling.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6439,7 +6439,7 @@ export default { $description: "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6460,7 +6460,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6485,7 +6485,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6508,7 +6508,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6531,7 +6531,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6552,7 +6552,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6577,7 +6577,7 @@ export default { $description: "Text color for violet tags. Ensures readability while maintaining the violet color theme.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6600,7 +6600,7 @@ export default { $description: "Background color for violet tags. Creates a distinct surface with violet theme styling.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6623,7 +6623,7 @@ export default { $description: "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6644,7 +6644,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6669,7 +6669,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6692,7 +6692,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6715,7 +6715,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6736,7 +6736,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6761,7 +6761,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6784,7 +6784,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6807,7 +6807,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6828,7 +6828,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6855,7 +6855,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6878,7 +6878,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6901,7 +6901,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6913,7 +6913,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -6924,7 +6924,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6949,7 +6949,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6972,7 +6972,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6995,7 +6995,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -7018,7 +7018,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -7044,7 +7044,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7066,7 +7066,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7080,7 +7080,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-chrome-950) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-chrome-950) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7108,7 +7108,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7118,8 +7118,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7147,7 +7146,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7158,7 +7157,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-chrome-950) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7196,7 +7195,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7207,7 +7206,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-chrome-950) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7245,7 +7244,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7256,7 +7255,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-chrome-950) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7294,7 +7293,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7305,7 +7304,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-chrome-950) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7343,7 +7342,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7354,7 +7353,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7382,7 +7381,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7393,7 +7392,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-chrome-950) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7421,7 +7420,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7442,7 +7441,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7462,7 +7461,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7481,7 +7480,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7501,7 +7500,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7520,7 +7519,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7540,7 +7539,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7559,7 +7558,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7579,7 +7578,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7598,7 +7597,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7618,7 +7617,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7637,7 +7636,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7657,7 +7656,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7676,7 +7675,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7696,7 +7695,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7715,7 +7714,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7735,7 +7734,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7785,7 +7784,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7805,7 +7804,7 @@ export default { $type: "color", $value: "{colors.yellow.200}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7823,7 +7822,7 @@ export default { $type: "color", $value: "{colors.pink.400}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7841,7 +7840,7 @@ export default { $type: "color", $value: "{colors.purple.400}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7859,7 +7858,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7879,7 +7878,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7897,7 +7896,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7915,7 +7914,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7936,7 +7935,7 @@ export default { $type: "color", $value: "{colors.orange.400}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7957,7 +7956,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", isSource: true, original: { @@ -7973,7 +7972,7 @@ export default { $type: "color", $value: "{colors.chrome.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7992,7 +7991,7 @@ export default { $type: "color", $value: "{colors.orange.400}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8013,7 +8012,7 @@ export default { $type: "color", $value: "{colors.chrome.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8032,7 +8031,7 @@ export default { $type: "color", $value: "{colors.blue.500}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8051,7 +8050,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8073,7 +8072,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8099,7 +8098,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8121,7 +8120,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8141,7 +8140,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8165,7 +8164,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8185,7 +8184,7 @@ export default { $type: "color", $value: "{colors.chrome.700}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8209,7 +8208,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8237,7 +8236,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8267,7 +8266,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8295,7 +8294,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8338,7 +8337,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8365,7 +8364,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8392,7 +8391,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8419,7 +8418,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8446,7 +8445,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8473,7 +8472,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8493,7 +8492,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8511,7 +8510,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8529,7 +8528,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8547,7 +8546,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8565,7 +8564,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8583,7 +8582,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8601,7 +8600,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8619,7 +8618,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8637,7 +8636,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8655,7 +8654,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8673,7 +8672,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8693,7 +8692,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8711,7 +8710,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8729,7 +8728,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8747,7 +8746,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8765,7 +8764,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8783,7 +8782,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8801,7 +8800,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8819,7 +8818,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8837,7 +8836,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8855,7 +8854,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8873,7 +8872,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-light-high-contrast-protanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/light-high-contrast-protanopia-harness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-light-high-contrast-protanopia-desktop-harness.ts rename to packages/core-design-system/src/styles-esm/light-high-contrast-protanopia-harness.ts index c25af5ff93..f58175d31d 100644 --- a/packages/core-design-system/src/styles-esm/source-light-high-contrast-protanopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/light-high-contrast-protanopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:21 GMT + * Generated on Tue, 18 Mar 2025 06:44:18 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Adjusted for protanopia using blue instead of green.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Adjusted for protanopia using blue instead of green.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.15)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.2)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-600) l c h / 0.6)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-blue-400) l c h / 0.6)", $description: "Border color for success badges. Adjusted for protanopia using blue instead of green.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.1)", $description: "Background color for success badges. Adjusted for protanopia using blue instead of green.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.6)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-yellow-400) l c h / 0.6)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-yellow-200) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.6)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-purple-400) l c h / 0.6)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-purple-300) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1955,7 +1955,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1979,7 +1979,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2003,7 +2003,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2029,7 +2029,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2053,7 +2053,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2077,7 +2077,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2105,7 +2105,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2129,7 +2129,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2155,7 +2155,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2179,7 +2179,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2206,7 +2206,7 @@ export default { $description: "Text color for success buttons. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2227,7 +2227,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.1)", $description: "Background color for success buttons. Adjusted for protanopia using blue instead of green.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -2247,7 +2247,7 @@ export default { $description: "Background color for success buttons. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2268,7 +2268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-blue-400) l c h / 0.6)", $description: "Border color for success buttons. Adjusted for protanopia using blue instead of green.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -2288,7 +2288,7 @@ export default { $description: "Border color for success buttons. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2310,7 +2310,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.15)", $description: "Hover state background color for success buttons. Adjusted for protanopia using blue instead of green.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -2330,7 +2330,7 @@ export default { $description: "Hover state background color for success buttons. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2352,7 +2352,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.25)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.25)", $description: "Active state background color for success buttons. Adjusted for protanopia using blue instead of green.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -2372,7 +2372,7 @@ export default { $description: "Active state background color for success buttons. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2399,7 +2399,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2420,7 +2420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -2440,7 +2440,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2461,7 +2461,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.6)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -2481,7 +2481,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2503,7 +2503,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -2523,7 +2523,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2545,7 +2545,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -2565,7 +2565,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2592,7 +2592,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2613,7 +2613,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2638,7 +2638,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2664,7 +2664,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2686,7 +2686,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2710,7 +2710,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2732,7 +2732,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2754,7 +2754,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2774,7 +2774,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2794,7 +2794,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -2814,7 +2814,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2838,7 +2838,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2858,7 +2858,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2881,7 +2881,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2903,7 +2903,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2926,7 +2926,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: @@ -2947,7 +2947,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2983,7 +2983,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3003,7 +3003,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-400) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-400) l c h / 0.12)", $description: "Blue background highlighting newly added code lines. Adjusted for protanopia using blue instead of green.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -3023,7 +3023,7 @@ export default { $description: "Blue background highlighting newly added code lines. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3043,7 +3043,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-400) l c h / 0.2)", $description: "Background for line numbers of added code. Adjusted for protanopia using blue instead of green.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -3063,7 +3063,7 @@ export default { $description: "Background for line numbers of added code. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3083,7 +3083,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-400) l c h / 0.25)", + $value: "lch(from var(--cn-colors-blue-400) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines. Adjusted for protanopia using blue instead of green.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -3103,7 +3103,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3125,7 +3125,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3147,7 +3147,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3167,7 +3167,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.12)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -3187,7 +3187,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3207,7 +3207,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -3227,7 +3227,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3247,7 +3247,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -3267,7 +3267,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3289,7 +3289,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3311,7 +3311,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3333,7 +3333,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3355,7 +3355,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3375,7 +3375,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-400) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-400) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -3395,7 +3395,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3415,7 +3415,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-400) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", isSource: true, @@ -3433,7 +3433,7 @@ export default { $value: "{colors.blue.400}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3455,7 +3455,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3477,7 +3477,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3501,7 +3501,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3523,7 +3523,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3545,7 +3545,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3567,7 +3567,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3589,7 +3589,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3613,7 +3613,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3637,7 +3637,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3659,7 +3659,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3682,7 +3682,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3705,7 +3705,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3726,7 +3726,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3739,7 +3739,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Navigation container border.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", isSource: true, @@ -3748,7 +3748,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3768,7 +3768,7 @@ export default { $value: "{background.2}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3793,7 +3793,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3819,7 +3819,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3848,7 +3848,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3873,7 +3873,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3887,7 +3887,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(54.81% 69.74 52.27) 0%, lch(from var(--canary-colors-chrome-300) l c h / 0.4) 30%, lch(54.81% 69.74 52.27) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(54.81% 69.74 52.27) 0%, lch(from var(--cn-colors-chrome-300) l c h / 0.4) 30%, lch(54.81% 69.74 52.27) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -3899,7 +3899,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3925,7 +3925,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3951,7 +3951,7 @@ export default { $description: "Border color for completed pipeline states. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3979,7 +3979,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3992,7 +3992,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -4003,7 +4003,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4029,7 +4029,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4053,7 +4053,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4078,7 +4078,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -4098,7 +4098,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4124,7 +4124,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4146,7 +4146,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4168,7 +4168,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4188,7 +4188,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.15)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", isSource: true, @@ -4206,7 +4206,7 @@ export default { $value: "{colors.chrome.700}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4226,7 +4226,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.2)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", isSource: true, @@ -4244,7 +4244,7 @@ export default { $value: "{colors.chrome.700}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4268,7 +4268,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4292,7 +4292,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4318,7 +4318,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4342,7 +4342,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4367,7 +4367,7 @@ export default { $value: "{colors.chrome.50}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4390,7 +4390,7 @@ export default { $description: "Icon color for Logo in sidebar navigation. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4415,7 +4415,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4436,7 +4436,7 @@ export default { $value: "{colors.chrome.800}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4459,7 +4459,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4483,7 +4483,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4507,7 +4507,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4531,7 +4531,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4556,7 +4556,7 @@ export default { $value: "{colors.pure.white}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4577,7 +4577,7 @@ export default { $value: "{colors.chrome.500}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4603,7 +4603,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4628,7 +4628,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4651,7 +4651,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4674,7 +4674,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4699,7 +4699,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4722,7 +4722,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4745,7 +4745,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4760,7 +4760,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -4771,7 +4771,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4797,7 +4797,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4822,7 +4822,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4845,7 +4845,7 @@ export default { $description: "Filled portion color for slider tracks. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4870,7 +4870,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4893,7 +4893,7 @@ export default { $description: "Color for segment markers on the filled track portion. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4918,7 +4918,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4941,7 +4941,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4967,7 +4967,7 @@ export default { $description: "Color for success status indicators. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4989,7 +4989,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -5011,7 +5011,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -5033,7 +5033,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5055,7 +5055,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5077,7 +5077,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed. ", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5099,7 +5099,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5124,7 +5124,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5147,7 +5147,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5172,7 +5172,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5195,7 +5195,7 @@ export default { $description: "Background color for the selected state of switch controls. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5222,7 +5222,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5245,7 +5245,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5268,7 +5268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -5288,7 +5288,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5300,7 +5300,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -5311,7 +5311,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5336,7 +5336,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5362,7 +5362,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5373,7 +5373,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -5384,7 +5384,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5408,7 +5408,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5432,7 +5432,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5456,7 +5456,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5482,7 +5482,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5506,7 +5506,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5530,7 +5530,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5559,7 +5559,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5582,7 +5582,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5605,7 +5605,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5626,7 +5626,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags. ", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5651,7 +5651,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5674,7 +5674,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5697,7 +5697,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5718,7 +5718,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags. ", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5743,7 +5743,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5766,7 +5766,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5789,7 +5789,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5810,7 +5810,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5835,7 +5835,7 @@ export default { $description: "Text color for green tags. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5858,7 +5858,7 @@ export default { $description: "Background color for green tags. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5881,7 +5881,7 @@ export default { $description: "Subtle background variation for green tags. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5904,7 +5904,7 @@ export default { $description: "Border color for green tags. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5929,7 +5929,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5952,7 +5952,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5975,7 +5975,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5996,7 +5996,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -6021,7 +6021,7 @@ export default { $description: "Text color for lime tags. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6044,7 +6044,7 @@ export default { $description: "Background color for lime tags. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6067,7 +6067,7 @@ export default { $description: "Subtle background variation for lime tags. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6090,7 +6090,7 @@ export default { $description: "Border color for lime tags. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6115,7 +6115,7 @@ export default { $description: "Text color for mint tags. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6138,7 +6138,7 @@ export default { $description: "Background color for mint tags. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6161,7 +6161,7 @@ export default { $description: "Subtle background variation for mint tags. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6184,7 +6184,7 @@ export default { $description: "Border color for mint tags. Adjusted for protanopia using blue instead of green.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6209,7 +6209,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6232,7 +6232,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6255,7 +6255,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6276,7 +6276,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6301,7 +6301,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6324,7 +6324,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6347,7 +6347,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6368,7 +6368,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6393,7 +6393,7 @@ export default { $description: "Text color for purple tags. Ensures readability while maintaining the purple color theme.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6416,7 +6416,7 @@ export default { $description: "Background color for purple tags. Creates a distinct surface with purple theme styling.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6439,7 +6439,7 @@ export default { $description: "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6460,7 +6460,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6485,7 +6485,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6508,7 +6508,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6531,7 +6531,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6552,7 +6552,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6577,7 +6577,7 @@ export default { $description: "Text color for violet tags. Ensures readability while maintaining the violet color theme.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6600,7 +6600,7 @@ export default { $description: "Background color for violet tags. Creates a distinct surface with violet theme styling.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6623,7 +6623,7 @@ export default { $description: "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6644,7 +6644,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6669,7 +6669,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6692,7 +6692,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6715,7 +6715,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6736,7 +6736,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6761,7 +6761,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6784,7 +6784,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6807,7 +6807,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6828,7 +6828,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6855,7 +6855,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6878,7 +6878,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6901,7 +6901,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6913,7 +6913,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -6924,7 +6924,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6949,7 +6949,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6972,7 +6972,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6995,7 +6995,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -7018,7 +7018,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -7044,7 +7044,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7066,7 +7066,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7080,7 +7080,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-chrome-950) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-chrome-950) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7108,7 +7108,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7118,8 +7118,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7147,7 +7146,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7158,7 +7157,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-chrome-950) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7196,7 +7195,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7207,7 +7206,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-chrome-950) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7245,7 +7244,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7256,7 +7255,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-chrome-950) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7294,7 +7293,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7305,7 +7304,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-chrome-950) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7343,7 +7342,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7354,7 +7353,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7382,7 +7381,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7393,7 +7392,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-chrome-950) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7421,7 +7420,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7442,7 +7441,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7462,7 +7461,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7481,7 +7480,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7501,7 +7500,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7520,7 +7519,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7540,7 +7539,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7559,7 +7558,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7579,7 +7578,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7598,7 +7597,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7618,7 +7617,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7637,7 +7636,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7657,7 +7656,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7676,7 +7675,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7696,7 +7695,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7715,7 +7714,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", @@ -7735,7 +7734,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7785,7 +7784,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7805,7 +7804,7 @@ export default { $type: "color", $value: "{colors.yellow.200}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7823,7 +7822,7 @@ export default { $type: "color", $value: "{colors.pink.400}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7841,7 +7840,7 @@ export default { $type: "color", $value: "{colors.purple.400}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7859,7 +7858,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7879,7 +7878,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7897,7 +7896,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7915,7 +7914,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7936,7 +7935,7 @@ export default { $type: "color", $value: "{colors.orange.400}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7957,7 +7956,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", filePath: "design-tokens/mode/light/high-contrast-protanopia.json", isSource: true, original: { @@ -7973,7 +7972,7 @@ export default { $type: "color", $value: "{colors.chrome.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7992,7 +7991,7 @@ export default { $type: "color", $value: "{colors.orange.400}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8013,7 +8012,7 @@ export default { $type: "color", $value: "{colors.chrome.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8032,7 +8031,7 @@ export default { $type: "color", $value: "{colors.blue.500}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8051,7 +8050,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8073,7 +8072,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8099,7 +8098,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8121,7 +8120,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8141,7 +8140,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8165,7 +8164,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8185,7 +8184,7 @@ export default { $type: "color", $value: "{colors.chrome.700}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8209,7 +8208,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8237,7 +8236,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8267,7 +8266,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8295,7 +8294,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8338,7 +8337,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8365,7 +8364,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8392,7 +8391,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8419,7 +8418,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8446,7 +8445,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8473,7 +8472,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8493,7 +8492,7 @@ export default { $type: "color", $value: "{colors.cyan.50}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8511,7 +8510,7 @@ export default { $type: "color", $value: "{colors.cyan.100}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8529,7 +8528,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8547,7 +8546,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8565,7 +8564,7 @@ export default { $type: "color", $value: "{colors.cyan.400}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8583,7 +8582,7 @@ export default { $type: "color", $value: "{colors.cyan.500}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8601,7 +8600,7 @@ export default { $type: "color", $value: "{colors.cyan.600}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8619,7 +8618,7 @@ export default { $type: "color", $value: "{colors.cyan.700}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8637,7 +8636,7 @@ export default { $type: "color", $value: "{colors.cyan.800}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8655,7 +8654,7 @@ export default { $type: "color", $value: "{colors.cyan.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8673,7 +8672,7 @@ export default { $type: "color", $value: "{colors.cyan.950}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8693,7 +8692,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8711,7 +8710,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8729,7 +8728,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8747,7 +8746,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8765,7 +8764,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8783,7 +8782,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8801,7 +8800,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8819,7 +8818,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8837,7 +8836,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8855,7 +8854,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8873,7 +8872,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-light-high-contrast-tritanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/light-high-contrast-tritanopia-gitness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-light-high-contrast-tritanopia-desktop-gitness.ts rename to packages/core-design-system/src/styles-esm/light-high-contrast-tritanopia-gitness.ts index 2ef4c37e48..f53a89a430 100644 --- a/packages/core-design-system/src/styles-esm/source-light-high-contrast-tritanopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/light-high-contrast-tritanopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:32 GMT + * Generated on Tue, 18 Mar 2025 06:44:26 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.15)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.2)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-600) l c h / 0.6)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable green text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.6)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.6)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.6)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-200) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.6)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.6)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1955,7 +1955,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1979,7 +1979,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2003,7 +2003,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2029,7 +2029,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2053,7 +2053,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2077,7 +2077,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2105,7 +2105,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2129,7 +2129,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2155,7 +2155,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2179,7 +2179,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2206,7 +2206,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable green text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2227,7 +2227,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.1)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -2247,7 +2247,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2268,7 +2268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.6)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -2288,7 +2288,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2310,7 +2310,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -2330,7 +2330,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2352,7 +2352,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -2372,7 +2372,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2399,7 +2399,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2420,7 +2420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -2440,7 +2440,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2461,7 +2461,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.6)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -2481,7 +2481,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2503,7 +2503,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -2523,7 +2523,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2545,7 +2545,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -2565,7 +2565,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2592,7 +2592,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2613,7 +2613,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2638,7 +2638,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2664,7 +2664,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2686,7 +2686,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2710,7 +2710,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2732,7 +2732,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2754,7 +2754,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2774,7 +2774,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2794,7 +2794,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -2814,7 +2814,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2838,7 +2838,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2858,7 +2858,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2881,7 +2881,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2903,7 +2903,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2926,7 +2926,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: @@ -2947,7 +2947,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2983,7 +2983,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3003,7 +3003,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.12)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.12)", $description: "Green background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -3023,7 +3023,7 @@ export default { $description: "Green background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3043,7 +3043,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -3063,7 +3063,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3083,7 +3083,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -3103,7 +3103,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3125,7 +3125,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3147,7 +3147,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3167,7 +3167,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.12)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -3187,7 +3187,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3207,7 +3207,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -3227,7 +3227,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3247,7 +3247,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -3267,7 +3267,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3289,7 +3289,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3311,7 +3311,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3333,7 +3333,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3355,7 +3355,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3375,7 +3375,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-400) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-400) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -3395,7 +3395,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3415,7 +3415,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-400) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", isSource: true, @@ -3433,7 +3433,7 @@ export default { $value: "{colors.blue.400}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3455,7 +3455,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3477,7 +3477,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3501,7 +3501,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3523,7 +3523,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3545,7 +3545,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3567,7 +3567,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3589,7 +3589,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3613,7 +3613,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3637,7 +3637,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3659,7 +3659,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3682,7 +3682,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3705,7 +3705,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3726,7 +3726,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3739,7 +3739,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Navigation container border.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", isSource: true, @@ -3748,7 +3748,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3768,7 +3768,7 @@ export default { $value: "{background.2}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3793,7 +3793,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3819,7 +3819,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3848,7 +3848,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3873,7 +3873,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3887,7 +3887,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(54.81% 69.74 52.27) 0%, lch(from var(--canary-colors-chrome-300) l c h / 0.4) 30%, lch(54.81% 69.74 52.27) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(54.81% 69.74 52.27) 0%, lch(from var(--cn-colors-chrome-300) l c h / 0.4) 30%, lch(54.81% 69.74 52.27) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -3899,7 +3899,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3925,7 +3925,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3951,7 +3951,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3979,7 +3979,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3992,7 +3992,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -4003,7 +4003,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4029,7 +4029,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4053,7 +4053,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4078,7 +4078,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -4098,7 +4098,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4124,7 +4124,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4146,7 +4146,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4168,7 +4168,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4188,7 +4188,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.15)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", isSource: true, @@ -4206,7 +4206,7 @@ export default { $value: "{colors.chrome.700}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4226,7 +4226,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.2)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", isSource: true, @@ -4244,7 +4244,7 @@ export default { $value: "{colors.chrome.700}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4268,7 +4268,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4292,7 +4292,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4318,7 +4318,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4342,7 +4342,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4367,7 +4367,7 @@ export default { $value: "{colors.chrome.50}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4388,7 +4388,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4413,7 +4413,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4434,7 +4434,7 @@ export default { $value: "{colors.chrome.800}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4457,7 +4457,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4481,7 +4481,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4505,7 +4505,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4529,7 +4529,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4554,7 +4554,7 @@ export default { $value: "{colors.pure.white}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4575,7 +4575,7 @@ export default { $value: "{colors.chrome.500}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4601,7 +4601,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4626,7 +4626,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4649,7 +4649,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4672,7 +4672,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4697,7 +4697,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4720,7 +4720,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4743,7 +4743,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4758,7 +4758,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -4769,7 +4769,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4795,7 +4795,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4820,7 +4820,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4843,7 +4843,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4868,7 +4868,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4891,7 +4891,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4916,7 +4916,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4939,7 +4939,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4965,7 +4965,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4987,7 +4987,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -5009,7 +5009,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -5031,7 +5031,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5053,7 +5053,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5075,7 +5075,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5097,7 +5097,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5122,7 +5122,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5145,7 +5145,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5170,7 +5170,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5193,7 +5193,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5220,7 +5220,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5243,7 +5243,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5266,7 +5266,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -5286,7 +5286,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5298,7 +5298,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -5309,7 +5309,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5334,7 +5334,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5360,7 +5360,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5371,7 +5371,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -5382,7 +5382,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5406,7 +5406,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5430,7 +5430,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5454,7 +5454,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5480,7 +5480,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5504,7 +5504,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5528,7 +5528,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5557,7 +5557,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5580,7 +5580,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5603,7 +5603,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5624,7 +5624,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5649,7 +5649,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5672,7 +5672,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5695,7 +5695,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5716,7 +5716,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5741,7 +5741,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5764,7 +5764,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5787,7 +5787,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5808,7 +5808,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5833,7 +5833,7 @@ export default { $description: "Text color for green tags. Ensures readability while maintaining the green color theme.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5856,7 +5856,7 @@ export default { $description: "Background color for green tags. Creates a distinct surface with green theme styling.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5879,7 +5879,7 @@ export default { $description: "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5900,7 +5900,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5925,7 +5925,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5948,7 +5948,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5971,7 +5971,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5992,7 +5992,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -6017,7 +6017,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6040,7 +6040,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6063,7 +6063,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6084,7 +6084,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6109,7 +6109,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6132,7 +6132,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6155,7 +6155,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6176,7 +6176,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6201,7 +6201,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6224,7 +6224,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6247,7 +6247,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6268,7 +6268,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6293,7 +6293,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6316,7 +6316,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6339,7 +6339,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6360,7 +6360,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6385,7 +6385,7 @@ export default { $description: "Text color for purple tags. Ensures readability while maintaining the purple color theme.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6408,7 +6408,7 @@ export default { $description: "Background color for purple tags. Creates a distinct surface with purple theme styling.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6431,7 +6431,7 @@ export default { $description: "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6452,7 +6452,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6477,7 +6477,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6500,7 +6500,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6523,7 +6523,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6544,7 +6544,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6569,7 +6569,7 @@ export default { $description: "Text color for violet tags. Ensures readability while maintaining the violet color theme.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6592,7 +6592,7 @@ export default { $description: "Background color for violet tags. Creates a distinct surface with violet theme styling.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6615,7 +6615,7 @@ export default { $description: "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6636,7 +6636,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6661,7 +6661,7 @@ export default { $description: "Text color for yellow tags. Signals caution states with readable amber text.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6684,7 +6684,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6707,7 +6707,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6728,7 +6728,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6753,7 +6753,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6776,7 +6776,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6799,7 +6799,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6820,7 +6820,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6847,7 +6847,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6870,7 +6870,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6893,7 +6893,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6905,7 +6905,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -6916,7 +6916,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6941,7 +6941,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6964,7 +6964,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6987,7 +6987,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -7010,7 +7010,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -7036,7 +7036,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7058,7 +7058,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7072,7 +7072,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-chrome-950) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-chrome-950) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7100,7 +7100,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7110,8 +7110,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7139,7 +7138,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7150,7 +7149,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-chrome-950) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7188,7 +7187,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7199,7 +7198,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-chrome-950) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7237,7 +7236,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7248,7 +7247,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-chrome-950) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7286,7 +7285,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7297,7 +7296,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-chrome-950) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7335,7 +7334,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7346,7 +7345,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7374,7 +7373,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7385,7 +7384,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-chrome-950) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7413,7 +7412,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7434,7 +7433,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7454,7 +7453,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7473,7 +7472,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7493,7 +7492,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7512,7 +7511,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7532,7 +7531,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7551,7 +7550,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7571,7 +7570,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7590,7 +7589,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7610,7 +7609,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7629,7 +7628,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7649,7 +7648,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7668,7 +7667,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7688,7 +7687,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7707,7 +7706,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7727,7 +7726,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7777,7 +7776,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7797,7 +7796,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7815,7 +7814,7 @@ export default { $type: "color", $value: "{colors.pink.400}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7833,7 +7832,7 @@ export default { $type: "color", $value: "{colors.cyan.400}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7851,7 +7850,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7871,7 +7870,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7889,7 +7888,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7907,7 +7906,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7928,7 +7927,7 @@ export default { $type: "color", $value: "{colors.orange.400}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7949,7 +7948,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", isSource: true, original: { @@ -7965,7 +7964,7 @@ export default { $type: "color", $value: "{colors.chrome.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7984,7 +7983,7 @@ export default { $type: "color", $value: "{colors.orange.400}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8005,7 +8004,7 @@ export default { $type: "color", $value: "{colors.chrome.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8024,7 +8023,7 @@ export default { $type: "color", $value: "{colors.blue.500}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8043,7 +8042,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8065,7 +8064,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8091,7 +8090,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8113,7 +8112,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8133,7 +8132,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8157,7 +8156,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8177,7 +8176,7 @@ export default { $type: "color", $value: "{colors.chrome.700}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8201,7 +8200,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8229,7 +8228,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8259,7 +8258,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8287,7 +8286,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8330,7 +8329,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8357,7 +8356,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8384,7 +8383,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8411,7 +8410,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8438,7 +8437,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8465,7 +8464,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8485,7 +8484,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8503,7 +8502,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8521,7 +8520,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8539,7 +8538,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8557,7 +8556,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8575,7 +8574,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8593,7 +8592,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8611,7 +8610,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8629,7 +8628,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8647,7 +8646,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8665,7 +8664,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8685,7 +8684,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8703,7 +8702,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8721,7 +8720,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8739,7 +8738,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8757,7 +8756,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8775,7 +8774,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8793,7 +8792,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8811,7 +8810,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8829,7 +8828,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8847,7 +8846,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8865,7 +8864,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-light-high-contrast-tritanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/light-high-contrast-tritanopia-harness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-light-high-contrast-tritanopia-desktop-harness.ts rename to packages/core-design-system/src/styles-esm/light-high-contrast-tritanopia-harness.ts index e03639b1d1..3187d6e319 100644 --- a/packages/core-design-system/src/styles-esm/source-light-high-contrast-tritanopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/light-high-contrast-tritanopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:31 GMT + * Generated on Tue, 18 Mar 2025 06:44:26 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.15)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.2)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-600) l c h / 0.6)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable green text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.6)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.6)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.6)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-200) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.6)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.6)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1955,7 +1955,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1979,7 +1979,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2003,7 +2003,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2029,7 +2029,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2053,7 +2053,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2077,7 +2077,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2105,7 +2105,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2129,7 +2129,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2155,7 +2155,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2179,7 +2179,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2206,7 +2206,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable green text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2227,7 +2227,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.1)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -2247,7 +2247,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2268,7 +2268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.6)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -2288,7 +2288,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2310,7 +2310,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -2330,7 +2330,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2352,7 +2352,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -2372,7 +2372,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2399,7 +2399,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2420,7 +2420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -2440,7 +2440,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2461,7 +2461,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.6)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.6)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -2481,7 +2481,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2503,7 +2503,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -2523,7 +2523,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2545,7 +2545,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -2565,7 +2565,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2592,7 +2592,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2613,7 +2613,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2638,7 +2638,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2664,7 +2664,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2686,7 +2686,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2710,7 +2710,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2732,7 +2732,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2754,7 +2754,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2774,7 +2774,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2794,7 +2794,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -2814,7 +2814,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2838,7 +2838,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2858,7 +2858,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2881,7 +2881,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2903,7 +2903,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2926,7 +2926,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: @@ -2947,7 +2947,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2983,7 +2983,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3003,7 +3003,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.12)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.12)", $description: "Green background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -3023,7 +3023,7 @@ export default { $description: "Green background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3043,7 +3043,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -3063,7 +3063,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3083,7 +3083,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -3103,7 +3103,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3125,7 +3125,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3147,7 +3147,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3167,7 +3167,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.12)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -3187,7 +3187,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3207,7 +3207,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -3227,7 +3227,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3247,7 +3247,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -3267,7 +3267,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3289,7 +3289,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3311,7 +3311,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3333,7 +3333,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3355,7 +3355,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3375,7 +3375,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-400) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-400) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -3395,7 +3395,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3415,7 +3415,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-400) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", isSource: true, @@ -3433,7 +3433,7 @@ export default { $value: "{colors.blue.400}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3455,7 +3455,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3477,7 +3477,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3501,7 +3501,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3523,7 +3523,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3545,7 +3545,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3567,7 +3567,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3589,7 +3589,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3613,7 +3613,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3637,7 +3637,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3659,7 +3659,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3682,7 +3682,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3705,7 +3705,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3726,7 +3726,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3739,7 +3739,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Navigation container border.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", isSource: true, @@ -3748,7 +3748,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3768,7 +3768,7 @@ export default { $value: "{background.2}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3793,7 +3793,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3819,7 +3819,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3848,7 +3848,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3873,7 +3873,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3887,7 +3887,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(54.81% 69.74 52.27) 0%, lch(from var(--canary-colors-chrome-300) l c h / 0.4) 30%, lch(54.81% 69.74 52.27) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(54.81% 69.74 52.27) 0%, lch(from var(--cn-colors-chrome-300) l c h / 0.4) 30%, lch(54.81% 69.74 52.27) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -3899,7 +3899,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3925,7 +3925,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3951,7 +3951,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3979,7 +3979,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3992,7 +3992,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -4003,7 +4003,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4029,7 +4029,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4053,7 +4053,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4078,7 +4078,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -4098,7 +4098,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4124,7 +4124,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4146,7 +4146,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4168,7 +4168,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4188,7 +4188,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.15)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", isSource: true, @@ -4206,7 +4206,7 @@ export default { $value: "{colors.chrome.700}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4226,7 +4226,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.2)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", isSource: true, @@ -4244,7 +4244,7 @@ export default { $value: "{colors.chrome.700}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4268,7 +4268,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4292,7 +4292,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4318,7 +4318,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4342,7 +4342,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4367,7 +4367,7 @@ export default { $value: "{colors.chrome.50}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4388,7 +4388,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4413,7 +4413,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4434,7 +4434,7 @@ export default { $value: "{colors.chrome.800}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4457,7 +4457,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4481,7 +4481,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4505,7 +4505,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4529,7 +4529,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4554,7 +4554,7 @@ export default { $value: "{colors.pure.white}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4575,7 +4575,7 @@ export default { $value: "{colors.chrome.500}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4601,7 +4601,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4626,7 +4626,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4649,7 +4649,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4672,7 +4672,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4697,7 +4697,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4720,7 +4720,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4743,7 +4743,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4758,7 +4758,7 @@ export default { separator: { background: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -4769,7 +4769,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4795,7 +4795,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4820,7 +4820,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4843,7 +4843,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4868,7 +4868,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4891,7 +4891,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4916,7 +4916,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4939,7 +4939,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4965,7 +4965,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4987,7 +4987,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -5009,7 +5009,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -5031,7 +5031,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5053,7 +5053,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5075,7 +5075,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5097,7 +5097,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5122,7 +5122,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5145,7 +5145,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5170,7 +5170,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5193,7 +5193,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5220,7 +5220,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5243,7 +5243,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5266,7 +5266,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -5286,7 +5286,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5298,7 +5298,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -5309,7 +5309,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5334,7 +5334,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5360,7 +5360,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5371,7 +5371,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -5382,7 +5382,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5406,7 +5406,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5430,7 +5430,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5454,7 +5454,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5480,7 +5480,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5504,7 +5504,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5528,7 +5528,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5557,7 +5557,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5580,7 +5580,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5603,7 +5603,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5624,7 +5624,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5649,7 +5649,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5672,7 +5672,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5695,7 +5695,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5716,7 +5716,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5741,7 +5741,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5764,7 +5764,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5787,7 +5787,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5808,7 +5808,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5833,7 +5833,7 @@ export default { $description: "Text color for green tags. Ensures readability while maintaining the green color theme.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5856,7 +5856,7 @@ export default { $description: "Background color for green tags. Creates a distinct surface with green theme styling.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5879,7 +5879,7 @@ export default { $description: "Subtle background variation for green tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5900,7 +5900,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5925,7 +5925,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5948,7 +5948,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5971,7 +5971,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5992,7 +5992,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -6017,7 +6017,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6040,7 +6040,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6063,7 +6063,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6084,7 +6084,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6109,7 +6109,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6132,7 +6132,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6155,7 +6155,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6176,7 +6176,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6201,7 +6201,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6224,7 +6224,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6247,7 +6247,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6268,7 +6268,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6293,7 +6293,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6316,7 +6316,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6339,7 +6339,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6360,7 +6360,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6385,7 +6385,7 @@ export default { $description: "Text color for purple tags. Ensures readability while maintaining the purple color theme.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6408,7 +6408,7 @@ export default { $description: "Background color for purple tags. Creates a distinct surface with purple theme styling.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6431,7 +6431,7 @@ export default { $description: "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6452,7 +6452,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6477,7 +6477,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6500,7 +6500,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6523,7 +6523,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6544,7 +6544,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6569,7 +6569,7 @@ export default { $description: "Text color for violet tags. Ensures readability while maintaining the violet color theme.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6592,7 +6592,7 @@ export default { $description: "Background color for violet tags. Creates a distinct surface with violet theme styling.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6615,7 +6615,7 @@ export default { $description: "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6636,7 +6636,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6661,7 +6661,7 @@ export default { $description: "Text color for yellow tags. Signals caution states with readable amber text.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6684,7 +6684,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6707,7 +6707,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6728,7 +6728,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6753,7 +6753,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6776,7 +6776,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6799,7 +6799,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6820,7 +6820,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6847,7 +6847,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6870,7 +6870,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6893,7 +6893,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6905,7 +6905,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.7)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.7)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -6916,7 +6916,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6941,7 +6941,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6964,7 +6964,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6987,7 +6987,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -7010,7 +7010,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -7036,7 +7036,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7058,7 +7058,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7072,7 +7072,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-chrome-950) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-chrome-950) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7100,7 +7100,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7110,8 +7110,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7139,7 +7138,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7150,7 +7149,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-chrome-950) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7188,7 +7187,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7199,7 +7198,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-chrome-950) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7237,7 +7236,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7248,7 +7247,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-chrome-950) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7286,7 +7285,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7297,7 +7296,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-chrome-950) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-chrome-950) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7335,7 +7334,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7346,7 +7345,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7374,7 +7373,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7385,7 +7384,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-chrome-950) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7413,7 +7412,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7434,7 +7433,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7454,7 +7453,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7473,7 +7472,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7493,7 +7492,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7512,7 +7511,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7532,7 +7531,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7551,7 +7550,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7571,7 +7570,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7590,7 +7589,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7610,7 +7609,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7629,7 +7628,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7649,7 +7648,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7668,7 +7667,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7688,7 +7687,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7707,7 +7706,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-950) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-950) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", @@ -7727,7 +7726,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7777,7 +7776,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7797,7 +7796,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7815,7 +7814,7 @@ export default { $type: "color", $value: "{colors.pink.400}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7833,7 +7832,7 @@ export default { $type: "color", $value: "{colors.cyan.400}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7851,7 +7850,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7871,7 +7870,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7889,7 +7888,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7907,7 +7906,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7928,7 +7927,7 @@ export default { $type: "color", $value: "{colors.orange.400}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7949,7 +7948,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.4)", filePath: "design-tokens/mode/light/high-contrast-tritanopia.json", isSource: true, original: { @@ -7965,7 +7964,7 @@ export default { $type: "color", $value: "{colors.chrome.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7984,7 +7983,7 @@ export default { $type: "color", $value: "{colors.orange.400}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8005,7 +8004,7 @@ export default { $type: "color", $value: "{colors.chrome.300}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8024,7 +8023,7 @@ export default { $type: "color", $value: "{colors.blue.500}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8043,7 +8042,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8065,7 +8064,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8091,7 +8090,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8113,7 +8112,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8133,7 +8132,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8157,7 +8156,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8177,7 +8176,7 @@ export default { $type: "color", $value: "{colors.chrome.700}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8201,7 +8200,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8229,7 +8228,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8259,7 +8258,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8287,7 +8286,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8330,7 +8329,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8357,7 +8356,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8384,7 +8383,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8411,7 +8410,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8438,7 +8437,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8465,7 +8464,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8485,7 +8484,7 @@ export default { $type: "color", $value: "{colors.cyan.50}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8503,7 +8502,7 @@ export default { $type: "color", $value: "{colors.cyan.100}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8521,7 +8520,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8539,7 +8538,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8557,7 +8556,7 @@ export default { $type: "color", $value: "{colors.cyan.400}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8575,7 +8574,7 @@ export default { $type: "color", $value: "{colors.cyan.500}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8593,7 +8592,7 @@ export default { $type: "color", $value: "{colors.cyan.600}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8611,7 +8610,7 @@ export default { $type: "color", $value: "{colors.cyan.700}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8629,7 +8628,7 @@ export default { $type: "color", $value: "{colors.cyan.800}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8647,7 +8646,7 @@ export default { $type: "color", $value: "{colors.cyan.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8665,7 +8664,7 @@ export default { $type: "color", $value: "{colors.cyan.950}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8685,7 +8684,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8703,7 +8702,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8721,7 +8720,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8739,7 +8738,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8757,7 +8756,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8775,7 +8774,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8793,7 +8792,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8811,7 +8810,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8829,7 +8828,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8847,7 +8846,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8865,7 +8864,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-light-protanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/light-protanopia-gitness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-light-protanopia-desktop-gitness.ts rename to packages/core-design-system/src/styles-esm/light-protanopia-gitness.ts index 2d5754cb33..303a0c0d60 100644 --- a/packages/core-design-system/src/styles-esm/source-light-protanopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/light-protanopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:19 GMT + * Generated on Tue, 18 Mar 2025 06:44:17 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states. Using blue instead of green for protanopia visibility.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing. Using blue instead of green for protanopia visibility.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.15)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.2)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-600) l c h / 0.2)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable blue text. Adjusted for protanopia visibility.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-400) l c h / 0.2)", $description: "Border color for success badges. Provides subtle definition for success state indicators. Adjusted for protanopia visibility.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators. Adjusted for protanopia visibility.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator. Adjusted for protanopia visibility.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator. Adjusted for protanopia visibility.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.2)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-yellow-400) l c h / 0.2)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-yellow-200) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.2)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-purple-400) l c h / 0.2)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-purple-300) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1955,7 +1955,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1979,7 +1979,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2003,7 +2003,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2029,7 +2029,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2053,7 +2053,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2077,7 +2077,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2105,7 +2105,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2129,7 +2129,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2155,7 +2155,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2179,7 +2179,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2206,7 +2206,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable blue text. Adjusted for protanopia visibility.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2227,7 +2227,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.12)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling. Adjusted for protanopia visibility.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -2247,7 +2247,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling. Adjusted for protanopia visibility.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2268,7 +2268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-400) l c h / 0.25)", + $value: "lch(from var(--cn-colors-blue-400) l c h / 0.25)", $description: "Border color for success buttons. Provides definition for positive action buttons. Adjusted for protanopia visibility.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -2288,7 +2288,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons. Adjusted for protanopia visibility.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2310,7 +2310,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction. Adjusted for protanopia visibility.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -2330,7 +2330,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction. Adjusted for protanopia visibility.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2352,7 +2352,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.25)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. Adjusted for protanopia visibility.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -2372,7 +2372,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. Adjusted for protanopia visibility.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2399,7 +2399,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2420,7 +2420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.12)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -2440,7 +2440,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2461,7 +2461,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.2)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -2481,7 +2481,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2503,7 +2503,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -2523,7 +2523,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2545,7 +2545,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -2565,7 +2565,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2592,7 +2592,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2613,7 +2613,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2638,7 +2638,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2664,7 +2664,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2686,7 +2686,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2710,7 +2710,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2732,7 +2732,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2754,7 +2754,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2774,7 +2774,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2794,7 +2794,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -2814,7 +2814,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2838,7 +2838,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2858,7 +2858,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2881,7 +2881,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2903,7 +2903,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2926,7 +2926,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -2946,7 +2946,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2982,7 +2982,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3002,7 +3002,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Blue background highlighting newly added code lines while maintaining readability. Using blue instead of green for protanopia visibility.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -3022,7 +3022,7 @@ export default { $description: "Blue background highlighting newly added code lines while maintaining readability. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3042,7 +3042,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content. Using blue instead of green for protanopia visibility.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -3062,7 +3062,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3082,7 +3082,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines. Using blue instead of green for protanopia visibility.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -3102,7 +3102,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3124,7 +3124,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3146,7 +3146,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3166,7 +3166,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.12)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -3186,7 +3186,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3206,7 +3206,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -3226,7 +3226,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3246,7 +3246,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -3266,7 +3266,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3288,7 +3288,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3310,7 +3310,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3332,7 +3332,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3354,7 +3354,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3374,7 +3374,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -3394,7 +3394,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3414,7 +3414,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/light/default-protanopia.json", isSource: true, @@ -3432,7 +3432,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3454,7 +3454,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3476,7 +3476,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3500,7 +3500,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3522,7 +3522,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3544,7 +3544,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3566,7 +3566,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3588,7 +3588,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3612,7 +3612,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3636,7 +3636,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3658,7 +3658,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3681,7 +3681,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3704,7 +3704,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3725,7 +3725,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3738,7 +3738,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Navigation container border.", filePath: "design-tokens/mode/light/default-protanopia.json", isSource: true, @@ -3747,7 +3747,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3767,7 +3767,7 @@ export default { $value: "{background.2}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3792,7 +3792,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3818,7 +3818,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3847,7 +3847,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3872,7 +3872,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3886,7 +3886,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.4) 30%, lch(63.38% 78.04 52.26) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--cn-colors-chrome-200) l c h / 0.4) 30%, lch(63.38% 78.04 52.26) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -3898,7 +3898,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3924,7 +3924,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3950,7 +3950,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3978,7 +3978,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3991,7 +3991,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -4002,7 +4002,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4028,7 +4028,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4052,7 +4052,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4077,7 +4077,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -4097,7 +4097,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4123,7 +4123,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4145,7 +4145,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4167,7 +4167,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4187,7 +4187,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.15)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/light/default-protanopia.json", isSource: true, @@ -4205,7 +4205,7 @@ export default { $value: "{colors.chrome.700}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4225,7 +4225,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.2)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/light/default-protanopia.json", isSource: true, @@ -4243,7 +4243,7 @@ export default { $value: "{colors.chrome.700}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4267,7 +4267,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4291,7 +4291,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4317,7 +4317,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4341,7 +4341,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4366,7 +4366,7 @@ export default { $value: "{colors.chrome.50}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4387,7 +4387,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4412,7 +4412,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4433,7 +4433,7 @@ export default { $value: "{colors.chrome.800}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4456,7 +4456,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4480,7 +4480,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4504,7 +4504,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4528,7 +4528,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4553,7 +4553,7 @@ export default { $value: "{colors.pure.white}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4574,7 +4574,7 @@ export default { $value: "{colors.chrome.500}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4600,7 +4600,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4625,7 +4625,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4648,7 +4648,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4671,7 +4671,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4696,7 +4696,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4719,7 +4719,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4742,7 +4742,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4768,7 +4768,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4794,7 +4794,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4819,7 +4819,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4842,7 +4842,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4867,7 +4867,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4890,7 +4890,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4915,7 +4915,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4938,7 +4938,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4964,7 +4964,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4986,7 +4986,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -5008,7 +5008,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -5030,7 +5030,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5052,7 +5052,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5074,7 +5074,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5096,7 +5096,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5121,7 +5121,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5144,7 +5144,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5169,7 +5169,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5192,7 +5192,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5219,7 +5219,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5242,7 +5242,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5265,7 +5265,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -5285,7 +5285,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5297,7 +5297,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -5308,7 +5308,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5333,7 +5333,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5359,7 +5359,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5370,7 +5370,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -5381,7 +5381,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5405,7 +5405,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5429,7 +5429,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5453,7 +5453,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5479,7 +5479,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5503,7 +5503,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5527,7 +5527,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5556,7 +5556,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5579,7 +5579,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5602,7 +5602,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5623,7 +5623,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5648,7 +5648,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5671,7 +5671,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5694,7 +5694,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5715,7 +5715,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5740,7 +5740,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5763,7 +5763,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5786,7 +5786,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5807,7 +5807,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5832,7 +5832,7 @@ export default { $description: "Text color for green tags. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5855,7 +5855,7 @@ export default { $description: "Background color for green tags. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5878,7 +5878,7 @@ export default { $description: "Subtle background variation for green tags. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5901,7 +5901,7 @@ export default { $description: "Border color for green tags. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5926,7 +5926,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5949,7 +5949,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5972,7 +5972,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5993,7 +5993,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -6018,7 +6018,7 @@ export default { $description: "Text color for lime tags. Using blue instead of lime/green for protanopia visibility.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6041,7 +6041,7 @@ export default { $description: "Background color for lime tags. Using blue instead of lime/green for protanopia visibility.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6064,7 +6064,7 @@ export default { $description: "Subtle background variation for lime tags. Using blue instead of lime/green for protanopia visibility.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6087,7 +6087,7 @@ export default { $description: "Border color for lime tags. Using blue instead of lime/green for protanopia visibility.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6112,7 +6112,7 @@ export default { $description: "Text color for mint tags. Using blue instead of mint/green for protanopia visibility.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6135,7 +6135,7 @@ export default { $description: "Background color for mint tags. Using blue instead of mint/green for protanopia visibility.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6158,7 +6158,7 @@ export default { $description: "Subtle background variation for mint tags. Using blue instead of mint/green for protanopia visibility.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6181,7 +6181,7 @@ export default { $description: "Border color for mint tags. Using blue instead of mint/green for protanopia visibility.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6206,7 +6206,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6229,7 +6229,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6252,7 +6252,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6273,7 +6273,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6298,7 +6298,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6321,7 +6321,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6344,7 +6344,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6365,7 +6365,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6390,7 +6390,7 @@ export default { $description: "Text color for purple tags. Ensures readability while maintaining the purple color theme.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6413,7 +6413,7 @@ export default { $description: "Background color for purple tags. Creates a distinct surface with purple theme styling.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6436,7 +6436,7 @@ export default { $description: "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6457,7 +6457,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6482,7 +6482,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6505,7 +6505,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6528,7 +6528,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6549,7 +6549,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6574,7 +6574,7 @@ export default { $description: "Text color for violet tags. Ensures readability while maintaining the violet color theme.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6597,7 +6597,7 @@ export default { $description: "Background color for violet tags. Creates a distinct surface with violet theme styling.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6620,7 +6620,7 @@ export default { $description: "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6641,7 +6641,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6666,7 +6666,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6689,7 +6689,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6712,7 +6712,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6733,7 +6733,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6758,7 +6758,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6781,7 +6781,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6804,7 +6804,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6825,7 +6825,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6852,7 +6852,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6875,7 +6875,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6898,7 +6898,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6910,7 +6910,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -6921,7 +6921,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6946,7 +6946,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6969,7 +6969,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6992,7 +6992,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -7015,7 +7015,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -7041,7 +7041,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7063,7 +7063,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7077,7 +7077,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7105,7 +7105,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7115,8 +7115,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7144,7 +7143,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7155,7 +7154,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7193,7 +7192,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7204,7 +7203,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7242,7 +7241,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7253,7 +7252,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-chrome-300) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7291,7 +7290,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7302,7 +7301,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-chrome-300) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7340,7 +7339,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7351,7 +7350,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7379,7 +7378,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7390,7 +7389,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-chrome-900) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7418,7 +7417,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7439,7 +7438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7459,7 +7458,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7478,7 +7477,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7498,7 +7497,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7517,7 +7516,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7537,7 +7536,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7556,7 +7555,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7576,7 +7575,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7595,7 +7594,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7615,7 +7614,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7634,7 +7633,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7654,7 +7653,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7673,7 +7672,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7693,7 +7692,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7712,7 +7711,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-900) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7732,7 +7731,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7783,7 +7782,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7803,7 +7802,7 @@ export default { $type: "color", $value: "{colors.yellow.200}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7821,7 +7820,7 @@ export default { $type: "color", $value: "{colors.pink.300}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7839,7 +7838,7 @@ export default { $type: "color", $value: "{colors.purple.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7857,7 +7856,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7877,7 +7876,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7895,7 +7894,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7913,7 +7912,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7934,7 +7933,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7955,7 +7954,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.4)", filePath: "design-tokens/mode/light/default-protanopia.json", isSource: true, original: { @@ -7971,7 +7970,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7990,7 +7989,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8011,7 +8010,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8030,7 +8029,7 @@ export default { $type: "color", $value: "{colors.blue.400}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8049,7 +8048,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8071,7 +8070,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8097,7 +8096,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8119,7 +8118,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8139,7 +8138,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8163,7 +8162,7 @@ export default { $type: "color", $value: "{colors.chrome.500}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8183,7 +8182,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8206,7 +8205,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8233,7 +8232,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8262,7 +8261,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8289,7 +8288,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8332,7 +8331,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8359,7 +8358,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8386,7 +8385,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8413,7 +8412,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8440,7 +8439,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8467,7 +8466,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8487,7 +8486,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8505,7 +8504,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8523,7 +8522,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8541,7 +8540,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8559,7 +8558,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8577,7 +8576,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8595,7 +8594,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8613,7 +8612,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8631,7 +8630,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8649,7 +8648,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8667,7 +8666,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8687,7 +8686,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8705,7 +8704,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8723,7 +8722,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8741,7 +8740,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8759,7 +8758,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8777,7 +8776,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8795,7 +8794,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8813,7 +8812,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8831,7 +8830,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8849,7 +8848,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8867,7 +8866,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-light-protanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/light-protanopia-harness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-light-protanopia-desktop-harness.ts rename to packages/core-design-system/src/styles-esm/light-protanopia-harness.ts index 5cbadd65d4..9e5b0e8a12 100644 --- a/packages/core-design-system/src/styles-esm/source-light-protanopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/light-protanopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:17 GMT + * Generated on Tue, 18 Mar 2025 06:44:16 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states. Using blue instead of green for protanopia visibility.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing. Using blue instead of green for protanopia visibility.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.15)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.2)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-600) l c h / 0.2)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable blue text. Adjusted for protanopia visibility.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-400) l c h / 0.2)", $description: "Border color for success badges. Provides subtle definition for success state indicators. Adjusted for protanopia visibility.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators. Adjusted for protanopia visibility.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator. Adjusted for protanopia visibility.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator. Adjusted for protanopia visibility.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.2)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable amber text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-yellow-400) l c h / 0.2)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-yellow-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-yellow-200) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.2)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-purple-400) l c h / 0.2)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-purple-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-purple-300) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1955,7 +1955,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1979,7 +1979,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2003,7 +2003,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2029,7 +2029,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2053,7 +2053,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2077,7 +2077,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2105,7 +2105,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2129,7 +2129,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2155,7 +2155,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2179,7 +2179,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2206,7 +2206,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable blue text. Adjusted for protanopia visibility.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2227,7 +2227,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.12)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling. Adjusted for protanopia visibility.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -2247,7 +2247,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling. Adjusted for protanopia visibility.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2268,7 +2268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-400) l c h / 0.25)", + $value: "lch(from var(--cn-colors-blue-400) l c h / 0.25)", $description: "Border color for success buttons. Provides definition for positive action buttons. Adjusted for protanopia visibility.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -2288,7 +2288,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons. Adjusted for protanopia visibility.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2310,7 +2310,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction. Adjusted for protanopia visibility.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -2330,7 +2330,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction. Adjusted for protanopia visibility.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2352,7 +2352,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-300) l c h / 0.25)", + $value: "lch(from var(--cn-colors-blue-300) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. Adjusted for protanopia visibility.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -2372,7 +2372,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. Adjusted for protanopia visibility.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2399,7 +2399,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2420,7 +2420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.12)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -2440,7 +2440,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2461,7 +2461,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.2)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -2481,7 +2481,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2503,7 +2503,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -2523,7 +2523,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2545,7 +2545,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -2565,7 +2565,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2592,7 +2592,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2613,7 +2613,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2638,7 +2638,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2664,7 +2664,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2686,7 +2686,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2710,7 +2710,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2732,7 +2732,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2754,7 +2754,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2774,7 +2774,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2794,7 +2794,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -2814,7 +2814,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2838,7 +2838,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2858,7 +2858,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2881,7 +2881,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2903,7 +2903,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2926,7 +2926,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -2946,7 +2946,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2982,7 +2982,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3002,7 +3002,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Blue background highlighting newly added code lines while maintaining readability. Using blue instead of green for protanopia visibility.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -3022,7 +3022,7 @@ export default { $description: "Blue background highlighting newly added code lines while maintaining readability. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3042,7 +3042,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content. Using blue instead of green for protanopia visibility.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -3062,7 +3062,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3082,7 +3082,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines. Using blue instead of green for protanopia visibility.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -3102,7 +3102,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3124,7 +3124,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3146,7 +3146,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3166,7 +3166,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.12)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -3186,7 +3186,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3206,7 +3206,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -3226,7 +3226,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3246,7 +3246,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -3266,7 +3266,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3288,7 +3288,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3310,7 +3310,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3332,7 +3332,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3354,7 +3354,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3374,7 +3374,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -3394,7 +3394,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3414,7 +3414,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/light/default-protanopia.json", isSource: true, @@ -3432,7 +3432,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3454,7 +3454,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3476,7 +3476,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3500,7 +3500,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3522,7 +3522,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3544,7 +3544,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3566,7 +3566,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3588,7 +3588,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3612,7 +3612,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3636,7 +3636,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3658,7 +3658,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3681,7 +3681,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3704,7 +3704,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3725,7 +3725,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3738,7 +3738,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Navigation container border.", filePath: "design-tokens/mode/light/default-protanopia.json", isSource: true, @@ -3747,7 +3747,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3767,7 +3767,7 @@ export default { $value: "{background.2}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3792,7 +3792,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3818,7 +3818,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3847,7 +3847,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3872,7 +3872,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3886,7 +3886,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.4) 30%, lch(63.38% 78.04 52.26) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--cn-colors-chrome-200) l c h / 0.4) 30%, lch(63.38% 78.04 52.26) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -3898,7 +3898,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3924,7 +3924,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3950,7 +3950,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3978,7 +3978,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3991,7 +3991,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -4002,7 +4002,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4028,7 +4028,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4052,7 +4052,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4077,7 +4077,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -4097,7 +4097,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4123,7 +4123,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4145,7 +4145,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4167,7 +4167,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4187,7 +4187,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.15)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/light/default-protanopia.json", isSource: true, @@ -4205,7 +4205,7 @@ export default { $value: "{colors.chrome.700}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4225,7 +4225,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.2)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/light/default-protanopia.json", isSource: true, @@ -4243,7 +4243,7 @@ export default { $value: "{colors.chrome.700}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4267,7 +4267,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4291,7 +4291,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4317,7 +4317,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4341,7 +4341,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4366,7 +4366,7 @@ export default { $value: "{colors.chrome.50}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4387,7 +4387,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4412,7 +4412,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4433,7 +4433,7 @@ export default { $value: "{colors.chrome.800}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4456,7 +4456,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4480,7 +4480,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4504,7 +4504,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4528,7 +4528,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4553,7 +4553,7 @@ export default { $value: "{colors.pure.white}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4574,7 +4574,7 @@ export default { $value: "{colors.chrome.500}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4600,7 +4600,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4625,7 +4625,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4648,7 +4648,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4671,7 +4671,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4696,7 +4696,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4719,7 +4719,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4742,7 +4742,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4768,7 +4768,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4794,7 +4794,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4819,7 +4819,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4842,7 +4842,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4867,7 +4867,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4890,7 +4890,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4915,7 +4915,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4938,7 +4938,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4964,7 +4964,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4986,7 +4986,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -5008,7 +5008,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -5030,7 +5030,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5052,7 +5052,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5074,7 +5074,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5096,7 +5096,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5121,7 +5121,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5144,7 +5144,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5169,7 +5169,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5192,7 +5192,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5219,7 +5219,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5242,7 +5242,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5265,7 +5265,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -5285,7 +5285,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5297,7 +5297,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -5308,7 +5308,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5333,7 +5333,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5359,7 +5359,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5370,7 +5370,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -5381,7 +5381,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5405,7 +5405,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5429,7 +5429,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5453,7 +5453,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5479,7 +5479,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5503,7 +5503,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5527,7 +5527,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5556,7 +5556,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5579,7 +5579,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5602,7 +5602,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5623,7 +5623,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5648,7 +5648,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5671,7 +5671,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5694,7 +5694,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5715,7 +5715,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5740,7 +5740,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5763,7 +5763,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5786,7 +5786,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5807,7 +5807,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5832,7 +5832,7 @@ export default { $description: "Text color for green tags. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5855,7 +5855,7 @@ export default { $description: "Background color for green tags. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5878,7 +5878,7 @@ export default { $description: "Subtle background variation for green tags. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5901,7 +5901,7 @@ export default { $description: "Border color for green tags. Using blue instead of green for protanopia visibility.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5926,7 +5926,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5949,7 +5949,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5972,7 +5972,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5993,7 +5993,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -6018,7 +6018,7 @@ export default { $description: "Text color for lime tags. Using blue instead of lime/green for protanopia visibility.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6041,7 +6041,7 @@ export default { $description: "Background color for lime tags. Using blue instead of lime/green for protanopia visibility.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6064,7 +6064,7 @@ export default { $description: "Subtle background variation for lime tags. Using blue instead of lime/green for protanopia visibility.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6087,7 +6087,7 @@ export default { $description: "Border color for lime tags. Using blue instead of lime/green for protanopia visibility.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6112,7 +6112,7 @@ export default { $description: "Text color for mint tags. Using blue instead of mint/green for protanopia visibility.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6135,7 +6135,7 @@ export default { $description: "Background color for mint tags. Using blue instead of mint/green for protanopia visibility.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6158,7 +6158,7 @@ export default { $description: "Subtle background variation for mint tags. Using blue instead of mint/green for protanopia visibility.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6181,7 +6181,7 @@ export default { $description: "Border color for mint tags. Using blue instead of mint/green for protanopia visibility.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6206,7 +6206,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6229,7 +6229,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6252,7 +6252,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6273,7 +6273,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6298,7 +6298,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6321,7 +6321,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6344,7 +6344,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6365,7 +6365,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6390,7 +6390,7 @@ export default { $description: "Text color for purple tags. Ensures readability while maintaining the purple color theme.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6413,7 +6413,7 @@ export default { $description: "Background color for purple tags. Creates a distinct surface with purple theme styling.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6436,7 +6436,7 @@ export default { $description: "Subtle background variation for purple tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6457,7 +6457,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6482,7 +6482,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6505,7 +6505,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6528,7 +6528,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6549,7 +6549,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6574,7 +6574,7 @@ export default { $description: "Text color for violet tags. Ensures readability while maintaining the violet color theme.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6597,7 +6597,7 @@ export default { $description: "Background color for violet tags. Creates a distinct surface with violet theme styling.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6620,7 +6620,7 @@ export default { $description: "Subtle background variation for violet tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6641,7 +6641,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6666,7 +6666,7 @@ export default { $description: "Text color for yellow tags. Ensures readability while maintaining the yellow color theme.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6689,7 +6689,7 @@ export default { $description: "Background color for yellow tags. Creates a distinct surface with yellow theme styling.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6712,7 +6712,7 @@ export default { $description: "Subtle background variation for yellow tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6733,7 +6733,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6758,7 +6758,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6781,7 +6781,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6804,7 +6804,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6825,7 +6825,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6852,7 +6852,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6875,7 +6875,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6898,7 +6898,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6910,7 +6910,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -6921,7 +6921,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6946,7 +6946,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6969,7 +6969,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6992,7 +6992,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -7015,7 +7015,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -7041,7 +7041,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7063,7 +7063,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7077,7 +7077,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7105,7 +7105,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7115,8 +7115,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7144,7 +7143,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7155,7 +7154,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7193,7 +7192,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7204,7 +7203,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7242,7 +7241,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7253,7 +7252,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-chrome-300) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7291,7 +7290,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7302,7 +7301,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-chrome-300) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7340,7 +7339,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7351,7 +7350,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7379,7 +7378,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7390,7 +7389,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-chrome-900) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7418,7 +7417,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7439,7 +7438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7459,7 +7458,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7478,7 +7477,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7498,7 +7497,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -7517,7 +7516,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7537,7 +7536,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -7556,7 +7555,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7576,7 +7575,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -7595,7 +7594,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7615,7 +7614,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -7634,7 +7633,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7654,7 +7653,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -7673,7 +7672,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7693,7 +7692,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -7712,7 +7711,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-900) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/light/default-protanopia.json", @@ -7732,7 +7731,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -7783,7 +7782,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -7803,7 +7802,7 @@ export default { $type: "color", $value: "{colors.yellow.200}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7821,7 +7820,7 @@ export default { $type: "color", $value: "{colors.pink.300}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7839,7 +7838,7 @@ export default { $type: "color", $value: "{colors.purple.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7857,7 +7856,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7877,7 +7876,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7895,7 +7894,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7913,7 +7912,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7934,7 +7933,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7955,7 +7954,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.4)", filePath: "design-tokens/mode/light/default-protanopia.json", isSource: true, original: { @@ -7971,7 +7970,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7990,7 +7989,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8011,7 +8010,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -8030,7 +8029,7 @@ export default { $type: "color", $value: "{colors.blue.400}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -8049,7 +8048,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -8071,7 +8070,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8097,7 +8096,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8119,7 +8118,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8139,7 +8138,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8163,7 +8162,7 @@ export default { $type: "color", $value: "{colors.chrome.500}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8183,7 +8182,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8206,7 +8205,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8233,7 +8232,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8262,7 +8261,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -8289,7 +8288,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -8332,7 +8331,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8359,7 +8358,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8386,7 +8385,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8413,7 +8412,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8440,7 +8439,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8467,7 +8466,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8487,7 +8486,7 @@ export default { $type: "color", $value: "{colors.cyan.50}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8505,7 +8504,7 @@ export default { $type: "color", $value: "{colors.cyan.100}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8523,7 +8522,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8541,7 +8540,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8559,7 +8558,7 @@ export default { $type: "color", $value: "{colors.cyan.400}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8577,7 +8576,7 @@ export default { $type: "color", $value: "{colors.cyan.500}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8595,7 +8594,7 @@ export default { $type: "color", $value: "{colors.cyan.600}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8613,7 +8612,7 @@ export default { $type: "color", $value: "{colors.cyan.700}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8631,7 +8630,7 @@ export default { $type: "color", $value: "{colors.cyan.800}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8649,7 +8648,7 @@ export default { $type: "color", $value: "{colors.cyan.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8667,7 +8666,7 @@ export default { $type: "color", $value: "{colors.cyan.950}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8687,7 +8686,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8705,7 +8704,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8723,7 +8722,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8741,7 +8740,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8759,7 +8758,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8777,7 +8776,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8795,7 +8794,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8813,7 +8812,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8831,7 +8830,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8849,7 +8848,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8867,7 +8866,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-light-tritanopia-desktop-gitness.ts b/packages/core-design-system/src/styles-esm/light-tritanopia-gitness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-light-tritanopia-desktop-gitness.ts rename to packages/core-design-system/src/styles-esm/light-tritanopia-gitness.ts index f20a933fe4..b76cd3cd1f 100644 --- a/packages/core-design-system/src/styles-esm/source-light-tritanopia-desktop-gitness.ts +++ b/packages/core-design-system/src/styles-esm/light-tritanopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:29 GMT + * Generated on Tue, 18 Mar 2025 06:44:24 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.15)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.2)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-600) l c h / 0.2)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable cyan text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.2)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.2)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable orange text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.2)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-200) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.2)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.2)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1955,7 +1955,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1979,7 +1979,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2003,7 +2003,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2029,7 +2029,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2053,7 +2053,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2077,7 +2077,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2105,7 +2105,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2129,7 +2129,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2155,7 +2155,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2179,7 +2179,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2206,7 +2206,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable cyan text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2227,7 +2227,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.12)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.12)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -2247,7 +2247,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2268,7 +2268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.25)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -2288,7 +2288,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2310,7 +2310,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.15)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -2330,7 +2330,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2352,7 +2352,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -2372,7 +2372,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2399,7 +2399,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2420,7 +2420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.12)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -2440,7 +2440,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2461,7 +2461,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.2)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -2481,7 +2481,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2503,7 +2503,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -2523,7 +2523,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2545,7 +2545,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -2565,7 +2565,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2592,7 +2592,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2613,7 +2613,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2638,7 +2638,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2664,7 +2664,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2686,7 +2686,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2710,7 +2710,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2732,7 +2732,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2754,7 +2754,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2774,7 +2774,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2794,7 +2794,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -2814,7 +2814,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2838,7 +2838,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2858,7 +2858,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2881,7 +2881,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2903,7 +2903,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2926,7 +2926,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -2946,7 +2946,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2982,7 +2982,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3002,7 +3002,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.12)", $description: "Cyan background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -3022,7 +3022,7 @@ export default { $description: "Cyan background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3042,7 +3042,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -3062,7 +3062,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3082,7 +3082,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -3102,7 +3102,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3124,7 +3124,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3146,7 +3146,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3166,7 +3166,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.12)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -3186,7 +3186,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3206,7 +3206,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -3226,7 +3226,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3246,7 +3246,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -3266,7 +3266,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3288,7 +3288,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3310,7 +3310,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3332,7 +3332,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3354,7 +3354,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3374,7 +3374,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -3394,7 +3394,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3414,7 +3414,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/light/default-tritanopia.json", isSource: true, @@ -3432,7 +3432,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3454,7 +3454,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3476,7 +3476,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3500,7 +3500,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3522,7 +3522,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3544,7 +3544,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3566,7 +3566,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3588,7 +3588,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3612,7 +3612,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3636,7 +3636,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3658,7 +3658,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3681,7 +3681,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3704,7 +3704,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3725,7 +3725,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3738,7 +3738,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Navigation container border.", filePath: "design-tokens/mode/light/default-tritanopia.json", isSource: true, @@ -3747,7 +3747,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3767,7 +3767,7 @@ export default { $value: "{background.2}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3792,7 +3792,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3818,7 +3818,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3847,7 +3847,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3872,7 +3872,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3886,7 +3886,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.4) 30%, lch(63.38% 78.04 52.26) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--cn-colors-chrome-200) l c h / 0.4) 30%, lch(63.38% 78.04 52.26) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -3898,7 +3898,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3924,7 +3924,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3950,7 +3950,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3978,7 +3978,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3991,7 +3991,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -4002,7 +4002,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4028,7 +4028,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4052,7 +4052,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4077,7 +4077,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -4097,7 +4097,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4123,7 +4123,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4145,7 +4145,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4167,7 +4167,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4187,7 +4187,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.15)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/light/default-tritanopia.json", isSource: true, @@ -4205,7 +4205,7 @@ export default { $value: "{colors.chrome.700}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4225,7 +4225,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.2)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/light/default-tritanopia.json", isSource: true, @@ -4243,7 +4243,7 @@ export default { $value: "{colors.chrome.700}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4267,7 +4267,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4291,7 +4291,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4317,7 +4317,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4341,7 +4341,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4366,7 +4366,7 @@ export default { $value: "{colors.chrome.50}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4387,7 +4387,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4412,7 +4412,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4433,7 +4433,7 @@ export default { $value: "{colors.chrome.800}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4456,7 +4456,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4480,7 +4480,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4504,7 +4504,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4528,7 +4528,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4553,7 +4553,7 @@ export default { $value: "{colors.pure.white}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4574,7 +4574,7 @@ export default { $value: "{colors.chrome.500}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4600,7 +4600,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4625,7 +4625,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4648,7 +4648,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4671,7 +4671,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4696,7 +4696,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4719,7 +4719,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4742,7 +4742,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4768,7 +4768,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4794,7 +4794,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4819,7 +4819,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4842,7 +4842,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4867,7 +4867,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4890,7 +4890,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4915,7 +4915,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4938,7 +4938,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4964,7 +4964,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4986,7 +4986,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -5008,7 +5008,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -5030,7 +5030,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5052,7 +5052,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5074,7 +5074,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5096,7 +5096,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5121,7 +5121,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5144,7 +5144,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5169,7 +5169,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5192,7 +5192,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5219,7 +5219,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5242,7 +5242,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5265,7 +5265,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -5285,7 +5285,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5297,7 +5297,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -5308,7 +5308,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5333,7 +5333,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5359,7 +5359,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5370,7 +5370,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -5381,7 +5381,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5405,7 +5405,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5429,7 +5429,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5453,7 +5453,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5479,7 +5479,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5503,7 +5503,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5527,7 +5527,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5556,7 +5556,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5579,7 +5579,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5602,7 +5602,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5623,7 +5623,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5648,7 +5648,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5671,7 +5671,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5694,7 +5694,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5715,7 +5715,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5740,7 +5740,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5763,7 +5763,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5786,7 +5786,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5807,7 +5807,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5832,7 +5832,7 @@ export default { $description: "Text color for green tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5855,7 +5855,7 @@ export default { $description: "Background color for green tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5878,7 +5878,7 @@ export default { $description: "Subtle background variation for green tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5899,7 +5899,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags, replaced with cyan.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5924,7 +5924,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5947,7 +5947,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5970,7 +5970,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5991,7 +5991,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -6016,7 +6016,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6039,7 +6039,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6062,7 +6062,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6083,7 +6083,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6108,7 +6108,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6131,7 +6131,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6154,7 +6154,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6175,7 +6175,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6200,7 +6200,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6223,7 +6223,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6246,7 +6246,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6267,7 +6267,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6292,7 +6292,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6315,7 +6315,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6338,7 +6338,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6359,7 +6359,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6384,7 +6384,7 @@ export default { $description: "Text color for purple tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6407,7 +6407,7 @@ export default { $description: "Background color for purple tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6430,7 +6430,7 @@ export default { $description: "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6451,7 +6451,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags, replaced with cyan.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6476,7 +6476,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6499,7 +6499,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6522,7 +6522,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6543,7 +6543,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6568,7 +6568,7 @@ export default { $description: "Text color for violet tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6591,7 +6591,7 @@ export default { $description: "Background color for violet tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6614,7 +6614,7 @@ export default { $description: "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6635,7 +6635,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags, replaced with cyan.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6660,7 +6660,7 @@ export default { $description: "Text color for yellow tags, replaced with orange for tritanopia visibility.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6683,7 +6683,7 @@ export default { $description: "Background color for yellow tags, replaced with orange for tritanopia visibility.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6706,7 +6706,7 @@ export default { $description: "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6727,7 +6727,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags, replaced with orange.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6752,7 +6752,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6775,7 +6775,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6798,7 +6798,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6819,7 +6819,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6846,7 +6846,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6869,7 +6869,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6892,7 +6892,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6904,7 +6904,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -6915,7 +6915,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6940,7 +6940,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6963,7 +6963,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6986,7 +6986,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -7009,7 +7009,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -7035,7 +7035,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7057,7 +7057,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7079,7 +7079,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7097,7 +7097,7 @@ export default { $type: "color", $value: "{colors.pink.300}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7115,7 +7115,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7133,7 +7133,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7153,7 +7153,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7171,7 +7171,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7189,7 +7189,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7210,7 +7210,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7231,7 +7231,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.4)", filePath: "design-tokens/mode/light/default-tritanopia.json", isSource: true, original: { @@ -7247,7 +7247,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7266,7 +7266,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -7287,7 +7287,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7306,7 +7306,7 @@ export default { $type: "color", $value: "{colors.blue.400}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7325,7 +7325,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -7347,7 +7347,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -7373,7 +7373,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -7395,7 +7395,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -7415,7 +7415,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -7439,7 +7439,7 @@ export default { $type: "color", $value: "{colors.chrome.500}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -7459,7 +7459,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -7482,7 +7482,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -7509,7 +7509,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -7538,7 +7538,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -7565,7 +7565,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -7591,7 +7591,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -7619,7 +7619,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7629,8 +7629,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -7658,7 +7657,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7669,7 +7668,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -7707,7 +7706,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7718,7 +7717,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -7756,7 +7755,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7767,7 +7766,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-chrome-300) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -7805,7 +7804,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7816,7 +7815,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-chrome-300) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -7854,7 +7853,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7865,7 +7864,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -7893,7 +7892,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7904,7 +7903,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-chrome-900) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -7932,7 +7931,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7953,7 +7952,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -7973,7 +7972,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7992,7 +7991,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -8012,7 +8011,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -8031,7 +8030,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -8051,7 +8050,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -8070,7 +8069,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -8090,7 +8089,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -8109,7 +8108,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -8129,7 +8128,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -8148,7 +8147,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -8168,7 +8167,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -8187,7 +8186,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -8207,7 +8206,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -8226,7 +8225,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-900) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -8246,7 +8245,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -8297,7 +8296,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -8326,7 +8325,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8353,7 +8352,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8380,7 +8379,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8407,7 +8406,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8434,7 +8433,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8461,7 +8460,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8481,7 +8480,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8499,7 +8498,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8517,7 +8516,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8535,7 +8534,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8553,7 +8552,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8571,7 +8570,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8589,7 +8588,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8607,7 +8606,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8625,7 +8624,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8643,7 +8642,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8661,7 +8660,7 @@ export default { $type: "color", $value: "{colors.chrome.900}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8681,7 +8680,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8699,7 +8698,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8717,7 +8716,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8735,7 +8734,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8753,7 +8752,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8771,7 +8770,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8789,7 +8788,7 @@ export default { $type: "color", $value: "{colors.pure.black}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8807,7 +8806,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8825,7 +8824,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8843,7 +8842,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8861,7 +8860,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles-esm/source-light-tritanopia-desktop-harness.ts b/packages/core-design-system/src/styles-esm/light-tritanopia-harness.ts similarity index 92% rename from packages/core-design-system/src/styles-esm/source-light-tritanopia-desktop-harness.ts rename to packages/core-design-system/src/styles-esm/light-tritanopia-harness.ts index ef82b845b0..be22e1776d 100644 --- a/packages/core-design-system/src/styles-esm/source-light-tritanopia-desktop-harness.ts +++ b/packages/core-design-system/src/styles-esm/light-tritanopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:28 GMT + * Generated on Tue, 18 Mar 2025 06:44:23 GMT * Copyright (c) Harness. */ @@ -20,7 +20,7 @@ export default { $description: "Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background.\n\nCommon uses: Application background, page base layer, lowest-level containers.", }, - name: "canary-background-1", + name: "cn-background-1", attributes: { category: "background", type: "1", @@ -41,7 +41,7 @@ export default { $description: "Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation.\n\nCommon uses: Cards, containers, form fields, dropdown menus.", }, - name: "canary-background-2", + name: "cn-background-2", attributes: { category: "background", type: "2", @@ -62,7 +62,7 @@ export default { $description: "Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation.\n\nCommon uses: Popovers, tooltips, highlighted containers.", }, - name: "canary-background-3", + name: "cn-background-3", attributes: { category: "background", type: "3", @@ -85,7 +85,7 @@ export default { $description: "Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information.\n\nCommon uses: Headings, labels, emphasized text, primary buttons.", }, - name: "canary-text-1", + name: "cn-text-1", attributes: { category: "text", type: "1", @@ -106,7 +106,7 @@ export default { $description: "Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain.\n\nCommon uses: Body text, primary content, default icons, form inputs.", }, - name: "canary-text-2", + name: "cn-text-2", attributes: { category: "text", type: "2", @@ -127,7 +127,7 @@ export default { $description: "Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast.\n\nCommon uses: Supporting text, metadata, secondary information, placeholders.", }, - name: "canary-text-3", + name: "cn-text-3", attributes: { category: "text", type: "3", @@ -148,7 +148,7 @@ export default { $description: "Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items.\n\nCommon uses: Links, buttons, interactive icons, highlighted elements.", }, - name: "canary-text-accent", + name: "cn-text-accent", attributes: { category: "text", type: "accent", @@ -169,7 +169,7 @@ export default { $description: "Primary color for text and icons in success content. Communicates positive outcomes and completion states.\n\nCommon uses: Success message text, completion text, positive indicators.", }, - name: "canary-text-success", + name: "cn-text-success", attributes: { category: "text", type: "success", @@ -190,7 +190,7 @@ export default { $description: "Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions.\n\nCommon uses: Error message text, validation text, destructive action labels.", }, - name: "canary-text-danger", + name: "cn-text-danger", attributes: { category: "text", type: "danger", @@ -211,7 +211,7 @@ export default { $description: "Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention.\n\nCommon uses: Warning message text, alert text, important notifications.", }, - name: "canary-text-warning", + name: "cn-text-warning", attributes: { category: "text", type: "warning", @@ -234,7 +234,7 @@ export default { $description: "Enhanced border color for interactive states. Creates strong visual definition for important boundaries.\n\nCommon uses: Focus states, hover states, active elements, primary containers.", }, - name: "canary-border-1", + name: "cn-border-1", attributes: { category: "border", type: "1", @@ -255,7 +255,7 @@ export default { $description: "Standard border color for general use. Provides balanced visual definition for common UI elements.\n\nCommon uses: Containers, cards, dividers, separators, default form inputs.", }, - name: "canary-border-2", + name: "cn-border-2", attributes: { category: "border", type: "2", @@ -274,7 +274,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -294,7 +294,7 @@ export default { $description: "Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI.\n\nCommon uses: Subtle dividers, grouped content, secondary containers, table rows.", }, - name: "canary-border-3", + name: "cn-border-3", attributes: { category: "border", type: "3", @@ -315,7 +315,7 @@ export default { $description: "Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility.\n\nCommon uses: Focus rings, keyboard navigation highlights, selection indicators.", }, - name: "canary-border-focus", + name: "cn-border-focus", attributes: { category: "border", type: "focus", @@ -336,7 +336,7 @@ export default { $description: "Border color for success containers. Reinforces positive status through visual framing.\n\nCommon uses: Success alert borders, confirmation boundaries, completed state indicators.", }, - name: "canary-border-success", + name: "cn-border-success", attributes: { category: "border", type: "success", @@ -357,7 +357,7 @@ export default { $description: "Border color for error containers. Emphasizes critical information through visual framing.\n\nCommon uses: Error alert borders, validation boundaries, destructive action containers.", }, - name: "canary-border-danger", + name: "cn-border-danger", attributes: { category: "border", type: "danger", @@ -378,7 +378,7 @@ export default { $description: "Border color for warning containers. Frames cautionary information with distinct boundary.\n\nCommon uses: Warning alert borders, notice boundaries, attention-requiring elements.", }, - name: "canary-border-warning", + name: "cn-border-warning", attributes: { category: "border", type: "warning", @@ -399,7 +399,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.15)", $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -419,7 +419,7 @@ export default { $description: "Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction.\n\nCommon uses: Button hover states, link hover states, soft interactions, menu items.", }, - name: "canary-state-hover", + name: "cn-state-hover", attributes: { category: "state", type: "hover", @@ -438,7 +438,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-400) l c h / 0.2)", $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -458,7 +458,7 @@ export default { $description: "Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements.\n\nCommon uses: Selected list items, active tabs, chosen options, current navigation item.", }, - name: "canary-state-selected", + name: "cn-state-selected", attributes: { category: "state", type: "selected", @@ -480,7 +480,7 @@ export default { $description: "Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements.\n\nCommon uses: Disabled buttons, inactive form elements, unavailable options, placeholders.", }, - name: "canary-state-disabled-text", + name: "cn-state-disabled-text", attributes: { category: "state", type: "disabled", @@ -502,7 +502,7 @@ export default { $description: "Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI.\n\nCommon uses: Disabled buttons, inactive form controls, unavailable options.", }, - name: "canary-state-disabled-background", + name: "cn-state-disabled-background", attributes: { category: "state", type: "disabled", @@ -513,7 +513,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -524,7 +524,7 @@ export default { $description: "Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state.\n\nCommon uses: Disabled form inputs, inactive controls, unavailable action boundaries.", }, - name: "canary-state-disabled-border", + name: "cn-state-disabled-border", attributes: { category: "state", type: "disabled", @@ -550,7 +550,7 @@ export default { $description: "Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content.", }, - name: "canary-component-accordion-title", + name: "cn-component-accordion-title", attributes: { category: "component", type: "accordion", @@ -572,7 +572,7 @@ export default { $description: "Text color for accordion content. Applied to the expandable text within accordion panels.", }, - name: "canary-component-accordion-description", + name: "cn-component-accordion-description", attributes: { category: "component", type: "accordion", @@ -594,7 +594,7 @@ export default { $description: "Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state.", }, - name: "canary-component-accordion-chevron", + name: "cn-component-accordion-chevron", attributes: { category: "component", type: "accordion", @@ -616,7 +616,7 @@ export default { $description: "Border color for accordion items. Provides visual separation between accordion panels.", }, - name: "canary-component-accordion-border", + name: "cn-component-accordion-border", attributes: { category: "component", type: "accordion", @@ -641,7 +641,7 @@ export default { $description: "Title text color for informational alerts. Ensures high visibility for the alert heading.", }, - name: "canary-component-alert-default-title", + name: "cn-component-alert-default-title", attributes: { category: "component", type: "alert", @@ -664,7 +664,7 @@ export default { $description: "Description text color for informational alerts. Provides readable contrast for alert content.", }, - name: "canary-component-alert-default-description", + name: "cn-component-alert-default-description", attributes: { category: "component", type: "alert", @@ -687,7 +687,7 @@ export default { $description: "Background color for informational alerts. Creates visual distinction from surrounding content.", }, - name: "canary-component-alert-default-background", + name: "cn-component-alert-default-background", attributes: { category: "component", type: "alert", @@ -699,7 +699,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -710,7 +710,7 @@ export default { $description: "Border color for informational alerts. Subtly defines the alert's boundaries.", }, - name: "canary-component-alert-default-border", + name: "cn-component-alert-default-border", attributes: { category: "component", type: "alert", @@ -735,7 +735,7 @@ export default { $description: "Text color for danger alerts. Communicates critical information through high-contrast red text.", }, - name: "canary-component-alert-danger-title", + name: "cn-component-alert-danger-title", attributes: { category: "component", type: "alert", @@ -758,7 +758,7 @@ export default { $description: "Description text color for danger alerts. Ensures readability while maintaining the error state styling.", }, - name: "canary-component-alert-danger-description", + name: "cn-component-alert-danger-description", attributes: { category: "component", type: "alert", @@ -779,7 +779,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.1)", $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -799,7 +799,7 @@ export default { $description: "Background color for danger alerts. Creates subtle but recognizable error state styling.", }, - name: "canary-component-alert-danger-background", + name: "cn-component-alert-danger-background", attributes: { category: "component", type: "alert", @@ -820,7 +820,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.2)", $description: "Border color for danger alerts. Provides definition for error state alerts.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -840,7 +840,7 @@ export default { $description: "Border color for danger alerts. Provides definition for error state alerts.", }, - name: "canary-component-alert-danger-border", + name: "cn-component-alert-danger-border", attributes: { category: "component", type: "alert", @@ -866,7 +866,7 @@ export default { $description: "Text color for avatar initials or text. Ensures visibility against the avatar background.", }, - name: "canary-component-avatar-text", + name: "cn-component-avatar-text", attributes: { category: "component", type: "avatar", @@ -888,7 +888,7 @@ export default { $description: "Background color for avatar components. Provides contrast for text or image content.", }, - name: "canary-component-avatar-background", + name: "cn-component-avatar-background", attributes: { category: "component", type: "avatar", @@ -899,7 +899,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for avatars. Creates subtle definition around the avatar element.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -910,7 +910,7 @@ export default { $description: "Border color for avatars. Creates subtle definition around the avatar element.", }, - name: "canary-component-avatar-border", + name: "cn-component-avatar-border", attributes: { category: "component", type: "avatar", @@ -935,7 +935,7 @@ export default { $description: "Text color for secondary badges. Provides readable contrast on secondary badge styling.", }, - name: "canary-component-badge-default-text", + name: "cn-component-badge-default-text", attributes: { category: "component", type: "badge", @@ -958,7 +958,7 @@ export default { $description: "Background color for secondary badges. Creates less prominent badge styling for secondary information.", }, - name: "canary-component-badge-default-background", + name: "cn-component-badge-default-background", attributes: { category: "component", type: "badge", @@ -981,7 +981,7 @@ export default { $description: "Border color for secondary badges. Matches background for clean, cohesive appearance.", }, - name: "canary-component-badge-default-border", + name: "cn-component-badge-default-border", attributes: { category: "component", type: "badge", @@ -1006,7 +1006,7 @@ export default { $description: "Text color for outline badges. Ensures readability for badges with transparent backgrounds.", }, - name: "canary-component-badge-neutral-text", + name: "cn-component-badge-neutral-text", attributes: { category: "component", type: "badge", @@ -1027,7 +1027,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-500) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-500) l c h / 0.1)", $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -1047,7 +1047,7 @@ export default { $description: "Background color for neutral badges. Creates subtle visual styling for general-purpose indicators.", }, - name: "canary-component-badge-neutral-background", + name: "cn-component-badge-neutral-background", attributes: { category: "component", type: "badge", @@ -1068,7 +1068,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-600) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-600) l c h / 0.2)", $description: "Border color for outline badges. Creates definition for badges without background fill.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -1088,7 +1088,7 @@ export default { $description: "Border color for outline badges. Creates definition for badges without background fill.", }, - name: "canary-component-badge-neutral-border", + name: "cn-component-badge-neutral-border", attributes: { category: "component", type: "badge", @@ -1113,7 +1113,7 @@ export default { $description: "Text color for success badges. Communicates positive status through readable cyan text.", }, - name: "canary-component-badge-success-text", + name: "cn-component-badge-success-text", attributes: { category: "component", type: "badge", @@ -1134,7 +1134,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.2)", $description: "Border color for success badges. Provides subtle definition for success state indicators.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -1154,7 +1154,7 @@ export default { $description: "Border color for success badges. Provides subtle definition for success state indicators.", }, - name: "canary-component-badge-success-border", + name: "cn-component-badge-success-border", attributes: { category: "component", type: "badge", @@ -1175,7 +1175,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.1)", $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -1195,7 +1195,7 @@ export default { $description: "Background color for success badges. Creates a subtle but recognizable success indicator.", }, - name: "canary-component-badge-success-background", + name: "cn-component-badge-success-background", attributes: { category: "component", type: "badge", @@ -1220,7 +1220,7 @@ export default { $description: "Text color for danger badges. Communicates error or warning status with high visibility.", }, - name: "canary-component-badge-danger-text", + name: "cn-component-badge-danger-text", attributes: { category: "component", type: "badge", @@ -1241,7 +1241,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.2)", $description: "Border color for danger badges. Creates definition for error or warning indicators.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -1261,7 +1261,7 @@ export default { $description: "Border color for danger badges. Creates definition for error or warning indicators.", }, - name: "canary-component-badge-danger-border", + name: "cn-component-badge-danger-border", attributes: { category: "component", type: "badge", @@ -1282,7 +1282,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Background color for danger badges. Provides subtle visual indication of error states.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -1302,7 +1302,7 @@ export default { $description: "Background color for danger badges. Provides subtle visual indication of error states.", }, - name: "canary-component-badge-danger-background", + name: "cn-component-badge-danger-background", attributes: { category: "component", type: "badge", @@ -1327,7 +1327,7 @@ export default { $description: "Text color for warning badges. Signals caution states with readable orange text.", }, - name: "canary-component-badge-warning-text", + name: "cn-component-badge-warning-text", attributes: { category: "component", type: "badge", @@ -1348,7 +1348,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.2)", $description: "Border color for warning badges. Defines the boundary of caution status indicators.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -1368,7 +1368,7 @@ export default { $description: "Border color for warning badges. Defines the boundary of caution status indicators.", }, - name: "canary-component-badge-warning-border", + name: "cn-component-badge-warning-border", attributes: { category: "component", type: "badge", @@ -1389,7 +1389,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-200) l c h / 0.1)", $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -1409,7 +1409,7 @@ export default { $description: "Background color for warning badges. Creates subtle but recognizable caution indicators.", }, - name: "canary-component-badge-warning-background", + name: "cn-component-badge-warning-background", attributes: { category: "component", type: "badge", @@ -1434,7 +1434,7 @@ export default { $description: "Text color for running state badges. Indicates active or in-progress operations.", }, - name: "canary-component-badge-running-text", + name: "cn-component-badge-running-text", attributes: { category: "component", type: "badge", @@ -1455,7 +1455,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-orange-400) l c h / 0.2)", $description: "Border color for running state badges. Defines the boundary of active status indicators.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -1475,7 +1475,7 @@ export default { $description: "Border color for running state badges. Defines the boundary of active status indicators.", }, - name: "canary-component-badge-running-border", + name: "cn-component-badge-running-border", attributes: { category: "component", type: "badge", @@ -1496,7 +1496,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-orange-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-orange-300) l c h / 0.1)", $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -1516,7 +1516,7 @@ export default { $description: "Background color for running state badges. Creates subtle visual indication of in-progress states.", }, - name: "canary-component-badge-running-background", + name: "cn-component-badge-running-background", attributes: { category: "component", type: "badge", @@ -1541,7 +1541,7 @@ export default { $description: "Text color for merged state badges. Indicates completed merge actions in version control contexts.", }, - name: "canary-component-badge-merged-text", + name: "cn-component-badge-merged-text", attributes: { category: "component", type: "badge", @@ -1562,7 +1562,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.2)", $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -1582,7 +1582,7 @@ export default { $description: "Border color for merged state badges. Defines the boundary of merge status indicators.", }, - name: "canary-component-badge-merged-border", + name: "cn-component-badge-merged-border", attributes: { category: "component", type: "badge", @@ -1603,7 +1603,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-cyan-300) l c h / 0.1)", $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -1623,7 +1623,7 @@ export default { $description: "Background color for merged state badges. Creates subtle but recognizable merge indicators.", }, - name: "canary-component-badge-merged-background", + name: "cn-component-badge-merged-background", attributes: { category: "component", type: "badge", @@ -1648,7 +1648,7 @@ export default { $description: "Text color for AI-related badges. Ensures high contrast against AI badge gradient border.", }, - name: "canary-component-badge-ai-text", + name: "cn-component-badge-ai-text", attributes: { category: "component", type: "badge", @@ -1671,7 +1671,7 @@ export default { $description: "Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border.", }, - name: "canary-component-badge-ai-background", + name: "cn-component-badge-ai-background", attributes: { category: "component", type: "badge", @@ -1696,7 +1696,7 @@ export default { $description: "Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-badge-ai-border", + name: "cn-component-badge-ai-border", attributes: { category: "component", type: "badge", @@ -1722,7 +1722,7 @@ export default { $description: "Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps.", }, - name: "canary-component-breadcrumb-item-inactive", + name: "cn-component-breadcrumb-item-inactive", attributes: { category: "component", type: "breadcrumb", @@ -1744,7 +1744,7 @@ export default { $description: "Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy.", }, - name: "canary-component-breadcrumb-item-current", + name: "cn-component-breadcrumb-item-current", attributes: { category: "component", type: "breadcrumb", @@ -1766,7 +1766,7 @@ export default { $description: "Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items.", }, - name: "canary-component-breadcrumb-separator", + name: "cn-component-breadcrumb-separator", attributes: { category: "component", type: "breadcrumb", @@ -1791,7 +1791,7 @@ export default { $description: "Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements.", }, - name: "canary-component-btn-primary-text", + name: "cn-component-btn-primary-text", attributes: { category: "component", type: "btn", @@ -1814,7 +1814,7 @@ export default { $description: "Background color for primary action buttons. Creates emphasis for the most important action in a given context.", }, - name: "canary-component-btn-primary-background", + name: "cn-component-btn-primary-background", attributes: { category: "component", type: "btn", @@ -1837,7 +1837,7 @@ export default { $description: "Border color for primary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-primary-border", + name: "cn-component-btn-primary-border", attributes: { category: "component", type: "btn", @@ -1862,7 +1862,7 @@ export default { $description: "Text and icon color for secondary action buttons. Provides readable contrast for supporting actions.", }, - name: "canary-component-btn-secondary-text", + name: "cn-component-btn-secondary-text", attributes: { category: "component", type: "btn", @@ -1885,7 +1885,7 @@ export default { $description: "Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions.", }, - name: "canary-component-btn-secondary-background", + name: "cn-component-btn-secondary-background", attributes: { category: "component", type: "btn", @@ -1908,7 +1908,7 @@ export default { $description: "Border color for secondary action buttons. Matches background for clean, cohesive appearance.", }, - name: "canary-component-btn-secondary-border", + name: "cn-component-btn-secondary-border", attributes: { category: "component", type: "btn", @@ -1931,7 +1931,7 @@ export default { $value: "{background.2}", $description: "Background color for outline buttons.", }, - name: "canary-component-btn-outline-background", + name: "cn-component-btn-outline-background", attributes: { category: "component", type: "btn", @@ -1955,7 +1955,7 @@ export default { $description: "Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds.", }, - name: "canary-component-btn-outline-unselected-text", + name: "cn-component-btn-outline-unselected-text", attributes: { category: "component", type: "btn", @@ -1979,7 +1979,7 @@ export default { $description: "Icon color for unselected outline buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-outline-unselected-icon", + name: "cn-component-btn-outline-unselected-icon", attributes: { category: "component", type: "btn", @@ -2003,7 +2003,7 @@ export default { $description: "Border color for unselected outline buttons. Defines the clickable area with a visible boundary.", }, - name: "canary-component-btn-outline-unselected-border", + name: "cn-component-btn-outline-unselected-border", attributes: { category: "component", type: "btn", @@ -2029,7 +2029,7 @@ export default { $description: "Text color for selected outline buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-outline-selected-text", + name: "cn-component-btn-outline-selected-text", attributes: { category: "component", type: "btn", @@ -2053,7 +2053,7 @@ export default { $description: "Icon color for selected outline buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-outline-selected-icon", + name: "cn-component-btn-outline-selected-icon", attributes: { category: "component", type: "btn", @@ -2077,7 +2077,7 @@ export default { $description: "Border color for selected outline buttons. Creates stronger visual indication of the active state.", }, - name: "canary-component-btn-outline-selected-border", + name: "cn-component-btn-outline-selected-border", attributes: { category: "component", type: "btn", @@ -2105,7 +2105,7 @@ export default { $description: "Text color for unselected ghost buttons. Provides readable contrast for minimal styling.", }, - name: "canary-component-btn-ghost-unselected-text", + name: "cn-component-btn-ghost-unselected-text", attributes: { category: "component", type: "btn", @@ -2129,7 +2129,7 @@ export default { $description: "Icon color for unselected ghost buttons. Creates subtle emphasis for button icons.", }, - name: "canary-component-btn-ghost-unselected-icon", + name: "cn-component-btn-ghost-unselected-icon", attributes: { category: "component", type: "btn", @@ -2155,7 +2155,7 @@ export default { $description: "Text color for selected ghost buttons. Increases contrast for active button states.", }, - name: "canary-component-btn-ghost-selected-text", + name: "cn-component-btn-ghost-selected-text", attributes: { category: "component", type: "btn", @@ -2179,7 +2179,7 @@ export default { $description: "Icon color for selected ghost buttons. Increases visibility for active button states.", }, - name: "canary-component-btn-ghost-selected-icon", + name: "cn-component-btn-ghost-selected-icon", attributes: { category: "component", type: "btn", @@ -2206,7 +2206,7 @@ export default { $description: "Text color for success buttons. Communicates positive actions through readable cyan text.", }, - name: "canary-component-btn-success-text", + name: "cn-component-btn-success-text", attributes: { category: "component", type: "btn", @@ -2227,7 +2227,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.12)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.12)", $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -2247,7 +2247,7 @@ export default { $description: "Background color for success buttons. Creates subtle but recognizable positive action styling.", }, - name: "canary-component-btn-success-background", + name: "cn-component-btn-success-background", attributes: { category: "component", type: "btn", @@ -2268,7 +2268,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-400) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-400) l c h / 0.25)", $description: "Border color for success buttons. Provides definition for positive action buttons.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -2288,7 +2288,7 @@ export default { $description: "Border color for success buttons. Provides definition for positive action buttons.", }, - name: "canary-component-btn-success-border", + name: "cn-component-btn-success-border", attributes: { category: "component", type: "btn", @@ -2310,7 +2310,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.15)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.15)", $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -2330,7 +2330,7 @@ export default { $description: "Hover state background color for success buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-success-state-hover", + name: "cn-component-btn-success-state-hover", attributes: { category: "component", type: "btn", @@ -2352,7 +2352,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-200) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-200) l c h / 0.25)", $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -2372,7 +2372,7 @@ export default { $description: "Active state background color for success buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-success-state-active", + name: "cn-component-btn-success-state-active", attributes: { category: "component", type: "btn", @@ -2399,7 +2399,7 @@ export default { $description: "Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text.", }, - name: "canary-component-btn-danger-text", + name: "cn-component-btn-danger-text", attributes: { category: "component", type: "btn", @@ -2420,7 +2420,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.12)", $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -2440,7 +2440,7 @@ export default { $description: "Background color for danger buttons. Creates subtle but recognizable destructive action styling.", }, - name: "canary-component-btn-danger-background", + name: "cn-component-btn-danger-background", attributes: { category: "component", type: "btn", @@ -2461,7 +2461,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-400) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-400) l c h / 0.2)", $description: "Border color for danger buttons. Provides definition for destructive action buttons.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -2481,7 +2481,7 @@ export default { $description: "Border color for danger buttons. Provides definition for destructive action buttons.", }, - name: "canary-component-btn-danger-border", + name: "cn-component-btn-danger-border", attributes: { category: "component", type: "btn", @@ -2503,7 +2503,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.15)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.15)", $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -2523,7 +2523,7 @@ export default { $description: "Hover state background color for danger buttons. Creates subtle feedback for user interaction.", }, - name: "canary-component-btn-danger-state-hover", + name: "cn-component-btn-danger-state-hover", attributes: { category: "component", type: "btn", @@ -2545,7 +2545,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.25)", $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -2565,7 +2565,7 @@ export default { $description: "Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses.", }, - name: "canary-component-btn-danger-state-active", + name: "cn-component-btn-danger-state-active", attributes: { category: "component", type: "btn", @@ -2592,7 +2592,7 @@ export default { $description: "Text color for AI-powered buttons. Ensures high contrast against AI button gradient border.", }, - name: "canary-component-btn-ai-text", + name: "cn-component-btn-ai-text", attributes: { category: "component", type: "btn", @@ -2613,7 +2613,7 @@ export default { $value: "{background.2}", $description: "Background color for AI-powered buttons.", }, - name: "canary-component-btn-ai-background", + name: "cn-component-btn-ai-background", attributes: { category: "component", type: "btn", @@ -2638,7 +2638,7 @@ export default { $description: "Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality.", }, - name: "canary-component-btn-ai-border", + name: "cn-component-btn-ai-border", attributes: { category: "component", type: "btn", @@ -2664,7 +2664,7 @@ export default { $description: "Background color for card components. Creates a distinct surface that appears elevated from the page background.", }, - name: "canary-component-card-background", + name: "cn-component-card-background", attributes: { category: "component", type: "card", @@ -2686,7 +2686,7 @@ export default { $description: "Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content.", }, - name: "canary-component-card-border", + name: "cn-component-card-border", attributes: { category: "component", type: "card", @@ -2710,7 +2710,7 @@ export default { $description: "Text color for dialog titles. Ensures high visibility and emphasis for the modal heading.", }, - name: "canary-component-dialog-title", + name: "cn-component-dialog-title", attributes: { category: "component", type: "dialog", @@ -2732,7 +2732,7 @@ export default { $description: "Text color for dialog content. Provides readable contrast for the modal's primary text content.", }, - name: "canary-component-dialog-description", + name: "cn-component-dialog-description", attributes: { category: "component", type: "dialog", @@ -2754,7 +2754,7 @@ export default { $description: "Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI.", }, - name: "canary-component-dialog-background", + name: "cn-component-dialog-background", attributes: { category: "component", type: "dialog", @@ -2774,7 +2774,7 @@ export default { $value: "{border.2}", $description: "Border color for dialog components.", }, - name: "canary-component-dialog-border", + name: "cn-component-dialog-border", attributes: { category: "component", type: "dialog", @@ -2794,7 +2794,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -2814,7 +2814,7 @@ export default { $description: "Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath.", }, - name: "canary-component-dialog-backdrop", + name: "cn-component-dialog-backdrop", attributes: { category: "component", type: "dialog", @@ -2838,7 +2838,7 @@ export default { $description: "Background color for dropdown menus. Creates a distinct surface for selectable options.", }, - name: "canary-component-dropdown-background", + name: "cn-component-dropdown-background", attributes: { category: "component", type: "dropdown", @@ -2858,7 +2858,7 @@ export default { $value: "{border.2}", $description: "Border color for dropdown menus container.", }, - name: "canary-component-dropdown-border", + name: "cn-component-dropdown-border", attributes: { category: "component", type: "dropdown", @@ -2881,7 +2881,7 @@ export default { $description: "Text color for dropdown menu items. Ensures readability of selectable options.", }, - name: "canary-component-dropdown-item-text", + name: "cn-component-dropdown-item-text", attributes: { category: "component", type: "dropdown", @@ -2903,7 +2903,7 @@ export default { $value: "{text.danger}", $description: "Text color for dropdown menu delete-item.", }, - name: "canary-component-dropdown-item-delete-text", + name: "cn-component-dropdown-item-delete-text", attributes: { category: "component", type: "dropdown", @@ -2926,7 +2926,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-300) l c h / 0.1)", + $value: "lch(from var(--cn-colors-red-300) l c h / 0.1)", $description: "Specific hover state color for dropdown delete-item.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -2946,7 +2946,7 @@ export default { $description: "Specific hover state color for dropdown delete-item.", }, - name: "canary-component-dropdown-item-delete-state-hover", + name: "cn-component-dropdown-item-delete-state-hover", attributes: { category: "component", type: "dropdown", @@ -2982,7 +2982,7 @@ export default { $description: "Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent.", }, - name: "canary-component-diff-grey", + name: "cn-component-diff-grey", attributes: { category: "component", type: "diff", @@ -3002,7 +3002,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.12)", $description: "Cyan background highlighting newly added code lines while maintaining readability.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -3022,7 +3022,7 @@ export default { $description: "Cyan background highlighting newly added code lines while maintaining readability.", }, - name: "canary-component-diff-add-content", + name: "cn-component-diff-add-content", attributes: { category: "component", type: "diff", @@ -3042,7 +3042,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.2)", $description: "Background for line numbers of added code, providing visual connection to added content.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -3062,7 +3062,7 @@ export default { $description: "Background for line numbers of added code, providing visual connection to added content.", }, - name: "canary-component-diff-add-line-number", + name: "cn-component-diff-add-line-number", attributes: { category: "component", type: "diff", @@ -3082,7 +3082,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-cyan-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-cyan-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within added lines.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -3102,7 +3102,7 @@ export default { $description: "Stronger emphasis color for specific character changes within added lines.", }, - name: "canary-component-diff-add-content-highlight", + name: "cn-component-diff-add-content-highlight", attributes: { category: "component", type: "diff", @@ -3124,7 +3124,7 @@ export default { $description: "Background for interactive UI elements related to added content.", }, - name: "canary-component-diff-add-widget", + name: "cn-component-diff-add-widget", attributes: { category: "component", type: "diff", @@ -3146,7 +3146,7 @@ export default { $description: "Text/icon color for add-related interactive elements, ensuring readability.", }, - name: "canary-component-diff-add-widget-color", + name: "cn-component-diff-add-widget-color", attributes: { category: "component", type: "diff", @@ -3166,7 +3166,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.12)", $description: "Red background highlighting removed code lines without causing eye strain.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -3186,7 +3186,7 @@ export default { $description: "Red background highlighting removed code lines without causing eye strain.", }, - name: "canary-component-diff-del-content", + name: "cn-component-diff-del-content", attributes: { category: "component", type: "diff", @@ -3206,7 +3206,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.2)", $description: "Background for line numbers of deleted code, connecting numbers to removed content.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -3226,7 +3226,7 @@ export default { $description: "Background for line numbers of deleted code, connecting numbers to removed content.", }, - name: "canary-component-diff-del-line-number", + name: "cn-component-diff-del-line-number", attributes: { category: "component", type: "diff", @@ -3246,7 +3246,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-red-500) l c h / 0.25)", + $value: "lch(from var(--cn-colors-red-500) l c h / 0.25)", $description: "Stronger emphasis color for specific character changes within deleted lines.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -3266,7 +3266,7 @@ export default { $description: "Stronger emphasis color for specific character changes within deleted lines.", }, - name: "canary-component-diff-del-content-highlight", + name: "cn-component-diff-del-content-highlight", attributes: { category: "component", type: "diff", @@ -3288,7 +3288,7 @@ export default { $description: "Neutral background for unchanged code that allows modified content to stand out.", }, - name: "canary-component-diff-plain-content", + name: "cn-component-diff-plain-content", attributes: { category: "component", type: "diff", @@ -3310,7 +3310,7 @@ export default { $description: "Background for line numbers of unchanged code, maintaining visual rhythm.", }, - name: "canary-component-diff-plain-line-number", + name: "cn-component-diff-plain-line-number", attributes: { category: "component", type: "diff", @@ -3332,7 +3332,7 @@ export default { $description: "Text color for unchanged line numbers, visually subdued compared to changed content.", }, - name: "canary-component-diff-plain-line-number-color", + name: "cn-component-diff-plain-line-number-color", attributes: { category: "component", type: "diff", @@ -3354,7 +3354,7 @@ export default { $description: "Background for placeholder spaces and empty lines, maintaining visual continuity.", }, - name: "canary-component-diff-empty-content", + name: "cn-component-diff-empty-content", attributes: { category: "component", type: "diff", @@ -3374,7 +3374,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.12)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.12)", $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -3394,7 +3394,7 @@ export default { $description: "Background for diff section headers ('hunks') that indicate which part of the file is displayed.", }, - name: "canary-component-diff-hunk-content", + name: "cn-component-diff-hunk-content", attributes: { category: "component", type: "diff", @@ -3414,7 +3414,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-blue-500) l c h / 0.2)", + $value: "lch(from var(--cn-colors-blue-500) l c h / 0.2)", $description: "Background for line numbers in section headers.", filePath: "design-tokens/mode/light/default-tritanopia.json", isSource: true, @@ -3432,7 +3432,7 @@ export default { $value: "{colors.blue.500}", $description: "Background for line numbers in section headers.", }, - name: "canary-component-diff-hunk-line-number", + name: "cn-component-diff-hunk-line-number", attributes: { category: "component", type: "diff", @@ -3454,7 +3454,7 @@ export default { $description: "Text color for section header content showing file position information.", }, - name: "canary-component-diff-hunk-content-color", + name: "cn-component-diff-hunk-content-color", attributes: { category: "component", type: "diff", @@ -3476,7 +3476,7 @@ export default { $description: "Background for controls that expand/collapse code sections to show additional context.", }, - name: "canary-component-diff-expand-content", + name: "cn-component-diff-expand-content", attributes: { category: "component", type: "diff", @@ -3500,7 +3500,7 @@ export default { $description: "Text color for input field content. Ensures readability of user-entered information.", }, - name: "canary-component-input-text", + name: "cn-component-input-text", attributes: { category: "component", type: "input", @@ -3522,7 +3522,7 @@ export default { $description: "Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content.", }, - name: "canary-component-input-placeholder", + name: "cn-component-input-placeholder", attributes: { category: "component", type: "input", @@ -3544,7 +3544,7 @@ export default { $description: "Color for icons within input components. Creates visual harmony with placeholder text and decorative elements.", }, - name: "canary-component-input-icon", + name: "cn-component-input-icon", attributes: { category: "component", type: "input", @@ -3566,7 +3566,7 @@ export default { $description: "Background color for input fields. Creates a distinct surface for user interaction and data entry.", }, - name: "canary-component-input-background", + name: "cn-component-input-background", attributes: { category: "component", type: "input", @@ -3588,7 +3588,7 @@ export default { $description: "Border color for input fields. Defines the input area with a visible boundary for improved usability.", }, - name: "canary-component-input-border", + name: "cn-component-input-border", attributes: { category: "component", type: "input", @@ -3612,7 +3612,7 @@ export default { $description: "Text color for form labels and field identifiers. Ensures high contrast for important contextual information.", }, - name: "canary-component-label-text", + name: "cn-component-label-text", attributes: { category: "component", type: "label", @@ -3636,7 +3636,7 @@ export default { $description: "Default color for text links. Creates distinct visual identification of interactive text elements.", }, - name: "canary-component-link-default", + name: "cn-component-link-default", attributes: { category: "component", type: "link", @@ -3658,7 +3658,7 @@ export default { $description: "Visited state color for text links. Differentiates links the user has already activated.", }, - name: "canary-component-link-visited", + name: "cn-component-link-visited", attributes: { category: "component", type: "link", @@ -3681,7 +3681,7 @@ export default { $value: "{text.2}", $description: "Unselected tab item text.", }, - name: "canary-component-nav-tabs-unselected-text", + name: "cn-component-nav-tabs-unselected-text", attributes: { category: "component", type: "nav-tabs", @@ -3704,7 +3704,7 @@ export default { $value: "{text.1}", $description: "Selected tab item text.", }, - name: "canary-component-nav-tabs-selected-text", + name: "cn-component-nav-tabs-selected-text", attributes: { category: "component", type: "nav-tabs", @@ -3725,7 +3725,7 @@ export default { $value: "{border.focus}", $description: "Selected tab item border.", }, - name: "canary-component-nav-tabs-selected-border", + name: "cn-component-nav-tabs-selected-border", attributes: { category: "component", type: "nav-tabs", @@ -3738,7 +3738,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Navigation container border.", filePath: "design-tokens/mode/light/default-tritanopia.json", isSource: true, @@ -3747,7 +3747,7 @@ export default { $value: "{border.3}", $description: "Navigation container border.", }, - name: "canary-component-nav-tabs-border", + name: "cn-component-nav-tabs-border", attributes: { category: "component", type: "nav-tabs", @@ -3767,7 +3767,7 @@ export default { $value: "{background.2}", $description: "Navigation tabs container background.", }, - name: "canary-component-nav-tabs-background", + name: "cn-component-nav-tabs-background", attributes: { category: "component", type: "nav-tabs", @@ -3792,7 +3792,7 @@ export default { $description: "Border color for pipeline connection arrows. Defines the visual path between pipeline components.", }, - name: "canary-component-pipeline-arrow-border", + name: "cn-component-pipeline-arrow-border", attributes: { category: "component", type: "pipeline", @@ -3818,7 +3818,7 @@ export default { $description: "Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components.", }, - name: "canary-component-pipeline-arrow-running-border", + name: "cn-component-pipeline-arrow-running-border", attributes: { category: "component", type: "pipeline", @@ -3847,7 +3847,7 @@ export default { $description: "Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements.", }, - name: "canary-component-pipeline-card-background", + name: "cn-component-pipeline-card-background", attributes: { category: "component", type: "pipeline", @@ -3872,7 +3872,7 @@ export default { $description: "Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components.", }, - name: "canary-component-pipeline-card-border", + name: "cn-component-pipeline-card-border", attributes: { category: "component", type: "pipeline", @@ -3886,7 +3886,7 @@ export default { border: { $type: "color", $value: - "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--canary-colors-chrome-200) l c h / 0.4) 30%, lch(63.38% 78.04 52.26) 100%)", + "radial-gradient(604% 142% at 0% 0%, lch(63.38% 78.04 52.26) 0%, lch(from var(--cn-colors-chrome-200) l c h / 0.4) 30%, lch(63.38% 78.04 52.26) 100%)", $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -3898,7 +3898,7 @@ export default { $description: "Animated gradient border for running pipeline states. Provides visual indication of active processing.", }, - name: "canary-component-pipeline-card-running-border", + name: "cn-component-pipeline-card-running-border", attributes: { category: "component", type: "pipeline", @@ -3924,7 +3924,7 @@ export default { $description: "Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution.", }, - name: "canary-component-pipeline-card-error-border", + name: "cn-component-pipeline-card-error-border", attributes: { category: "component", type: "pipeline", @@ -3950,7 +3950,7 @@ export default { $description: "Border color for completed pipeline states. Indicates successful pipeline execution.", }, - name: "canary-component-pipeline-card-completed-border", + name: "cn-component-pipeline-card-completed-border", attributes: { category: "component", type: "pipeline", @@ -3978,7 +3978,7 @@ export default { $description: "The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area.", }, - name: "canary-component-pipeline-card-canvas-1-background", + name: "cn-component-pipeline-card-canvas-1-background", attributes: { category: "component", type: "pipeline", @@ -3991,7 +3991,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -4002,7 +4002,7 @@ export default { $description: "Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container.", }, - name: "canary-component-pipeline-card-canvas-1-border", + name: "cn-component-pipeline-card-canvas-1-border", attributes: { category: "component", type: "pipeline", @@ -4028,7 +4028,7 @@ export default { $description: "Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components.", }, - name: "canary-component-pipeline-card-canvas-2-background", + name: "cn-component-pipeline-card-canvas-2-background", attributes: { category: "component", type: "pipeline", @@ -4052,7 +4052,7 @@ export default { $description: "Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization.", }, - name: "canary-component-pipeline-card-canvas-2-border", + name: "cn-component-pipeline-card-canvas-2-border", attributes: { category: "component", type: "pipeline", @@ -4077,7 +4077,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Refers to the dotted pattern visible in the background of the workspace.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -4097,7 +4097,7 @@ export default { $description: "Refers to the dotted pattern visible in the background of the workspace.", }, - name: "canary-component-pipeline-background-dotes", + name: "cn-component-pipeline-background-dotes", attributes: { category: "component", type: "pipeline", @@ -4123,7 +4123,7 @@ export default { $description: "Background color for navigation components. Creates a consistent foundation for navigation elements.", }, - name: "canary-component-sidebar-background", + name: "cn-component-sidebar-background", attributes: { category: "component", type: "sidebar", @@ -4145,7 +4145,7 @@ export default { $description: "Border color for navigation components. Creates visual boundaries and separation from adjacent content.", }, - name: "canary-component-sidebar-border", + name: "cn-component-sidebar-border", attributes: { category: "component", type: "sidebar", @@ -4167,7 +4167,7 @@ export default { $description: "Color for separators between navigation sections. Creates visual organization within the navigation structure.", }, - name: "canary-component-sidebar-separator", + name: "cn-component-sidebar-separator", attributes: { category: "component", type: "sidebar", @@ -4187,7 +4187,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.15)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.15)", $description: "Hover state for navigation items.", filePath: "design-tokens/mode/light/default-tritanopia.json", isSource: true, @@ -4205,7 +4205,7 @@ export default { $value: "{colors.chrome.700}", $description: "Hover state for navigation items.", }, - name: "canary-component-sidebar-hover", + name: "cn-component-sidebar-hover", attributes: { category: "component", type: "sidebar", @@ -4225,7 +4225,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-700) l c h / 0.2)", + $value: "lch(from var(--cn-colors-chrome-700) l c h / 0.2)", $description: "Selected state for navigation items.", filePath: "design-tokens/mode/light/default-tritanopia.json", isSource: true, @@ -4243,7 +4243,7 @@ export default { $value: "{colors.chrome.700}", $description: "Selected state for navigation items.", }, - name: "canary-component-sidebar-selected", + name: "cn-component-sidebar-selected", attributes: { category: "component", type: "sidebar", @@ -4267,7 +4267,7 @@ export default { $description: "Text color for unselected navigation items. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-sidebar-item-unselected-text", + name: "cn-component-sidebar-item-unselected-text", attributes: { category: "component", type: "sidebar", @@ -4291,7 +4291,7 @@ export default { $description: "Icon color for unselected navigation items. Creates subtle visual indicators for navigation options.", }, - name: "canary-component-sidebar-item-unselected-icon", + name: "cn-component-sidebar-item-unselected-icon", attributes: { category: "component", type: "sidebar", @@ -4317,7 +4317,7 @@ export default { $description: "Text color for selected navigation items. Increases contrast to highlight the current location.", }, - name: "canary-component-sidebar-item-selected-text", + name: "cn-component-sidebar-item-selected-text", attributes: { category: "component", type: "sidebar", @@ -4341,7 +4341,7 @@ export default { $description: "Icon color for selected navigation items. Creates stronger visual indication of the current selection.", }, - name: "canary-component-sidebar-item-selected-icon", + name: "cn-component-sidebar-item-selected-icon", attributes: { category: "component", type: "sidebar", @@ -4366,7 +4366,7 @@ export default { $value: "{colors.chrome.50}", $description: "Text color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-text", + name: "cn-component-sidebar-logo-text", attributes: { category: "component", type: "sidebar", @@ -4387,7 +4387,7 @@ export default { $value: "{brand.color.300}", $description: "Icon color for Logo in sidebar navigation.", }, - name: "canary-component-sidebar-logo-icon", + name: "cn-component-sidebar-logo-icon", attributes: { category: "component", type: "sidebar", @@ -4412,7 +4412,7 @@ export default { $description: "Search input specific background on sidebar navigation.", }, - name: "canary-component-sidebar-search-background", + name: "cn-component-sidebar-search-background", attributes: { category: "component", type: "sidebar", @@ -4433,7 +4433,7 @@ export default { $value: "{colors.chrome.800}", $description: "Search input specific border on sidebar navigation.", }, - name: "canary-component-sidebar-search-border", + name: "cn-component-sidebar-search-border", attributes: { category: "component", type: "sidebar", @@ -4456,7 +4456,7 @@ export default { $description: "Search input specific placeholder on sidebar navigation.", }, - name: "canary-component-sidebar-search-placeholder", + name: "cn-component-sidebar-search-placeholder", attributes: { category: "component", type: "sidebar", @@ -4480,7 +4480,7 @@ export default { $description: "Search input specific button background on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-background", + name: "cn-component-sidebar-search-btn-background", attributes: { category: "component", type: "sidebar", @@ -4504,7 +4504,7 @@ export default { $description: "Search input specific button border on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-border", + name: "cn-component-sidebar-search-btn-border", attributes: { category: "component", type: "sidebar", @@ -4528,7 +4528,7 @@ export default { $description: "Search input specific button text on sidebar navigation.", }, - name: "canary-component-sidebar-search-btn-text", + name: "cn-component-sidebar-search-btn-text", attributes: { category: "component", type: "sidebar", @@ -4553,7 +4553,7 @@ export default { $value: "{colors.pure.white}", $description: "Username in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-username", + name: "cn-component-sidebar-footer-username", attributes: { category: "component", type: "sidebar", @@ -4574,7 +4574,7 @@ export default { $value: "{colors.chrome.500}", $description: "User data in the footer sidebar navigation menu.", }, - name: "canary-component-sidebar-footer-data", + name: "cn-component-sidebar-footer-data", attributes: { category: "component", type: "sidebar", @@ -4600,7 +4600,7 @@ export default { $description: "Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability.", }, - name: "canary-component-scrollbar-thumb", + name: "cn-component-scrollbar-thumb", attributes: { category: "component", type: "scrollbar", @@ -4625,7 +4625,7 @@ export default { $description: "Color for unselected items in selection controls. Provides readable but less emphasized styling for available options.", }, - name: "canary-component-selection-unselected-item", + name: "cn-component-selection-unselected-item", attributes: { category: "component", type: "selection", @@ -4648,7 +4648,7 @@ export default { $description: "Background color for unselected state in selection controls. Creates visual distinction from selected items.", }, - name: "canary-component-selection-unselected-background", + name: "cn-component-selection-unselected-background", attributes: { category: "component", type: "selection", @@ -4671,7 +4671,7 @@ export default { $description: "Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary.", }, - name: "canary-component-selection-unselected-border", + name: "cn-component-selection-unselected-border", attributes: { category: "component", type: "selection", @@ -4696,7 +4696,7 @@ export default { $description: "Color for selected items in selection controls. Creates high contrast against selected background state.", }, - name: "canary-component-selection-selected-item", + name: "cn-component-selection-selected-item", attributes: { category: "component", type: "selection", @@ -4719,7 +4719,7 @@ export default { $description: "Background color for selected state in selection controls. Creates strong visual indication of active selection.", }, - name: "canary-component-selection-selected-background", + name: "cn-component-selection-selected-background", attributes: { category: "component", type: "selection", @@ -4742,7 +4742,7 @@ export default { $description: "Border color for selected elements in selection controls. Reinforces the selected state with consistent styling.", }, - name: "canary-component-selection-selected-border", + name: "cn-component-selection-selected-border", attributes: { category: "component", type: "selection", @@ -4768,7 +4768,7 @@ export default { $description: "Background color for separator elements. Creates visual division between content sections with a subtle line or space.", }, - name: "canary-component-separator-background", + name: "cn-component-separator-background", attributes: { category: "component", type: "separator", @@ -4794,7 +4794,7 @@ export default { $description: 'Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states.', }, - name: "canary-component-skeleton-background", + name: "cn-component-skeleton-background", attributes: { category: "component", type: "skeleton", @@ -4819,7 +4819,7 @@ export default { $description: "Background color for slider tracks. Represents the full range of available values in an unselected state.", }, - name: "canary-component-slider-track-base", + name: "cn-component-slider-track-base", attributes: { category: "component", type: "slider", @@ -4842,7 +4842,7 @@ export default { $description: "Filled portion color for slider tracks. Visually represents the selected value or range within the track.", }, - name: "canary-component-slider-track-progress", + name: "cn-component-slider-track-progress", attributes: { category: "component", type: "slider", @@ -4867,7 +4867,7 @@ export default { $description: "Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals.", }, - name: "canary-component-slider-track-segments-base", + name: "cn-component-slider-track-segments-base", attributes: { category: "component", type: "slider", @@ -4890,7 +4890,7 @@ export default { $description: "Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range.", }, - name: "canary-component-slider-track-segments-progress", + name: "cn-component-slider-track-segments-progress", attributes: { category: "component", type: "slider", @@ -4915,7 +4915,7 @@ export default { $description: "Background color for slider handles. Creates a distinct, interactive element for adjusting values.", }, - name: "canary-component-slider-handle-background", + name: "cn-component-slider-handle-background", attributes: { category: "component", type: "slider", @@ -4938,7 +4938,7 @@ export default { $description: "Border color for slider handles. Provides definition and contrast for the interactive control.", }, - name: "canary-component-slider-handle-border", + name: "cn-component-slider-handle-border", attributes: { category: "component", type: "slider", @@ -4964,7 +4964,7 @@ export default { $description: "Color for success status indicators. Communicates completed or positive states.", }, - name: "canary-component-status-indicator-completed", + name: "cn-component-status-indicator-completed", attributes: { category: "component", type: "status-indicator", @@ -4986,7 +4986,7 @@ export default { $description: "Color for danger status indicators. Communicates error or critical warning states.", }, - name: "canary-component-status-indicator-cancelled", + name: "cn-component-status-indicator-cancelled", attributes: { category: "component", type: "status-indicator", @@ -5008,7 +5008,7 @@ export default { $description: "Color for warning status indicators. Communicates caution or potential issue states.", }, - name: "canary-component-status-indicator-warning", + name: "cn-component-status-indicator-warning", attributes: { category: "component", type: "status-indicator", @@ -5030,7 +5030,7 @@ export default { $description: "Color for running status indicators. Communicates active or in-progress operations.", }, - name: "canary-component-status-indicator-running", + name: "cn-component-status-indicator-running", attributes: { category: "component", type: "status-indicator", @@ -5052,7 +5052,7 @@ export default { $description: "Color for merged status indicators. Communicates successful integration or completion in version control contexts.", }, - name: "canary-component-status-indicator-merged", + name: "cn-component-status-indicator-merged", attributes: { category: "component", type: "status-indicator", @@ -5074,7 +5074,7 @@ export default { $description: "Color for action-required status indicators. Communicates that user attention or intervention is needed.", }, - name: "canary-component-status-indicator-action-required", + name: "cn-component-status-indicator-action-required", attributes: { category: "component", type: "status-indicator", @@ -5096,7 +5096,7 @@ export default { $description: "Color for pending status indicators. Communicates in waiting states.", }, - name: "canary-component-status-indicator-waiting", + name: "cn-component-status-indicator-waiting", attributes: { category: "component", type: "status-indicator", @@ -5121,7 +5121,7 @@ export default { $description: "Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track.", }, - name: "canary-component-switch-unselected-thumb", + name: "cn-component-switch-unselected-thumb", attributes: { category: "component", type: "switch", @@ -5144,7 +5144,7 @@ export default { $description: "Background color for the unselected state of switch controls. Creates visual distinction from the selected state.", }, - name: "canary-component-switch-unselected-background", + name: "cn-component-switch-unselected-background", attributes: { category: "component", type: "switch", @@ -5169,7 +5169,7 @@ export default { $description: "Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track.", }, - name: "canary-component-switch-selected-thumb", + name: "cn-component-switch-selected-thumb", attributes: { category: "component", type: "switch", @@ -5192,7 +5192,7 @@ export default { $description: "Background color for the selected state of switch controls. Creates strong visual indication of active state.", }, - name: "canary-component-switch-selected-background", + name: "cn-component-switch-selected-background", attributes: { category: "component", type: "switch", @@ -5219,7 +5219,7 @@ export default { $description: "Text color for table header cells. Ensures readability of column labels and titles.", }, - name: "canary-component-table-header-text", + name: "cn-component-table-header-text", attributes: { category: "component", type: "table", @@ -5242,7 +5242,7 @@ export default { $description: "Background color for table header rows. Creates visual distinction between headers and data rows.", }, - name: "canary-component-table-header-background", + name: "cn-component-table-header-background", attributes: { category: "component", type: "table", @@ -5265,7 +5265,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.1)", $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -5285,7 +5285,7 @@ export default { $description: "Background color for alternate table rows. Improves readability by differentiating adjacent rows.", }, - name: "canary-component-table-row-alternate-background", + name: "cn-component-table-row-alternate-background", attributes: { category: "component", type: "table", @@ -5297,7 +5297,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for table rows. Provides subtle separation between data rows.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -5308,7 +5308,7 @@ export default { $description: "Border color for table rows. Provides subtle separation between data rows.", }, - name: "canary-component-table-row-border", + name: "cn-component-table-row-border", attributes: { category: "component", type: "table", @@ -5333,7 +5333,7 @@ export default { $description: "Text color for table cell content. Ensures high readability of tabular data.", }, - name: "canary-component-table-cell-text", + name: "cn-component-table-cell-text", attributes: { category: "component", type: "table", @@ -5359,7 +5359,7 @@ export default { $description: "Background color for the tabs container. Creates a consistent foundation for tab elements.", }, - name: "canary-component-tabs-background", + name: "cn-component-tabs-background", attributes: { category: "component", type: "tabs", @@ -5370,7 +5370,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -5381,7 +5381,7 @@ export default { $description: "Border color for tab containers and separators. Provides subtle definition for tab boundaries.", }, - name: "canary-component-tabs-border", + name: "cn-component-tabs-border", attributes: { category: "component", type: "tabs", @@ -5405,7 +5405,7 @@ export default { $description: "Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs.", }, - name: "canary-component-tabs-item-unselected-text", + name: "cn-component-tabs-item-unselected-text", attributes: { category: "component", type: "tabs", @@ -5429,7 +5429,7 @@ export default { $description: "Background color for unselected tab items. Creates visual distinction from the active tab.", }, - name: "canary-component-tabs-item-unselected-background", + name: "cn-component-tabs-item-unselected-background", attributes: { category: "component", type: "tabs", @@ -5453,7 +5453,7 @@ export default { $description: "Border color for unselected tab items. Maintains consistent styling with the tab background.", }, - name: "canary-component-tabs-item-unselected-border", + name: "cn-component-tabs-item-unselected-border", attributes: { category: "component", type: "tabs", @@ -5479,7 +5479,7 @@ export default { $description: "Text color for the selected tab item. Increases contrast to highlight the active tab.", }, - name: "canary-component-tabs-item-selected-text", + name: "cn-component-tabs-item-selected-text", attributes: { category: "component", type: "tabs", @@ -5503,7 +5503,7 @@ export default { $description: "Background color for the selected tab item. Creates strong visual indication of the active tab.", }, - name: "canary-component-tabs-item-selected-background", + name: "cn-component-tabs-item-selected-background", attributes: { category: "component", type: "tabs", @@ -5527,7 +5527,7 @@ export default { $description: "Border color for the selected tab item. Reinforces the active state with defined boundaries.", }, - name: "canary-component-tabs-item-selected-border", + name: "cn-component-tabs-item-selected-border", attributes: { category: "component", type: "tabs", @@ -5556,7 +5556,7 @@ export default { $description: "Text color for blue tags. Ensures readability while maintaining the blue color theme.", }, - name: "canary-component-tag-blue-text", + name: "cn-component-tag-blue-text", attributes: { category: "component", type: "tag", @@ -5579,7 +5579,7 @@ export default { $description: "Background color for blue tags. Creates a distinct surface with blue theme styling.", }, - name: "canary-component-tag-blue-background", + name: "cn-component-tag-blue-background", attributes: { category: "component", type: "tag", @@ -5602,7 +5602,7 @@ export default { $description: "Subtle background variation for blue tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-blue-background-subtle", + name: "cn-component-tag-blue-background-subtle", attributes: { category: "component", type: "tag", @@ -5623,7 +5623,7 @@ export default { $value: "{component.tag.blue.background}", $description: "Border color for blue tags.", }, - name: "canary-component-tag-blue-border", + name: "cn-component-tag-blue-border", attributes: { category: "component", type: "tag", @@ -5648,7 +5648,7 @@ export default { $description: "Text color for brown tags. Ensures readability while maintaining the brown color theme.", }, - name: "canary-component-tag-brown-text", + name: "cn-component-tag-brown-text", attributes: { category: "component", type: "tag", @@ -5671,7 +5671,7 @@ export default { $description: "Background color for brown tags. Creates a distinct surface with brown theme styling.", }, - name: "canary-component-tag-brown-background", + name: "cn-component-tag-brown-background", attributes: { category: "component", type: "tag", @@ -5694,7 +5694,7 @@ export default { $description: "Subtle background variation for brown tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-brown-background-subtle", + name: "cn-component-tag-brown-background-subtle", attributes: { category: "component", type: "tag", @@ -5715,7 +5715,7 @@ export default { $value: "{component.tag.brown.background}", $description: "Border color for brown tags.", }, - name: "canary-component-tag-brown-border", + name: "cn-component-tag-brown-border", attributes: { category: "component", type: "tag", @@ -5740,7 +5740,7 @@ export default { $description: "Text color for cyan tags. Ensures readability while maintaining the cyan color theme.", }, - name: "canary-component-tag-cyan-text", + name: "cn-component-tag-cyan-text", attributes: { category: "component", type: "tag", @@ -5763,7 +5763,7 @@ export default { $description: "Background color for cyan tags. Creates a distinct surface with cyan theme styling.", }, - name: "canary-component-tag-cyan-background", + name: "cn-component-tag-cyan-background", attributes: { category: "component", type: "tag", @@ -5786,7 +5786,7 @@ export default { $description: "Subtle background variation for cyan tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-cyan-background-subtle", + name: "cn-component-tag-cyan-background-subtle", attributes: { category: "component", type: "tag", @@ -5807,7 +5807,7 @@ export default { $value: "{component.tag.cyan.background}", $description: "Border color for cyan tags.", }, - name: "canary-component-tag-cyan-border", + name: "cn-component-tag-cyan-border", attributes: { category: "component", type: "tag", @@ -5832,7 +5832,7 @@ export default { $description: "Text color for green tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-green-text", + name: "cn-component-tag-green-text", attributes: { category: "component", type: "tag", @@ -5855,7 +5855,7 @@ export default { $description: "Background color for green tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-green-background", + name: "cn-component-tag-green-background", attributes: { category: "component", type: "tag", @@ -5878,7 +5878,7 @@ export default { $description: "Subtle background variation for green tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-green-background-subtle", + name: "cn-component-tag-green-background-subtle", attributes: { category: "component", type: "tag", @@ -5899,7 +5899,7 @@ export default { $value: "{component.tag.green.background}", $description: "Border color for green tags, replaced with cyan.", }, - name: "canary-component-tag-green-border", + name: "cn-component-tag-green-border", attributes: { category: "component", type: "tag", @@ -5924,7 +5924,7 @@ export default { $description: "Text color for indigo tags. Ensures readability while maintaining the indigo color theme.", }, - name: "canary-component-tag-indigo-text", + name: "cn-component-tag-indigo-text", attributes: { category: "component", type: "tag", @@ -5947,7 +5947,7 @@ export default { $description: "Background color for indigo tags. Creates a distinct surface with indigo theme styling.", }, - name: "canary-component-tag-indigo-background", + name: "cn-component-tag-indigo-background", attributes: { category: "component", type: "tag", @@ -5970,7 +5970,7 @@ export default { $description: "Subtle background variation for indigo tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-indigo-background-subtle", + name: "cn-component-tag-indigo-background-subtle", attributes: { category: "component", type: "tag", @@ -5991,7 +5991,7 @@ export default { $value: "{component.tag.indigo.background}", $description: "Border color for indigo tags.", }, - name: "canary-component-tag-indigo-border", + name: "cn-component-tag-indigo-border", attributes: { category: "component", type: "tag", @@ -6016,7 +6016,7 @@ export default { $description: "Text color for lime tags. Ensures readability while maintaining the lime color theme.", }, - name: "canary-component-tag-lime-text", + name: "cn-component-tag-lime-text", attributes: { category: "component", type: "tag", @@ -6039,7 +6039,7 @@ export default { $description: "Background color for lime tags. Creates a distinct surface with lime theme styling.", }, - name: "canary-component-tag-lime-background", + name: "cn-component-tag-lime-background", attributes: { category: "component", type: "tag", @@ -6062,7 +6062,7 @@ export default { $description: "Subtle background variation for lime tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-lime-background-subtle", + name: "cn-component-tag-lime-background-subtle", attributes: { category: "component", type: "tag", @@ -6083,7 +6083,7 @@ export default { $value: "{component.tag.lime.background}", $description: "Border color for lime tags.", }, - name: "canary-component-tag-lime-border", + name: "cn-component-tag-lime-border", attributes: { category: "component", type: "tag", @@ -6108,7 +6108,7 @@ export default { $description: "Text color for mint tags. Ensures readability while maintaining the mint color theme.", }, - name: "canary-component-tag-mint-text", + name: "cn-component-tag-mint-text", attributes: { category: "component", type: "tag", @@ -6131,7 +6131,7 @@ export default { $description: "Background color for mint tags. Creates a distinct surface with mint theme styling.", }, - name: "canary-component-tag-mint-background", + name: "cn-component-tag-mint-background", attributes: { category: "component", type: "tag", @@ -6154,7 +6154,7 @@ export default { $description: "Subtle background variation for mint tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-mint-background-subtle", + name: "cn-component-tag-mint-background-subtle", attributes: { category: "component", type: "tag", @@ -6175,7 +6175,7 @@ export default { $value: "{component.tag.mint.background}", $description: "Border color for mint tags.", }, - name: "canary-component-tag-mint-border", + name: "cn-component-tag-mint-border", attributes: { category: "component", type: "tag", @@ -6200,7 +6200,7 @@ export default { $description: "Text color for orange tags. Ensures readability while maintaining the orange color theme.", }, - name: "canary-component-tag-orange-text", + name: "cn-component-tag-orange-text", attributes: { category: "component", type: "tag", @@ -6223,7 +6223,7 @@ export default { $description: "Background color for orange tags. Creates a distinct surface with orange theme styling.", }, - name: "canary-component-tag-orange-background", + name: "cn-component-tag-orange-background", attributes: { category: "component", type: "tag", @@ -6246,7 +6246,7 @@ export default { $description: "Subtle background variation for orange tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-orange-background-subtle", + name: "cn-component-tag-orange-background-subtle", attributes: { category: "component", type: "tag", @@ -6267,7 +6267,7 @@ export default { $value: "{component.tag.orange.background}", $description: "Border color for orange tags.", }, - name: "canary-component-tag-orange-border", + name: "cn-component-tag-orange-border", attributes: { category: "component", type: "tag", @@ -6292,7 +6292,7 @@ export default { $description: "Text color for pink tags. Ensures readability while maintaining the pink color theme.", }, - name: "canary-component-tag-pink-text", + name: "cn-component-tag-pink-text", attributes: { category: "component", type: "tag", @@ -6315,7 +6315,7 @@ export default { $description: "Background color for pink tags. Creates a distinct surface with pink theme styling.", }, - name: "canary-component-tag-pink-background", + name: "cn-component-tag-pink-background", attributes: { category: "component", type: "tag", @@ -6338,7 +6338,7 @@ export default { $description: "Subtle background variation for pink tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-pink-background-subtle", + name: "cn-component-tag-pink-background-subtle", attributes: { category: "component", type: "tag", @@ -6359,7 +6359,7 @@ export default { $value: "{component.tag.pink.background}", $description: "Border color for pink tags.", }, - name: "canary-component-tag-pink-border", + name: "cn-component-tag-pink-border", attributes: { category: "component", type: "tag", @@ -6384,7 +6384,7 @@ export default { $description: "Text color for purple tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-purple-text", + name: "cn-component-tag-purple-text", attributes: { category: "component", type: "tag", @@ -6407,7 +6407,7 @@ export default { $description: "Background color for purple tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-purple-background", + name: "cn-component-tag-purple-background", attributes: { category: "component", type: "tag", @@ -6430,7 +6430,7 @@ export default { $description: "Subtle background variation for purple tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-purple-background-subtle", + name: "cn-component-tag-purple-background-subtle", attributes: { category: "component", type: "tag", @@ -6451,7 +6451,7 @@ export default { $value: "{component.tag.purple.background}", $description: "Border color for purple tags, replaced with cyan.", }, - name: "canary-component-tag-purple-border", + name: "cn-component-tag-purple-border", attributes: { category: "component", type: "tag", @@ -6476,7 +6476,7 @@ export default { $description: "Text color for red tags. Ensures readability while maintaining the red color theme.", }, - name: "canary-component-tag-red-text", + name: "cn-component-tag-red-text", attributes: { category: "component", type: "tag", @@ -6499,7 +6499,7 @@ export default { $description: "Background color for red tags. Creates a distinct surface with red theme styling.", }, - name: "canary-component-tag-red-background", + name: "cn-component-tag-red-background", attributes: { category: "component", type: "tag", @@ -6522,7 +6522,7 @@ export default { $description: "Subtle background variation for red tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-red-background-subtle", + name: "cn-component-tag-red-background-subtle", attributes: { category: "component", type: "tag", @@ -6543,7 +6543,7 @@ export default { $value: "{component.tag.red.background}", $description: "Border color for red tags.", }, - name: "canary-component-tag-red-border", + name: "cn-component-tag-red-border", attributes: { category: "component", type: "tag", @@ -6568,7 +6568,7 @@ export default { $description: "Text color for violet tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-violet-text", + name: "cn-component-tag-violet-text", attributes: { category: "component", type: "tag", @@ -6591,7 +6591,7 @@ export default { $description: "Background color for violet tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-violet-background", + name: "cn-component-tag-violet-background", attributes: { category: "component", type: "tag", @@ -6614,7 +6614,7 @@ export default { $description: "Subtle background variation for violet tags, replaced with cyan for tritanopia visibility.", }, - name: "canary-component-tag-violet-background-subtle", + name: "cn-component-tag-violet-background-subtle", attributes: { category: "component", type: "tag", @@ -6635,7 +6635,7 @@ export default { $value: "{component.tag.violet.background}", $description: "Border color for violet tags, replaced with cyan.", }, - name: "canary-component-tag-violet-border", + name: "cn-component-tag-violet-border", attributes: { category: "component", type: "tag", @@ -6660,7 +6660,7 @@ export default { $description: "Text color for yellow tags, replaced with orange for tritanopia visibility.", }, - name: "canary-component-tag-yellow-text", + name: "cn-component-tag-yellow-text", attributes: { category: "component", type: "tag", @@ -6683,7 +6683,7 @@ export default { $description: "Background color for yellow tags, replaced with orange for tritanopia visibility.", }, - name: "canary-component-tag-yellow-background", + name: "cn-component-tag-yellow-background", attributes: { category: "component", type: "tag", @@ -6706,7 +6706,7 @@ export default { $description: "Subtle background variation for yellow tags, replaced with orange for tritanopia visibility.", }, - name: "canary-component-tag-yellow-background-subtle", + name: "cn-component-tag-yellow-background-subtle", attributes: { category: "component", type: "tag", @@ -6727,7 +6727,7 @@ export default { $value: "{component.tag.yellow.background}", $description: "Border color for yellow tags, replaced with orange.", }, - name: "canary-component-tag-yellow-border", + name: "cn-component-tag-yellow-border", attributes: { category: "component", type: "tag", @@ -6752,7 +6752,7 @@ export default { $description: "Text color for gray tags. Ensures readability while maintaining the gray color theme.", }, - name: "canary-component-tag-gray-text", + name: "cn-component-tag-gray-text", attributes: { category: "component", type: "tag", @@ -6775,7 +6775,7 @@ export default { $description: "Background color for gray tags. Creates a distinct surface with gray theme styling.", }, - name: "canary-component-tag-gray-background", + name: "cn-component-tag-gray-background", attributes: { category: "component", type: "tag", @@ -6798,7 +6798,7 @@ export default { $description: "Subtle background variation for gray tags. Provides a softer alternative for less emphasis.", }, - name: "canary-component-tag-gray-background-subtle", + name: "cn-component-tag-gray-background-subtle", attributes: { category: "component", type: "tag", @@ -6819,7 +6819,7 @@ export default { $value: "{component.tag.gray.background}", $description: "Border color for gray tags.", }, - name: "canary-component-tag-gray-border", + name: "cn-component-tag-gray-border", attributes: { category: "component", type: "tag", @@ -6846,7 +6846,7 @@ export default { $description: "Title text color for informational toast notifications. Ensures high visibility for the notification headline.", }, - name: "canary-component-toast-default-title", + name: "cn-component-toast-default-title", attributes: { category: "component", type: "toast", @@ -6869,7 +6869,7 @@ export default { $description: "Description text color for informational toast notifications. Provides readable contrast for notification content.", }, - name: "canary-component-toast-default-description", + name: "cn-component-toast-default-description", attributes: { category: "component", type: "toast", @@ -6892,7 +6892,7 @@ export default { $description: "Background color for informational toast notifications. Creates visual distinction from UI content beneath.", }, - name: "canary-component-toast-default-background", + name: "cn-component-toast-default-background", attributes: { category: "component", type: "toast", @@ -6904,7 +6904,7 @@ export default { }, border: { $type: "color", - $value: "lch(from var(--canary-colors-chrome-100) l c h / 0.8)", + $value: "lch(from var(--cn-colors-chrome-100) l c h / 0.8)", $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -6915,7 +6915,7 @@ export default { $description: "Border color for informational toast notifications. Subtly defines the notification's boundaries.", }, - name: "canary-component-toast-default-border", + name: "cn-component-toast-default-border", attributes: { category: "component", type: "toast", @@ -6940,7 +6940,7 @@ export default { $description: "Title text color for danger toast notifications. Provides maximum contrast against the error background.", }, - name: "canary-component-toast-danger-title", + name: "cn-component-toast-danger-title", attributes: { category: "component", type: "toast", @@ -6963,7 +6963,7 @@ export default { $description: "Description text color for danger toast notifications. Ensures readability of critical information.", }, - name: "canary-component-toast-danger-description", + name: "cn-component-toast-danger-description", attributes: { category: "component", type: "toast", @@ -6986,7 +6986,7 @@ export default { $description: "Background color for danger toast notifications. Creates high-visibility indication of errors or warnings.", }, - name: "canary-component-toast-danger-background", + name: "cn-component-toast-danger-background", attributes: { category: "component", type: "toast", @@ -7009,7 +7009,7 @@ export default { $description: "Border color for danger toast notifications. Reinforces the critical nature of the notification message.", }, - name: "canary-component-toast-danger-border", + name: "cn-component-toast-danger-border", attributes: { category: "component", type: "toast", @@ -7035,7 +7035,7 @@ export default { $description: "Text color for tooltip content. Ensures readability of helpful contextual information.", }, - name: "canary-component-tooltip-text", + name: "cn-component-tooltip-text", attributes: { category: "component", type: "tooltip", @@ -7057,7 +7057,7 @@ export default { $description: "Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements.", }, - name: "canary-component-tooltip-background", + name: "cn-component-tooltip-background", attributes: { category: "component", type: "tooltip", @@ -7079,7 +7079,7 @@ export default { $type: "color", $value: "{colors.orange.200}", }, - name: "canary-gradient-ai-gradient-stop-1", + name: "cn-gradient-ai-gradient-stop-1", attributes: { category: "gradient", type: "ai", @@ -7097,7 +7097,7 @@ export default { $type: "color", $value: "{colors.pink.300}", }, - name: "canary-gradient-ai-gradient-stop-2", + name: "cn-gradient-ai-gradient-stop-2", attributes: { category: "gradient", type: "ai", @@ -7115,7 +7115,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-gradient-ai-gradient-stop-3", + name: "cn-gradient-ai-gradient-stop-3", attributes: { category: "gradient", type: "ai", @@ -7133,7 +7133,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-gradient-ai-gradient-stop-4", + name: "cn-gradient-ai-gradient-stop-4", attributes: { category: "gradient", type: "ai", @@ -7153,7 +7153,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-1", + name: "cn-gradient-skeleton-gradient-stop-1", attributes: { category: "gradient", type: "skeleton", @@ -7171,7 +7171,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-skeleton-gradient-stop-2", + name: "cn-gradient-skeleton-gradient-stop-2", attributes: { category: "gradient", type: "skeleton", @@ -7189,7 +7189,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-skeleton-gradient-stop-3", + name: "cn-gradient-skeleton-gradient-stop-3", attributes: { category: "gradient", type: "skeleton", @@ -7210,7 +7210,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-1", + name: "cn-gradient-pipeline-running-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7231,7 +7231,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-200) l c h / 0.4)", + $value: "lch(from var(--cn-colors-chrome-200) l c h / 0.4)", filePath: "design-tokens/mode/light/default-tritanopia.json", isSource: true, original: { @@ -7247,7 +7247,7 @@ export default { $type: "color", $value: "{colors.chrome.200}", }, - name: "canary-gradient-pipeline-running-gradient-stop-2", + name: "cn-gradient-pipeline-running-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7266,7 +7266,7 @@ export default { $type: "color", $value: "{colors.orange.300}", }, - name: "canary-gradient-pipeline-running-gradient-stop-3", + name: "cn-gradient-pipeline-running-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -7287,7 +7287,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-1", + name: "cn-gradient-pipeline-arrows-gradient-stop-1", attributes: { category: "gradient", type: "pipeline", @@ -7306,7 +7306,7 @@ export default { $type: "color", $value: "{colors.blue.400}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-2", + name: "cn-gradient-pipeline-arrows-gradient-stop-2", attributes: { category: "gradient", type: "pipeline", @@ -7325,7 +7325,7 @@ export default { $type: "color", $value: "{border.1}", }, - name: "canary-gradient-pipeline-arrows-gradient-stop-3", + name: "cn-gradient-pipeline-arrows-gradient-stop-3", attributes: { category: "gradient", type: "pipeline", @@ -7347,7 +7347,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-card-background-gradient-from", + name: "cn-gradient-pipeline-card-background-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -7373,7 +7373,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-background-gradient-to", + name: "cn-gradient-pipeline-card-background-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -7395,7 +7395,7 @@ export default { $type: "color", $value: "{colors.chrome.50}", }, - name: "canary-gradient-pipeline-card-border-gradient-from", + name: "cn-gradient-pipeline-card-border-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -7415,7 +7415,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-card-border-gradient-to", + name: "cn-gradient-pipeline-card-border-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -7439,7 +7439,7 @@ export default { $type: "color", $value: "{colors.chrome.500}", }, - name: "canary-gradient-pipeline-widget-number-gradient-from", + name: "cn-gradient-pipeline-widget-number-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -7459,7 +7459,7 @@ export default { $type: "color", $value: "{colors.chrome.600}", }, - name: "canary-gradient-pipeline-widget-number-gradient-to", + name: "cn-gradient-pipeline-widget-number-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -7482,7 +7482,7 @@ export default { $type: "color", $value: "{colors.chrome.100}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-from", + name: "cn-gradient-pipeline-widget-blob-big-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -7509,7 +7509,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-big-gradient-to", + name: "cn-gradient-pipeline-widget-blob-big-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -7538,7 +7538,7 @@ export default { $type: "color", $value: "{colors.chrome.150}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-from", + name: "cn-gradient-pipeline-widget-blob-small-gradient-from", attributes: { category: "gradient", type: "pipeline", @@ -7565,7 +7565,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-gradient-pipeline-widget-blob-small-gradient-to", + name: "cn-gradient-pipeline-widget-blob-small-gradient-to", attributes: { category: "gradient", type: "pipeline", @@ -7591,7 +7591,7 @@ export default { shadow: { 0: { $type: "shadow", - $value: "0 0 0 0 lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "0 0 0 0 lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "No shadow. \nCommon uses: Flat designs, disabled states, removing shadows on mobile.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -7619,7 +7619,7 @@ export default { }, }, }, - name: "canary-shadow-0", + name: "cn-shadow-0", attributes: { category: "shadow", type: "0", @@ -7629,8 +7629,7 @@ export default { }, 1: { $type: "shadow", - $value: - "0 1px 2px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "0 1px 2px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Small shadow. \nCommon uses: Buttons in their rest state, form inputs, subtle UI elements.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -7658,7 +7657,7 @@ export default { }, }, }, - name: "canary-shadow-1", + name: "cn-shadow-1", attributes: { category: "shadow", type: "1", @@ -7669,7 +7668,7 @@ export default { 2: { $type: "shadow", $value: - "0 1px 3px 0 lch(from var(--canary-colors-chrome-300) l c h / 0.6), 0 1px 2px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + "0 1px 3px 0 lch(from var(--cn-colors-chrome-300) l c h / 0.6), 0 1px 2px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Default shadow. \nCommon uses: Cards, dropdowns, popovers in their default state.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -7707,7 +7706,7 @@ export default { }, }, }, - name: "canary-shadow-2", + name: "cn-shadow-2", attributes: { category: "shadow", type: "2", @@ -7718,7 +7717,7 @@ export default { 3: { $type: "shadow", $value: - "0 4px 6px -1px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 2px 4px -2px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + "0 4px 6px -1px lch(from var(--cn-colors-chrome-300) l c h / 0.5), 0 2px 4px -2px lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Medium shadow. \nCommon uses: Elevated cards, active buttons, interactive elements on hover.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -7756,7 +7755,7 @@ export default { }, }, }, - name: "canary-shadow-3", + name: "cn-shadow-3", attributes: { category: "shadow", type: "3", @@ -7767,7 +7766,7 @@ export default { 4: { $type: "shadow", $value: - "0 10px 15px -3px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 4px 6px -4px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + "0 10px 15px -3px lch(from var(--cn-colors-chrome-300) l c h / 0.5), 0 4px 6px -4px lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Large shadow. \nCommon uses: Modals, floating panels, navigation dropdowns.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -7805,7 +7804,7 @@ export default { }, }, }, - name: "canary-shadow-4", + name: "cn-shadow-4", attributes: { category: "shadow", type: "4", @@ -7816,7 +7815,7 @@ export default { 5: { $type: "shadow", $value: - "0 20px 25px -5px lch(from var(--canary-colors-chrome-300) l c h / 0.5), 0 8px 10px -6px lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + "0 20px 25px -5px lch(from var(--cn-colors-chrome-300) l c h / 0.5), 0 8px 10px -6px lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Extra large shadow. \nCommon uses: Large modals, sidebars, elevated content sections.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -7854,7 +7853,7 @@ export default { }, }, }, - name: "canary-shadow-5", + name: "cn-shadow-5", attributes: { category: "shadow", type: "5", @@ -7865,7 +7864,7 @@ export default { 6: { $type: "shadow", $value: - "0 25px 50px -12px lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + "0 25px 50px -12px lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Extra extra large shadow.\nCommon uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -7893,7 +7892,7 @@ export default { }, }, }, - name: "canary-shadow-6", + name: "cn-shadow-6", attributes: { category: "shadow", type: "6", @@ -7904,7 +7903,7 @@ export default { inner: { $type: "shadow", $value: - "inset 0 2px 4px 0 lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + "inset 0 2px 4px 0 lch(from var(--cn-colors-chrome-900) l c h / 0.1)", $description: "Inner shadow. \nCommon uses: Pressed buttons, selected states, inset form fields.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -7932,7 +7931,7 @@ export default { }, }, }, - name: "canary-shadow-inner", + name: "cn-shadow-inner", attributes: { category: "shadow", type: "inner", @@ -7953,7 +7952,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0)", $description: "Transparent shadow color. Used when no shadow effect is desired.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -7973,7 +7972,7 @@ export default { $description: "Transparent shadow color. Used when no shadow effect is desired.", }, - name: "canary-shadow-color-0", + name: "cn-shadow-color-0", attributes: { category: "shadow-color", type: "0", @@ -7992,7 +7991,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -8012,7 +8011,7 @@ export default { $description: "Light shadow color with 60% opacity. Creates subtle depth for small UI elements.", }, - name: "canary-shadow-color-1", + name: "cn-shadow-color-1", attributes: { category: "shadow-color", type: "1", @@ -8031,7 +8030,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -8051,7 +8050,7 @@ export default { $description: "Medium shadow color with 60% opacity. Provides balanced depth for common UI components.", }, - name: "canary-shadow-color-2", + name: "cn-shadow-color-2", attributes: { category: "shadow-color", type: "2", @@ -8070,7 +8069,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -8090,7 +8089,7 @@ export default { $description: "Medium shadow color with 50% opacity. Creates moderate depth for elevated components.", }, - name: "canary-shadow-color-3", + name: "cn-shadow-color-3", attributes: { category: "shadow-color", type: "3", @@ -8109,7 +8108,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -8129,7 +8128,7 @@ export default { $description: "Deep shadow color with 50% opacity. Provides significant depth for floating elements.", }, - name: "canary-shadow-color-4", + name: "cn-shadow-color-4", attributes: { category: "shadow-color", type: "4", @@ -8148,7 +8147,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.5)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.5)", $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -8168,7 +8167,7 @@ export default { $description: "Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content.", }, - name: "canary-shadow-color-5", + name: "cn-shadow-color-5", attributes: { category: "shadow-color", type: "5", @@ -8187,7 +8186,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-300) l c h / 0.6)", + $value: "lch(from var(--cn-colors-chrome-300) l c h / 0.6)", $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -8207,7 +8206,7 @@ export default { $description: "Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements.", }, - name: "canary-shadow-color-6", + name: "cn-shadow-color-6", attributes: { category: "shadow-color", type: "6", @@ -8226,7 +8225,7 @@ export default { }, }, $type: "color", - $value: "lch(from var(--canary-colors-chrome-900) l c h / 0.1)", + $value: "lch(from var(--cn-colors-chrome-900) l c h / 0.1)", $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", filePath: "design-tokens/mode/light/default-tritanopia.json", @@ -8246,7 +8245,7 @@ export default { $description: "Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states.", }, - name: "canary-shadow-color-inner", + name: "cn-shadow-color-inner", attributes: { category: "shadow-color", type: "inner", @@ -8297,7 +8296,7 @@ export default { }, }, }, - name: "canary-ring-focus", + name: "cn-ring-focus", attributes: { category: "ring", type: "focus", @@ -8326,7 +8325,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xxs", + name: "cn-icon-stroke-width-xxs", attributes: { category: "iconStrokeWidth", type: "xxs", @@ -8353,7 +8352,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-xs", + name: "cn-icon-stroke-width-xs", attributes: { category: "iconStrokeWidth", type: "xs", @@ -8380,7 +8379,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-sm", + name: "cn-icon-stroke-width-sm", attributes: { category: "iconStrokeWidth", type: "sm", @@ -8407,7 +8406,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-default", + name: "cn-icon-stroke-width-default", attributes: { category: "iconStrokeWidth", type: "default", @@ -8434,7 +8433,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-md", + name: "cn-icon-stroke-width-md", attributes: { category: "iconStrokeWidth", type: "md", @@ -8461,7 +8460,7 @@ export default { }, }, }, - name: "canary-icon-stroke-width-lg", + name: "cn-icon-stroke-width-lg", attributes: { category: "iconStrokeWidth", type: "lg", @@ -8481,7 +8480,7 @@ export default { $type: "color", $value: "{colors.cyan.50}", }, - name: "canary-brand-color-50", + name: "cn-brand-color-50", attributes: { category: "brand", type: "color", @@ -8499,7 +8498,7 @@ export default { $type: "color", $value: "{colors.cyan.100}", }, - name: "canary-brand-color-100", + name: "cn-brand-color-100", attributes: { category: "brand", type: "color", @@ -8517,7 +8516,7 @@ export default { $type: "color", $value: "{colors.cyan.200}", }, - name: "canary-brand-color-200", + name: "cn-brand-color-200", attributes: { category: "brand", type: "color", @@ -8535,7 +8534,7 @@ export default { $type: "color", $value: "{colors.cyan.300}", }, - name: "canary-brand-color-300", + name: "cn-brand-color-300", attributes: { category: "brand", type: "color", @@ -8553,7 +8552,7 @@ export default { $type: "color", $value: "{colors.cyan.400}", }, - name: "canary-brand-color-400", + name: "cn-brand-color-400", attributes: { category: "brand", type: "color", @@ -8571,7 +8570,7 @@ export default { $type: "color", $value: "{colors.cyan.500}", }, - name: "canary-brand-color-500", + name: "cn-brand-color-500", attributes: { category: "brand", type: "color", @@ -8589,7 +8588,7 @@ export default { $type: "color", $value: "{colors.cyan.600}", }, - name: "canary-brand-color-600", + name: "cn-brand-color-600", attributes: { category: "brand", type: "color", @@ -8607,7 +8606,7 @@ export default { $type: "color", $value: "{colors.cyan.700}", }, - name: "canary-brand-color-700", + name: "cn-brand-color-700", attributes: { category: "brand", type: "color", @@ -8625,7 +8624,7 @@ export default { $type: "color", $value: "{colors.cyan.800}", }, - name: "canary-brand-color-800", + name: "cn-brand-color-800", attributes: { category: "brand", type: "color", @@ -8643,7 +8642,7 @@ export default { $type: "color", $value: "{colors.cyan.900}", }, - name: "canary-brand-color-900", + name: "cn-brand-color-900", attributes: { category: "brand", type: "color", @@ -8661,7 +8660,7 @@ export default { $type: "color", $value: "{colors.cyan.950}", }, - name: "canary-brand-color-950", + name: "cn-brand-color-950", attributes: { category: "brand", type: "color", @@ -8681,7 +8680,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-50", + name: "cn-brand-on-color-50", attributes: { category: "brand", type: "onColor", @@ -8699,7 +8698,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-100", + name: "cn-brand-on-color-100", attributes: { category: "brand", type: "onColor", @@ -8717,7 +8716,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-200", + name: "cn-brand-on-color-200", attributes: { category: "brand", type: "onColor", @@ -8735,7 +8734,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-300", + name: "cn-brand-on-color-300", attributes: { category: "brand", type: "onColor", @@ -8753,7 +8752,7 @@ export default { $type: "color", $value: "{colors.chrome.950}", }, - name: "canary-brand-on-color-400", + name: "cn-brand-on-color-400", attributes: { category: "brand", type: "onColor", @@ -8771,7 +8770,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-500", + name: "cn-brand-on-color-500", attributes: { category: "brand", type: "onColor", @@ -8789,7 +8788,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-600", + name: "cn-brand-on-color-600", attributes: { category: "brand", type: "onColor", @@ -8807,7 +8806,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-700", + name: "cn-brand-on-color-700", attributes: { category: "brand", type: "onColor", @@ -8825,7 +8824,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-800", + name: "cn-brand-on-color-800", attributes: { category: "brand", type: "onColor", @@ -8843,7 +8842,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-900", + name: "cn-brand-on-color-900", attributes: { category: "brand", type: "onColor", @@ -8861,7 +8860,7 @@ export default { $type: "color", $value: "{colors.pure.white}", }, - name: "canary-brand-on-color-950", + name: "cn-brand-on-color-950", attributes: { category: "brand", type: "onColor", diff --git a/packages/core-design-system/src/styles/breakpoint.css b/packages/core-design-system/src/styles/breakpoint.css index feac1b2ca6..9c104993c7 100644 --- a/packages/core-design-system/src/styles/breakpoint.css +++ b/packages/core-design-system/src/styles/breakpoint.css @@ -1,36 +1,36 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:32 GMT + * Generated on Tue, 18 Mar 2025 06:44:26 GMT * Copyright (c) Harness. */ :root { - --canary-breakpoint-viewport: 1440; - --canary-breakpoint-viewport-min: 1080; - --canary-breakpoint-viewport-max: 1919; - --canary-component-markdown-editor-title-h1: var(--canary-font-weight-default-normal-600) var(--canary-font-size-7)/var(--canary-line-height-7-normal) var(--canary-font-family-default); /* Article main heading. */ - --canary-component-markdown-editor-title-h2: var(--canary-font-weight-default-normal-600) var(--canary-font-size-6)/var(--canary-line-height-6-normal) var(--canary-font-family-default); /* Article section heading. */ - --canary-component-markdown-editor-title-h3: var(--canary-font-weight-default-normal-600) var(--canary-font-size-3)/var(--canary-line-height-3-normal) var(--canary-font-family-default); /* Article subsection heading. */ - --canary-component-markdown-editor-content-lead: var(--canary-font-weight-default-normal-400) var(--canary-font-size-5)/var(--canary-line-height-5-normal) var(--canary-font-family-default); /* Article introduction paragraph. */ - --canary-component-markdown-editor-content-paragraph: var(--canary-font-weight-default-normal-400) var(--canary-font-size-3)/var(--canary-line-height-3-relaxed) var(--canary-font-family-default); /* Article paragraph text. */ - --canary-component-markdown-editor-content-emphasized: var(--canary-font-weight-default-normal-500) var(--canary-font-size-3)/var(--canary-line-height-3-relaxed) var(--canary-font-family-default); /* Emphasized paragraph text. */ - --canary-breakpoint-container: var(--canary-spacing-8); - --canary-heading-hero: var(--canary-font-weight-default-normal-500) var(--canary-font-size-9)/var(--canary-line-height-9-tight) var(--canary-font-family-default); /* Large headlines with extra emphasis. */ - --canary-heading-section: var(--canary-font-weight-default-normal-500) var(--canary-font-size-7)/var(--canary-line-height-7-tight) var(--canary-font-family-default); /* Large headlines, hero sections. */ - --canary-heading-subsection: var(--canary-font-weight-default-normal-500) var(--canary-font-size-6)/var(--canary-line-height-6-tight) var(--canary-font-family-default); /* Emphasized section headers. */ - --canary-heading-dialog: var(--canary-font-weight-default-normal-500) var(--canary-font-size-5)/var(--canary-line-height-5-tight) var(--canary-font-family-default); /* Dialog headers. */ - --canary-heading-base: var(--canary-font-weight-default-normal-500) var(--canary-font-size-3)/var(--canary-line-height-3-tight) var(--canary-font-family-default); /* Section headers. */ - --canary-heading-small: var(--canary-font-weight-default-normal-600) var(--canary-font-size-2)/var(--canary-line-height-2-snug) var(--canary-font-family-default); /* Section headers. */ - --canary-body-normal: var(--canary-font-weight-default-normal-400) var(--canary-font-size-2)/var(--canary-line-height-2-snug) var(--canary-font-family-default); /* Primary text style for UI and content. */ - --canary-body-strong: var(--canary-font-weight-default-normal-500) var(--canary-font-size-2)/var(--canary-line-height-2-snug) var(--canary-font-family-default); /* Primary text style for UI and content. */ - --canary-body-code: var(--canary-font-weight-default-normal-400) var(--canary-font-size-2)/var(--canary-line-height-2-normal) var(--canary-font-family-mono); /* Code blocks and larger code snippets. */ - --canary-body-none-normal: var(--canary-font-weight-default-normal-400) var(--canary-font-size-2)/var(--canary-line-height-2-none) var(--canary-font-family-default); /* Primary text style for UI and content. */ - --canary-body-none-strong: var(--canary-font-weight-default-normal-500) var(--canary-font-size-2)/var(--canary-line-height-2-none) var(--canary-font-family-default); - --canary-body-tight-normal: var(--canary-font-weight-default-normal-400) var(--canary-font-size-2)/var(--canary-line-height-2-tight) var(--canary-font-family-default); /* Primary text style for UI and content. */ - --canary-body-tight-strong: var(--canary-font-weight-default-normal-500) var(--canary-font-size-2)/var(--canary-line-height-2-tight) var(--canary-font-family-default); - --canary-caption-normal: var(--canary-font-weight-default-normal-500) var(--canary-font-size-1)/var(--canary-line-height-1-snug) var(--canary-font-family-default); /* Primary caption style, small but important text. */ - --canary-caption-soft: var(--canary-font-weight-default-normal-400) var(--canary-font-size-1)/var(--canary-line-height-1-snug) var(--canary-font-family-default); /* Helper text, meta information. */ - --canary-caption-none-normal: var(--canary-font-weight-default-normal-500) var(--canary-font-size-1)/var(--canary-line-height-1-none) var(--canary-font-family-default); /* Primary caption style, small but important text. */ - --canary-caption-none-soft: var(--canary-font-weight-default-normal-400) var(--canary-font-size-1)/var(--canary-line-height-1-none) var(--canary-font-family-default); /* Helper text, meta information. */ + --cn-breakpoint-viewport: 1440; + --cn-breakpoint-viewport-min: 1080; + --cn-breakpoint-viewport-max: 1919; + --cn-component-markdown-editor-title-h1: var(--cn-font-weight-default-normal-600) var(--cn-font-size-7)/var(--cn-line-height-7-normal) var(--cn-font-family-default); /* Article main heading. */ + --cn-component-markdown-editor-title-h2: var(--cn-font-weight-default-normal-600) var(--cn-font-size-6)/var(--cn-line-height-6-normal) var(--cn-font-family-default); /* Article section heading. */ + --cn-component-markdown-editor-title-h3: var(--cn-font-weight-default-normal-600) var(--cn-font-size-3)/var(--cn-line-height-3-normal) var(--cn-font-family-default); /* Article subsection heading. */ + --cn-component-markdown-editor-content-lead: var(--cn-font-weight-default-normal-400) var(--cn-font-size-5)/var(--cn-line-height-5-normal) var(--cn-font-family-default); /* Article introduction paragraph. */ + --cn-component-markdown-editor-content-paragraph: var(--cn-font-weight-default-normal-400) var(--cn-font-size-3)/var(--cn-line-height-3-relaxed) var(--cn-font-family-default); /* Article paragraph text. */ + --cn-component-markdown-editor-content-emphasized: var(--cn-font-weight-default-normal-500) var(--cn-font-size-3)/var(--cn-line-height-3-relaxed) var(--cn-font-family-default); /* Emphasized paragraph text. */ + --cn-breakpoint-container: var(--cn-spacing-8); + --cn-heading-hero: var(--cn-font-weight-default-normal-500) var(--cn-font-size-9)/var(--cn-line-height-9-tight) var(--cn-font-family-default); /* Large headlines with extra emphasis. */ + --cn-heading-section: var(--cn-font-weight-default-normal-500) var(--cn-font-size-7)/var(--cn-line-height-7-tight) var(--cn-font-family-default); /* Large headlines, hero sections. */ + --cn-heading-subsection: var(--cn-font-weight-default-normal-500) var(--cn-font-size-6)/var(--cn-line-height-6-tight) var(--cn-font-family-default); /* Emphasized section headers. */ + --cn-heading-dialog: var(--cn-font-weight-default-normal-500) var(--cn-font-size-5)/var(--cn-line-height-5-tight) var(--cn-font-family-default); /* Dialog headers. */ + --cn-heading-base: var(--cn-font-weight-default-normal-500) var(--cn-font-size-3)/var(--cn-line-height-3-tight) var(--cn-font-family-default); /* Section headers. */ + --cn-heading-small: var(--cn-font-weight-default-normal-600) var(--cn-font-size-2)/var(--cn-line-height-2-snug) var(--cn-font-family-default); /* Section headers. */ + --cn-body-normal: var(--cn-font-weight-default-normal-400) var(--cn-font-size-2)/var(--cn-line-height-2-snug) var(--cn-font-family-default); /* Primary text style for UI and content. */ + --cn-body-strong: var(--cn-font-weight-default-normal-500) var(--cn-font-size-2)/var(--cn-line-height-2-snug) var(--cn-font-family-default); /* Primary text style for UI and content. */ + --cn-body-code: var(--cn-font-weight-default-normal-400) var(--cn-font-size-2)/var(--cn-line-height-2-normal) var(--cn-font-family-mono); /* Code blocks and larger code snippets. */ + --cn-body-none-normal: var(--cn-font-weight-default-normal-400) var(--cn-font-size-2)/var(--cn-line-height-2-none) var(--cn-font-family-default); /* Primary text style for UI and content. */ + --cn-body-none-strong: var(--cn-font-weight-default-normal-500) var(--cn-font-size-2)/var(--cn-line-height-2-none) var(--cn-font-family-default); + --cn-body-tight-normal: var(--cn-font-weight-default-normal-400) var(--cn-font-size-2)/var(--cn-line-height-2-tight) var(--cn-font-family-default); /* Primary text style for UI and content. */ + --cn-body-tight-strong: var(--cn-font-weight-default-normal-500) var(--cn-font-size-2)/var(--cn-line-height-2-tight) var(--cn-font-family-default); + --cn-caption-normal: var(--cn-font-weight-default-normal-500) var(--cn-font-size-1)/var(--cn-line-height-1-snug) var(--cn-font-family-default); /* Primary caption style, small but important text. */ + --cn-caption-soft: var(--cn-font-weight-default-normal-400) var(--cn-font-size-1)/var(--cn-line-height-1-snug) var(--cn-font-family-default); /* Helper text, meta information. */ + --cn-caption-none-normal: var(--cn-font-weight-default-normal-500) var(--cn-font-size-1)/var(--cn-line-height-1-none) var(--cn-font-family-default); /* Primary caption style, small but important text. */ + --cn-caption-none-soft: var(--cn-font-weight-default-normal-400) var(--cn-font-size-1)/var(--cn-line-height-1-none) var(--cn-font-family-default); /* Helper text, meta information. */ } diff --git a/packages/core-design-system/src/styles/colors.css b/packages/core-design-system/src/styles/colors.css index a9745a3f2a..93a1aa38de 100644 --- a/packages/core-design-system/src/styles/colors.css +++ b/packages/core-design-system/src/styles/colors.css @@ -1,179 +1,179 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:32 GMT + * Generated on Tue, 18 Mar 2025 06:44:26 GMT * Copyright (c) Harness. */ :root { - --canary-colors-pure-white: lch(100% 0 134.54); - --canary-colors-pure-black: lch(2.44% 1.49 285.81); - --canary-colors-chrome-50: lch(98.27% 0.36 135.2); - --canary-colors-chrome-100: lch(90.71% 0.38 284.93); - --canary-colors-chrome-150: lch(85.99% 3.77 285.34); - --canary-colors-chrome-200: lch(81.33% 4.52 285.46); - --canary-colors-chrome-300: lch(74.37% 4.52 285.5); - --canary-colors-chrome-400: lch(67.41% 4.51 285.56); - --canary-colors-chrome-500: lch(58.08% 6.76 286.02); - --canary-colors-chrome-600: lch(46.46% 7.5 286.37); - --canary-colors-chrome-700: lch(39.46% 8.98 286.89); - --canary-colors-chrome-800: lch(26.73% 7.48 287.06); - --canary-colors-chrome-850: lch(18.63% 6.73 287.29); - --canary-colors-chrome-900: lch(8.25% 4.49 287.18); - --canary-colors-chrome-950: lch(5.2% 3.07 285.78); - --canary-colors-chrome-1000: lch(3.66% 1.93 285.7); - --canary-colors-blue-50: lch(95.27% 4.16 280.86); - --canary-colors-blue-100: lch(89.92% 10.91 279.8); - --canary-colors-blue-200: lch(73.08% 34.81 281.21); - --canary-colors-blue-300: lch(63.4% 48.44 281.2); - --canary-colors-blue-400: lch(54.29% 60.55 281.11); - --canary-colors-blue-500: lch(47.04% 69.94 279.78); - --canary-colors-blue-600: lch(35.67% 59.7 280.58); - --canary-colors-blue-700: lch(27.25% 49.8 280.51); - --canary-colors-blue-800: lch(18.28% 39.2 280.4); - --canary-colors-blue-900: lch(9.63% 33.17 284.31); - --canary-colors-blue-950: lch(2.52% 22.28 283.9); - --canary-colors-cyan-50: lch(95.4% 5 238.5); - --canary-colors-cyan-100: lch(90.24% 13.5 239.5); - --canary-colors-cyan-200: lch(74.15% 29 241); - --canary-colors-cyan-300: lch(65.49% 45.28 239); - --canary-colors-cyan-400: lch(56.15% 44.5 246.5); - --canary-colors-cyan-500: lch(46.84% 41.5 250); - --canary-colors-cyan-600: lch(37.53% 36.5 254); - --canary-colors-cyan-700: lch(28.81% 30 257.5); - --canary-colors-cyan-800: lch(19.49% 23 261.5); - --canary-colors-cyan-900: lch(10.76% 15.5 265); - --canary-colors-cyan-950: lch(3.09% 7.5 268); - --canary-colors-red-50: lch(95.23% 5.25 32.59); - --canary-colors-red-100: lch(89.81% 13.4 32.67); - --canary-colors-red-200: lch(72.7% 48.17 33.53); - --canary-colors-red-300: lch(65.59% 65.99 34.56); - --canary-colors-red-400: lch(53.74% 88.37 37.69); - --canary-colors-red-500: lch(44.74% 76.92 37.68); - --canary-colors-red-600: lch(35.74% 65.47 37.67); - --canary-colors-red-700: lch(27.3% 54.82 37.68); - --canary-colors-red-800: lch(18.31% 42.35 35.83); - --canary-colors-red-900: lch(9.87% 29.51 28.59); - --canary-colors-red-950: lch(2.8% 10.22 21.65); - --canary-colors-pink-50: lch(95.15% 5.42 350.29); - --canary-colors-pink-100: lch(89.61% 13.47 350.26); - --canary-colors-pink-200: lch(72% 46.72 350.11); - --canary-colors-pink-300: lch(61.26% 69.37 350); - --canary-colors-pink-400: lch(53.21% 65.17 349.99); - --canary-colors-pink-500: lch(44.27% 56.78 349.99); - --canary-colors-pink-600: lch(35.34% 48.39 349.99); - --canary-colors-pink-700: lch(26.98% 40.34 349.99); - --canary-colors-pink-800: lch(18.05% 31.95 349.99); - --canary-colors-pink-900: lch(9.69% 23.89 349.99); - --canary-colors-pink-950: lch(2.74% 8.62 350.99); - --canary-colors-peach-50: lch(95.22% 5.2 27.21); - --canary-colors-peach-100: lch(89.79% 12.88 27.31); - --canary-colors-peach-200: lch(72.22% 46.73 23.25); - --canary-colors-peach-300: lch(62.66% 70.81 29.46); - --canary-colors-peach-400: lch(53.64% 82.24 30.93); - --canary-colors-peach-500: lch(44.66% 71.48 30.92); - --canary-colors-peach-600: lch(35.68% 60.73 30.9); - --canary-colors-peach-700: lch(27.25% 50.72 30.88); - --canary-colors-peach-800: lch(18.26% 40.26 30.65); - --canary-colors-peach-900: lch(9.84% 28.78 25.16); - --canary-colors-peach-950: lch(2.79% 10.24 18.76); - --canary-colors-yellow-50: lch(95.62% 18.31 92.87); - --canary-colors-yellow-100: lch(90.23% 26.34 77.18); - --canary-colors-yellow-200: lch(73.82% 74.92 75.35); - --canary-colors-yellow-300: lch(64.58% 68.1 76.07); - --canary-colors-yellow-400: lch(55.9% 60.21 76.41); - --canary-colors-yellow-500: lch(46.64% 52.59 77.11); - --canary-colors-yellow-600: lch(37.37% 44.92 77.47); - --canary-colors-yellow-700: lch(28.67% 36.97 77.45); - --canary-colors-yellow-800: lch(19.4% 27.53 77.01); - --canary-colors-yellow-900: lch(10.69% 16.28 73.34); - --canary-colors-yellow-950: lch(3.06% 4.5 71.6); - --canary-colors-orange-50: lch(95.42% 10.03 79.83); - --canary-colors-orange-100: lch(90.02% 17.62 61.56); - --canary-colors-orange-200: lch(74.82% 51.93 49.87); - --canary-colors-orange-300: lch(63.38% 78.04 52.26); - --canary-colors-orange-400: lch(54.81% 69.74 52.27); - --canary-colors-orange-500: lch(45.68% 60.45 52.23); - --canary-colors-orange-600: lch(36.54% 51.77 52.28); - --canary-colors-orange-700: lch(27.78% 46.26 47.39); - --canary-colors-orange-800: lch(18.69% 35.31 45.59); - --canary-colors-orange-900: lch(10.26% 21.63 42.58); - --canary-colors-orange-950: lch(2.93% 6.64 36.42); - --canary-colors-brown-50: lch(95.55% 12.75 93.47); - --canary-colors-brown-100: lch(90.24% 19.27 79.52); - --canary-colors-brown-200: lch(73.38% 45.67 56.65); - --canary-colors-brown-300: lch(64.06% 48.96 57.29); - --canary-colors-brown-400: lch(57.17% 44.39 57.69); - --canary-colors-brown-500: lch(46.22% 37.68 57.68); - --canary-colors-brown-600: lch(37.01% 31.77 57.67); - --canary-colors-brown-700: lch(28.37% 26.84 58.1); - --canary-colors-brown-800: lch(19.16% 20.96 58.49); - --canary-colors-brown-900: lch(10.55% 13.64 57.69); - --canary-colors-brown-950: lch(3% 4.01 51.14); - --canary-colors-green-50: lch(95.82% 11.79 156.15); - --canary-colors-green-100: lch(91.19% 27.27 156.17); - --canary-colors-green-200: lch(73.78% 60.44 156.25); - --canary-colors-green-300: lch(66.65% 55.77 156.25); - --canary-colors-green-400: lch(57.73% 49.65 156.25); - --canary-colors-green-500: lch(48.21% 43.17 156.25); - --canary-colors-green-600: lch(38.71% 37.07 156.25); - --canary-colors-green-700: lch(29.79% 30.94 156.25); - --canary-colors-green-800: lch(20.26% 24.09 156.25); - --canary-colors-green-900: lch(11.35% 18.27 156.36); - --canary-colors-green-950: lch(3.27% 5.33 156.53); - --canary-colors-mint-50: lch(95.82% 11.97 171.06); - --canary-colors-mint-100: lch(91.09% 25.48 176.08); - --canary-colors-mint-200: lch(73.4% 50.15 176.67); - --canary-colors-mint-300: lch(66.3% 46.27 176.67); - --canary-colors-mint-400: lch(57.46% 42.15 174.53); - --canary-colors-mint-500: lch(48.03% 37.67 171.84); - --canary-colors-mint-600: lch(38.59% 33.16 169.14); - --canary-colors-mint-700: lch(29.72% 28.6 166.42); - --canary-colors-mint-800: lch(20.24% 23.29 164.22); - --canary-colors-mint-900: lch(11.35% 18.26 160.23); - --canary-colors-mint-950: lch(3.26% 5.16 160.96); - --canary-colors-lime-50: lch(95.86% 15.3 127.41); - --canary-colors-lime-100: lch(91.05% 29.33 126.46); - --canary-colors-lime-200: lch(74.24% 53.56 123.85); - --canary-colors-lime-300: lch(65.98% 48.66 123.85); - --canary-colors-lime-400: lch(57.13% 43.37 123.85); - --canary-colors-lime-500: lch(47.69% 37.71 123.86); - --canary-colors-lime-600: lch(38.26% 32.05 123.88); - --canary-colors-lime-700: lch(29.42% 27.17 123.81); - --canary-colors-lime-800: lch(19.97% 21.1 123.91); - --canary-colors-lime-900: lch(11.12% 14.71 126.9); - --canary-colors-lime-950: lch(3.2% 4.34 131.4); - --canary-colors-purple-50: lch(95.14% 7 301.11); - --canary-colors-purple-100: lch(89.58% 17.29 301.92); - --canary-colors-purple-200: lch(72.4% 55.68 305.19); - --canary-colors-purple-300: lch(61.28% 80.51 307.53); - --canary-colors-purple-400: lch(50.99% 105.85 309.98); - --canary-colors-purple-500: lch(40.58% 118.62 311.84); - --canary-colors-purple-600: lch(32.21% 100.98 311.83); - --canary-colors-purple-700: lch(24.34% 84.56 311.84); - --canary-colors-purple-800: lch(15.97% 66.91 311.83); - --canary-colors-purple-900: lch(8.1% 50.49 311.83); - --canary-colors-purple-950: lch(2.32% 21.96 302.37); - --canary-colors-violet-50: lch(95.18% 6.31 296.62); - --canary-colors-violet-100: lch(89.64% 16.29 297.99); - --canary-colors-violet-200: lch(72.11% 52.02 298.43); - --canary-colors-violet-300: lch(65.15% 65.45 298.5); - --canary-colors-violet-400: lch(51.98% 93.37 301.42); - --canary-colors-violet-500: lch(40.56% 121.68 305.61); - --canary-colors-violet-600: lch(31.46% 113.1 306.9); - --canary-colors-violet-700: lch(23.77% 93.78 307.37); - --canary-colors-violet-800: lch(15.62% 72.5 308.3); - --canary-colors-violet-900: lch(8.15% 49.81 312.23); - --canary-colors-violet-950: lch(2.33% 21.62 302.28); - --canary-colors-indigo-50: lch(95.23% 6.03 283.32); - --canary-colors-indigo-100: lch(89.8% 14.62 283.7); - --canary-colors-indigo-200: lch(72.68% 45.97 284.36); - --canary-colors-indigo-300: lch(65.79% 58.29 283.92); - --canary-colors-indigo-400: lch(53.15% 81.87 288.43); - --canary-colors-indigo-500: lch(42.04% 107.17 295.8); - --canary-colors-indigo-600: lch(30.63% 128.3 302.36); - --canary-colors-indigo-700: lch(23.02% 107.52 302.38); - --canary-colors-indigo-800: lch(14.93% 84.93 302.33); - --canary-colors-indigo-900: lch(7.38% 63.51 302.14); - --canary-colors-indigo-950: lch(2.17% 29.85 290.49); + --cn-colors-pure-white: lch(100% 0 134.54); + --cn-colors-pure-black: lch(2.44% 1.49 285.81); + --cn-colors-chrome-50: lch(98.27% 0.36 135.2); + --cn-colors-chrome-100: lch(90.71% 0.38 284.93); + --cn-colors-chrome-150: lch(85.99% 3.77 285.34); + --cn-colors-chrome-200: lch(81.33% 4.52 285.46); + --cn-colors-chrome-300: lch(74.37% 4.52 285.5); + --cn-colors-chrome-400: lch(67.41% 4.51 285.56); + --cn-colors-chrome-500: lch(58.08% 6.76 286.02); + --cn-colors-chrome-600: lch(46.46% 7.5 286.37); + --cn-colors-chrome-700: lch(39.46% 8.98 286.89); + --cn-colors-chrome-800: lch(26.73% 7.48 287.06); + --cn-colors-chrome-850: lch(18.63% 6.73 287.29); + --cn-colors-chrome-900: lch(8.25% 4.49 287.18); + --cn-colors-chrome-950: lch(5.2% 3.07 285.78); + --cn-colors-chrome-1000: lch(3.66% 1.93 285.7); + --cn-colors-blue-50: lch(95.27% 4.16 280.86); + --cn-colors-blue-100: lch(89.92% 10.91 279.8); + --cn-colors-blue-200: lch(73.08% 34.81 281.21); + --cn-colors-blue-300: lch(63.4% 48.44 281.2); + --cn-colors-blue-400: lch(54.29% 60.55 281.11); + --cn-colors-blue-500: lch(47.04% 69.94 279.78); + --cn-colors-blue-600: lch(35.67% 59.7 280.58); + --cn-colors-blue-700: lch(27.25% 49.8 280.51); + --cn-colors-blue-800: lch(18.28% 39.2 280.4); + --cn-colors-blue-900: lch(9.63% 33.17 284.31); + --cn-colors-blue-950: lch(2.52% 22.28 283.9); + --cn-colors-cyan-50: lch(95.4% 5 238.5); + --cn-colors-cyan-100: lch(90.24% 13.5 239.5); + --cn-colors-cyan-200: lch(74.15% 29 241); + --cn-colors-cyan-300: lch(65.49% 45.28 239); + --cn-colors-cyan-400: lch(56.15% 44.5 246.5); + --cn-colors-cyan-500: lch(46.84% 41.5 250); + --cn-colors-cyan-600: lch(37.53% 36.5 254); + --cn-colors-cyan-700: lch(28.81% 30 257.5); + --cn-colors-cyan-800: lch(19.49% 23 261.5); + --cn-colors-cyan-900: lch(10.76% 15.5 265); + --cn-colors-cyan-950: lch(3.09% 7.5 268); + --cn-colors-red-50: lch(95.23% 5.25 32.59); + --cn-colors-red-100: lch(89.81% 13.4 32.67); + --cn-colors-red-200: lch(72.7% 48.17 33.53); + --cn-colors-red-300: lch(65.59% 65.99 34.56); + --cn-colors-red-400: lch(53.74% 88.37 37.69); + --cn-colors-red-500: lch(44.74% 76.92 37.68); + --cn-colors-red-600: lch(35.74% 65.47 37.67); + --cn-colors-red-700: lch(27.3% 54.82 37.68); + --cn-colors-red-800: lch(18.31% 42.35 35.83); + --cn-colors-red-900: lch(9.87% 29.51 28.59); + --cn-colors-red-950: lch(2.8% 10.22 21.65); + --cn-colors-pink-50: lch(95.15% 5.42 350.29); + --cn-colors-pink-100: lch(89.61% 13.47 350.26); + --cn-colors-pink-200: lch(72% 46.72 350.11); + --cn-colors-pink-300: lch(61.26% 69.37 350); + --cn-colors-pink-400: lch(53.21% 65.17 349.99); + --cn-colors-pink-500: lch(44.27% 56.78 349.99); + --cn-colors-pink-600: lch(35.34% 48.39 349.99); + --cn-colors-pink-700: lch(26.98% 40.34 349.99); + --cn-colors-pink-800: lch(18.05% 31.95 349.99); + --cn-colors-pink-900: lch(9.69% 23.89 349.99); + --cn-colors-pink-950: lch(2.74% 8.62 350.99); + --cn-colors-peach-50: lch(95.22% 5.2 27.21); + --cn-colors-peach-100: lch(89.79% 12.88 27.31); + --cn-colors-peach-200: lch(72.22% 46.73 23.25); + --cn-colors-peach-300: lch(62.66% 70.81 29.46); + --cn-colors-peach-400: lch(53.64% 82.24 30.93); + --cn-colors-peach-500: lch(44.66% 71.48 30.92); + --cn-colors-peach-600: lch(35.68% 60.73 30.9); + --cn-colors-peach-700: lch(27.25% 50.72 30.88); + --cn-colors-peach-800: lch(18.26% 40.26 30.65); + --cn-colors-peach-900: lch(9.84% 28.78 25.16); + --cn-colors-peach-950: lch(2.79% 10.24 18.76); + --cn-colors-yellow-50: lch(95.62% 18.31 92.87); + --cn-colors-yellow-100: lch(90.23% 26.34 77.18); + --cn-colors-yellow-200: lch(73.82% 74.92 75.35); + --cn-colors-yellow-300: lch(64.58% 68.1 76.07); + --cn-colors-yellow-400: lch(55.9% 60.21 76.41); + --cn-colors-yellow-500: lch(46.64% 52.59 77.11); + --cn-colors-yellow-600: lch(37.37% 44.92 77.47); + --cn-colors-yellow-700: lch(28.67% 36.97 77.45); + --cn-colors-yellow-800: lch(19.4% 27.53 77.01); + --cn-colors-yellow-900: lch(10.69% 16.28 73.34); + --cn-colors-yellow-950: lch(3.06% 4.5 71.6); + --cn-colors-orange-50: lch(95.42% 10.03 79.83); + --cn-colors-orange-100: lch(90.02% 17.62 61.56); + --cn-colors-orange-200: lch(74.82% 51.93 49.87); + --cn-colors-orange-300: lch(63.38% 78.04 52.26); + --cn-colors-orange-400: lch(54.81% 69.74 52.27); + --cn-colors-orange-500: lch(45.68% 60.45 52.23); + --cn-colors-orange-600: lch(36.54% 51.77 52.28); + --cn-colors-orange-700: lch(27.78% 46.26 47.39); + --cn-colors-orange-800: lch(18.69% 35.31 45.59); + --cn-colors-orange-900: lch(10.26% 21.63 42.58); + --cn-colors-orange-950: lch(2.93% 6.64 36.42); + --cn-colors-brown-50: lch(95.55% 12.75 93.47); + --cn-colors-brown-100: lch(90.24% 19.27 79.52); + --cn-colors-brown-200: lch(73.38% 45.67 56.65); + --cn-colors-brown-300: lch(64.06% 48.96 57.29); + --cn-colors-brown-400: lch(57.17% 44.39 57.69); + --cn-colors-brown-500: lch(46.22% 37.68 57.68); + --cn-colors-brown-600: lch(37.01% 31.77 57.67); + --cn-colors-brown-700: lch(28.37% 26.84 58.1); + --cn-colors-brown-800: lch(19.16% 20.96 58.49); + --cn-colors-brown-900: lch(10.55% 13.64 57.69); + --cn-colors-brown-950: lch(3% 4.01 51.14); + --cn-colors-green-50: lch(95.82% 11.79 156.15); + --cn-colors-green-100: lch(91.19% 27.27 156.17); + --cn-colors-green-200: lch(73.78% 60.44 156.25); + --cn-colors-green-300: lch(66.65% 55.77 156.25); + --cn-colors-green-400: lch(57.73% 49.65 156.25); + --cn-colors-green-500: lch(48.21% 43.17 156.25); + --cn-colors-green-600: lch(38.71% 37.07 156.25); + --cn-colors-green-700: lch(29.79% 30.94 156.25); + --cn-colors-green-800: lch(20.26% 24.09 156.25); + --cn-colors-green-900: lch(11.35% 18.27 156.36); + --cn-colors-green-950: lch(3.27% 5.33 156.53); + --cn-colors-mint-50: lch(95.82% 11.97 171.06); + --cn-colors-mint-100: lch(91.09% 25.48 176.08); + --cn-colors-mint-200: lch(73.4% 50.15 176.67); + --cn-colors-mint-300: lch(66.3% 46.27 176.67); + --cn-colors-mint-400: lch(57.46% 42.15 174.53); + --cn-colors-mint-500: lch(48.03% 37.67 171.84); + --cn-colors-mint-600: lch(38.59% 33.16 169.14); + --cn-colors-mint-700: lch(29.72% 28.6 166.42); + --cn-colors-mint-800: lch(20.24% 23.29 164.22); + --cn-colors-mint-900: lch(11.35% 18.26 160.23); + --cn-colors-mint-950: lch(3.26% 5.16 160.96); + --cn-colors-lime-50: lch(95.86% 15.3 127.41); + --cn-colors-lime-100: lch(91.05% 29.33 126.46); + --cn-colors-lime-200: lch(74.24% 53.56 123.85); + --cn-colors-lime-300: lch(65.98% 48.66 123.85); + --cn-colors-lime-400: lch(57.13% 43.37 123.85); + --cn-colors-lime-500: lch(47.69% 37.71 123.86); + --cn-colors-lime-600: lch(38.26% 32.05 123.88); + --cn-colors-lime-700: lch(29.42% 27.17 123.81); + --cn-colors-lime-800: lch(19.97% 21.1 123.91); + --cn-colors-lime-900: lch(11.12% 14.71 126.9); + --cn-colors-lime-950: lch(3.2% 4.34 131.4); + --cn-colors-purple-50: lch(95.14% 7 301.11); + --cn-colors-purple-100: lch(89.58% 17.29 301.92); + --cn-colors-purple-200: lch(72.4% 55.68 305.19); + --cn-colors-purple-300: lch(61.28% 80.51 307.53); + --cn-colors-purple-400: lch(50.99% 105.85 309.98); + --cn-colors-purple-500: lch(40.58% 118.62 311.84); + --cn-colors-purple-600: lch(32.21% 100.98 311.83); + --cn-colors-purple-700: lch(24.34% 84.56 311.84); + --cn-colors-purple-800: lch(15.97% 66.91 311.83); + --cn-colors-purple-900: lch(8.1% 50.49 311.83); + --cn-colors-purple-950: lch(2.32% 21.96 302.37); + --cn-colors-violet-50: lch(95.18% 6.31 296.62); + --cn-colors-violet-100: lch(89.64% 16.29 297.99); + --cn-colors-violet-200: lch(72.11% 52.02 298.43); + --cn-colors-violet-300: lch(65.15% 65.45 298.5); + --cn-colors-violet-400: lch(51.98% 93.37 301.42); + --cn-colors-violet-500: lch(40.56% 121.68 305.61); + --cn-colors-violet-600: lch(31.46% 113.1 306.9); + --cn-colors-violet-700: lch(23.77% 93.78 307.37); + --cn-colors-violet-800: lch(15.62% 72.5 308.3); + --cn-colors-violet-900: lch(8.15% 49.81 312.23); + --cn-colors-violet-950: lch(2.33% 21.62 302.28); + --cn-colors-indigo-50: lch(95.23% 6.03 283.32); + --cn-colors-indigo-100: lch(89.8% 14.62 283.7); + --cn-colors-indigo-200: lch(72.68% 45.97 284.36); + --cn-colors-indigo-300: lch(65.79% 58.29 283.92); + --cn-colors-indigo-400: lch(53.15% 81.87 288.43); + --cn-colors-indigo-500: lch(42.04% 107.17 295.8); + --cn-colors-indigo-600: lch(30.63% 128.3 302.36); + --cn-colors-indigo-700: lch(23.02% 107.52 302.38); + --cn-colors-indigo-800: lch(14.93% 84.93 302.33); + --cn-colors-indigo-900: lch(7.38% 63.51 302.14); + --cn-colors-indigo-950: lch(2.17% 29.85 290.49); } diff --git a/packages/core-design-system/src/styles/components.css b/packages/core-design-system/src/styles/components.css index e7952a44ec..3c6d272ba4 100644 --- a/packages/core-design-system/src/styles/components.css +++ b/packages/core-design-system/src/styles/components.css @@ -1,86 +1,86 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:32 GMT + * Generated on Tue, 18 Mar 2025 06:44:26 GMT * Copyright (c) Harness. */ :root { - --canary-dropdown-container-min-w: 320px; - --canary-input-size-sm: var(--canary-size-8); /* 32px */ + --cn-dropdown-container-min-w: 320px; + --cn-input-size-sm: var(--cn-size-8); /* 32px */ /** * 36px * */ - --canary-input-size-default: var(--canary-size-9); - --canary-input-radius: var(--canary-rounded-3); /* 6px */ - --canary-input-gap: var(--canary-spacing-1-half); - --canary-input-px: var(--canary-spacing-3); /* 12px horizontal padding */ - --canary-input-py: var(--canary-spacing-2); /* 8px vertical padding */ - --canary-btn-size-sm: var(--canary-size-7); - --canary-btn-size-default: var(--canary-size-8); - --canary-btn-size-icon: var(--canary-size-8); - --canary-btn-size-lg: var(--canary-size-10); - --canary-btn-gap-sm: var(--canary-spacing-1-half); - --canary-btn-gap-default: var(--canary-spacing-1-half); - --canary-btn-gap-lg: var(--canary-spacing-2-half); - --canary-btn-default-radius: var(--canary-rounded-2); - --canary-btn-rounded-radius: var(--canary-rounded-full); - --canary-btn-border: var(--canary-border-width-1); - --canary-btn-px-sm: var(--canary-spacing-3); - --canary-btn-px-default: var(--canary-spacing-4); - --canary-btn-px-lg: var(--canary-spacing-5); - --canary-btn-py-sm: var(--canary-spacing-1-half); - --canary-btn-py-default: var(--canary-spacing-2); - --canary-btn-py-lg: var(--canary-spacing-3); - --canary-btn-link-size-sm: var(--canary-size-4); - --canary-btn-link-size-default: var(--canary-size-4); - --canary-btn-link-gap-sm: var(--canary-spacing-2); - --canary-btn-link-gap-default: var(--canary-spacing-2-half); - --canary-badge-size-sm: var(--canary-size-5); - --canary-badge-size-default: var(--canary-size-6); - --canary-badge-default-gap: var(--canary-spacing-1); - --canary-badge-default-py: var(--canary-spacing-half); - --canary-badge-default-px: var(--canary-spacing-2); - --canary-badge-default-radius: var(--canary-rounded-2); - --canary-badge-rounded-radius: var(--canary-rounded-full); - --canary-badge-rounded-px: var(--canary-spacing-2-half); - --canary-badge-border: var(--canary-border-width-1); - --canary-tag-size: var(--canary-size-5); - --canary-tag-gap: var(--canary-spacing-1); - --canary-tag-py: var(--canary-spacing-1); - --canary-tag-px: var(--canary-spacing-2); - --canary-tag-default-radius: var(--canary-rounded-2); - --canary-tag-split-right-radius-r: var(--canary-rounded-2); - --canary-tag-split-right-radius-l: var(--canary-rounded-none); - --canary-tag-split-left-radius-r: var(--canary-rounded-none); - --canary-tag-split-left-radius-l: var(--canary-rounded-2); - --canary-tag-border: var(--canary-border-width-1); + --cn-input-size-default: var(--cn-size-9); + --cn-input-radius: var(--cn-rounded-3); /* 6px */ + --cn-input-gap: var(--cn-spacing-1-half); + --cn-input-px: var(--cn-spacing-3); /* 12px horizontal padding */ + --cn-input-py: var(--cn-spacing-2); /* 8px vertical padding */ + --cn-btn-size-sm: var(--cn-size-7); + --cn-btn-size-default: var(--cn-size-8); + --cn-btn-size-icon: var(--cn-size-8); + --cn-btn-size-lg: var(--cn-size-10); + --cn-btn-gap-sm: var(--cn-spacing-1-half); + --cn-btn-gap-default: var(--cn-spacing-1-half); + --cn-btn-gap-lg: var(--cn-spacing-2-half); + --cn-btn-default-radius: var(--cn-rounded-2); + --cn-btn-rounded-radius: var(--cn-rounded-full); + --cn-btn-border: var(--cn-border-width-1); + --cn-btn-px-sm: var(--cn-spacing-3); + --cn-btn-px-default: var(--cn-spacing-4); + --cn-btn-px-lg: var(--cn-spacing-5); + --cn-btn-py-sm: var(--cn-spacing-1-half); + --cn-btn-py-default: var(--cn-spacing-2); + --cn-btn-py-lg: var(--cn-spacing-3); + --cn-btn-link-size-sm: var(--cn-size-4); + --cn-btn-link-size-default: var(--cn-size-4); + --cn-btn-link-gap-sm: var(--cn-spacing-2); + --cn-btn-link-gap-default: var(--cn-spacing-2-half); + --cn-badge-size-sm: var(--cn-size-5); + --cn-badge-size-default: var(--cn-size-6); + --cn-badge-default-gap: var(--cn-spacing-1); + --cn-badge-default-py: var(--cn-spacing-half); + --cn-badge-default-px: var(--cn-spacing-2); + --cn-badge-default-radius: var(--cn-rounded-2); + --cn-badge-rounded-radius: var(--cn-rounded-full); + --cn-badge-rounded-px: var(--cn-spacing-2-half); + --cn-badge-border: var(--cn-border-width-1); + --cn-tag-size: var(--cn-size-5); + --cn-tag-gap: var(--cn-spacing-1); + --cn-tag-py: var(--cn-spacing-1); + --cn-tag-px: var(--cn-spacing-2); + --cn-tag-default-radius: var(--cn-rounded-2); + --cn-tag-split-right-radius-r: var(--cn-rounded-2); + --cn-tag-split-right-radius-l: var(--cn-rounded-none); + --cn-tag-split-left-radius-r: var(--cn-rounded-none); + --cn-tag-split-left-radius-l: var(--cn-rounded-2); + --cn-tag-border: var(--cn-border-width-1); /** * 4px * */ - --canary-dropdown-item-px: var(--canary-spacing-1); - --canary-dropdown-item-gap: var(--canary-spacing-2-half); /* 8px */ - --canary-dropdown-sub-item-px: var(--canary-spacing-3); /* 12px */ - --canary-dropdown-sub-item-py: var(--canary-spacing-2); /* 8px */ - --canary-dropdown-sub-item-gap: var(--canary-spacing-2-half); - --canary-dropdown-sub-item-radius: var(--canary-rounded-1); - --canary-dropdown-sub-item-size: var(--canary-size-8); - --canary-dropdown-sub-item-gap-y: var(--canary-spacing-1); /* 4px gap between text */ + --cn-dropdown-item-px: var(--cn-spacing-1); + --cn-dropdown-item-gap: var(--cn-spacing-2-half); /* 8px */ + --cn-dropdown-sub-item-px: var(--cn-spacing-3); /* 12px */ + --cn-dropdown-sub-item-py: var(--cn-spacing-2); /* 8px */ + --cn-dropdown-sub-item-gap: var(--cn-spacing-2-half); + --cn-dropdown-sub-item-radius: var(--cn-rounded-1); + --cn-dropdown-sub-item-size: var(--cn-size-8); + --cn-dropdown-sub-item-gap-y: var(--cn-spacing-1); /* 4px gap between text */ /** * 4px * */ - --canary-dropdown-container-py: var(--canary-spacing-1); - --canary-dropdown-container-radius: var(--canary-rounded-3); /* 6px */ - --canary-dropdown-menu-item-branch-selector-tag-px: var(--canary-spacing-2); /* 8px horizontal padding */ + --cn-dropdown-container-py: var(--cn-spacing-1); + --cn-dropdown-container-radius: var(--cn-rounded-3); /* 6px */ + --cn-dropdown-menu-item-branch-selector-tag-px: var(--cn-spacing-2); /* 8px horizontal padding */ /** * 20px height * */ - --canary-dropdown-menu-item-branch-selector-tag-size: var(--canary-size-5); - --canary-dropdown-menu-items-header-footer-px: var(--canary-spacing-4); /* 16px horizontal padding */ - --canary-dropdown-menu-items-header-footer-py: var(--canary-spacing-2-half); /* 10px vertical padding */ - --canary-dropdown-item-radius: var(--canary-dropdown-sub-item-radius); + --cn-dropdown-menu-item-branch-selector-tag-size: var(--cn-size-5); + --cn-dropdown-menu-items-header-footer-px: var(--cn-spacing-4); /* 16px horizontal padding */ + --cn-dropdown-menu-items-header-footer-py: var(--cn-spacing-2-half); /* 10px vertical padding */ + --cn-dropdown-item-radius: var(--cn-dropdown-sub-item-radius); } diff --git a/packages/core-design-system/src/styles/core.css b/packages/core-design-system/src/styles/core.css index 7ace6671f4..421f6398cb 100644 --- a/packages/core-design-system/src/styles/core.css +++ b/packages/core-design-system/src/styles/core.css @@ -1,263 +1,263 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:32 GMT + * Generated on Tue, 18 Mar 2025 06:44:26 GMT * Copyright (c) Harness. */ :root { - --canary-tracking-tighter: -0.05em; /* Very tight, display text */ - --canary-tracking-tight: -0.02em; /* Headings */ - --canary-tracking-normal: 0em; /* Default body text */ - --canary-tracking-wide: 0.025em; /* Improved readability */ - --canary-tracking-wider: 0.05em; /* Spaced text */ - --canary-tracking-widest: 0.1em; /* All caps text */ - --canary-font-weight-default-normal-100: 100; - --canary-font-weight-default-normal-200: 200; - --canary-font-weight-default-normal-300: 300; - --canary-font-weight-default-normal-400: 400; - --canary-font-weight-default-normal-500: 500; - --canary-font-weight-default-normal-600: 600; - --canary-font-weight-default-normal-700: 700; - --canary-font-weight-default-normal-800: 800; - --canary-font-weight-default-normal-900: 900; - --canary-font-weight-default-italic-100-weight: 100; - --canary-font-weight-default-italic-100-style: italic; - --canary-font-weight-default-italic-200-weight: 200; - --canary-font-weight-default-italic-200-style: italic; - --canary-font-weight-default-italic-300-weight: 300; - --canary-font-weight-default-italic-300-style: italic; - --canary-font-weight-default-italic-400-weight: 400; - --canary-font-weight-default-italic-400-style: italic; - --canary-font-weight-default-italic-500-weight: 500; - --canary-font-weight-default-italic-500-style: italic; - --canary-font-weight-default-italic-600-weight: 600; - --canary-font-weight-default-italic-600-style: italic; - --canary-font-weight-default-italic-700-weight: 700; - --canary-font-weight-default-italic-700-style: italic; - --canary-font-weight-default-italic-800-weight: 800; - --canary-font-weight-default-italic-800-style: italic; - --canary-font-weight-default-italic-900-weight: 900; - --canary-font-weight-default-italic-900-style: italic; - --canary-font-weight-mono-normal-100: 100; - --canary-font-weight-mono-normal-200: 200; - --canary-font-weight-mono-normal-300: 300; - --canary-font-weight-mono-normal-400: 400; - --canary-font-weight-mono-normal-500: 500; - --canary-font-weight-mono-normal-700: 700; - --canary-font-weight-mono-normal-800: 800; - --canary-font-weight-mono-italic-100-weight: 100; - --canary-font-weight-mono-italic-100-style: italic; - --canary-font-weight-mono-italic-200-weight: 200; - --canary-font-weight-mono-italic-200-style: italic; - --canary-font-weight-mono-italic-300-weight: 300; - --canary-font-weight-mono-italic-300-style: italic; - --canary-font-weight-mono-italic-400-weight: 400; - --canary-font-weight-mono-italic-400-style: italic; - --canary-font-weight-mono-italic-500-weight: 500; - --canary-font-weight-mono-italic-500-style: italic; - --canary-font-weight-mono-italic-700-weight: 700; - --canary-font-weight-mono-italic-700-style: italic; - --canary-font-weight-mono-italic-800-weight: 800; - --canary-font-weight-mono-italic-800-style: italic; - --canary-font-family-default: Inter; - --canary-font-family-mono: 'JetBrains Mono'; - --canary-text-decoration-none: none; - --canary-text-decoration-underline: underline; - --canary-text-decoration-line-through: line-through; - --canary-text-case-none: none; - --canary-text-case-uppercase: uppercase; - --canary-text-case-lowercase: lowercase; - --canary-text-case-capitalize: capitalize; - --canary-font-size-1: 0.75rem; /* 12px */ - --canary-font-size-2: 0.875rem; /* 14px */ - --canary-font-size-3: 1rem; /* 16px */ - --canary-font-size-4: 1.125rem; /* 18px */ - --canary-font-size-5: 1.25rem; /* 20px */ - --canary-font-size-6: 1.5rem; /* 24px */ - --canary-font-size-7: 1.875rem; /* 30px */ - --canary-font-size-8: 2.25rem; /* 36px */ - --canary-font-size-9: 3rem; /* 48px */ - --canary-font-size-10: 3.75rem; /* 60px */ - --canary-font-size-11: 4.5rem; /* 72px */ - --canary-font-size-12: 6rem; /* 96px */ - --canary-font-size-13: 8rem; /* 128px */ - --canary-line-height-1-none: 0.75rem; - --canary-line-height-1-tight: 0.9375rem; - --canary-line-height-1-snug: 1.0313rem; - --canary-line-height-1-normal: 1.125rem; - --canary-line-height-1-relaxed: 1.2188rem; - --canary-line-height-1-loose: 1.5rem; - --canary-line-height-2-none: 0.875rem; - --canary-line-height-2-tight: 1.0938rem; - --canary-line-height-2-snug: 1.2031rem; - --canary-line-height-2-normal: 1.3125rem; - --canary-line-height-2-relaxed: 1.4219rem; - --canary-line-height-2-loose: 1.75rem; - --canary-line-height-3-none: 1rem; - --canary-line-height-3-tight: 1.25rem; - --canary-line-height-3-snug: 1.375rem; - --canary-line-height-3-normal: 1.5rem; - --canary-line-height-3-relaxed: 1.625rem; - --canary-line-height-3-loose: 2rem; - --canary-line-height-4-none: 1.125rem; - --canary-line-height-4-tight: 1.4063rem; - --canary-line-height-4-snug: 1.5469rem; - --canary-line-height-4-normal: 1.6875rem; - --canary-line-height-4-relaxed: 1.8281rem; - --canary-line-height-4-loose: 2.25rem; - --canary-line-height-5-none: 1.25rem; - --canary-line-height-5-tight: 1.5625rem; - --canary-line-height-5-snug: 1.7188rem; - --canary-line-height-5-normal: 1.875rem; - --canary-line-height-5-relaxed: 2.0313rem; - --canary-line-height-5-loose: 2.5rem; - --canary-line-height-6-none: 1.5rem; - --canary-line-height-6-tight: 1.875rem; - --canary-line-height-6-snug: 2.0625rem; - --canary-line-height-6-normal: 2.25rem; - --canary-line-height-6-relaxed: 2.4375rem; - --canary-line-height-6-loose: 3rem; - --canary-line-height-7-none: 1.875rem; - --canary-line-height-7-tight: 2.3438rem; - --canary-line-height-7-snug: 2.5781rem; - --canary-line-height-7-normal: 2.8125rem; - --canary-line-height-7-relaxed: 3.0469rem; - --canary-line-height-7-loose: 3.75rem; - --canary-line-height-8-none: 2.25rem; - --canary-line-height-8-tight: 2.8125rem; - --canary-line-height-8-snug: 3.0938rem; - --canary-line-height-8-normal: 3.375rem; - --canary-line-height-8-relaxed: 3.6563rem; - --canary-line-height-8-loose: 4.5rem; - --canary-line-height-9-none: 3rem; - --canary-line-height-9-tight: 3.75rem; - --canary-line-height-9-snug: 4.125rem; - --canary-line-height-9-normal: 4.5rem; - --canary-line-height-9-relaxed: 4.875rem; - --canary-line-height-9-loose: 6rem; - --canary-line-height-10-none: 3.75rem; - --canary-line-height-10-tight: 4.6875rem; - --canary-line-height-10-snug: 5.1563rem; - --canary-line-height-10-normal: 5.625rem; - --canary-line-height-10-relaxed: 6.0938rem; - --canary-line-height-10-loose: 7.5rem; - --canary-line-height-11-none: 4.5rem; - --canary-line-height-11-tight: 5.625rem; - --canary-line-height-11-snug: 6.1875rem; - --canary-line-height-11-normal: 6.75rem; - --canary-line-height-11-relaxed: 7.3125rem; - --canary-line-height-11-loose: 9rem; - --canary-line-height-12-none: 6rem; - --canary-line-height-12-tight: 7.5rem; - --canary-line-height-12-snug: 8.25rem; - --canary-line-height-12-normal: 9rem; - --canary-line-height-12-relaxed: 9.75rem; - --canary-line-height-12-loose: 12rem; - --canary-line-height-13-none: 8rem; - --canary-line-height-13-tight: 10rem; - --canary-line-height-13-snug: 11rem; - --canary-line-height-13-normal: 12rem; - --canary-line-height-13-relaxed: 13rem; - --canary-line-height-13-loose: 16rem; - --canary-line-height-none: 1; - --canary-line-height-tight: 1.25; - --canary-line-height-snug: 1.375; - --canary-line-height-normal: 1.5; - --canary-line-height-relaxed: 1.625; - --canary-line-height-loose: 2; - --canary-spacing-0: 0px; - --canary-spacing-1: 4px; - --canary-spacing-2: 8px; - --canary-spacing-3: 12px; - --canary-spacing-4: 16px; - --canary-spacing-5: 20px; - --canary-spacing-6: 24px; - --canary-spacing-7: 28px; - --canary-spacing-8: 32px; - --canary-spacing-9: 36px; - --canary-spacing-10: 40px; - --canary-spacing-11: 44px; - --canary-spacing-12: 48px; - --canary-spacing-14: 56px; - --canary-spacing-16: 64px; - --canary-spacing-20: 80px; - --canary-spacing-24: 96px; - --canary-spacing-28: 112px; - --canary-spacing-32: 128px; - --canary-spacing-36: 144px; - --canary-spacing-40: 160px; - --canary-spacing-44: 176px; - --canary-spacing-48: 192px; - --canary-spacing-52: 208px; - --canary-spacing-56: 224px; - --canary-spacing-60: 240px; - --canary-spacing-64: 256px; - --canary-spacing-72: 288px; - --canary-spacing-80: 320px; - --canary-spacing-96: 384px; - --canary-spacing-px: 1px; - --canary-spacing-half: 2px; /* 0.5 */ - --canary-spacing-1-half: 6px; /* 1.5 */ - --canary-spacing-2-half: 10px; /* 2.5 */ - --canary-spacing-3-half: 14px; /* 3.5 */ - --canary-rounded-1: 2px; - --canary-rounded-2: 4px; - --canary-rounded-3: 6px; - --canary-rounded-4: 8px; - --canary-rounded-5: 12px; - --canary-rounded-6: 16px; - --canary-rounded-7: 24px; - --canary-rounded-none: 0px; /* No border radius */ - --canary-rounded-full: 9999px; /* Fully rounded corners (circular) */ - --canary-size-0: 0px; - --canary-size-1: 4px; - --canary-size-2: 8px; - --canary-size-3: 12px; - --canary-size-4: 16px; - --canary-size-5: 20px; - --canary-size-6: 24px; - --canary-size-7: 28px; - --canary-size-8: 32px; - --canary-size-9: 36px; - --canary-size-10: 40px; - --canary-size-11: 44px; - --canary-size-12: 48px; - --canary-size-14: 56px; - --canary-size-16: 64px; - --canary-size-20: 80px; - --canary-size-24: 96px; - --canary-size-28: 112px; - --canary-size-32: 128px; - --canary-size-36: 144px; - --canary-size-40: 160px; - --canary-size-44: 176px; - --canary-size-48: 192px; - --canary-size-52: 208px; - --canary-size-56: 224px; - --canary-size-60: 240px; - --canary-size-64: 256px; - --canary-size-72: 288px; - --canary-size-80: 320px; - --canary-size-96: 384px; - --canary-size-px: 1px; - --canary-size-half: 2px; /* 0.5 */ - --canary-size-1-half: 6px; /* 1.5 */ - --canary-size-2-half: 10px; /* 2.5 */ - --canary-size-3-half: 14px; /* 3.5 */ - --canary-border-width-0: 0rem; /* No border (border-0) */ - --canary-border-width-1: 1px; /* Default border width (border) */ - --canary-border-width-2: 2px; /* Medium border width (border-2) */ - --canary-border-width-4: 4px; /* Thick border width (border-4) */ - --canary-border-width-8: 8px; /* Extra thick border width (border-8) */ - --canary-icon-size-xxs: 8px; - --canary-icon-size-xs: 12px; - --canary-icon-size-sm: 14px; - --canary-icon-size-default: 16px; - --canary-icon-size-md: 20px; + --cn-tracking-tighter: -0.05em; /* Very tight, display text */ + --cn-tracking-tight: -0.02em; /* Headings */ + --cn-tracking-normal: 0em; /* Default body text */ + --cn-tracking-wide: 0.025em; /* Improved readability */ + --cn-tracking-wider: 0.05em; /* Spaced text */ + --cn-tracking-widest: 0.1em; /* All caps text */ + --cn-font-weight-default-normal-100: 100; + --cn-font-weight-default-normal-200: 200; + --cn-font-weight-default-normal-300: 300; + --cn-font-weight-default-normal-400: 400; + --cn-font-weight-default-normal-500: 500; + --cn-font-weight-default-normal-600: 600; + --cn-font-weight-default-normal-700: 700; + --cn-font-weight-default-normal-800: 800; + --cn-font-weight-default-normal-900: 900; + --cn-font-weight-default-italic-100-weight: 100; + --cn-font-weight-default-italic-100-style: italic; + --cn-font-weight-default-italic-200-weight: 200; + --cn-font-weight-default-italic-200-style: italic; + --cn-font-weight-default-italic-300-weight: 300; + --cn-font-weight-default-italic-300-style: italic; + --cn-font-weight-default-italic-400-weight: 400; + --cn-font-weight-default-italic-400-style: italic; + --cn-font-weight-default-italic-500-weight: 500; + --cn-font-weight-default-italic-500-style: italic; + --cn-font-weight-default-italic-600-weight: 600; + --cn-font-weight-default-italic-600-style: italic; + --cn-font-weight-default-italic-700-weight: 700; + --cn-font-weight-default-italic-700-style: italic; + --cn-font-weight-default-italic-800-weight: 800; + --cn-font-weight-default-italic-800-style: italic; + --cn-font-weight-default-italic-900-weight: 900; + --cn-font-weight-default-italic-900-style: italic; + --cn-font-weight-mono-normal-100: 100; + --cn-font-weight-mono-normal-200: 200; + --cn-font-weight-mono-normal-300: 300; + --cn-font-weight-mono-normal-400: 400; + --cn-font-weight-mono-normal-500: 500; + --cn-font-weight-mono-normal-700: 700; + --cn-font-weight-mono-normal-800: 800; + --cn-font-weight-mono-italic-100-weight: 100; + --cn-font-weight-mono-italic-100-style: italic; + --cn-font-weight-mono-italic-200-weight: 200; + --cn-font-weight-mono-italic-200-style: italic; + --cn-font-weight-mono-italic-300-weight: 300; + --cn-font-weight-mono-italic-300-style: italic; + --cn-font-weight-mono-italic-400-weight: 400; + --cn-font-weight-mono-italic-400-style: italic; + --cn-font-weight-mono-italic-500-weight: 500; + --cn-font-weight-mono-italic-500-style: italic; + --cn-font-weight-mono-italic-700-weight: 700; + --cn-font-weight-mono-italic-700-style: italic; + --cn-font-weight-mono-italic-800-weight: 800; + --cn-font-weight-mono-italic-800-style: italic; + --cn-font-family-default: Inter; + --cn-font-family-mono: 'JetBrains Mono'; + --cn-text-decoration-none: none; + --cn-text-decoration-underline: underline; + --cn-text-decoration-line-through: line-through; + --cn-text-case-none: none; + --cn-text-case-uppercase: uppercase; + --cn-text-case-lowercase: lowercase; + --cn-text-case-capitalize: capitalize; + --cn-font-size-1: 0.75rem; /* 12px */ + --cn-font-size-2: 0.875rem; /* 14px */ + --cn-font-size-3: 1rem; /* 16px */ + --cn-font-size-4: 1.125rem; /* 18px */ + --cn-font-size-5: 1.25rem; /* 20px */ + --cn-font-size-6: 1.5rem; /* 24px */ + --cn-font-size-7: 1.875rem; /* 30px */ + --cn-font-size-8: 2.25rem; /* 36px */ + --cn-font-size-9: 3rem; /* 48px */ + --cn-font-size-10: 3.75rem; /* 60px */ + --cn-font-size-11: 4.5rem; /* 72px */ + --cn-font-size-12: 6rem; /* 96px */ + --cn-font-size-13: 8rem; /* 128px */ + --cn-line-height-1-none: 0.75rem; + --cn-line-height-1-tight: 0.9375rem; + --cn-line-height-1-snug: 1.0313rem; + --cn-line-height-1-normal: 1.125rem; + --cn-line-height-1-relaxed: 1.2188rem; + --cn-line-height-1-loose: 1.5rem; + --cn-line-height-2-none: 0.875rem; + --cn-line-height-2-tight: 1.0938rem; + --cn-line-height-2-snug: 1.2031rem; + --cn-line-height-2-normal: 1.3125rem; + --cn-line-height-2-relaxed: 1.4219rem; + --cn-line-height-2-loose: 1.75rem; + --cn-line-height-3-none: 1rem; + --cn-line-height-3-tight: 1.25rem; + --cn-line-height-3-snug: 1.375rem; + --cn-line-height-3-normal: 1.5rem; + --cn-line-height-3-relaxed: 1.625rem; + --cn-line-height-3-loose: 2rem; + --cn-line-height-4-none: 1.125rem; + --cn-line-height-4-tight: 1.4063rem; + --cn-line-height-4-snug: 1.5469rem; + --cn-line-height-4-normal: 1.6875rem; + --cn-line-height-4-relaxed: 1.8281rem; + --cn-line-height-4-loose: 2.25rem; + --cn-line-height-5-none: 1.25rem; + --cn-line-height-5-tight: 1.5625rem; + --cn-line-height-5-snug: 1.7188rem; + --cn-line-height-5-normal: 1.875rem; + --cn-line-height-5-relaxed: 2.0313rem; + --cn-line-height-5-loose: 2.5rem; + --cn-line-height-6-none: 1.5rem; + --cn-line-height-6-tight: 1.875rem; + --cn-line-height-6-snug: 2.0625rem; + --cn-line-height-6-normal: 2.25rem; + --cn-line-height-6-relaxed: 2.4375rem; + --cn-line-height-6-loose: 3rem; + --cn-line-height-7-none: 1.875rem; + --cn-line-height-7-tight: 2.3438rem; + --cn-line-height-7-snug: 2.5781rem; + --cn-line-height-7-normal: 2.8125rem; + --cn-line-height-7-relaxed: 3.0469rem; + --cn-line-height-7-loose: 3.75rem; + --cn-line-height-8-none: 2.25rem; + --cn-line-height-8-tight: 2.8125rem; + --cn-line-height-8-snug: 3.0938rem; + --cn-line-height-8-normal: 3.375rem; + --cn-line-height-8-relaxed: 3.6563rem; + --cn-line-height-8-loose: 4.5rem; + --cn-line-height-9-none: 3rem; + --cn-line-height-9-tight: 3.75rem; + --cn-line-height-9-snug: 4.125rem; + --cn-line-height-9-normal: 4.5rem; + --cn-line-height-9-relaxed: 4.875rem; + --cn-line-height-9-loose: 6rem; + --cn-line-height-10-none: 3.75rem; + --cn-line-height-10-tight: 4.6875rem; + --cn-line-height-10-snug: 5.1563rem; + --cn-line-height-10-normal: 5.625rem; + --cn-line-height-10-relaxed: 6.0938rem; + --cn-line-height-10-loose: 7.5rem; + --cn-line-height-11-none: 4.5rem; + --cn-line-height-11-tight: 5.625rem; + --cn-line-height-11-snug: 6.1875rem; + --cn-line-height-11-normal: 6.75rem; + --cn-line-height-11-relaxed: 7.3125rem; + --cn-line-height-11-loose: 9rem; + --cn-line-height-12-none: 6rem; + --cn-line-height-12-tight: 7.5rem; + --cn-line-height-12-snug: 8.25rem; + --cn-line-height-12-normal: 9rem; + --cn-line-height-12-relaxed: 9.75rem; + --cn-line-height-12-loose: 12rem; + --cn-line-height-13-none: 8rem; + --cn-line-height-13-tight: 10rem; + --cn-line-height-13-snug: 11rem; + --cn-line-height-13-normal: 12rem; + --cn-line-height-13-relaxed: 13rem; + --cn-line-height-13-loose: 16rem; + --cn-line-height-none: 1; + --cn-line-height-tight: 1.25; + --cn-line-height-snug: 1.375; + --cn-line-height-normal: 1.5; + --cn-line-height-relaxed: 1.625; + --cn-line-height-loose: 2; + --cn-spacing-0: 0px; + --cn-spacing-1: 4px; + --cn-spacing-2: 8px; + --cn-spacing-3: 12px; + --cn-spacing-4: 16px; + --cn-spacing-5: 20px; + --cn-spacing-6: 24px; + --cn-spacing-7: 28px; + --cn-spacing-8: 32px; + --cn-spacing-9: 36px; + --cn-spacing-10: 40px; + --cn-spacing-11: 44px; + --cn-spacing-12: 48px; + --cn-spacing-14: 56px; + --cn-spacing-16: 64px; + --cn-spacing-20: 80px; + --cn-spacing-24: 96px; + --cn-spacing-28: 112px; + --cn-spacing-32: 128px; + --cn-spacing-36: 144px; + --cn-spacing-40: 160px; + --cn-spacing-44: 176px; + --cn-spacing-48: 192px; + --cn-spacing-52: 208px; + --cn-spacing-56: 224px; + --cn-spacing-60: 240px; + --cn-spacing-64: 256px; + --cn-spacing-72: 288px; + --cn-spacing-80: 320px; + --cn-spacing-96: 384px; + --cn-spacing-px: 1px; + --cn-spacing-half: 2px; /* 0.5 */ + --cn-spacing-1-half: 6px; /* 1.5 */ + --cn-spacing-2-half: 10px; /* 2.5 */ + --cn-spacing-3-half: 14px; /* 3.5 */ + --cn-rounded-1: 2px; + --cn-rounded-2: 4px; + --cn-rounded-3: 6px; + --cn-rounded-4: 8px; + --cn-rounded-5: 12px; + --cn-rounded-6: 16px; + --cn-rounded-7: 24px; + --cn-rounded-none: 0px; /* No border radius */ + --cn-rounded-full: 9999px; /* Fully rounded corners (circular) */ + --cn-size-0: 0px; + --cn-size-1: 4px; + --cn-size-2: 8px; + --cn-size-3: 12px; + --cn-size-4: 16px; + --cn-size-5: 20px; + --cn-size-6: 24px; + --cn-size-7: 28px; + --cn-size-8: 32px; + --cn-size-9: 36px; + --cn-size-10: 40px; + --cn-size-11: 44px; + --cn-size-12: 48px; + --cn-size-14: 56px; + --cn-size-16: 64px; + --cn-size-20: 80px; + --cn-size-24: 96px; + --cn-size-28: 112px; + --cn-size-32: 128px; + --cn-size-36: 144px; + --cn-size-40: 160px; + --cn-size-44: 176px; + --cn-size-48: 192px; + --cn-size-52: 208px; + --cn-size-56: 224px; + --cn-size-60: 240px; + --cn-size-64: 256px; + --cn-size-72: 288px; + --cn-size-80: 320px; + --cn-size-96: 384px; + --cn-size-px: 1px; + --cn-size-half: 2px; /* 0.5 */ + --cn-size-1-half: 6px; /* 1.5 */ + --cn-size-2-half: 10px; /* 2.5 */ + --cn-size-3-half: 14px; /* 3.5 */ + --cn-border-width-0: 0rem; /* No border (border-0) */ + --cn-border-width-1: 1px; /* Default border width (border) */ + --cn-border-width-2: 2px; /* Medium border width (border-2) */ + --cn-border-width-4: 4px; /* Thick border width (border-4) */ + --cn-border-width-8: 8px; /* Extra thick border width (border-8) */ + --cn-icon-size-xxs: 8px; + --cn-icon-size-xs: 12px; + --cn-icon-size-sm: 14px; + --cn-icon-size-default: 16px; + --cn-icon-size-md: 20px; /** * * */ - --canary-icon-size-lg: 32px; + --cn-icon-size-lg: 32px; } diff --git a/packages/core-design-system/src/styles/dark-deuteranopia-gitness.css b/packages/core-design-system/src/styles/dark-deuteranopia-gitness.css new file mode 100644 index 0000000000..d05f0320a5 --- /dev/null +++ b/packages/core-design-system/src/styles/dark-deuteranopia-gitness.css @@ -0,0 +1,492 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:06 GMT + * Copyright (c) Harness. + */ + +.dark-deuteranopia-gitness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-chrome-1000); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-950); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-900); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-300); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-500); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-cyan-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-orange-200); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-300); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-850); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-850) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-cyan-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-orange-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-300); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-pure-white) l c h / 0.08); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-pure-white) l c h / 0.1); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-950); + --cn-component-alert-danger-title: var(--cn-colors-orange-100); /* Text color for danger alerts. Communicates critical information through high-contrast text. */ + --cn-component-alert-danger-description: var(--cn-colors-orange-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-cyan-200); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-orange-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-cyan-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-cyan-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-cyan-200); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-orange-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-orange-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-orange-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-orange-500) l c h / 0.12); /* Orange background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-orange-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-orange-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-blue-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-orange-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-orange-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-200); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-200); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-200); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-cyan-200); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-cyan-900); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-200); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-200); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-200); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-200); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-200); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-cyan-200); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-purple-background: var(--cn-colors-cyan-900); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-red-text: var(--cn-colors-orange-200); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-red-background: var(--cn-colors-orange-900); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-violet-text: var(--cn-colors-blue-200); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-violet-background: var(--cn-colors-blue-900); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-200); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-orange-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-100); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-orange-200); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-cyan-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-850); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-chrome-800); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-200); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-800) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-200); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-pure-white); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-300); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-900); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-chrome-950); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-chrome-850); + --cn-brand-color-50: var(--cn-colors-chrome-150); + --cn-brand-color-100: var(--cn-colors-chrome-150); + --cn-brand-color-200: var(--cn-colors-chrome-150); + --cn-brand-color-300: var(--cn-colors-chrome-150); + --cn-brand-color-400: var(--cn-colors-chrome-150); + --cn-brand-color-500: var(--cn-colors-chrome-900); + --cn-brand-color-600: var(--cn-colors-chrome-150); + --cn-brand-color-700: var(--cn-colors-chrome-900); + --cn-brand-color-800: var(--cn-colors-chrome-900); + --cn-brand-color-900: var(--cn-colors-chrome-900); + --cn-brand-color-950: var(--cn-colors-chrome-900); + --cn-brand-on-color-50: var(--cn-colors-pure-black); + --cn-brand-on-color-100: var(--cn-colors-pure-black); + --cn-brand-on-color-200: var(--cn-colors-pure-black); + --cn-brand-on-color-300: var(--cn-colors-pure-black); + --cn-brand-on-color-400: var(--cn-colors-pure-black); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-black); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-200); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-400); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-1); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-1); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-border: var(--cn-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: var(--cn-state-hover); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: var(--cn-state-selected); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-text-1); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-border-2); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-text-3); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-background-3); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-border-2); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-text-3); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-text-1); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-text-3); /* User data in the footer sidebar navigation menu. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags, replaced with orange. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --cn-component-tooltip-border: var(--cn-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/dark-deuteranopia-harness.css b/packages/core-design-system/src/styles/dark-deuteranopia-harness.css new file mode 100644 index 0000000000..20250410f2 --- /dev/null +++ b/packages/core-design-system/src/styles/dark-deuteranopia-harness.css @@ -0,0 +1,492 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:06 GMT + * Copyright (c) Harness. + */ + +.dark-deuteranopia-harness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-chrome-1000); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-950); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-900); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-300); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-500); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-cyan-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-orange-200); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-300); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-850); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-850) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-cyan-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-orange-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-300); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-pure-white) l c h / 0.08); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-pure-white) l c h / 0.1); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-950); + --cn-component-alert-danger-title: var(--cn-colors-orange-100); /* Text color for danger alerts. Communicates critical information through high-contrast text. */ + --cn-component-alert-danger-description: var(--cn-colors-orange-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-cyan-200); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-orange-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-cyan-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-cyan-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-cyan-200); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-orange-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-orange-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-orange-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-orange-500) l c h / 0.12); /* Orange background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-orange-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-orange-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-blue-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-orange-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-orange-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-200); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-200); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-200); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-cyan-200); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-cyan-900); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-200); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-200); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-200); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-200); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-200); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-cyan-200); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-purple-background: var(--cn-colors-cyan-900); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-red-text: var(--cn-colors-orange-200); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-red-background: var(--cn-colors-orange-900); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-violet-text: var(--cn-colors-blue-200); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-violet-background: var(--cn-colors-blue-900); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-200); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-orange-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-100); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-orange-200); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-cyan-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-850); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-chrome-800); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-200); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-800) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-200); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-pure-white); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-300); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-900); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-chrome-950); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-chrome-850); + --cn-brand-color-50: var(--cn-colors-cyan-50); + --cn-brand-color-100: var(--cn-colors-cyan-100); + --cn-brand-color-200: var(--cn-colors-cyan-200); + --cn-brand-color-300: var(--cn-colors-cyan-300); + --cn-brand-color-400: var(--cn-colors-cyan-400); + --cn-brand-color-500: var(--cn-colors-cyan-500); + --cn-brand-color-600: var(--cn-colors-cyan-600); + --cn-brand-color-700: var(--cn-colors-cyan-700); + --cn-brand-color-800: var(--cn-colors-cyan-800); + --cn-brand-color-900: var(--cn-colors-cyan-900); + --cn-brand-color-950: var(--cn-colors-cyan-950); + --cn-brand-on-color-50: var(--cn-colors-chrome-950); + --cn-brand-on-color-100: var(--cn-colors-chrome-950); + --cn-brand-on-color-200: var(--cn-colors-chrome-950); + --cn-brand-on-color-300: var(--cn-colors-chrome-950); + --cn-brand-on-color-400: var(--cn-colors-chrome-950); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-white); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-200); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-400); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-1); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-1); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-border: var(--cn-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: var(--cn-state-hover); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: var(--cn-state-selected); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-text-1); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-border-2); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-text-3); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-background-3); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-border-2); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-text-3); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-text-1); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-text-3); /* User data in the footer sidebar navigation menu. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags, replaced with orange. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --cn-component-tooltip-border: var(--cn-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/dark-dimmer-deuteranopia-gitness.css b/packages/core-design-system/src/styles/dark-dimmer-deuteranopia-gitness.css new file mode 100644 index 0000000000..2e8fbe8969 --- /dev/null +++ b/packages/core-design-system/src/styles/dark-dimmer-deuteranopia-gitness.css @@ -0,0 +1,492 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:08 GMT + * Copyright (c) Harness. + */ + +.dark-dimmer-deuteranopia-gitness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-pure-black); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-1000); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-950); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-150); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-400); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-cyan-300); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-orange-300); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-300); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-500); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-900); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: var(--cn-colors-chrome-900); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-cyan-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-orange-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-600); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-pure-white) l c h / 0.08); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-pure-white) l c h / 0.1); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-950); + --cn-component-alert-danger-title: var(--cn-colors-orange-100); /* Text color for danger alerts. Communicates critical information through high-contrast text. */ + --cn-component-alert-danger-description: var(--cn-colors-orange-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-cyan-300); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-orange-300); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-300); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-300); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-cyan-300); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-cyan-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-cyan-300); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-orange-300); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-orange-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-orange-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-orange-500) l c h / 0.12); /* Orange background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-orange-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-orange-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-blue-400); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-orange-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-100); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-100); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-cyan-400); /* Color for success status indicators. Communicates completed or positive states using cyan for deuteranopia accessibility. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-orange-400); /* Color for danger status indicators. Communicates error or critical warning states using orange for deuteranopia accessibility. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-cyan-400); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-300); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-300); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-300); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-cyan-300); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-cyan-900); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-300); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-300); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-300); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-300); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-300); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-cyan-300); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-purple-background: var(--cn-colors-cyan-900); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-red-text: var(--cn-colors-orange-300); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-red-background: var(--cn-colors-orange-900); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-violet-text: var(--cn-colors-blue-300); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-violet-background: var(--cn-colors-blue-900); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-300); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-orange-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-100); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-orange-200); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-cyan-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-850); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-chrome-800); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-200); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-800) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-200); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-300); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-900); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-chrome-950); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-chrome-850); + --cn-brand-color-50: var(--cn-colors-chrome-150); + --cn-brand-color-100: var(--cn-colors-chrome-150); + --cn-brand-color-200: var(--cn-colors-chrome-150); + --cn-brand-color-300: var(--cn-colors-chrome-150); + --cn-brand-color-400: var(--cn-colors-chrome-150); + --cn-brand-color-500: var(--cn-colors-chrome-900); + --cn-brand-color-600: var(--cn-colors-chrome-150); + --cn-brand-color-700: var(--cn-colors-chrome-900); + --cn-brand-color-800: var(--cn-colors-chrome-900); + --cn-brand-color-900: var(--cn-colors-chrome-900); + --cn-brand-color-950: var(--cn-colors-chrome-900); + --cn-brand-on-color-50: var(--cn-colors-pure-black); + --cn-brand-on-color-100: var(--cn-colors-pure-black); + --cn-brand-on-color-200: var(--cn-colors-pure-black); + --cn-brand-on-color-300: var(--cn-colors-pure-black); + --cn-brand-on-color-400: var(--cn-colors-pure-black); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-black); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-300); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-600); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-1); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-border: var(--cn-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: var(--cn-state-hover); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: var(--cn-state-selected); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-text-1); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-border-2); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-text-3); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-background-3); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-border-2); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-text-3); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-text-1); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-text-3); /* User data in the footer sidebar navigation menu. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags, replaced with orange. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --cn-component-tooltip-border: var(--cn-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/dark-dimmer-deuteranopia-harness.css b/packages/core-design-system/src/styles/dark-dimmer-deuteranopia-harness.css new file mode 100644 index 0000000000..eb749060c0 --- /dev/null +++ b/packages/core-design-system/src/styles/dark-dimmer-deuteranopia-harness.css @@ -0,0 +1,492 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:07 GMT + * Copyright (c) Harness. + */ + +.dark-dimmer-deuteranopia-harness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-pure-black); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-1000); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-950); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-150); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-400); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-cyan-300); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-orange-300); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-300); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-500); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-900); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: var(--cn-colors-chrome-900); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-cyan-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-orange-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-600); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-pure-white) l c h / 0.08); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-pure-white) l c h / 0.1); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-950); + --cn-component-alert-danger-title: var(--cn-colors-orange-100); /* Text color for danger alerts. Communicates critical information through high-contrast text. */ + --cn-component-alert-danger-description: var(--cn-colors-orange-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-cyan-300); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-orange-300); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-300); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-300); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-cyan-300); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-cyan-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-cyan-300); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-orange-300); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-orange-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-orange-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-orange-500) l c h / 0.12); /* Orange background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-orange-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-orange-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-blue-400); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-orange-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-100); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-100); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-cyan-400); /* Color for success status indicators. Communicates completed or positive states using cyan for deuteranopia accessibility. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-orange-400); /* Color for danger status indicators. Communicates error or critical warning states using orange for deuteranopia accessibility. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-cyan-400); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-300); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-300); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-300); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-cyan-300); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-cyan-900); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-300); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-300); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-300); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-300); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-300); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-cyan-300); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-purple-background: var(--cn-colors-cyan-900); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-red-text: var(--cn-colors-orange-300); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-red-background: var(--cn-colors-orange-900); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-violet-text: var(--cn-colors-blue-300); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-violet-background: var(--cn-colors-blue-900); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-300); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-orange-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-100); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-orange-200); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-cyan-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-850); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-chrome-800); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-200); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-800) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-200); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-300); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-900); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-chrome-950); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-chrome-850); + --cn-brand-color-50: var(--cn-colors-cyan-50); + --cn-brand-color-100: var(--cn-colors-cyan-100); + --cn-brand-color-200: var(--cn-colors-cyan-200); + --cn-brand-color-300: var(--cn-colors-cyan-300); + --cn-brand-color-400: var(--cn-colors-cyan-400); + --cn-brand-color-500: var(--cn-colors-cyan-500); + --cn-brand-color-600: var(--cn-colors-cyan-600); + --cn-brand-color-700: var(--cn-colors-cyan-700); + --cn-brand-color-800: var(--cn-colors-cyan-800); + --cn-brand-color-900: var(--cn-colors-cyan-900); + --cn-brand-color-950: var(--cn-colors-cyan-950); + --cn-brand-on-color-50: var(--cn-colors-chrome-950); + --cn-brand-on-color-100: var(--cn-colors-chrome-950); + --cn-brand-on-color-200: var(--cn-colors-chrome-950); + --cn-brand-on-color-300: var(--cn-colors-chrome-950); + --cn-brand-on-color-400: var(--cn-colors-chrome-950); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-white); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-300); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-600); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-1); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-border: var(--cn-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: var(--cn-state-hover); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: var(--cn-state-selected); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-text-1); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-border-2); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-text-3); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-background-3); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-border-2); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-text-3); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-text-1); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-text-3); /* User data in the footer sidebar navigation menu. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags, replaced with orange. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --cn-component-tooltip-border: var(--cn-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/dark-dimmer-gitness.css b/packages/core-design-system/src/styles/dark-dimmer-gitness.css new file mode 100644 index 0000000000..8e6d82d4c5 --- /dev/null +++ b/packages/core-design-system/src/styles/dark-dimmer-gitness.css @@ -0,0 +1,492 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:43:58 GMT + * Copyright (c) Harness. + */ + +.dark-dimmer-gitness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-pure-black); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-1000); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-950); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-150); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-400); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-green-300); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-300); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-300); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-500); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-900); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: var(--cn-colors-chrome-900); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-green-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-600); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-pure-white) l c h / 0.08); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-pure-white) l c h / 0.1); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-950); + --cn-component-alert-danger-title: var(--cn-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-green-300); /* Text color for success badges. Communicates positive status through readable green text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-green-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-green-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-red-300); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-300); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-300); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-purple-300); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-purple-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-outline-selected-border: var(--cn-border-width-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-success-text: var(--cn-colors-green-300); /* Text color for success buttons. Communicates positive actions through readable green text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-green-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-green-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-green-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-green-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-red-300); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-green-500) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-green-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-green-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-purple-400); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-green-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-100); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-100); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-green-400); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-purple-400); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-300); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-300); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-300); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-green-300); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ + --cn-component-tag-green-background: var(--cn-colors-green-900); /* Background color for green tags. Creates a distinct surface with green theme styling. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-green-950); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-300); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-300); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-300); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-300); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-300); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-purple-300); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --cn-component-tag-purple-background: var(--cn-colors-purple-900); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-red-text: var(--cn-colors-red-300); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-violet-300); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --cn-component-tag-violet-background: var(--cn-colors-violet-900); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-300); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-100); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-200); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-purple-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-850); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-chrome-800); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-200); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-800) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-200); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-pure-white); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-300); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-900); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-chrome-950); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-chrome-850); + --cn-brand-color-50: var(--cn-colors-chrome-150); + --cn-brand-color-100: var(--cn-colors-chrome-150); + --cn-brand-color-200: var(--cn-colors-chrome-150); + --cn-brand-color-300: var(--cn-colors-chrome-150); + --cn-brand-color-400: var(--cn-colors-chrome-150); + --cn-brand-color-500: var(--cn-colors-chrome-900); + --cn-brand-color-600: var(--cn-colors-chrome-150); + --cn-brand-color-700: var(--cn-colors-chrome-900); + --cn-brand-color-800: var(--cn-colors-chrome-900); + --cn-brand-color-900: var(--cn-colors-chrome-900); + --cn-brand-color-950: var(--cn-colors-chrome-900); + --cn-brand-on-color-50: var(--cn-colors-pure-black); + --cn-brand-on-color-100: var(--cn-colors-pure-black); + --cn-brand-on-color-200: var(--cn-colors-pure-black); + --cn-brand-on-color-300: var(--cn-colors-pure-black); + --cn-brand-on-color-400: var(--cn-colors-pure-black); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-black); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-300); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-600); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-1); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-border: var(--cn-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: var(--cn-state-hover); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: var(--cn-state-selected); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-text-1); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-border-2); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-text-3); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-background-3); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-border-2); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-text-3); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-text-1); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-text-3); /* User data in the footer sidebar navigation menu. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --cn-component-tooltip-border: var(--cn-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/dark-dimmer-harness.css b/packages/core-design-system/src/styles/dark-dimmer-harness.css new file mode 100644 index 0000000000..904013ced3 --- /dev/null +++ b/packages/core-design-system/src/styles/dark-dimmer-harness.css @@ -0,0 +1,492 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:43:57 GMT + * Copyright (c) Harness. + */ + +.dark-dimmer-harness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-pure-black); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-1000); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-950); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-150); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-400); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-green-300); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-300); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-300); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-500); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-900); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: var(--cn-colors-chrome-900); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-green-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-600); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-pure-white) l c h / 0.08); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-pure-white) l c h / 0.1); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-950); + --cn-component-alert-danger-title: var(--cn-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-green-300); /* Text color for success badges. Communicates positive status through readable green text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-green-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-green-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-red-300); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-300); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-300); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-purple-300); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-purple-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-outline-selected-border: var(--cn-border-width-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-success-text: var(--cn-colors-green-300); /* Text color for success buttons. Communicates positive actions through readable green text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-green-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-green-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-green-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-green-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-red-300); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-green-500) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-green-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-green-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-purple-400); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-green-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-100); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-100); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-green-400); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-purple-400); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-300); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-300); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-300); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-green-300); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ + --cn-component-tag-green-background: var(--cn-colors-green-900); /* Background color for green tags. Creates a distinct surface with green theme styling. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-green-950); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-300); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-300); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-300); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-300); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-300); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-purple-300); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --cn-component-tag-purple-background: var(--cn-colors-purple-900); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-red-text: var(--cn-colors-red-300); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-violet-300); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --cn-component-tag-violet-background: var(--cn-colors-violet-900); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-300); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-100); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-200); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-purple-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-850); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-chrome-800); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-200); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-800) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-200); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-pure-white); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-300); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-900); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-chrome-950); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-chrome-850); + --cn-brand-color-50: var(--cn-colors-cyan-50); + --cn-brand-color-100: var(--cn-colors-cyan-100); + --cn-brand-color-200: var(--cn-colors-cyan-200); + --cn-brand-color-300: var(--cn-colors-cyan-300); + --cn-brand-color-400: var(--cn-colors-cyan-400); + --cn-brand-color-500: var(--cn-colors-cyan-500); + --cn-brand-color-600: var(--cn-colors-cyan-600); + --cn-brand-color-700: var(--cn-colors-cyan-700); + --cn-brand-color-800: var(--cn-colors-cyan-800); + --cn-brand-color-900: var(--cn-colors-cyan-900); + --cn-brand-color-950: var(--cn-colors-cyan-950); + --cn-brand-on-color-50: var(--cn-colors-chrome-950); + --cn-brand-on-color-100: var(--cn-colors-chrome-950); + --cn-brand-on-color-200: var(--cn-colors-chrome-950); + --cn-brand-on-color-300: var(--cn-colors-chrome-950); + --cn-brand-on-color-400: var(--cn-colors-chrome-950); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-white); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-300); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-600); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-1); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-border: var(--cn-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: var(--cn-state-hover); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: var(--cn-state-selected); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-text-1); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-border-2); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-text-3); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-background-3); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-border-2); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-text-3); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-text-1); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-text-3); /* User data in the footer sidebar navigation menu. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --cn-component-tooltip-border: var(--cn-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/dark-dimmer-protanopia-gitness.css b/packages/core-design-system/src/styles/dark-dimmer-protanopia-gitness.css new file mode 100644 index 0000000000..8e89860d69 --- /dev/null +++ b/packages/core-design-system/src/styles/dark-dimmer-protanopia-gitness.css @@ -0,0 +1,492 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:03 GMT + * Copyright (c) Harness. + */ + +.dark-dimmer-protanopia-gitness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-pure-black); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-1000); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-950); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-150); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-400); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-blue-300); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-300); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-300); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-500); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-900); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: var(--cn-colors-chrome-900); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-blue-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-600); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-pure-white) l c h / 0.08); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-pure-white) l c h / 0.1); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-950); + --cn-component-alert-danger-title: var(--cn-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-blue-300); /* Text color for success badges. Communicates positive status through readable blue text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-blue-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-blue-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-red-300); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-300); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-300); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-purple-300); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-purple-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-blue-300); /* Text color for success buttons. Communicates positive actions through readable blue text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-blue-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-blue-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-blue-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-blue-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-red-300); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Blue background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-blue-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-purple-400); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-blue-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-100); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-100); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-blue-300); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-purple-400); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-300); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-300); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-300); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-blue-300); /* Text color for green tags. Adjusted for protanopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-blue-900); /* Background color for green tags. Adjusted for protanopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for green tags. Adjusted for protanopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-300); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-300); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-300); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-300); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-300); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-purple-300); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --cn-component-tag-purple-background: var(--cn-colors-purple-900); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-red-text: var(--cn-colors-red-300); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-violet-300); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --cn-component-tag-violet-background: var(--cn-colors-violet-900); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-300); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-100); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-200); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-purple-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-850); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-chrome-800); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-200); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-800) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-200); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-pure-white); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-300); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-900); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-chrome-950); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-chrome-850); + --cn-brand-color-50: var(--cn-colors-chrome-150); + --cn-brand-color-100: var(--cn-colors-chrome-150); + --cn-brand-color-200: var(--cn-colors-chrome-150); + --cn-brand-color-300: var(--cn-colors-chrome-150); + --cn-brand-color-400: var(--cn-colors-chrome-150); + --cn-brand-color-500: var(--cn-colors-chrome-900); + --cn-brand-color-600: var(--cn-colors-chrome-150); + --cn-brand-color-700: var(--cn-colors-chrome-900); + --cn-brand-color-800: var(--cn-colors-chrome-900); + --cn-brand-color-900: var(--cn-colors-chrome-900); + --cn-brand-color-950: var(--cn-colors-chrome-900); + --cn-brand-on-color-50: var(--cn-colors-pure-black); + --cn-brand-on-color-100: var(--cn-colors-pure-black); + --cn-brand-on-color-200: var(--cn-colors-pure-black); + --cn-brand-on-color-300: var(--cn-colors-pure-black); + --cn-brand-on-color-400: var(--cn-colors-pure-black); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-black); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-300); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-600); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-1); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-border: var(--cn-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: var(--cn-state-hover); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: var(--cn-state-selected); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-text-1); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-border-2); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-text-3); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-background-3); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-border-2); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-text-3); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-text-1); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-text-3); /* User data in the footer sidebar navigation menu. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --cn-component-tooltip-border: var(--cn-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/dark-dimmer-protanopia-harness.css b/packages/core-design-system/src/styles/dark-dimmer-protanopia-harness.css new file mode 100644 index 0000000000..c8cc4fa8ea --- /dev/null +++ b/packages/core-design-system/src/styles/dark-dimmer-protanopia-harness.css @@ -0,0 +1,492 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:03 GMT + * Copyright (c) Harness. + */ + +.dark-dimmer-protanopia-harness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-pure-black); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-1000); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-950); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-150); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-400); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-blue-300); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-300); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-300); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-500); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-900); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: var(--cn-colors-chrome-900); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-blue-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-600); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-pure-white) l c h / 0.08); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-pure-white) l c h / 0.1); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-950); + --cn-component-alert-danger-title: var(--cn-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-blue-300); /* Text color for success badges. Communicates positive status through readable blue text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-blue-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-blue-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-red-300); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-300); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-300); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-purple-300); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-purple-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-blue-300); /* Text color for success buttons. Communicates positive actions through readable blue text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-blue-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-blue-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-blue-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-blue-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-red-300); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Blue background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-blue-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-purple-400); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-blue-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-100); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-100); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-blue-300); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-purple-400); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-300); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-300); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-300); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-blue-300); /* Text color for green tags. Adjusted for protanopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-blue-900); /* Background color for green tags. Adjusted for protanopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for green tags. Adjusted for protanopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-300); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-300); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-300); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-300); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-300); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-purple-300); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --cn-component-tag-purple-background: var(--cn-colors-purple-900); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-red-text: var(--cn-colors-red-300); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-violet-300); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --cn-component-tag-violet-background: var(--cn-colors-violet-900); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-300); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-100); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-200); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-purple-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-850); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-chrome-800); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-200); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-800) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-200); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-pure-white); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-300); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-900); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-chrome-950); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-chrome-850); + --cn-brand-color-50: var(--cn-colors-cyan-50); + --cn-brand-color-100: var(--cn-colors-cyan-100); + --cn-brand-color-200: var(--cn-colors-cyan-200); + --cn-brand-color-300: var(--cn-colors-cyan-300); + --cn-brand-color-400: var(--cn-colors-cyan-400); + --cn-brand-color-500: var(--cn-colors-cyan-500); + --cn-brand-color-600: var(--cn-colors-cyan-600); + --cn-brand-color-700: var(--cn-colors-cyan-700); + --cn-brand-color-800: var(--cn-colors-cyan-800); + --cn-brand-color-900: var(--cn-colors-cyan-900); + --cn-brand-color-950: var(--cn-colors-cyan-950); + --cn-brand-on-color-50: var(--cn-colors-chrome-950); + --cn-brand-on-color-100: var(--cn-colors-chrome-950); + --cn-brand-on-color-200: var(--cn-colors-chrome-950); + --cn-brand-on-color-300: var(--cn-colors-chrome-950); + --cn-brand-on-color-400: var(--cn-colors-chrome-950); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-white); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-300); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-600); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-1); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-border: var(--cn-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: var(--cn-state-hover); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: var(--cn-state-selected); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-text-1); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-border-2); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-text-3); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-background-3); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-border-2); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-text-3); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-text-1); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-text-3); /* User data in the footer sidebar navigation menu. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --cn-component-tooltip-border: var(--cn-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/dark-dimmer-tritanopia-gitness.css b/packages/core-design-system/src/styles/dark-dimmer-tritanopia-gitness.css new file mode 100644 index 0000000000..d88930b740 --- /dev/null +++ b/packages/core-design-system/src/styles/dark-dimmer-tritanopia-gitness.css @@ -0,0 +1,492 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:11 GMT + * Copyright (c) Harness. + */ + +.dark-dimmer-tritanopia-gitness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-pure-black); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-1000); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-950); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-150); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-400); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-cyan-300); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-300); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-orange-300); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-500); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-900); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: var(--cn-colors-chrome-900); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-cyan-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-orange-600); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-pure-white) l c h / 0.08); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-pure-white) l c h / 0.1); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-950); + --cn-component-alert-danger-title: var(--cn-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-cyan-300); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-red-300); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-orange-300); /* Text color for warning badges. Signals caution states with readable orange text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-300); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-cyan-300); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-cyan-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-cyan-300); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-red-300); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-cyan-400); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed: var(--cn-colors-cyan-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-100); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-100); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-cyan-400); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-orange-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-cyan-400); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-300); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-300); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-300); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-cyan-300); /* Text color for green tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-cyan-900); /* Background color for green tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-300); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-300); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-300); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-300); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-300); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-cyan-300); /* Text color for purple tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-purple-background: var(--cn-colors-cyan-900); /* Background color for purple tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-red-text: var(--cn-colors-red-300); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-cyan-300); /* Text color for violet tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-violet-background: var(--cn-colors-cyan-900); /* Background color for violet tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for violet tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-yellow-text: var(--cn-colors-orange-300); /* Text color for yellow tags, replaced with orange for tritanopia visibility. */ + --cn-component-tag-yellow-background: var(--cn-colors-orange-900); /* Background color for yellow tags, replaced with orange for tritanopia visibility. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for yellow tags, replaced with orange for tritanopia visibility. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-100); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-200); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-orange-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-850); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-chrome-800); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-200); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-800) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-200); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-pure-white); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-300); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-900); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-chrome-950); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-chrome-850); + --cn-brand-color-50: var(--cn-colors-chrome-150); + --cn-brand-color-100: var(--cn-colors-chrome-150); + --cn-brand-color-200: var(--cn-colors-chrome-150); + --cn-brand-color-300: var(--cn-colors-chrome-150); + --cn-brand-color-400: var(--cn-colors-chrome-150); + --cn-brand-color-500: var(--cn-colors-chrome-900); + --cn-brand-color-600: var(--cn-colors-chrome-150); + --cn-brand-color-700: var(--cn-colors-chrome-900); + --cn-brand-color-800: var(--cn-colors-chrome-900); + --cn-brand-color-900: var(--cn-colors-chrome-900); + --cn-brand-color-950: var(--cn-colors-chrome-900); + --cn-brand-on-color-50: var(--cn-colors-pure-black); + --cn-brand-on-color-100: var(--cn-colors-pure-black); + --cn-brand-on-color-200: var(--cn-colors-pure-black); + --cn-brand-on-color-300: var(--cn-colors-pure-black); + --cn-brand-on-color-400: var(--cn-colors-pure-black); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-black); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-300); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-600); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-1); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-border: var(--cn-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: var(--cn-state-hover); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: var(--cn-state-selected); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-text-1); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-border-2); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-text-3); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-background-3); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-border-2); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-text-3); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-text-1); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-text-3); /* User data in the footer sidebar navigation menu. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags, replaced with cyan. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags, replaced with orange. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --cn-component-tooltip-border: var(--cn-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/dark-dimmer-tritanopia-harness.css b/packages/core-design-system/src/styles/dark-dimmer-tritanopia-harness.css new file mode 100644 index 0000000000..f5bf7e20a0 --- /dev/null +++ b/packages/core-design-system/src/styles/dark-dimmer-tritanopia-harness.css @@ -0,0 +1,492 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:11 GMT + * Copyright (c) Harness. + */ + +.dark-dimmer-tritanopia-harness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-pure-black); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-1000); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-950); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-150); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-400); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-cyan-300); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-300); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-orange-300); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-500); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-900); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: var(--cn-colors-chrome-900); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-cyan-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-orange-600); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-pure-white) l c h / 0.08); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-pure-white) l c h / 0.1); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-950); + --cn-component-alert-danger-title: var(--cn-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-cyan-300); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-red-300); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-orange-300); /* Text color for warning badges. Signals caution states with readable orange text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-300); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-cyan-300); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-cyan-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-cyan-300); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-red-300); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-cyan-400); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed: var(--cn-colors-cyan-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-100); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-100); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-cyan-400); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-orange-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-cyan-400); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-300); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-300); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-300); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-cyan-300); /* Text color for green tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-cyan-900); /* Background color for green tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-300); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-300); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-300); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-300); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-300); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-cyan-300); /* Text color for purple tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-purple-background: var(--cn-colors-cyan-900); /* Background color for purple tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-red-text: var(--cn-colors-red-300); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-cyan-300); /* Text color for violet tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-violet-background: var(--cn-colors-cyan-900); /* Background color for violet tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for violet tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-yellow-text: var(--cn-colors-orange-300); /* Text color for yellow tags, replaced with orange for tritanopia visibility. */ + --cn-component-tag-yellow-background: var(--cn-colors-orange-900); /* Background color for yellow tags, replaced with orange for tritanopia visibility. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for yellow tags, replaced with orange for tritanopia visibility. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-100); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-200); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-orange-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-850); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-chrome-800); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-200); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-800) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-200); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-pure-white); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-300); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-900); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-chrome-950); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-chrome-850); + --cn-brand-color-50: var(--cn-colors-cyan-50); + --cn-brand-color-100: var(--cn-colors-cyan-100); + --cn-brand-color-200: var(--cn-colors-cyan-200); + --cn-brand-color-300: var(--cn-colors-cyan-300); + --cn-brand-color-400: var(--cn-colors-cyan-400); + --cn-brand-color-500: var(--cn-colors-cyan-500); + --cn-brand-color-600: var(--cn-colors-cyan-600); + --cn-brand-color-700: var(--cn-colors-cyan-700); + --cn-brand-color-800: var(--cn-colors-cyan-800); + --cn-brand-color-900: var(--cn-colors-cyan-900); + --cn-brand-color-950: var(--cn-colors-cyan-950); + --cn-brand-on-color-50: var(--cn-colors-chrome-950); + --cn-brand-on-color-100: var(--cn-colors-chrome-950); + --cn-brand-on-color-200: var(--cn-colors-chrome-950); + --cn-brand-on-color-300: var(--cn-colors-chrome-950); + --cn-brand-on-color-400: var(--cn-colors-chrome-950); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-white); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-300); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-600); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-1); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-border: var(--cn-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: var(--cn-state-hover); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: var(--cn-state-selected); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-text-1); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-border-2); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-text-3); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-background-3); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-border-2); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-text-3); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-text-1); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-text-3); /* User data in the footer sidebar navigation menu. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags, replaced with cyan. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags, replaced with orange. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --cn-component-tooltip-border: var(--cn-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/dark-gitness.css b/packages/core-design-system/src/styles/dark-gitness.css new file mode 100644 index 0000000000..e91aa1dc59 --- /dev/null +++ b/packages/core-design-system/src/styles/dark-gitness.css @@ -0,0 +1,493 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:43:56 GMT + * Copyright (c) Harness. + */ + +.dark-gitness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-chrome-1000); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-950); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-900); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-300); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-500); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-green-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-200); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-300); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-850); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-850) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-green-400); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-400); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-pure-white) l c h / 0.08); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-pure-white) l c h / 0.1); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-950); + --cn-component-alert-danger-title: var(--cn-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-green-200); /* Text color for success badges. Communicates positive status through readable green text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-green-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-green-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-purple-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-purple-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-green-200); /* Text color for success buttons. Communicates positive actions through readable green text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-green-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-green-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-green-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-green-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-green-500) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-green-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-green-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-purple-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-green-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-green-300); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-200); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-200); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-200); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-green-200); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ + --cn-component-tag-green-background: var(--cn-colors-green-900); /* Background color for green tags. Creates a distinct surface with green theme styling. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-green-950); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-200); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-200); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-200); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-200); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-200); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-purple-200); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --cn-component-tag-purple-background: var(--cn-colors-purple-900); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-red-text: var(--cn-colors-red-200); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-violet-200); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --cn-component-tag-violet-background: var(--cn-colors-violet-900); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-200); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-100); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-200); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-purple-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-850); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-chrome-800); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-200); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-800) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-200); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-pure-white); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-300); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-900); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-chrome-950); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-chrome-850); + --cn-brand-color-50: var(--cn-colors-chrome-150); + --cn-brand-color-100: var(--cn-colors-chrome-150); + --cn-brand-color-200: var(--cn-colors-chrome-150); + --cn-brand-color-300: var(--cn-colors-chrome-150); + --cn-brand-color-400: var(--cn-colors-chrome-150); + --cn-brand-color-500: var(--cn-colors-chrome-900); + --cn-brand-color-600: var(--cn-colors-chrome-150); + --cn-brand-color-700: var(--cn-colors-chrome-900); + --cn-brand-color-800: var(--cn-colors-chrome-900); + --cn-brand-color-900: var(--cn-colors-chrome-900); + --cn-brand-color-950: var(--cn-colors-chrome-900); + --cn-brand-on-color-50: var(--cn-colors-pure-black); + --cn-brand-on-color-100: var(--cn-colors-pure-black); + --cn-brand-on-color-200: var(--cn-colors-pure-black); + --cn-brand-on-color-300: var(--cn-colors-pure-black); + --cn-brand-on-color-400: var(--cn-colors-pure-black); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-black); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-200); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-400); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-1); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-2); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-title: var(--cn-text-1); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-description: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-1); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-border: var(--cn-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: var(--cn-state-hover); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: var(--cn-state-selected); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-text-1); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-border-2); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-text-3); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-background-3); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-border-2); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-text-3); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-text-1); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-text-3); /* User data in the footer sidebar navigation menu. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --cn-component-tooltip-border: var(--cn-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/dark-harness.css b/packages/core-design-system/src/styles/dark-harness.css new file mode 100644 index 0000000000..355ccc2914 --- /dev/null +++ b/packages/core-design-system/src/styles/dark-harness.css @@ -0,0 +1,493 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:43:55 GMT + * Copyright (c) Harness. + */ + +.dark-harness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-chrome-1000); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-950); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-900); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-300); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-500); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-green-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-200); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-300); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-850); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-850) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-green-400); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-400); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-pure-white) l c h / 0.08); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-pure-white) l c h / 0.1); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-950); + --cn-component-alert-danger-title: var(--cn-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-green-200); /* Text color for success badges. Communicates positive status through readable green text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-green-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-green-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-purple-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-purple-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-green-200); /* Text color for success buttons. Communicates positive actions through readable green text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-green-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-green-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-green-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-green-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-green-500) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-green-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-green-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-purple-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-green-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-green-300); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-200); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-200); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-200); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-green-200); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ + --cn-component-tag-green-background: var(--cn-colors-green-900); /* Background color for green tags. Creates a distinct surface with green theme styling. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-green-950); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-200); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-200); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-200); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-200); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-200); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-purple-200); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --cn-component-tag-purple-background: var(--cn-colors-purple-900); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-red-text: var(--cn-colors-red-200); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-violet-200); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --cn-component-tag-violet-background: var(--cn-colors-violet-900); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-200); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-100); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-200); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-purple-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-850); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-chrome-800); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-200); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-800) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-200); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-pure-white); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-300); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-900); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-chrome-950); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-chrome-850); + --cn-brand-color-50: var(--cn-colors-cyan-50); + --cn-brand-color-100: var(--cn-colors-cyan-100); + --cn-brand-color-200: var(--cn-colors-cyan-200); + --cn-brand-color-300: var(--cn-colors-cyan-300); + --cn-brand-color-400: var(--cn-colors-cyan-400); + --cn-brand-color-500: var(--cn-colors-cyan-500); + --cn-brand-color-600: var(--cn-colors-cyan-600); + --cn-brand-color-700: var(--cn-colors-cyan-700); + --cn-brand-color-800: var(--cn-colors-cyan-800); + --cn-brand-color-900: var(--cn-colors-cyan-900); + --cn-brand-color-950: var(--cn-colors-cyan-950); + --cn-brand-on-color-50: var(--cn-colors-chrome-950); + --cn-brand-on-color-100: var(--cn-colors-chrome-950); + --cn-brand-on-color-200: var(--cn-colors-chrome-950); + --cn-brand-on-color-300: var(--cn-colors-chrome-950); + --cn-brand-on-color-400: var(--cn-colors-chrome-950); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-white); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-200); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-400); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-1); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-2); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-title: var(--cn-text-1); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-description: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-1); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-border: var(--cn-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: var(--cn-state-hover); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: var(--cn-state-selected); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-text-1); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-border-2); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-text-3); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-background-3); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-border-2); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-text-3); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-text-1); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-text-3); /* User data in the footer sidebar navigation menu. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --cn-component-tooltip-border: var(--cn-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/dark-high-contrast-deuteranopia-gitness.css b/packages/core-design-system/src/styles/dark-high-contrast-deuteranopia-gitness.css new file mode 100644 index 0000000000..c080d94da5 --- /dev/null +++ b/packages/core-design-system/src/styles/dark-high-contrast-deuteranopia-gitness.css @@ -0,0 +1,492 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:08 GMT + * Copyright (c) Harness. + */ + +.dark-high-contrast-deuteranopia-gitness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-chrome-1000); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-950); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-850); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-200); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-400); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-cyan-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-orange-200); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-200); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-700); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-800) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-cyan-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-orange-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-300); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-pure-white) l c h / 0.08); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-pure-white) l c h / 0.1); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-950); + --cn-component-alert-danger-title: var(--cn-colors-orange-100); /* Text color for danger alerts. Communicates critical information through high-contrast orange text. */ + --cn-component-alert-danger-description: var(--cn-colors-orange-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-cyan-200); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-orange-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-orange-300) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-300) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-cyan-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-cyan-300) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-cyan-200); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-orange-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-orange-300) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-orange-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-orange-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-orange-500) l c h / 0.12); /* Orange background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-orange-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-orange-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-blue-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-orange-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-orange-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-100); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-800); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-100); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-800); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-100); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-800); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-cyan-100); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-cyan-800); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-100); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-800); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-100); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-800); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-100); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-800); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-100); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-800); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-100); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-800); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-cyan-100); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-purple-background: var(--cn-colors-cyan-800); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-red-text: var(--cn-colors-orange-100); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-red-background: var(--cn-colors-orange-800); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-violet-text: var(--cn-colors-blue-100); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-violet-background: var(--cn-colors-blue-800); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-100); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-800); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-orange-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-100); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-orange-200); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-cyan-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-850); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-chrome-800); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-200); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-800) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-200); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-pure-white); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-300); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-900); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-chrome-950); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-chrome-850); + --cn-brand-color-50: var(--cn-colors-chrome-150); + --cn-brand-color-100: var(--cn-colors-chrome-150); + --cn-brand-color-200: var(--cn-colors-chrome-150); + --cn-brand-color-300: var(--cn-colors-chrome-150); + --cn-brand-color-400: var(--cn-colors-chrome-150); + --cn-brand-color-500: var(--cn-colors-chrome-900); + --cn-brand-color-600: var(--cn-colors-chrome-150); + --cn-brand-color-700: var(--cn-colors-chrome-900); + --cn-brand-color-800: var(--cn-colors-chrome-900); + --cn-brand-color-900: var(--cn-colors-chrome-900); + --cn-brand-color-950: var(--cn-colors-chrome-900); + --cn-brand-on-color-50: var(--cn-colors-pure-black); + --cn-brand-on-color-100: var(--cn-colors-pure-black); + --cn-brand-on-color-200: var(--cn-colors-pure-black); + --cn-brand-on-color-300: var(--cn-colors-pure-black); + --cn-brand-on-color-400: var(--cn-colors-pure-black); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-black); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-200); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-300); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-1); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-border: var(--cn-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: var(--cn-state-hover); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: var(--cn-state-selected); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-text-1); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-border-2); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-text-3); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-background-3); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-border-2); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-text-3); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-text-1); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-text-3); /* User data in the footer sidebar navigation menu. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags, replaced with orange. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --cn-component-tooltip-border: var(--cn-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/dark-high-contrast-deuteranopia-harness.css b/packages/core-design-system/src/styles/dark-high-contrast-deuteranopia-harness.css new file mode 100644 index 0000000000..bb10bb63ab --- /dev/null +++ b/packages/core-design-system/src/styles/dark-high-contrast-deuteranopia-harness.css @@ -0,0 +1,492 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:08 GMT + * Copyright (c) Harness. + */ + +.dark-high-contrast-deuteranopia-harness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-chrome-1000); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-950); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-850); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-200); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-400); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-cyan-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-orange-200); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-200); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-700); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-800) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-cyan-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-orange-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-300); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-pure-white) l c h / 0.08); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-pure-white) l c h / 0.1); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-950); + --cn-component-alert-danger-title: var(--cn-colors-orange-100); /* Text color for danger alerts. Communicates critical information through high-contrast orange text. */ + --cn-component-alert-danger-description: var(--cn-colors-orange-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-cyan-200); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-orange-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-orange-300) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-300) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-cyan-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-cyan-300) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-cyan-200); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-orange-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-orange-300) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-orange-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-orange-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-orange-500) l c h / 0.12); /* Orange background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-orange-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-orange-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-blue-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-orange-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-orange-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-100); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-800); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-100); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-800); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-100); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-800); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-cyan-100); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-cyan-800); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-100); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-800); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-100); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-800); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-100); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-800); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-100); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-800); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-100); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-800); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-cyan-100); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-purple-background: var(--cn-colors-cyan-800); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-red-text: var(--cn-colors-orange-100); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-red-background: var(--cn-colors-orange-800); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-violet-text: var(--cn-colors-blue-100); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-violet-background: var(--cn-colors-blue-800); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-100); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-800); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-orange-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-100); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-orange-200); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-cyan-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-850); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-chrome-800); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-200); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-800) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-200); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-pure-white); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-300); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-900); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-chrome-950); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-chrome-850); + --cn-brand-color-50: var(--cn-colors-cyan-50); + --cn-brand-color-100: var(--cn-colors-cyan-100); + --cn-brand-color-200: var(--cn-colors-cyan-200); + --cn-brand-color-300: var(--cn-colors-cyan-300); + --cn-brand-color-400: var(--cn-colors-cyan-400); + --cn-brand-color-500: var(--cn-colors-cyan-500); + --cn-brand-color-600: var(--cn-colors-cyan-600); + --cn-brand-color-700: var(--cn-colors-cyan-700); + --cn-brand-color-800: var(--cn-colors-cyan-800); + --cn-brand-color-900: var(--cn-colors-cyan-900); + --cn-brand-color-950: var(--cn-colors-cyan-950); + --cn-brand-on-color-50: var(--cn-colors-chrome-950); + --cn-brand-on-color-100: var(--cn-colors-chrome-950); + --cn-brand-on-color-200: var(--cn-colors-chrome-950); + --cn-brand-on-color-300: var(--cn-colors-chrome-950); + --cn-brand-on-color-400: var(--cn-colors-chrome-950); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-white); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-200); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-300); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-1); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-border: var(--cn-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: var(--cn-state-hover); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: var(--cn-state-selected); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-text-1); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-border-2); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-text-3); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-background-3); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-border-2); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-text-3); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-text-1); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-text-3); /* User data in the footer sidebar navigation menu. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags, replaced with orange. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --cn-component-tooltip-border: var(--cn-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/dark-high-contrast-gitness.css b/packages/core-design-system/src/styles/dark-high-contrast-gitness.css new file mode 100644 index 0000000000..345f6e8fac --- /dev/null +++ b/packages/core-design-system/src/styles/dark-high-contrast-gitness.css @@ -0,0 +1,492 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:00 GMT + * Copyright (c) Harness. + */ + +.dark-high-contrast-gitness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-chrome-1000); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-950); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-850); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-200); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-400); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-green-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-200); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-200); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-700); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-800) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-green-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-300); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-pure-white) l c h / 0.08); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-pure-white) l c h / 0.1); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-950); + --cn-component-alert-danger-title: var(--cn-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-green-200); /* Text color for success badges. Communicates positive status through readable green text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-green-300) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-green-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-300) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-purple-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-purple-300) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-green-200); /* Text color for success buttons. Communicates positive actions through readable green text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-green-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-green-300) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-green-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-green-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-green-500) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-green-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-green-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-purple-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-green-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-green-300); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-100); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-800); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-100); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-800); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-100); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-800); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-green-100); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ + --cn-component-tag-green-background: var(--cn-colors-green-800); /* Background color for green tags. Creates a distinct surface with green theme styling. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-green-950); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-100); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-800); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-100); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-800); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-100); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-800); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-100); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-800); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-100); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-800); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-purple-100); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --cn-component-tag-purple-background: var(--cn-colors-purple-800); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-red-text: var(--cn-colors-red-100); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-800); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-violet-100); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --cn-component-tag-violet-background: var(--cn-colors-violet-800); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-100); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-800); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-100); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-200); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-purple-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-850); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-chrome-800); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-200); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-800) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-200); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-pure-white); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-300); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-900); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-chrome-950); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-chrome-850); + --cn-brand-color-50: var(--cn-colors-chrome-150); + --cn-brand-color-100: var(--cn-colors-chrome-150); + --cn-brand-color-200: var(--cn-colors-chrome-150); + --cn-brand-color-300: var(--cn-colors-chrome-150); + --cn-brand-color-400: var(--cn-colors-chrome-150); + --cn-brand-color-500: var(--cn-colors-chrome-900); + --cn-brand-color-600: var(--cn-colors-chrome-150); + --cn-brand-color-700: var(--cn-colors-chrome-900); + --cn-brand-color-800: var(--cn-colors-chrome-900); + --cn-brand-color-900: var(--cn-colors-chrome-900); + --cn-brand-color-950: var(--cn-colors-chrome-900); + --cn-brand-on-color-50: var(--cn-colors-pure-black); + --cn-brand-on-color-100: var(--cn-colors-pure-black); + --cn-brand-on-color-200: var(--cn-colors-pure-black); + --cn-brand-on-color-300: var(--cn-colors-pure-black); + --cn-brand-on-color-400: var(--cn-colors-pure-black); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-black); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-200); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-300); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-1); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-border: var(--cn-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: var(--cn-state-hover); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: var(--cn-state-selected); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-text-1); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-border-2); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-text-3); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-background-3); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-border-2); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-text-3); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-text-1); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-text-3); /* User data in the footer sidebar navigation menu. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --cn-component-tooltip-border: var(--cn-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/dark-high-contrast-harness.css b/packages/core-design-system/src/styles/dark-high-contrast-harness.css new file mode 100644 index 0000000000..8ad6cb8b00 --- /dev/null +++ b/packages/core-design-system/src/styles/dark-high-contrast-harness.css @@ -0,0 +1,492 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:00 GMT + * Copyright (c) Harness. + */ + +.dark-high-contrast-harness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-chrome-1000); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-950); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-850); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-200); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-400); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-green-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-200); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-200); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-700); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-800) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-green-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-300); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-pure-white) l c h / 0.08); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-pure-white) l c h / 0.1); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-950); + --cn-component-alert-danger-title: var(--cn-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-green-200); /* Text color for success badges. Communicates positive status through readable green text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-green-300) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-green-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-300) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-purple-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-purple-300) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-green-200); /* Text color for success buttons. Communicates positive actions through readable green text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-green-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-green-300) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-green-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-green-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-green-500) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-green-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-green-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-purple-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-green-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-green-300); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-100); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-800); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-100); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-800); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-100); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-800); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-green-100); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ + --cn-component-tag-green-background: var(--cn-colors-green-800); /* Background color for green tags. Creates a distinct surface with green theme styling. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-green-950); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-100); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-800); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-100); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-800); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-100); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-800); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-100); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-800); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-100); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-800); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-purple-100); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --cn-component-tag-purple-background: var(--cn-colors-purple-800); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-red-text: var(--cn-colors-red-100); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-800); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-violet-100); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --cn-component-tag-violet-background: var(--cn-colors-violet-800); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-100); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-800); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-100); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-200); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-purple-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-850); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-chrome-800); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-200); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-800) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-200); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-pure-white); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-300); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-900); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-chrome-950); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-chrome-850); + --cn-brand-color-50: var(--cn-colors-cyan-50); + --cn-brand-color-100: var(--cn-colors-cyan-100); + --cn-brand-color-200: var(--cn-colors-cyan-200); + --cn-brand-color-300: var(--cn-colors-cyan-300); + --cn-brand-color-400: var(--cn-colors-cyan-400); + --cn-brand-color-500: var(--cn-colors-cyan-500); + --cn-brand-color-600: var(--cn-colors-cyan-600); + --cn-brand-color-700: var(--cn-colors-cyan-700); + --cn-brand-color-800: var(--cn-colors-cyan-800); + --cn-brand-color-900: var(--cn-colors-cyan-900); + --cn-brand-color-950: var(--cn-colors-cyan-950); + --cn-brand-on-color-50: var(--cn-colors-chrome-950); + --cn-brand-on-color-100: var(--cn-colors-chrome-950); + --cn-brand-on-color-200: var(--cn-colors-chrome-950); + --cn-brand-on-color-300: var(--cn-colors-chrome-950); + --cn-brand-on-color-400: var(--cn-colors-chrome-950); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-white); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-200); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-300); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-1); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-border: var(--cn-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: var(--cn-state-hover); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: var(--cn-state-selected); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-text-1); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-border-2); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-text-3); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-background-3); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-border-2); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-text-3); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-text-1); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-text-3); /* User data in the footer sidebar navigation menu. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --cn-component-tooltip-border: var(--cn-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/dark-high-contrast-protanopia-gitness.css b/packages/core-design-system/src/styles/dark-high-contrast-protanopia-gitness.css new file mode 100644 index 0000000000..fb0ba84217 --- /dev/null +++ b/packages/core-design-system/src/styles/dark-high-contrast-protanopia-gitness.css @@ -0,0 +1,492 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:05 GMT + * Copyright (c) Harness. + */ + +.dark-high-contrast-protanopia-gitness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-chrome-1000); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-950); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-900); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-200); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-400); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-blue-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-200); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-200); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-800); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-800) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-blue-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-300); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-pure-white) l c h / 0.08); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-pure-white) l c h / 0.1); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-950); + --cn-component-alert-danger-title: var(--cn-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-blue-200); /* Text color for success badges. Communicates positive status through readable blue text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-blue-300) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-blue-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-300) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-purple-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-purple-300) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-blue-200); /* Text color for success buttons. Communicates positive actions through readable blue text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-blue-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-blue-300) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-blue-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-blue-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Blue background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-blue-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-purple-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-blue-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-blue-300); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-100); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-800); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-100); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-800); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-100); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-800); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-blue-100); /* Text color for green tags. Adjusted for protanopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-blue-800); /* Background color for green tags. Adjusted for protanopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for green tags. Adjusted for protanopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-100); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-800); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-100); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-800); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-100); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-800); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-100); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-800); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-100); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-800); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-purple-100); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --cn-component-tag-purple-background: var(--cn-colors-purple-800); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-red-text: var(--cn-colors-red-100); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-800); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-violet-100); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --cn-component-tag-violet-background: var(--cn-colors-violet-800); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-100); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-800); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-100); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-200); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-purple-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-850); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-chrome-800); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-200); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-800) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-200); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-pure-white); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-300); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-900); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-chrome-950); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-chrome-850); + --cn-brand-color-50: var(--cn-colors-chrome-150); + --cn-brand-color-100: var(--cn-colors-chrome-150); + --cn-brand-color-200: var(--cn-colors-chrome-150); + --cn-brand-color-300: var(--cn-colors-chrome-150); + --cn-brand-color-400: var(--cn-colors-chrome-150); + --cn-brand-color-500: var(--cn-colors-chrome-900); + --cn-brand-color-600: var(--cn-colors-chrome-150); + --cn-brand-color-700: var(--cn-colors-chrome-900); + --cn-brand-color-800: var(--cn-colors-chrome-900); + --cn-brand-color-900: var(--cn-colors-chrome-900); + --cn-brand-color-950: var(--cn-colors-chrome-900); + --cn-brand-on-color-50: var(--cn-colors-pure-black); + --cn-brand-on-color-100: var(--cn-colors-pure-black); + --cn-brand-on-color-200: var(--cn-colors-pure-black); + --cn-brand-on-color-300: var(--cn-colors-pure-black); + --cn-brand-on-color-400: var(--cn-colors-pure-black); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-black); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-200); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-300); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-1); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-border: var(--cn-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: var(--cn-state-hover); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: var(--cn-state-selected); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-text-1); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-border-2); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-text-3); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-background-3); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-border-2); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-text-3); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-text-1); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-text-3); /* User data in the footer sidebar navigation menu. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --cn-component-tooltip-border: var(--cn-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/dark-high-contrast-protanopia-harness.css b/packages/core-design-system/src/styles/dark-high-contrast-protanopia-harness.css new file mode 100644 index 0000000000..780afe6dd3 --- /dev/null +++ b/packages/core-design-system/src/styles/dark-high-contrast-protanopia-harness.css @@ -0,0 +1,492 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:04 GMT + * Copyright (c) Harness. + */ + +.dark-high-contrast-protanopia-harness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-chrome-1000); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-950); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-900); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-200); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-400); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-blue-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-200); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-200); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-800); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-800) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-blue-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-300); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-pure-white) l c h / 0.08); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-pure-white) l c h / 0.1); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-950); + --cn-component-alert-danger-title: var(--cn-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-blue-200); /* Text color for success badges. Communicates positive status through readable blue text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-blue-300) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-blue-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-300) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-purple-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-purple-300) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-blue-200); /* Text color for success buttons. Communicates positive actions through readable blue text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-blue-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-blue-300) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-blue-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-blue-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Blue background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-blue-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-purple-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-blue-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-blue-300); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-100); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-800); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-100); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-800); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-100); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-800); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-blue-100); /* Text color for green tags. Adjusted for protanopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-blue-800); /* Background color for green tags. Adjusted for protanopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for green tags. Adjusted for protanopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-100); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-800); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-100); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-800); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-100); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-800); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-100); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-800); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-100); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-800); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-purple-100); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --cn-component-tag-purple-background: var(--cn-colors-purple-800); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-red-text: var(--cn-colors-red-100); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-800); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-violet-100); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --cn-component-tag-violet-background: var(--cn-colors-violet-800); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-100); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-800); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-100); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-200); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-purple-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-850); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-chrome-800); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-200); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-800) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-200); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-pure-white); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-300); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-900); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-chrome-950); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-chrome-850); + --cn-brand-color-50: var(--cn-colors-cyan-50); + --cn-brand-color-100: var(--cn-colors-cyan-100); + --cn-brand-color-200: var(--cn-colors-cyan-200); + --cn-brand-color-300: var(--cn-colors-cyan-300); + --cn-brand-color-400: var(--cn-colors-cyan-400); + --cn-brand-color-500: var(--cn-colors-cyan-500); + --cn-brand-color-600: var(--cn-colors-cyan-600); + --cn-brand-color-700: var(--cn-colors-cyan-700); + --cn-brand-color-800: var(--cn-colors-cyan-800); + --cn-brand-color-900: var(--cn-colors-cyan-900); + --cn-brand-color-950: var(--cn-colors-cyan-950); + --cn-brand-on-color-50: var(--cn-colors-chrome-950); + --cn-brand-on-color-100: var(--cn-colors-chrome-950); + --cn-brand-on-color-200: var(--cn-colors-chrome-950); + --cn-brand-on-color-300: var(--cn-colors-chrome-950); + --cn-brand-on-color-400: var(--cn-colors-chrome-950); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-white); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-200); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-300); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-1); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-border: var(--cn-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: var(--cn-state-hover); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: var(--cn-state-selected); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-text-1); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-border-2); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-text-3); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-background-3); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-border-2); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-text-3); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-text-1); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-text-3); /* User data in the footer sidebar navigation menu. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --cn-component-tooltip-border: var(--cn-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/dark-high-contrast-tritanopia-gitness.css b/packages/core-design-system/src/styles/dark-high-contrast-tritanopia-gitness.css new file mode 100644 index 0000000000..66293c9c59 --- /dev/null +++ b/packages/core-design-system/src/styles/dark-high-contrast-tritanopia-gitness.css @@ -0,0 +1,492 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:13 GMT + * Copyright (c) Harness. + */ + +.dark-high-contrast-tritanopia-gitness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-pure-black); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-1000); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-950); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-200); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-400); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-colors-cyan-200); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-cyan-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-200); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-orange-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-200); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-700); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-800) l c h / 0.7); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-colors-cyan-300); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-cyan-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-orange-300); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-pure-white) l c h / 0.08); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-pure-white) l c h / 0.1); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-950); + --cn-component-alert-danger-title: var(--cn-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-cyan-200); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-orange-200); /* Text color for warning badges. Signals caution states with readable orange text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-orange-300) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-cyan-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-cyan-300) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-cyan-200); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-cyan-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-sidebar-logo-icon: var(--cn-colors-cyan-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-progress: var(--cn-colors-cyan-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-track-segments-progress: var(--cn-colors-cyan-600); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-orange-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-100); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-800); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-100); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-800); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-100); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-800); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-cyan-100); /* Text color for green tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-cyan-800); /* Background color for green tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-100); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-800); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-100); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-800); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-100); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-800); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-100); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-800); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-100); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-800); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-cyan-100); /* Text color for purple tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-purple-background: var(--cn-colors-cyan-800); /* Background color for purple tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-red-text: var(--cn-colors-red-100); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-800); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-cyan-100); /* Text color for violet tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-violet-background: var(--cn-colors-cyan-800); /* Background color for violet tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for violet tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-yellow-text: var(--cn-colors-orange-100); /* Text color for yellow tags, replaced with orange for tritanopia visibility. */ + --cn-component-tag-yellow-background: var(--cn-colors-orange-800); /* Background color for yellow tags, replaced with orange for tritanopia visibility. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for yellow tags, replaced with orange for tritanopia visibility. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-orange-100); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-200); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-cyan-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-850); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-chrome-800); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-200); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-800) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-200); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-pure-white); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-300); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-900); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-chrome-950); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-chrome-850); + --cn-brand-color-50: var(--cn-colors-chrome-150); + --cn-brand-color-100: var(--cn-colors-chrome-150); + --cn-brand-color-200: var(--cn-colors-chrome-150); + --cn-brand-color-300: var(--cn-colors-chrome-150); + --cn-brand-color-400: var(--cn-colors-chrome-150); + --cn-brand-color-500: var(--cn-colors-chrome-900); + --cn-brand-color-600: var(--cn-colors-chrome-150); + --cn-brand-color-700: var(--cn-colors-chrome-900); + --cn-brand-color-800: var(--cn-colors-chrome-900); + --cn-brand-color-900: var(--cn-colors-chrome-900); + --cn-brand-color-950: var(--cn-colors-chrome-900); + --cn-brand-on-color-50: var(--cn-colors-pure-black); + --cn-brand-on-color-100: var(--cn-colors-pure-black); + --cn-brand-on-color-200: var(--cn-colors-pure-black); + --cn-brand-on-color-300: var(--cn-colors-pure-black); + --cn-brand-on-color-400: var(--cn-colors-pure-black); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-black); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-1); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-border: var(--cn-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: var(--cn-state-hover); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: var(--cn-state-selected); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-text-1); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-border-2); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-text-3); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-background-3); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-border-2); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-text-3); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-text-1); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-text-3); /* User data in the footer sidebar navigation menu. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags, replaced with cyan. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags, replaced with orange. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --cn-component-tooltip-border: var(--cn-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/dark-high-contrast-tritanopia-harness.css b/packages/core-design-system/src/styles/dark-high-contrast-tritanopia-harness.css new file mode 100644 index 0000000000..8dd6ad0b71 --- /dev/null +++ b/packages/core-design-system/src/styles/dark-high-contrast-tritanopia-harness.css @@ -0,0 +1,492 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:12 GMT + * Copyright (c) Harness. + */ + +.dark-high-contrast-tritanopia-harness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-pure-black); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-1000); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-950); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-200); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-400); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-colors-cyan-200); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-cyan-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-200); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-orange-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-200); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-700); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-800) l c h / 0.7); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-colors-cyan-300); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-cyan-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-orange-300); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-pure-white) l c h / 0.08); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-pure-white) l c h / 0.1); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-950); + --cn-component-alert-danger-title: var(--cn-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-cyan-200); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-orange-200); /* Text color for warning badges. Signals caution states with readable orange text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-orange-300) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-cyan-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-cyan-300) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-cyan-200); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-cyan-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-sidebar-logo-icon: var(--cn-colors-cyan-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-progress: var(--cn-colors-cyan-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-track-segments-progress: var(--cn-colors-cyan-600); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-orange-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-100); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-800); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-100); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-800); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-100); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-800); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-cyan-100); /* Text color for green tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-cyan-800); /* Background color for green tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-100); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-800); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-100); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-800); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-100); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-800); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-100); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-800); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-100); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-800); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-cyan-100); /* Text color for purple tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-purple-background: var(--cn-colors-cyan-800); /* Background color for purple tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-red-text: var(--cn-colors-red-100); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-800); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-cyan-100); /* Text color for violet tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-violet-background: var(--cn-colors-cyan-800); /* Background color for violet tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for violet tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-yellow-text: var(--cn-colors-orange-100); /* Text color for yellow tags, replaced with orange for tritanopia visibility. */ + --cn-component-tag-yellow-background: var(--cn-colors-orange-800); /* Background color for yellow tags, replaced with orange for tritanopia visibility. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for yellow tags, replaced with orange for tritanopia visibility. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-orange-100); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-200); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-cyan-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-850); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-chrome-800); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-200); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-800) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-200); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-pure-white); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-300); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-900); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-chrome-950); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-chrome-850); + --cn-brand-color-50: var(--cn-colors-cyan-50); + --cn-brand-color-100: var(--cn-colors-cyan-100); + --cn-brand-color-200: var(--cn-colors-cyan-200); + --cn-brand-color-300: var(--cn-colors-cyan-300); + --cn-brand-color-400: var(--cn-colors-cyan-400); + --cn-brand-color-500: var(--cn-colors-cyan-500); + --cn-brand-color-600: var(--cn-colors-cyan-600); + --cn-brand-color-700: var(--cn-colors-cyan-700); + --cn-brand-color-800: var(--cn-colors-cyan-800); + --cn-brand-color-900: var(--cn-colors-cyan-900); + --cn-brand-color-950: var(--cn-colors-cyan-950); + --cn-brand-on-color-50: var(--cn-colors-chrome-950); + --cn-brand-on-color-100: var(--cn-colors-chrome-950); + --cn-brand-on-color-200: var(--cn-colors-chrome-950); + --cn-brand-on-color-300: var(--cn-colors-chrome-950); + --cn-brand-on-color-400: var(--cn-colors-chrome-950); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-white); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-1); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-border: var(--cn-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: var(--cn-state-hover); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: var(--cn-state-selected); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-text-1); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-border-2); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-text-3); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-background-3); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-border-2); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-text-3); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-text-1); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-text-3); /* User data in the footer sidebar navigation menu. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags, replaced with cyan. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags, replaced with orange. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --cn-component-tooltip-border: var(--cn-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/dark-protanopia-gitness.css b/packages/core-design-system/src/styles/dark-protanopia-gitness.css new file mode 100644 index 0000000000..916b59385a --- /dev/null +++ b/packages/core-design-system/src/styles/dark-protanopia-gitness.css @@ -0,0 +1,492 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:02 GMT + * Copyright (c) Harness. + */ + +.dark-protanopia-gitness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-chrome-1000); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-950); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-900); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-300); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-500); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-blue-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-100); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-300); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-850); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-850) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-blue-400); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-400); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-400); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-pure-white) l c h / 0.08); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-pure-white) l c h / 0.1); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-950); + --cn-component-alert-danger-title: var(--cn-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-blue-200); /* Text color for success badges. Communicates positive status through readable blue text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-blue-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-blue-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-purple-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-purple-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-blue-200); /* Text color for success buttons. Communicates positive actions through readable blue text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-blue-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-blue-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-blue-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-blue-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Blue background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-blue-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-purple-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-blue-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-blue-300); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-200); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-200); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-200); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-blue-200); /* Text color for green tags. Adjusted for protanopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-blue-900); /* Background color for green tags. Adjusted for protanopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for green tags. Adjusted for protanopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-200); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-200); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-200); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-200); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-200); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-purple-200); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --cn-component-tag-purple-background: var(--cn-colors-purple-900); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-red-text: var(--cn-colors-red-200); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-violet-200); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --cn-component-tag-violet-background: var(--cn-colors-violet-900); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-200); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-100); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-200); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-purple-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-850); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-chrome-800); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-200); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-800) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-200); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-pure-white); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-300); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-900); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-chrome-950); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-chrome-850); + --cn-brand-color-50: var(--cn-colors-chrome-150); + --cn-brand-color-100: var(--cn-colors-chrome-150); + --cn-brand-color-200: var(--cn-colors-chrome-150); + --cn-brand-color-300: var(--cn-colors-chrome-150); + --cn-brand-color-400: var(--cn-colors-chrome-150); + --cn-brand-color-500: var(--cn-colors-chrome-900); + --cn-brand-color-600: var(--cn-colors-chrome-150); + --cn-brand-color-700: var(--cn-colors-chrome-900); + --cn-brand-color-800: var(--cn-colors-chrome-900); + --cn-brand-color-900: var(--cn-colors-chrome-900); + --cn-brand-color-950: var(--cn-colors-chrome-900); + --cn-brand-on-color-50: var(--cn-colors-pure-black); + --cn-brand-on-color-100: var(--cn-colors-pure-black); + --cn-brand-on-color-200: var(--cn-colors-pure-black); + --cn-brand-on-color-300: var(--cn-colors-pure-black); + --cn-brand-on-color-400: var(--cn-colors-pure-black); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-black); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-200); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-400); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-1); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-border: var(--cn-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: var(--cn-state-hover); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: var(--cn-state-selected); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-text-1); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-border-2); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-text-3); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-background-3); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-border-2); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-text-3); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-text-1); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-text-3); /* User data in the footer sidebar navigation menu. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --cn-component-tooltip-border: var(--cn-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/dark-protanopia-harness.css b/packages/core-design-system/src/styles/dark-protanopia-harness.css new file mode 100644 index 0000000000..39a1ea9437 --- /dev/null +++ b/packages/core-design-system/src/styles/dark-protanopia-harness.css @@ -0,0 +1,492 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:01 GMT + * Copyright (c) Harness. + */ + +.dark-protanopia-harness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-chrome-1000); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-950); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-900); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-300); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-500); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-blue-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-100); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-300); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-850); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-850) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-blue-400); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-400); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-400); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-pure-white) l c h / 0.08); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-pure-white) l c h / 0.1); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-950); + --cn-component-alert-danger-title: var(--cn-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-blue-200); /* Text color for success badges. Communicates positive status through readable blue text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-blue-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-blue-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-purple-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-purple-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-blue-200); /* Text color for success buttons. Communicates positive actions through readable blue text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-blue-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-blue-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-blue-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-blue-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Blue background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-blue-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-purple-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-blue-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-blue-300); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-200); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-200); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-200); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-blue-200); /* Text color for green tags. Adjusted for protanopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-blue-900); /* Background color for green tags. Adjusted for protanopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for green tags. Adjusted for protanopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-200); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-200); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-200); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-200); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-200); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-purple-200); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --cn-component-tag-purple-background: var(--cn-colors-purple-900); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-red-text: var(--cn-colors-red-200); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-violet-200); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --cn-component-tag-violet-background: var(--cn-colors-violet-900); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-200); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-100); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-200); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-purple-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-850); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-chrome-800); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-200); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-800) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-200); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-pure-white); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-300); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-900); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-chrome-950); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-chrome-850); + --cn-brand-color-50: var(--cn-colors-cyan-50); + --cn-brand-color-100: var(--cn-colors-cyan-100); + --cn-brand-color-200: var(--cn-colors-cyan-200); + --cn-brand-color-300: var(--cn-colors-cyan-300); + --cn-brand-color-400: var(--cn-colors-cyan-400); + --cn-brand-color-500: var(--cn-colors-cyan-500); + --cn-brand-color-600: var(--cn-colors-cyan-600); + --cn-brand-color-700: var(--cn-colors-cyan-700); + --cn-brand-color-800: var(--cn-colors-cyan-800); + --cn-brand-color-900: var(--cn-colors-cyan-900); + --cn-brand-color-950: var(--cn-colors-cyan-950); + --cn-brand-on-color-50: var(--cn-colors-chrome-950); + --cn-brand-on-color-100: var(--cn-colors-chrome-950); + --cn-brand-on-color-200: var(--cn-colors-chrome-950); + --cn-brand-on-color-300: var(--cn-colors-chrome-950); + --cn-brand-on-color-400: var(--cn-colors-chrome-950); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-white); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-200); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-400); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-1); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-border: var(--cn-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: var(--cn-state-hover); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: var(--cn-state-selected); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-text-1); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-border-2); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-text-3); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-background-3); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-border-2); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-text-3); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-text-1); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-text-3); /* User data in the footer sidebar navigation menu. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --cn-component-tooltip-border: var(--cn-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/dark-tritanopia-gitness.css b/packages/core-design-system/src/styles/dark-tritanopia-gitness.css new file mode 100644 index 0000000000..a63280611d --- /dev/null +++ b/packages/core-design-system/src/styles/dark-tritanopia-gitness.css @@ -0,0 +1,492 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:10 GMT + * Copyright (c) Harness. + */ + +.dark-tritanopia-gitness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-chrome-1000); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-950); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-900); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-300); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-500); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-cyan-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-200); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-orange-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-300); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-850); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-850) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-cyan-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-400); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-orange-400); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-pure-white) l c h / 0.08); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-pure-white) l c h / 0.1); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-950); + --cn-component-alert-danger-title: var(--cn-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-cyan-200); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-orange-200); /* Text color for warning badges. Signals caution states with readable orange text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-cyan-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-cyan-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-cyan-200); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-cyan-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-cyan-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-orange-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-200); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-200); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-200); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-cyan-200); /* Text color for green tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-cyan-900); /* Background color for green tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-200); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-200); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-200); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-200); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-200); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-cyan-200); /* Text color for purple tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-purple-background: var(--cn-colors-cyan-900); /* Background color for purple tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-red-text: var(--cn-colors-red-200); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-cyan-200); /* Text color for violet tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-violet-background: var(--cn-colors-cyan-900); /* Background color for violet tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for violet tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-yellow-text: var(--cn-colors-orange-200); /* Text color for yellow tags, replaced with orange for tritanopia visibility. */ + --cn-component-tag-yellow-background: var(--cn-colors-orange-900); /* Background color for yellow tags, replaced with orange for tritanopia visibility. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for yellow tags, replaced with orange for tritanopia visibility. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-100); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-200); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-orange-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-850); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-chrome-800); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-200); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-800) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-200); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-pure-white); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-300); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-900); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-chrome-950); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-chrome-850); + --cn-brand-color-50: var(--cn-colors-chrome-150); + --cn-brand-color-100: var(--cn-colors-chrome-150); + --cn-brand-color-200: var(--cn-colors-chrome-150); + --cn-brand-color-300: var(--cn-colors-chrome-150); + --cn-brand-color-400: var(--cn-colors-chrome-150); + --cn-brand-color-500: var(--cn-colors-chrome-900); + --cn-brand-color-600: var(--cn-colors-chrome-150); + --cn-brand-color-700: var(--cn-colors-chrome-900); + --cn-brand-color-800: var(--cn-colors-chrome-900); + --cn-brand-color-900: var(--cn-colors-chrome-900); + --cn-brand-color-950: var(--cn-colors-chrome-900); + --cn-brand-on-color-50: var(--cn-colors-pure-black); + --cn-brand-on-color-100: var(--cn-colors-pure-black); + --cn-brand-on-color-200: var(--cn-colors-pure-black); + --cn-brand-on-color-300: var(--cn-colors-pure-black); + --cn-brand-on-color-400: var(--cn-colors-pure-black); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-black); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-200); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-400); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-1); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-border: var(--cn-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: var(--cn-state-hover); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: var(--cn-state-selected); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-text-1); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-border-2); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-text-3); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-background-3); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-border-2); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-text-3); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-text-1); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-text-3); /* User data in the footer sidebar navigation menu. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags, replaced with cyan. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags, replaced with orange. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --cn-component-tooltip-border: var(--cn-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/dark-tritanopia-harness.css b/packages/core-design-system/src/styles/dark-tritanopia-harness.css new file mode 100644 index 0000000000..f5dd10e675 --- /dev/null +++ b/packages/core-design-system/src/styles/dark-tritanopia-harness.css @@ -0,0 +1,492 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:09 GMT + * Copyright (c) Harness. + */ + +.dark-tritanopia-harness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-chrome-1000); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-950); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-900); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-50); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-300); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-500); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-cyan-200); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-200); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-orange-200); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-300); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-850); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-850) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-cyan-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-400); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-orange-400); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-pure-white) l c h / 0.08); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-pure-white) l c h / 0.1); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-700); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-950); + --cn-component-alert-danger-title: var(--cn-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-cyan-200); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-orange-200); /* Text color for warning badges. Signals caution states with readable orange text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-cyan-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-cyan-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-cyan-200); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-chrome-900); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-cyan-300); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-cyan-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-orange-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-200); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-200); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-200); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-cyan-200); /* Text color for green tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-cyan-900); /* Background color for green tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-200); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-200); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-200); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-200); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-200); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-cyan-200); /* Text color for purple tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-purple-background: var(--cn-colors-cyan-900); /* Background color for purple tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-red-text: var(--cn-colors-red-200); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-cyan-200); /* Text color for violet tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-violet-background: var(--cn-colors-cyan-900); /* Background color for violet tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-cyan-950); /* Subtle background variation for violet tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-yellow-text: var(--cn-colors-orange-200); /* Text color for yellow tags, replaced with orange for tritanopia visibility. */ + --cn-component-tag-yellow-background: var(--cn-colors-orange-900); /* Background color for yellow tags, replaced with orange for tritanopia visibility. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-orange-950); /* Subtle background variation for yellow tags, replaced with orange for tritanopia visibility. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-100); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-200); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-orange-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-850); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-chrome-800); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-200); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-800) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-200); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-pure-white); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-300); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-900); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-850); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-chrome-950); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-800); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-chrome-850); + --cn-brand-color-50: var(--cn-colors-cyan-50); + --cn-brand-color-100: var(--cn-colors-cyan-100); + --cn-brand-color-200: var(--cn-colors-cyan-200); + --cn-brand-color-300: var(--cn-colors-cyan-300); + --cn-brand-color-400: var(--cn-colors-cyan-400); + --cn-brand-color-500: var(--cn-colors-cyan-500); + --cn-brand-color-600: var(--cn-colors-cyan-600); + --cn-brand-color-700: var(--cn-colors-cyan-700); + --cn-brand-color-800: var(--cn-colors-cyan-800); + --cn-brand-color-900: var(--cn-colors-cyan-900); + --cn-brand-color-950: var(--cn-colors-cyan-950); + --cn-brand-on-color-50: var(--cn-colors-chrome-950); + --cn-brand-on-color-100: var(--cn-colors-chrome-950); + --cn-brand-on-color-200: var(--cn-colors-chrome-950); + --cn-brand-on-color-300: var(--cn-colors-chrome-950); + --cn-brand-on-color-400: var(--cn-colors-chrome-950); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-white); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-200); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-400); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-1); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-border: var(--cn-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: var(--cn-state-hover); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: var(--cn-state-selected); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-text-1); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-component-sidebar-background); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-border-2); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-text-3); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-background-3); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-border-2); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-text-3); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-text-1); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-text-3); /* User data in the footer sidebar navigation menu. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags, replaced with cyan. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags, replaced with orange. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --cn-component-tooltip-border: var(--cn-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/index.css b/packages/core-design-system/src/styles/index.css index 4f9dd4a92d..0d7c0f08af 100644 --- a/packages/core-design-system/src/styles/index.css +++ b/packages/core-design-system/src/styles/index.css @@ -2,7 +2,7 @@ * Harness Design System * Main stylesheet importing all token files * DO NOT UPDATE IT MANUALLY - * Generated on Mon, 17 Mar 2025 12:07:32 GMT + * Generated on Tue, 18 Mar 2025 06:44:26 GMT */ /* Core tokens */ @@ -12,53 +12,53 @@ @import './core.css'; /* Theme files - Dark */ -@import './source-dark-desktop-gitness.css'; -@import './source-dark-desktop-harness.css'; -@import './source-dark-deuteranopia-desktop-gitness.css'; -@import './source-dark-deuteranopia-desktop-harness.css'; -@import './source-dark-dimmer-desktop-gitness.css'; -@import './source-dark-dimmer-desktop-harness.css'; -@import './source-dark-dimmer-deuteranopia-desktop-gitness.css'; -@import './source-dark-dimmer-deuteranopia-desktop-harness.css'; -@import './source-dark-dimmer-protanopia-desktop-gitness.css'; -@import './source-dark-dimmer-protanopia-desktop-harness.css'; -@import './source-dark-dimmer-tritanopia-desktop-gitness.css'; -@import './source-dark-dimmer-tritanopia-desktop-harness.css'; -@import './source-dark-high-contrast-desktop-gitness.css'; -@import './source-dark-high-contrast-desktop-harness.css'; -@import './source-dark-high-contrast-deuteranopia-desktop-gitness.css'; -@import './source-dark-high-contrast-deuteranopia-desktop-harness.css'; -@import './source-dark-high-contrast-protanopia-desktop-gitness.css'; -@import './source-dark-high-contrast-protanopia-desktop-harness.css'; -@import './source-dark-high-contrast-tritanopia-desktop-gitness.css'; -@import './source-dark-high-contrast-tritanopia-desktop-harness.css'; -@import './source-dark-protanopia-desktop-gitness.css'; -@import './source-dark-protanopia-desktop-harness.css'; -@import './source-dark-tritanopia-desktop-gitness.css'; -@import './source-dark-tritanopia-desktop-harness.css'; +@import './dark-deuteranopia-gitness.css'; +@import './dark-deuteranopia-harness.css'; +@import './dark-dimmer-deuteranopia-gitness.css'; +@import './dark-dimmer-deuteranopia-harness.css'; +@import './dark-dimmer-gitness.css'; +@import './dark-dimmer-harness.css'; +@import './dark-dimmer-protanopia-gitness.css'; +@import './dark-dimmer-protanopia-harness.css'; +@import './dark-dimmer-tritanopia-gitness.css'; +@import './dark-dimmer-tritanopia-harness.css'; +@import './dark-gitness.css'; +@import './dark-harness.css'; +@import './dark-high-contrast-deuteranopia-gitness.css'; +@import './dark-high-contrast-deuteranopia-harness.css'; +@import './dark-high-contrast-gitness.css'; +@import './dark-high-contrast-harness.css'; +@import './dark-high-contrast-protanopia-gitness.css'; +@import './dark-high-contrast-protanopia-harness.css'; +@import './dark-high-contrast-tritanopia-gitness.css'; +@import './dark-high-contrast-tritanopia-harness.css'; +@import './dark-protanopia-gitness.css'; +@import './dark-protanopia-harness.css'; +@import './dark-tritanopia-gitness.css'; +@import './dark-tritanopia-harness.css'; /* Theme files - Light */ -@import './source-light-desktop-gitness.css'; -@import './source-light-desktop-harness.css'; -@import './source-light-deuteranopia-desktop-gitness.css'; -@import './source-light-deuteranopia-desktop-harness.css'; -@import './source-light-dimmer-desktop-gitness.css'; -@import './source-light-dimmer-desktop-harness.css'; -@import './source-light-dimmer-deuteranopia-desktop-gitness.css'; -@import './source-light-dimmer-deuteranopia-desktop-harness.css'; -@import './source-light-dimmer-protanopia-desktop-gitness.css'; -@import './source-light-dimmer-protanopia-desktop-harness.css'; -@import './source-light-dimmer-tritanopia-desktop-gitness.css'; -@import './source-light-dimmer-tritanopia-desktop-harness.css'; -@import './source-light-high-contrast-desktop-gitness.css'; -@import './source-light-high-contrast-desktop-harness.css'; -@import './source-light-high-contrast-deuteranopia-desktop-gitness.css'; -@import './source-light-high-contrast-deuteranopia-desktop-harness.css'; -@import './source-light-high-contrast-protanopia-desktop-gitness.css'; -@import './source-light-high-contrast-protanopia-desktop-harness.css'; -@import './source-light-high-contrast-tritanopia-desktop-gitness.css'; -@import './source-light-high-contrast-tritanopia-desktop-harness.css'; -@import './source-light-protanopia-desktop-gitness.css'; -@import './source-light-protanopia-desktop-harness.css'; -@import './source-light-tritanopia-desktop-gitness.css'; -@import './source-light-tritanopia-desktop-harness.css';; +@import './light-deuteranopia-gitness.css'; +@import './light-deuteranopia-harness.css'; +@import './light-dimmer-deuteranopia-gitness.css'; +@import './light-dimmer-deuteranopia-harness.css'; +@import './light-dimmer-gitness.css'; +@import './light-dimmer-harness.css'; +@import './light-dimmer-protanopia-gitness.css'; +@import './light-dimmer-protanopia-harness.css'; +@import './light-dimmer-tritanopia-gitness.css'; +@import './light-dimmer-tritanopia-harness.css'; +@import './light-gitness.css'; +@import './light-harness.css'; +@import './light-high-contrast-deuteranopia-gitness.css'; +@import './light-high-contrast-deuteranopia-harness.css'; +@import './light-high-contrast-gitness.css'; +@import './light-high-contrast-harness.css'; +@import './light-high-contrast-protanopia-gitness.css'; +@import './light-high-contrast-protanopia-harness.css'; +@import './light-high-contrast-tritanopia-gitness.css'; +@import './light-high-contrast-tritanopia-harness.css'; +@import './light-protanopia-gitness.css'; +@import './light-protanopia-harness.css'; +@import './light-tritanopia-gitness.css'; +@import './light-tritanopia-harness.css';; diff --git a/packages/core-design-system/src/styles/light-deuteranopia-gitness.css b/packages/core-design-system/src/styles/light-deuteranopia-gitness.css new file mode 100644 index 0000000000..2712a4436b --- /dev/null +++ b/packages/core-design-system/src/styles/light-deuteranopia-gitness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:20 GMT + * Copyright (c) Harness. + */ + +.light-deuteranopia-gitness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-chrome-50); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-850); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-700); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-cyan-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-orange-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-800); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-100); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-cyan-400); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-orange-400); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-chrome-400) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-150); + --cn-component-alert-danger-title: var(--cn-colors-orange-800); /* Text color for danger alerts. Communicates critical information through high-contrast orange text. */ + --cn-component-alert-danger-description: var(--cn-colors-orange-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-orange-400) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-600) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-cyan-600); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-cyan-400) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-cyan-200) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-orange-600); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-orange-400) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-orange-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-600); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-400) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-600); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-400) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-cyan-600); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-cyan-400) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-cyan-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-200); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-cyan-600); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-cyan-200) l c h / 0.12); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-cyan-400) l c h / 0.25); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-cyan-200) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-cyan-200) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-orange-600); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-orange-300) l c h / 0.12); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-orange-400) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-orange-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-orange-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-orange-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-orange-500) l c h / 0.12); /* Orange background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-orange-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-orange-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-blue-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-orange-400); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-cyan-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-sidebar-border: var(--cn-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: lch(from var(--cn-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: lch(from var(--cn-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-separator-background: var(--cn-border-width-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-900); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-orange-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-unselected-background: var(--cn-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-50); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-chrome-900); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-600); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-600); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-cyan-600); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-cyan-100); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-600); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-600); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-600); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-cyan-600); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-purple-background: var(--cn-colors-cyan-100); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-red-text: var(--cn-colors-orange-600); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-red-background: var(--cn-colors-orange-100); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-violet-text: var(--cn-colors-blue-600); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-violet-background: var(--cn-colors-blue-100); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-background: var(--cn-colors-orange-200); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-chrome-900) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-200); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-300); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-cyan-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-pure-white); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-300); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-200) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-300); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-400); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-pure-white); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-500); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-pure-white); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-pure-white); + --cn-brand-color-50: var(--cn-colors-chrome-150); + --cn-brand-color-100: var(--cn-colors-chrome-150); + --cn-brand-color-200: var(--cn-colors-chrome-150); + --cn-brand-color-300: var(--cn-colors-chrome-150); + --cn-brand-color-400: var(--cn-colors-chrome-150); + --cn-brand-color-500: var(--cn-colors-chrome-900); + --cn-brand-color-600: var(--cn-colors-chrome-150); + --cn-brand-color-700: var(--cn-colors-chrome-900); + --cn-brand-color-800: var(--cn-colors-chrome-900); + --cn-brand-color-900: var(--cn-colors-chrome-900); + --cn-brand-color-950: var(--cn-colors-chrome-900); + --cn-brand-on-color-50: var(--cn-colors-pure-black); + --cn-brand-on-color-100: var(--cn-colors-pure-black); + --cn-brand-on-color-200: var(--cn-colors-pure-black); + --cn-brand-on-color-300: var(--cn-colors-pure-black); + --cn-brand-on-color-400: var(--cn-colors-pure-black); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-black); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-500); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-2); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags, replaced with orange. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-title: var(--cn-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/light-deuteranopia-harness.css b/packages/core-design-system/src/styles/light-deuteranopia-harness.css new file mode 100644 index 0000000000..c45ceda35a --- /dev/null +++ b/packages/core-design-system/src/styles/light-deuteranopia-harness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:19 GMT + * Copyright (c) Harness. + */ + +.light-deuteranopia-harness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-chrome-50); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-850); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-700); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-cyan-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-orange-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-800); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-100); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-cyan-400); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-orange-400); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-chrome-400) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-150); + --cn-component-alert-danger-title: var(--cn-colors-orange-800); /* Text color for danger alerts. Communicates critical information through high-contrast orange text. */ + --cn-component-alert-danger-description: var(--cn-colors-orange-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-orange-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-orange-400) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-600) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-cyan-600); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-cyan-400) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-cyan-200) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-orange-600); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-orange-400) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-orange-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-600); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-400) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-600); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-400) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-cyan-600); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-cyan-400) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-cyan-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-200); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-cyan-600); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-cyan-200) l c h / 0.12); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-cyan-400) l c h / 0.25); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-cyan-200) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-cyan-200) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-orange-600); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-orange-300) l c h / 0.12); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-orange-400) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-orange-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-orange-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-orange-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-orange-500) l c h / 0.12); /* Orange background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-orange-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-orange-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-blue-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-orange-400); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-cyan-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-sidebar-border: var(--cn-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: lch(from var(--cn-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: lch(from var(--cn-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-separator-background: var(--cn-border-width-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-900); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-orange-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-unselected-background: var(--cn-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-50); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-chrome-900); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-600); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-600); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-cyan-600); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-cyan-100); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-600); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-600); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-600); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-cyan-600); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-purple-background: var(--cn-colors-cyan-100); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-red-text: var(--cn-colors-orange-600); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-red-background: var(--cn-colors-orange-100); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-violet-text: var(--cn-colors-blue-600); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-violet-background: var(--cn-colors-blue-100); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-background: var(--cn-colors-orange-200); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-chrome-900) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-200); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-300); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-cyan-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-pure-white); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-300); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-200) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-300); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-400); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-pure-white); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-500); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-pure-white); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-pure-white); + --cn-brand-color-50: var(--cn-colors-cyan-50); + --cn-brand-color-100: var(--cn-colors-cyan-100); + --cn-brand-color-200: var(--cn-colors-cyan-200); + --cn-brand-color-300: var(--cn-colors-cyan-300); + --cn-brand-color-400: var(--cn-colors-cyan-400); + --cn-brand-color-500: var(--cn-colors-cyan-500); + --cn-brand-color-600: var(--cn-colors-cyan-600); + --cn-brand-color-700: var(--cn-colors-cyan-700); + --cn-brand-color-800: var(--cn-colors-cyan-800); + --cn-brand-color-900: var(--cn-colors-cyan-900); + --cn-brand-color-950: var(--cn-colors-cyan-950); + --cn-brand-on-color-50: var(--cn-colors-chrome-950); + --cn-brand-on-color-100: var(--cn-colors-chrome-950); + --cn-brand-on-color-200: var(--cn-colors-chrome-950); + --cn-brand-on-color-300: var(--cn-colors-chrome-950); + --cn-brand-on-color-400: var(--cn-colors-chrome-950); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-white); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-500); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-2); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags, replaced with orange. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-title: var(--cn-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/light-dimmer-deuteranopia-gitness.css b/packages/core-design-system/src/styles/light-dimmer-deuteranopia-gitness.css new file mode 100644 index 0000000000..79ca82d906 --- /dev/null +++ b/packages/core-design-system/src/styles/light-dimmer-deuteranopia-gitness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:21 GMT + * Copyright (c) Harness. + */ + +.light-dimmer-deuteranopia-gitness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-800); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-700); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-cyan-500); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-orange-500); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-600); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: lch(from var(--cn-colors-chrome-100) l c h / 0.8); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-cyan-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-orange-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-400); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-chrome-400) l c h / 0.1); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-chrome-400) l c h / 0.15); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-150); + --cn-component-alert-danger-title: var(--cn-colors-orange-700); /* Text color for danger alerts. Communicates critical information through high-contrast orange text. */ + --cn-component-alert-danger-description: var(--cn-colors-orange-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-orange-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-orange-400) l c h / 0.15); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-100); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.07); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-600) l c h / 0.3); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-cyan-500); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.3); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-cyan-200) l c h / 0.07); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-orange-500); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-orange-300) l c h / 0.3); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-orange-300) l c h / 0.07); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-500); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-300) l c h / 0.3); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-200) l c h / 0.07); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-500); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.3); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-300) l c h / 0.07); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-cyan-500); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-cyan-300) l c h / 0.3); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-cyan-300) l c h / 0.07); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-cyan-500); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-cyan-200) l c h / 0.08); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.3); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-cyan-200) l c h / 0.1); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-cyan-200) l c h / 0.15); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-orange-500); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-orange-300) l c h / 0.08); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-orange-300) l c h / 0.3); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-orange-300) l c h / 0.1); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-orange-300) l c h / 0.15); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-orange-300) l c h / 0.07); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-cyan-500) l c h / 0.08); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-cyan-500) l c h / 0.12); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-cyan-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-orange-500) l c h / 0.08); /* Orange background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-orange-500) l c h / 0.12); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-orange-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.08); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-blue-500); /* Visited state color for text links, replaced with blue for deuteranopia visibility. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-orange-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-sidebar-border: var(--cn-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: lch(from var(--cn-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: lch(from var(--cn-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-100); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-700); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-700); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-orange-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-unselected-background: var(--cn-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-100); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-chrome-700); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.07); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-500); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-500); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-cyan-600); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-cyan-100); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-500); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-500); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-500); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-cyan-500); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-purple-background: var(--cn-colors-cyan-100); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-red-text: var(--cn-colors-orange-500); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-red-background: var(--cn-colors-orange-100); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-violet-text: var(--cn-colors-blue-500); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-violet-background: var(--cn-colors-blue-100); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-background: var(--cn-colors-orange-100); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Light shadow color with 40% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Medium shadow color with 40% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-chrome-300) l c h / 0.35); /* Medium shadow color with 35% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-chrome-300) l c h / 0.35); /* Deep shadow color with 35% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-chrome-300) l c h / 0.35); /* Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-chrome-900) l c h / 0.07); /* Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-200); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-orange-300); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-cyan-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-300); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-pure-white); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-300); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-200) l c h / 0.3); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-300); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-400); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-pure-white); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-500); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-pure-white); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-pure-white); + --cn-brand-color-50: var(--cn-colors-chrome-150); + --cn-brand-color-100: var(--cn-colors-chrome-150); + --cn-brand-color-200: var(--cn-colors-chrome-150); + --cn-brand-color-300: var(--cn-colors-chrome-150); + --cn-brand-color-400: var(--cn-colors-chrome-150); + --cn-brand-color-500: var(--cn-colors-chrome-900); + --cn-brand-color-600: var(--cn-colors-chrome-150); + --cn-brand-color-700: var(--cn-colors-chrome-900); + --cn-brand-color-800: var(--cn-colors-chrome-900); + --cn-brand-color-900: var(--cn-colors-chrome-900); + --cn-brand-color-950: var(--cn-colors-chrome-900); + --cn-brand-on-color-50: var(--cn-colors-pure-black); + --cn-brand-on-color-100: var(--cn-colors-pure-black); + --cn-brand-on-color-200: var(--cn-colors-pure-black); + --cn-brand-on-color-300: var(--cn-colors-pure-black); + --cn-brand-on-color-400: var(--cn-colors-pure-black); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-black); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-400); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-2); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-600); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags, replaced with orange. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-title: var(--cn-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/light-dimmer-deuteranopia-harness.css b/packages/core-design-system/src/styles/light-dimmer-deuteranopia-harness.css new file mode 100644 index 0000000000..8705cdfebb --- /dev/null +++ b/packages/core-design-system/src/styles/light-dimmer-deuteranopia-harness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:21 GMT + * Copyright (c) Harness. + */ + +.light-dimmer-deuteranopia-harness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-800); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-700); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-cyan-500); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-orange-500); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-600); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: lch(from var(--cn-colors-chrome-100) l c h / 0.8); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-cyan-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-orange-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-400); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-chrome-400) l c h / 0.1); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-chrome-400) l c h / 0.15); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-150); + --cn-component-alert-danger-title: var(--cn-colors-orange-700); /* Text color for danger alerts. Communicates critical information through high-contrast orange text. */ + --cn-component-alert-danger-description: var(--cn-colors-orange-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-orange-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-orange-400) l c h / 0.15); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-100); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.07); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-600) l c h / 0.3); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-cyan-500); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.3); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-cyan-200) l c h / 0.07); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-orange-500); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-orange-300) l c h / 0.3); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-orange-300) l c h / 0.07); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-500); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-300) l c h / 0.3); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-200) l c h / 0.07); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-500); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.3); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-300) l c h / 0.07); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-cyan-500); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-cyan-300) l c h / 0.3); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-cyan-300) l c h / 0.07); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-cyan-500); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-cyan-200) l c h / 0.08); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.3); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-cyan-200) l c h / 0.1); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-cyan-200) l c h / 0.15); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-orange-500); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-orange-300) l c h / 0.08); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-orange-300) l c h / 0.3); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-orange-300) l c h / 0.1); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-orange-300) l c h / 0.15); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-orange-300) l c h / 0.07); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-cyan-500) l c h / 0.08); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-cyan-500) l c h / 0.12); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-cyan-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-orange-500) l c h / 0.08); /* Orange background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-orange-500) l c h / 0.12); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-orange-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.08); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-blue-500); /* Visited state color for text links, replaced with blue for deuteranopia visibility. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-orange-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-sidebar-border: var(--cn-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: lch(from var(--cn-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: lch(from var(--cn-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-100); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-700); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-700); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-orange-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-unselected-background: var(--cn-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-100); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-chrome-700); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.07); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-500); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-500); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-cyan-600); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-cyan-100); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-500); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-500); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-500); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-cyan-500); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-purple-background: var(--cn-colors-cyan-100); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-red-text: var(--cn-colors-orange-500); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-red-background: var(--cn-colors-orange-100); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-violet-text: var(--cn-colors-blue-500); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-violet-background: var(--cn-colors-blue-100); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-background: var(--cn-colors-orange-100); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Light shadow color with 40% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Medium shadow color with 40% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-chrome-300) l c h / 0.35); /* Medium shadow color with 35% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-chrome-300) l c h / 0.35); /* Deep shadow color with 35% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-chrome-300) l c h / 0.35); /* Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-chrome-900) l c h / 0.07); /* Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-200); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-orange-300); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-cyan-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-300); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-pure-white); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-300); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-200) l c h / 0.3); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-300); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-400); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-pure-white); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-500); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-pure-white); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-pure-white); + --cn-brand-color-50: var(--cn-colors-cyan-50); + --cn-brand-color-100: var(--cn-colors-cyan-100); + --cn-brand-color-200: var(--cn-colors-cyan-200); + --cn-brand-color-300: var(--cn-colors-cyan-300); + --cn-brand-color-400: var(--cn-colors-cyan-400); + --cn-brand-color-500: var(--cn-colors-cyan-500); + --cn-brand-color-600: var(--cn-colors-cyan-600); + --cn-brand-color-700: var(--cn-colors-cyan-700); + --cn-brand-color-800: var(--cn-colors-cyan-800); + --cn-brand-color-900: var(--cn-colors-cyan-900); + --cn-brand-color-950: var(--cn-colors-cyan-950); + --cn-brand-on-color-50: var(--cn-colors-chrome-950); + --cn-brand-on-color-100: var(--cn-colors-chrome-950); + --cn-brand-on-color-200: var(--cn-colors-chrome-950); + --cn-brand-on-color-300: var(--cn-colors-chrome-950); + --cn-brand-on-color-400: var(--cn-colors-chrome-950); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-white); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-400); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-2); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-600); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags, replaced with orange. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-title: var(--cn-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/light-dimmer-gitness.css b/packages/core-design-system/src/styles/light-dimmer-gitness.css new file mode 100644 index 0000000000..5c0795e6ea --- /dev/null +++ b/packages/core-design-system/src/styles/light-dimmer-gitness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:14 GMT + * Copyright (c) Harness. + */ + +.light-dimmer-gitness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-800); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-700); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-green-500); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-500); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-600); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: lch(from var(--cn-colors-chrome-100) l c h / 0.8); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-green-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-400); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-chrome-400) l c h / 0.1); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-chrome-400) l c h / 0.15); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-150); + --cn-component-alert-danger-title: var(--cn-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.15); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-100); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.07); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-600) l c h / 0.3); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-green-500); /* Text color for success badges. Communicates positive status through readable green text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-green-300) l c h / 0.3); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-green-200) l c h / 0.07); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-red-500); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.3); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.07); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-500); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-300) l c h / 0.3); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-200) l c h / 0.07); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-500); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.3); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-300) l c h / 0.07); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-purple-500); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-purple-300) l c h / 0.3); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-purple-300) l c h / 0.07); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-green-500); /* Text color for success buttons. Communicates positive actions through readable green text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-green-200) l c h / 0.08); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-green-300) l c h / 0.3); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-green-200) l c h / 0.1); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-green-200) l c h / 0.15); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-red-500); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.08); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.3); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-300) l c h / 0.15); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.07); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-green-500) l c h / 0.08); /* Green background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-green-500) l c h / 0.12); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-green-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-500) l c h / 0.08); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-500) l c h / 0.12); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.08); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-purple-500); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-green-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-sidebar-border: var(--cn-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: lch(from var(--cn-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: lch(from var(--cn-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-100); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-700); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-700); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-green-300); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-unselected-background: var(--cn-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-100); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-chrome-700); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.07); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-500); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-500); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-green-600); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ + --cn-component-tag-green-background: var(--cn-colors-green-100); /* Background color for green tags. Creates a distinct surface with green theme styling. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-green-50); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-500); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-500); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-500); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-purple-500); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --cn-component-tag-purple-background: var(--cn-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-red-text: var(--cn-colors-red-500); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-violet-500); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --cn-component-tag-violet-background: var(--cn-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-background: var(--cn-colors-red-100); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Light shadow color with 40% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Medium shadow color with 40% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-chrome-300) l c h / 0.35); /* Medium shadow color with 35% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-chrome-300) l c h / 0.35); /* Deep shadow color with 35% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-chrome-300) l c h / 0.35); /* Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-chrome-900) l c h / 0.07); /* Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-200); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-300); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-purple-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-300); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-pure-white); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-300); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-200) l c h / 0.3); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-300); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-400); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-pure-white); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-500); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-pure-white); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-pure-white); + --cn-brand-color-50: var(--cn-colors-chrome-150); + --cn-brand-color-100: var(--cn-colors-chrome-150); + --cn-brand-color-200: var(--cn-colors-chrome-150); + --cn-brand-color-300: var(--cn-colors-chrome-150); + --cn-brand-color-400: var(--cn-colors-chrome-150); + --cn-brand-color-500: var(--cn-colors-chrome-900); + --cn-brand-color-600: var(--cn-colors-chrome-150); + --cn-brand-color-700: var(--cn-colors-chrome-900); + --cn-brand-color-800: var(--cn-colors-chrome-900); + --cn-brand-color-900: var(--cn-colors-chrome-900); + --cn-brand-color-950: var(--cn-colors-chrome-900); + --cn-brand-on-color-50: var(--cn-colors-pure-black); + --cn-brand-on-color-100: var(--cn-colors-pure-black); + --cn-brand-on-color-200: var(--cn-colors-pure-black); + --cn-brand-on-color-300: var(--cn-colors-pure-black); + --cn-brand-on-color-400: var(--cn-colors-pure-black); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-black); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-400); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-2); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-600); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-title: var(--cn-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/light-dimmer-harness.css b/packages/core-design-system/src/styles/light-dimmer-harness.css new file mode 100644 index 0000000000..07733ba0bb --- /dev/null +++ b/packages/core-design-system/src/styles/light-dimmer-harness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:14 GMT + * Copyright (c) Harness. + */ + +.light-dimmer-harness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-800); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-700); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-green-500); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-500); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-600); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: lch(from var(--cn-colors-chrome-100) l c h / 0.8); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-green-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-400); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-chrome-400) l c h / 0.1); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-chrome-400) l c h / 0.15); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-150); + --cn-component-alert-danger-title: var(--cn-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.15); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-100); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.07); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-600) l c h / 0.3); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-green-500); /* Text color for success badges. Communicates positive status through readable green text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-green-300) l c h / 0.3); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-green-200) l c h / 0.07); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-red-500); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.3); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.07); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-500); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-300) l c h / 0.3); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-200) l c h / 0.07); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-500); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.3); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-300) l c h / 0.07); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-purple-500); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-purple-300) l c h / 0.3); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-purple-300) l c h / 0.07); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-green-500); /* Text color for success buttons. Communicates positive actions through readable green text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-green-200) l c h / 0.08); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-green-300) l c h / 0.3); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-green-200) l c h / 0.1); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-green-200) l c h / 0.15); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-red-500); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.08); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.3); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-300) l c h / 0.15); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.07); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-green-500) l c h / 0.08); /* Green background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-green-500) l c h / 0.12); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-green-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-500) l c h / 0.08); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-500) l c h / 0.12); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.08); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-purple-500); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-green-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-sidebar-border: var(--cn-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: lch(from var(--cn-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: lch(from var(--cn-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-100); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-700); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-700); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-green-300); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-unselected-background: var(--cn-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-100); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-chrome-700); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.07); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-500); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-500); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-green-600); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ + --cn-component-tag-green-background: var(--cn-colors-green-100); /* Background color for green tags. Creates a distinct surface with green theme styling. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-green-50); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-500); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-500); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-500); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-purple-500); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --cn-component-tag-purple-background: var(--cn-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-red-text: var(--cn-colors-red-500); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-violet-500); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --cn-component-tag-violet-background: var(--cn-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-background: var(--cn-colors-red-100); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Light shadow color with 40% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Medium shadow color with 40% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-chrome-300) l c h / 0.35); /* Medium shadow color with 35% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-chrome-300) l c h / 0.35); /* Deep shadow color with 35% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-chrome-300) l c h / 0.35); /* Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-chrome-900) l c h / 0.07); /* Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-200); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-300); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-purple-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-300); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-pure-white); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-300); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-200) l c h / 0.3); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-300); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-400); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-pure-white); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-500); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-pure-white); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-pure-white); + --cn-brand-color-50: var(--cn-colors-cyan-50); + --cn-brand-color-100: var(--cn-colors-cyan-100); + --cn-brand-color-200: var(--cn-colors-cyan-200); + --cn-brand-color-300: var(--cn-colors-cyan-300); + --cn-brand-color-400: var(--cn-colors-cyan-400); + --cn-brand-color-500: var(--cn-colors-cyan-500); + --cn-brand-color-600: var(--cn-colors-cyan-600); + --cn-brand-color-700: var(--cn-colors-cyan-700); + --cn-brand-color-800: var(--cn-colors-cyan-800); + --cn-brand-color-900: var(--cn-colors-cyan-900); + --cn-brand-color-950: var(--cn-colors-cyan-950); + --cn-brand-on-color-50: var(--cn-colors-chrome-950); + --cn-brand-on-color-100: var(--cn-colors-chrome-950); + --cn-brand-on-color-200: var(--cn-colors-chrome-950); + --cn-brand-on-color-300: var(--cn-colors-chrome-950); + --cn-brand-on-color-400: var(--cn-colors-chrome-950); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-white); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-400); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-2); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-600); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-title: var(--cn-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/light-dimmer-protanopia-gitness.css b/packages/core-design-system/src/styles/light-dimmer-protanopia-gitness.css new file mode 100644 index 0000000000..e54e5c877e --- /dev/null +++ b/packages/core-design-system/src/styles/light-dimmer-protanopia-gitness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:17 GMT + * Copyright (c) Harness. + */ + +.light-dimmer-protanopia-gitness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-800); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-700); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. Using blue instead of green for protanopia visibility. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-blue-500); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-500); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-600); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: lch(from var(--cn-colors-chrome-100) l c h / 0.8); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. Using blue instead of green for protanopia visibility. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-blue-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-400); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-chrome-400) l c h / 0.1); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-chrome-400) l c h / 0.15); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-150); + --cn-component-alert-danger-title: var(--cn-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.15); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-100); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.07); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-600) l c h / 0.3); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-blue-500); /* Text color for success badges. Communicates positive status through readable blue text. Using blue instead of green for protanopia visibility. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-blue-300) l c h / 0.3); /* Border color for success badges. Provides subtle definition for success state indicators. Using blue instead of green for protanopia visibility. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-blue-200) l c h / 0.07); /* Background color for success badges. Creates a subtle but recognizable success indicator. Using blue instead of green for protanopia visibility. */ + --cn-component-badge-danger-text: var(--cn-colors-red-500); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.3); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.07); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-500); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-300) l c h / 0.3); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-200) l c h / 0.07); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-500); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.3); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-300) l c h / 0.07); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-purple-500); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-purple-300) l c h / 0.3); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-purple-300) l c h / 0.07); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-blue-500); /* Text color for success buttons. Communicates positive actions through readable blue text. Using blue instead of green for protanopia visibility. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-blue-200) l c h / 0.08); /* Background color for success buttons. Creates subtle but recognizable positive action styling. Using blue instead of green for protanopia visibility. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-blue-300) l c h / 0.3); /* Border color for success buttons. Provides definition for positive action buttons. Using blue instead of green for protanopia visibility. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-blue-200) l c h / 0.1); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. Using blue instead of green for protanopia visibility. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-blue-200) l c h / 0.15); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. Using blue instead of green for protanopia visibility. */ + --cn-component-btn-danger-text: var(--cn-colors-red-500); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.08); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.3); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-300) l c h / 0.15); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.07); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-blue-500) l c h / 0.08); /* Blue background highlighting newly added code lines while maintaining readability. Using blue instead of green for protanopia visibility. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for line numbers of added code, providing visual connection to added content. Using blue instead of green for protanopia visibility. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-blue-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within added lines. Using blue instead of green for protanopia visibility. */ + --cn-component-diff-add-widget: var(--cn-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-500) l c h / 0.08); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-500) l c h / 0.12); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.08); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-purple-500); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-blue-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. Using blue instead of green for protanopia visibility. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-sidebar-border: var(--cn-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: lch(from var(--cn-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: lch(from var(--cn-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-100); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-700); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-700); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-blue-300); /* Color for success status indicators. Communicates completed or positive states. Using blue instead of green for protanopia visibility. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-unselected-background: var(--cn-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-100); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-chrome-700); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.07); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-500); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-500); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-blue-500); /* Text color for green tags. Using blue instead of green for protanopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-blue-100); /* Background color for green tags. Using blue instead of green for protanopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for green tags. Using blue instead of green for protanopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-500); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-blue-500); /* Text color for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --cn-component-tag-lime-background: var(--cn-colors-blue-100); /* Background color for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --cn-component-tag-mint-text: var(--cn-colors-blue-500); /* Text color for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --cn-component-tag-mint-background: var(--cn-colors-blue-100); /* Background color for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-500); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-500); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-purple-500); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --cn-component-tag-purple-background: var(--cn-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-red-text: var(--cn-colors-red-500); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-violet-500); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --cn-component-tag-violet-background: var(--cn-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-background: var(--cn-colors-red-100); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Light shadow color with 40% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Medium shadow color with 40% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-chrome-300) l c h / 0.35); /* Medium shadow color with 35% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-chrome-300) l c h / 0.35); /* Deep shadow color with 35% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-chrome-300) l c h / 0.35); /* Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-chrome-900) l c h / 0.07); /* Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-200); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-300); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-purple-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-300); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-pure-white); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-300); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-200) l c h / 0.3); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-300); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-400); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-pure-white); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-500); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-pure-white); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-pure-white); + --cn-brand-color-50: var(--cn-colors-chrome-150); + --cn-brand-color-100: var(--cn-colors-chrome-150); + --cn-brand-color-200: var(--cn-colors-chrome-150); + --cn-brand-color-300: var(--cn-colors-chrome-150); + --cn-brand-color-400: var(--cn-colors-chrome-150); + --cn-brand-color-500: var(--cn-colors-chrome-900); + --cn-brand-color-600: var(--cn-colors-chrome-150); + --cn-brand-color-700: var(--cn-colors-chrome-900); + --cn-brand-color-800: var(--cn-colors-chrome-900); + --cn-brand-color-900: var(--cn-colors-chrome-900); + --cn-brand-color-950: var(--cn-colors-chrome-900); + --cn-brand-on-color-50: var(--cn-colors-pure-black); + --cn-brand-on-color-100: var(--cn-colors-pure-black); + --cn-brand-on-color-200: var(--cn-colors-pure-black); + --cn-brand-on-color-300: var(--cn-colors-pure-black); + --cn-brand-on-color-400: var(--cn-colors-pure-black); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-black); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-400); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-2); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-600); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags. Using blue instead of green for protanopia visibility. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-title: var(--cn-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/light-dimmer-protanopia-harness.css b/packages/core-design-system/src/styles/light-dimmer-protanopia-harness.css new file mode 100644 index 0000000000..4c6a12ce10 --- /dev/null +++ b/packages/core-design-system/src/styles/light-dimmer-protanopia-harness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:17 GMT + * Copyright (c) Harness. + */ + +.light-dimmer-protanopia-harness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-800); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-700); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. Using blue instead of green for protanopia visibility. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-blue-500); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-500); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-600); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: lch(from var(--cn-colors-chrome-100) l c h / 0.8); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. Using blue instead of green for protanopia visibility. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-blue-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-400); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-chrome-400) l c h / 0.1); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-chrome-400) l c h / 0.15); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-150); + --cn-component-alert-danger-title: var(--cn-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.15); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-100); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.07); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-600) l c h / 0.3); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-blue-500); /* Text color for success badges. Communicates positive status through readable blue text. Using blue instead of green for protanopia visibility. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-blue-300) l c h / 0.3); /* Border color for success badges. Provides subtle definition for success state indicators. Using blue instead of green for protanopia visibility. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-blue-200) l c h / 0.07); /* Background color for success badges. Creates a subtle but recognizable success indicator. Using blue instead of green for protanopia visibility. */ + --cn-component-badge-danger-text: var(--cn-colors-red-500); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.3); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.07); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-500); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-300) l c h / 0.3); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-200) l c h / 0.07); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-500); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.3); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-300) l c h / 0.07); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-purple-500); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-purple-300) l c h / 0.3); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-purple-300) l c h / 0.07); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-blue-500); /* Text color for success buttons. Communicates positive actions through readable blue text. Using blue instead of green for protanopia visibility. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-blue-200) l c h / 0.08); /* Background color for success buttons. Creates subtle but recognizable positive action styling. Using blue instead of green for protanopia visibility. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-blue-300) l c h / 0.3); /* Border color for success buttons. Provides definition for positive action buttons. Using blue instead of green for protanopia visibility. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-blue-200) l c h / 0.1); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. Using blue instead of green for protanopia visibility. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-blue-200) l c h / 0.15); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. Using blue instead of green for protanopia visibility. */ + --cn-component-btn-danger-text: var(--cn-colors-red-500); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.08); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.3); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-300) l c h / 0.15); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.07); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-blue-500) l c h / 0.08); /* Blue background highlighting newly added code lines while maintaining readability. Using blue instead of green for protanopia visibility. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for line numbers of added code, providing visual connection to added content. Using blue instead of green for protanopia visibility. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-blue-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within added lines. Using blue instead of green for protanopia visibility. */ + --cn-component-diff-add-widget: var(--cn-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-500) l c h / 0.08); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-500) l c h / 0.12); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.08); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-purple-500); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-blue-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. Using blue instead of green for protanopia visibility. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-sidebar-border: var(--cn-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: lch(from var(--cn-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: lch(from var(--cn-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-100); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-700); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-700); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-blue-300); /* Color for success status indicators. Communicates completed or positive states. Using blue instead of green for protanopia visibility. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-unselected-background: var(--cn-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-100); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-chrome-700); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.07); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-500); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-500); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-blue-500); /* Text color for green tags. Using blue instead of green for protanopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-blue-100); /* Background color for green tags. Using blue instead of green for protanopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for green tags. Using blue instead of green for protanopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-500); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-blue-500); /* Text color for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --cn-component-tag-lime-background: var(--cn-colors-blue-100); /* Background color for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --cn-component-tag-mint-text: var(--cn-colors-blue-500); /* Text color for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --cn-component-tag-mint-background: var(--cn-colors-blue-100); /* Background color for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-500); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-500); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-purple-500); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --cn-component-tag-purple-background: var(--cn-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-red-text: var(--cn-colors-red-500); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-violet-500); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --cn-component-tag-violet-background: var(--cn-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-background: var(--cn-colors-red-100); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Light shadow color with 40% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Medium shadow color with 40% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-chrome-300) l c h / 0.35); /* Medium shadow color with 35% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-chrome-300) l c h / 0.35); /* Deep shadow color with 35% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-chrome-300) l c h / 0.35); /* Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-chrome-900) l c h / 0.07); /* Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-200); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-300); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-purple-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-300); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-pure-white); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-300); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-200) l c h / 0.3); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-300); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-400); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-pure-white); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-500); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-pure-white); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-pure-white); + --cn-brand-color-50: var(--cn-colors-cyan-50); + --cn-brand-color-100: var(--cn-colors-cyan-100); + --cn-brand-color-200: var(--cn-colors-cyan-200); + --cn-brand-color-300: var(--cn-colors-cyan-300); + --cn-brand-color-400: var(--cn-colors-cyan-400); + --cn-brand-color-500: var(--cn-colors-cyan-500); + --cn-brand-color-600: var(--cn-colors-cyan-600); + --cn-brand-color-700: var(--cn-colors-cyan-700); + --cn-brand-color-800: var(--cn-colors-cyan-800); + --cn-brand-color-900: var(--cn-colors-cyan-900); + --cn-brand-color-950: var(--cn-colors-cyan-950); + --cn-brand-on-color-50: var(--cn-colors-chrome-950); + --cn-brand-on-color-100: var(--cn-colors-chrome-950); + --cn-brand-on-color-200: var(--cn-colors-chrome-950); + --cn-brand-on-color-300: var(--cn-colors-chrome-950); + --cn-brand-on-color-400: var(--cn-colors-chrome-950); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-white); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-400); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-2); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-600); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags. Using blue instead of green for protanopia visibility. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-title: var(--cn-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/light-dimmer-tritanopia-gitness.css b/packages/core-design-system/src/styles/light-dimmer-tritanopia-gitness.css new file mode 100644 index 0000000000..e381739b1d --- /dev/null +++ b/packages/core-design-system/src/styles/light-dimmer-tritanopia-gitness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:25 GMT + * Copyright (c) Harness. + */ + +.light-dimmer-tritanopia-gitness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-800); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-700); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-cyan-500); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-500); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-orange-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-600); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: lch(from var(--cn-colors-chrome-100) l c h / 0.8); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-cyan-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-orange-400); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-chrome-400) l c h / 0.1); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-chrome-400) l c h / 0.15); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-150); + --cn-component-alert-danger-title: var(--cn-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.15); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-100); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.07); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-600) l c h / 0.3); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-cyan-500); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.3); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-cyan-200) l c h / 0.07); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-red-500); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.3); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.07); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-orange-500); /* Text color for warning badges. Signals caution states with readable orange text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-orange-300) l c h / 0.3); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-orange-200) l c h / 0.07); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-500); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.3); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-300) l c h / 0.07); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-cyan-500); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-cyan-300) l c h / 0.3); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-cyan-300) l c h / 0.07); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-cyan-500); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-cyan-200) l c h / 0.08); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.3); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-cyan-200) l c h / 0.1); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-cyan-200) l c h / 0.15); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-red-500); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.08); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.3); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-300) l c h / 0.15); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.07); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-cyan-500) l c h / 0.08); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-cyan-500) l c h / 0.12); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-cyan-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-500) l c h / 0.08); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-500) l c h / 0.12); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.08); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-cyan-500); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-sidebar-border: var(--cn-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: lch(from var(--cn-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: lch(from var(--cn-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-100); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-700); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-700); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-orange-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-unselected-background: var(--cn-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-100); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-chrome-700); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.07); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-500); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-500); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-cyan-600); /* Text color for green tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-cyan-100); /* Background color for green tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for green tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-500); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-500); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-500); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-cyan-600); /* Text color for purple tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-purple-background: var(--cn-colors-cyan-100); /* Background color for purple tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for purple tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-red-text: var(--cn-colors-red-500); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-cyan-600); /* Text color for violet tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-violet-background: var(--cn-colors-cyan-100); /* Background color for violet tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for violet tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-yellow-text: var(--cn-colors-orange-600); /* Text color for yellow tags, replaced with orange for tritanopia visibility. */ + --cn-component-tag-yellow-background: var(--cn-colors-orange-100); /* Background color for yellow tags, replaced with orange for tritanopia visibility. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for yellow tags, replaced with orange for tritanopia visibility. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-background: var(--cn-colors-red-100); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Light shadow color with 40% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Medium shadow color with 40% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-chrome-300) l c h / 0.35); /* Medium shadow color with 35% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-chrome-300) l c h / 0.35); /* Deep shadow color with 35% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-chrome-300) l c h / 0.35); /* Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-chrome-900) l c h / 0.07); /* Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-orange-200); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-300); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-cyan-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-pure-white); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-300); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-200) l c h / 0.3); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-300); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-400); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-pure-white); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-500); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-pure-white); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-pure-white); + --cn-brand-color-50: var(--cn-colors-chrome-150); + --cn-brand-color-100: var(--cn-colors-chrome-150); + --cn-brand-color-200: var(--cn-colors-chrome-150); + --cn-brand-color-300: var(--cn-colors-chrome-150); + --cn-brand-color-400: var(--cn-colors-chrome-150); + --cn-brand-color-500: var(--cn-colors-chrome-900); + --cn-brand-color-600: var(--cn-colors-chrome-150); + --cn-brand-color-700: var(--cn-colors-chrome-900); + --cn-brand-color-800: var(--cn-colors-chrome-900); + --cn-brand-color-900: var(--cn-colors-chrome-900); + --cn-brand-color-950: var(--cn-colors-chrome-900); + --cn-brand-on-color-50: var(--cn-colors-pure-black); + --cn-brand-on-color-100: var(--cn-colors-pure-black); + --cn-brand-on-color-200: var(--cn-colors-pure-black); + --cn-brand-on-color-300: var(--cn-colors-pure-black); + --cn-brand-on-color-400: var(--cn-colors-pure-black); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-black); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-400); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-2); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-600); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags, replaced with cyan. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags, replaced with orange. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-title: var(--cn-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/light-dimmer-tritanopia-harness.css b/packages/core-design-system/src/styles/light-dimmer-tritanopia-harness.css new file mode 100644 index 0000000000..419af5bfa2 --- /dev/null +++ b/packages/core-design-system/src/styles/light-dimmer-tritanopia-harness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:25 GMT + * Copyright (c) Harness. + */ + +.light-dimmer-tritanopia-harness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-800); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-700); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-600); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-cyan-500); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-500); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-orange-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-600); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: lch(from var(--cn-colors-chrome-100) l c h / 0.8); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-cyan-300); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-300); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-orange-400); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-chrome-400) l c h / 0.1); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-chrome-400) l c h / 0.15); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-150); + --cn-component-alert-danger-title: var(--cn-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.15); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-100); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.07); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-600) l c h / 0.3); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-cyan-500); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.3); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-cyan-200) l c h / 0.07); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-red-500); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.3); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.07); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-orange-500); /* Text color for warning badges. Signals caution states with readable orange text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-orange-300) l c h / 0.3); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-orange-200) l c h / 0.07); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-500); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-300) l c h / 0.3); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-300) l c h / 0.07); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-cyan-500); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-cyan-300) l c h / 0.3); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-cyan-300) l c h / 0.07); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-cyan-500); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-cyan-200) l c h / 0.08); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-cyan-300) l c h / 0.3); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-cyan-200) l c h / 0.1); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-cyan-200) l c h / 0.15); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-red-500); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.08); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-300) l c h / 0.3); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-300) l c h / 0.15); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.07); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-cyan-500) l c h / 0.08); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-cyan-500) l c h / 0.12); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-cyan-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-500) l c h / 0.08); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-500) l c h / 0.12); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.08); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-cyan-500); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-sidebar-border: var(--cn-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: lch(from var(--cn-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: lch(from var(--cn-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-chrome-100); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-700); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-700); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-orange-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-unselected-background: var(--cn-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-100); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-chrome-700); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.07); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-500); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-500); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-cyan-600); /* Text color for green tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-cyan-100); /* Background color for green tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for green tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-500); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-500); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-500); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-cyan-600); /* Text color for purple tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-purple-background: var(--cn-colors-cyan-100); /* Background color for purple tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for purple tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-red-text: var(--cn-colors-red-500); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-cyan-600); /* Text color for violet tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-violet-background: var(--cn-colors-cyan-100); /* Background color for violet tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for violet tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-yellow-text: var(--cn-colors-orange-600); /* Text color for yellow tags, replaced with orange for tritanopia visibility. */ + --cn-component-tag-yellow-background: var(--cn-colors-orange-100); /* Background color for yellow tags, replaced with orange for tritanopia visibility. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for yellow tags, replaced with orange for tritanopia visibility. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-background: var(--cn-colors-red-100); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Light shadow color with 40% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Medium shadow color with 40% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-chrome-300) l c h / 0.35); /* Medium shadow color with 35% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-chrome-300) l c h / 0.35); /* Deep shadow color with 35% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-chrome-300) l c h / 0.35); /* Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-chrome-300) l c h / 0.4); /* Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-chrome-900) l c h / 0.07); /* Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-orange-200); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-300); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-cyan-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-pure-white); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-300); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-200) l c h / 0.3); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-300); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-400); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-pure-white); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-500); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-pure-white); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-pure-white); + --cn-brand-color-50: var(--cn-colors-cyan-50); + --cn-brand-color-100: var(--cn-colors-cyan-100); + --cn-brand-color-200: var(--cn-colors-cyan-200); + --cn-brand-color-300: var(--cn-colors-cyan-300); + --cn-brand-color-400: var(--cn-colors-cyan-400); + --cn-brand-color-500: var(--cn-colors-cyan-500); + --cn-brand-color-600: var(--cn-colors-cyan-600); + --cn-brand-color-700: var(--cn-colors-cyan-700); + --cn-brand-color-800: var(--cn-colors-cyan-800); + --cn-brand-color-900: var(--cn-colors-cyan-900); + --cn-brand-color-950: var(--cn-colors-cyan-950); + --cn-brand-on-color-50: var(--cn-colors-chrome-950); + --cn-brand-on-color-100: var(--cn-colors-chrome-950); + --cn-brand-on-color-200: var(--cn-colors-chrome-950); + --cn-brand-on-color-300: var(--cn-colors-chrome-950); + --cn-brand-on-color-400: var(--cn-colors-chrome-950); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-white); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-400); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-2); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-600); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags, replaced with cyan. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags, replaced with orange. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-title: var(--cn-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/light-gitness.css b/packages/core-design-system/src/styles/light-gitness.css new file mode 100644 index 0000000000..cf2edcbac9 --- /dev/null +++ b/packages/core-design-system/src/styles/light-gitness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:43:59 GMT + * Copyright (c) Harness. + */ + +.light-gitness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-chrome-50); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-850); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-700); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-green-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-800); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-100); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-green-400); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-400); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-chrome-400) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-150); + --cn-component-alert-danger-title: var(--cn-colors-red-800); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-600) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-green-600); /* Text color for success badges. Communicates positive status through readable green text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-green-400) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-green-200) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-red-600); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-600); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-400) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-600); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-400) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-purple-600); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-purple-400) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-purple-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-200); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-green-600); /* Text color for success buttons. Communicates positive actions through readable green text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-green-200) l c h / 0.12); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-green-400) l c h / 0.25); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-green-200) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-green-200) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-red-600); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.12); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-green-500) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-green-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-green-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-purple-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-400); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-green-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-sidebar-border: var(--cn-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: lch(from var(--cn-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: lch(from var(--cn-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-separator-background: var(--cn-border-width-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-900); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-green-300); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-unselected-background: var(--cn-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-50); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-chrome-900); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-600); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-600); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-green-600); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ + --cn-component-tag-green-background: var(--cn-colors-green-100); /* Background color for green tags. Creates a distinct surface with green theme styling. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-green-50); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-600); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-600); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-600); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-purple-600); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --cn-component-tag-purple-background: var(--cn-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-red-text: var(--cn-colors-red-600); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-violet-600); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --cn-component-tag-violet-background: var(--cn-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-background: var(--cn-colors-red-200); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-chrome-900) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-200); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-300); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-purple-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-pure-white); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-300); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-200) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-300); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-400); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-pure-white); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-500); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-pure-white); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-pure-white); + --cn-brand-color-50: var(--cn-colors-chrome-150); + --cn-brand-color-100: var(--cn-colors-chrome-150); + --cn-brand-color-200: var(--cn-colors-chrome-150); + --cn-brand-color-300: var(--cn-colors-chrome-150); + --cn-brand-color-400: var(--cn-colors-chrome-150); + --cn-brand-color-500: var(--cn-colors-chrome-900); + --cn-brand-color-600: var(--cn-colors-chrome-150); + --cn-brand-color-700: var(--cn-colors-chrome-900); + --cn-brand-color-800: var(--cn-colors-chrome-900); + --cn-brand-color-900: var(--cn-colors-chrome-900); + --cn-brand-color-950: var(--cn-colors-chrome-900); + --cn-brand-on-color-50: var(--cn-colors-pure-black); + --cn-brand-on-color-100: var(--cn-colors-pure-black); + --cn-brand-on-color-200: var(--cn-colors-pure-black); + --cn-brand-on-color-300: var(--cn-colors-pure-black); + --cn-brand-on-color-400: var(--cn-colors-pure-black); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-black); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-500); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-2); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-title: var(--cn-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/light-harness.css b/packages/core-design-system/src/styles/light-harness.css new file mode 100644 index 0000000000..2f03aea28e --- /dev/null +++ b/packages/core-design-system/src/styles/light-harness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:43:59 GMT + * Copyright (c) Harness. + */ + +.light-harness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-chrome-50); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-850); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-700); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-green-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-800); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-100); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-green-400); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-400); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-chrome-400) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-150); + --cn-component-alert-danger-title: var(--cn-colors-red-800); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-600) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-green-600); /* Text color for success badges. Communicates positive status through readable green text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-green-400) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-green-200) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-red-600); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-600); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-400) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-600); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-400) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-purple-600); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-purple-400) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-purple-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-200); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-green-600); /* Text color for success buttons. Communicates positive actions through readable green text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-green-200) l c h / 0.12); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-green-400) l c h / 0.25); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-green-200) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-green-200) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-red-600); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.12); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-green-500) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-green-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-green-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-purple-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-400); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-green-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-sidebar-border: var(--cn-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: lch(from var(--cn-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: lch(from var(--cn-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-separator-background: var(--cn-border-width-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-900); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-green-300); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-unselected-background: var(--cn-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-50); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-chrome-900); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-600); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-600); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-green-600); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ + --cn-component-tag-green-background: var(--cn-colors-green-100); /* Background color for green tags. Creates a distinct surface with green theme styling. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-green-50); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-600); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-600); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-600); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-purple-600); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --cn-component-tag-purple-background: var(--cn-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-red-text: var(--cn-colors-red-600); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-violet-600); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --cn-component-tag-violet-background: var(--cn-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-background: var(--cn-colors-red-200); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-chrome-900) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-200); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-300); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-purple-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-pure-white); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-300); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-200) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-300); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-400); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-pure-white); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-500); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-pure-white); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-pure-white); + --cn-brand-color-50: var(--cn-colors-cyan-50); + --cn-brand-color-100: var(--cn-colors-cyan-100); + --cn-brand-color-200: var(--cn-colors-cyan-200); + --cn-brand-color-300: var(--cn-colors-cyan-300); + --cn-brand-color-400: var(--cn-colors-cyan-400); + --cn-brand-color-500: var(--cn-colors-cyan-500); + --cn-brand-color-600: var(--cn-colors-cyan-600); + --cn-brand-color-700: var(--cn-colors-cyan-700); + --cn-brand-color-800: var(--cn-colors-cyan-800); + --cn-brand-color-900: var(--cn-colors-cyan-900); + --cn-brand-color-950: var(--cn-colors-cyan-950); + --cn-brand-on-color-50: var(--cn-colors-chrome-950); + --cn-brand-on-color-100: var(--cn-colors-chrome-950); + --cn-brand-on-color-200: var(--cn-colors-chrome-950); + --cn-brand-on-color-300: var(--cn-colors-chrome-950); + --cn-brand-on-color-400: var(--cn-colors-chrome-950); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-white); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-500); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-2); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-title: var(--cn-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/light-high-contrast-deuteranopia-gitness.css b/packages/core-design-system/src/styles/light-high-contrast-deuteranopia-gitness.css new file mode 100644 index 0000000000..6282afe440 --- /dev/null +++ b/packages/core-design-system/src/styles/light-high-contrast-deuteranopia-gitness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:23 GMT + * Copyright (c) Harness. + */ + +.light-high-contrast-deuteranopia-gitness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-50); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-100); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-900); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-800); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-cyan-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-orange-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-600); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-700); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-300); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-200) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-cyan-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-orange-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-chrome-300) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-150); + --cn-component-alert-danger-title: var(--cn-colors-orange-700); /* Text color for danger alerts. Communicates critical information through high-contrast orange text. */ + --cn-component-alert-danger-description: var(--cn-colors-orange-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-orange-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-orange-500) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-600) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-cyan-700); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-cyan-400) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-cyan-300) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-orange-700); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-orange-400) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-orange-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-700); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-400) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-700); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-400) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-cyan-700); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-cyan-400) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-cyan-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-cyan-700); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-cyan-300) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-cyan-400) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-cyan-300) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-cyan-300) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-orange-700); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-orange-300) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-orange-400) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-orange-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-orange-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-500) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-orange-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-cyan-400) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-cyan-400) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-cyan-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-orange-400) l c h / 0.12); /* Orange background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-orange-400) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-orange-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-400) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-400) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-blue-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-orange-500); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-cyan-500); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-sidebar-border: var(--cn-colors-chrome-800); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-colors-chrome-800); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: lch(from var(--cn-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: lch(from var(--cn-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-colors-chrome-400); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-400); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-200); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-progress: var(--cn-colors-blue-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-400); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-track-segments-progress: var(--cn-colors-blue-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-slider-handle-background: var(--cn-colors-pure-white); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-cyan-500); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-orange-500); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-cyan-500); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-500); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-unselected-thumb: var(--cn-colors-pure-white); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-colors-chrome-300); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-switch-selected-thumb: var(--cn-colors-pure-white); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-blue-600); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-700); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-700); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-700); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-cyan-700); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-cyan-100); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-700); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-700); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-700); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-700); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-700); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-cyan-700); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-purple-background: var(--cn-colors-cyan-100); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-red-text: var(--cn-colors-orange-700); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-red-background: var(--cn-colors-orange-100); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-violet-text: var(--cn-colors-blue-700); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-violet-background: var(--cn-colors-blue-100); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-700); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-orange-600); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-chrome-950) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-chrome-950) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-chrome-950) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-chrome-950) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-chrome-950) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-200); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-orange-400); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-cyan-400); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-300); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-150); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-pure-white); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-400); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-300) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-400); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-chrome-300); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-500); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-pure-white); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-700); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-pure-white); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-pure-white); + --cn-brand-color-50: var(--cn-colors-chrome-150); + --cn-brand-color-100: var(--cn-colors-chrome-150); + --cn-brand-color-200: var(--cn-colors-chrome-150); + --cn-brand-color-300: var(--cn-colors-chrome-150); + --cn-brand-color-400: var(--cn-colors-chrome-150); + --cn-brand-color-500: var(--cn-colors-chrome-900); + --cn-brand-color-600: var(--cn-colors-chrome-150); + --cn-brand-color-700: var(--cn-colors-chrome-900); + --cn-brand-color-800: var(--cn-colors-chrome-900); + --cn-brand-color-900: var(--cn-colors-chrome-900); + --cn-brand-color-950: var(--cn-colors-chrome-900); + --cn-brand-on-color-50: var(--cn-colors-pure-black); + --cn-brand-on-color-100: var(--cn-colors-pure-black); + --cn-brand-on-color-200: var(--cn-colors-pure-black); + --cn-brand-on-color-300: var(--cn-colors-pure-black); + --cn-brand-on-color-400: var(--cn-colors-pure-black); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-black); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-700); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-2); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags, replaced with orange. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/light-high-contrast-deuteranopia-harness.css b/packages/core-design-system/src/styles/light-high-contrast-deuteranopia-harness.css new file mode 100644 index 0000000000..f6caf999e2 --- /dev/null +++ b/packages/core-design-system/src/styles/light-high-contrast-deuteranopia-harness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:22 GMT + * Copyright (c) Harness. + */ + +.light-high-contrast-deuteranopia-harness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-50); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-100); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-900); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-800); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-cyan-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-orange-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-600); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-700); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-300); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-200) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-cyan-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-orange-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-chrome-300) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-150); + --cn-component-alert-danger-title: var(--cn-colors-orange-700); /* Text color for danger alerts. Communicates critical information through high-contrast orange text. */ + --cn-component-alert-danger-description: var(--cn-colors-orange-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-orange-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-orange-500) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-600) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-cyan-700); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-cyan-400) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-cyan-300) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-orange-700); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-orange-400) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-orange-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-700); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-400) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-700); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-400) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-cyan-700); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-cyan-400) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-cyan-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-cyan-700); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-cyan-300) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-cyan-400) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-cyan-300) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-cyan-300) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-orange-700); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-orange-300) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-orange-400) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-orange-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-orange-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-500) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-orange-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-cyan-400) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-cyan-400) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-cyan-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-orange-400) l c h / 0.12); /* Orange background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-orange-400) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-orange-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-400) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-400) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-blue-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-orange-500); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-cyan-500); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-sidebar-border: var(--cn-colors-chrome-800); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-colors-chrome-800); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: lch(from var(--cn-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: lch(from var(--cn-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-colors-chrome-400); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-400); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-200); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-progress: var(--cn-colors-blue-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-400); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-track-segments-progress: var(--cn-colors-blue-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-slider-handle-background: var(--cn-colors-pure-white); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-cyan-500); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-orange-500); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-cyan-500); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-500); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-unselected-thumb: var(--cn-colors-pure-white); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-colors-chrome-300); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-switch-selected-thumb: var(--cn-colors-pure-white); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-blue-600); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-700); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-700); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-700); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-cyan-700); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-cyan-100); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-700); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-700); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-700); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-700); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-700); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-cyan-700); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-purple-background: var(--cn-colors-cyan-100); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ + --cn-component-tag-red-text: var(--cn-colors-orange-700); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-red-background: var(--cn-colors-orange-100); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ + --cn-component-tag-violet-text: var(--cn-colors-blue-700); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-violet-background: var(--cn-colors-blue-100); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-700); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-orange-600); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-chrome-950) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-chrome-950) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-chrome-950) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-chrome-950) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-chrome-950) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-200); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-orange-400); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-cyan-400); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-300); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-150); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-pure-white); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-400); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-300) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-400); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-chrome-300); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-500); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-pure-white); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-700); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-pure-white); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-pure-white); + --cn-brand-color-50: var(--cn-colors-cyan-50); + --cn-brand-color-100: var(--cn-colors-cyan-100); + --cn-brand-color-200: var(--cn-colors-cyan-200); + --cn-brand-color-300: var(--cn-colors-cyan-300); + --cn-brand-color-400: var(--cn-colors-cyan-400); + --cn-brand-color-500: var(--cn-colors-cyan-500); + --cn-brand-color-600: var(--cn-colors-cyan-600); + --cn-brand-color-700: var(--cn-colors-cyan-700); + --cn-brand-color-800: var(--cn-colors-cyan-800); + --cn-brand-color-900: var(--cn-colors-cyan-900); + --cn-brand-color-950: var(--cn-colors-cyan-950); + --cn-brand-on-color-50: var(--cn-colors-chrome-950); + --cn-brand-on-color-100: var(--cn-colors-chrome-950); + --cn-brand-on-color-200: var(--cn-colors-chrome-950); + --cn-brand-on-color-300: var(--cn-colors-chrome-950); + --cn-brand-on-color-400: var(--cn-colors-chrome-950); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-white); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-700); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-2); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags, replaced with orange. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/light-high-contrast-gitness.css b/packages/core-design-system/src/styles/light-high-contrast-gitness.css new file mode 100644 index 0000000000..9a1c1e76f2 --- /dev/null +++ b/packages/core-design-system/src/styles/light-high-contrast-gitness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:15 GMT + * Copyright (c) Harness. + */ + +.light-high-contrast-gitness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-50); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-100); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-900); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-800); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-green-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-600); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-700); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-300); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-200) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-green-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-chrome-300) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-150); + --cn-component-alert-danger-title: var(--cn-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-500) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-600) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-green-700); /* Text color for success badges. Communicates positive status through readable green text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-green-400) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-green-300) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-red-700); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-700); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-400) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-700); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-400) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-purple-700); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-purple-400) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-purple-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-green-700); /* Text color for success buttons. Communicates positive actions through readable green text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-green-300) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-green-400) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-green-300) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-green-300) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-red-700); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-500) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-green-400) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-green-400) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-green-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-400) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-400) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-400) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-400) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-purple-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-500); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-green-500); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-sidebar-border: var(--cn-colors-chrome-800); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-colors-chrome-800); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: lch(from var(--cn-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: lch(from var(--cn-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-colors-chrome-400); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-400); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-200); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-progress: var(--cn-colors-blue-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-400); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-track-segments-progress: var(--cn-colors-blue-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-slider-handle-background: var(--cn-colors-pure-white); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-green-500); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-500); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-purple-500); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-500); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-unselected-thumb: var(--cn-colors-pure-white); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-colors-chrome-300); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-switch-selected-thumb: var(--cn-colors-pure-white); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-blue-600); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-700); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-700); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-700); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-green-700); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ + --cn-component-tag-green-background: var(--cn-colors-green-100); /* Background color for green tags. Creates a distinct surface with green theme styling. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-green-50); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-700); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-700); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-700); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-700); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-700); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-purple-700); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --cn-component-tag-purple-background: var(--cn-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-red-text: var(--cn-colors-red-700); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-violet-700); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --cn-component-tag-violet-background: var(--cn-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-700); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-red-600); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-chrome-950) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-chrome-950) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-chrome-950) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-chrome-950) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-chrome-950) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-200); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-400); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-purple-400); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-300); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-150); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-pure-white); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-400); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-300) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-400); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-chrome-300); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-500); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-pure-white); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-700); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-pure-white); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-pure-white); + --cn-brand-color-50: var(--cn-colors-chrome-150); + --cn-brand-color-100: var(--cn-colors-chrome-150); + --cn-brand-color-200: var(--cn-colors-chrome-150); + --cn-brand-color-300: var(--cn-colors-chrome-150); + --cn-brand-color-400: var(--cn-colors-chrome-150); + --cn-brand-color-500: var(--cn-colors-chrome-900); + --cn-brand-color-600: var(--cn-colors-chrome-150); + --cn-brand-color-700: var(--cn-colors-chrome-900); + --cn-brand-color-800: var(--cn-colors-chrome-900); + --cn-brand-color-900: var(--cn-colors-chrome-900); + --cn-brand-color-950: var(--cn-colors-chrome-900); + --cn-brand-on-color-50: var(--cn-colors-pure-black); + --cn-brand-on-color-100: var(--cn-colors-pure-black); + --cn-brand-on-color-200: var(--cn-colors-pure-black); + --cn-brand-on-color-300: var(--cn-colors-pure-black); + --cn-brand-on-color-400: var(--cn-colors-pure-black); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-black); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-700); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-2); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/light-high-contrast-harness.css b/packages/core-design-system/src/styles/light-high-contrast-harness.css new file mode 100644 index 0000000000..8465580a12 --- /dev/null +++ b/packages/core-design-system/src/styles/light-high-contrast-harness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:14 GMT + * Copyright (c) Harness. + */ + +.light-high-contrast-harness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-50); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-100); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-900); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-800); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-green-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-600); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-700); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-300); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-200) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-green-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-chrome-300) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-150); + --cn-component-alert-danger-title: var(--cn-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-500) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-600) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-green-700); /* Text color for success badges. Communicates positive status through readable green text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-green-400) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-green-300) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-red-700); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-700); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-400) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-700); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-400) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-purple-700); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-purple-400) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-purple-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-green-700); /* Text color for success buttons. Communicates positive actions through readable green text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-green-300) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-green-400) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-green-300) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-green-300) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-red-700); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-500) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-green-400) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-green-400) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-green-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-400) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-400) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-400) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-400) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-purple-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-500); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-green-500); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-sidebar-border: var(--cn-colors-chrome-800); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-colors-chrome-800); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: lch(from var(--cn-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: lch(from var(--cn-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-colors-chrome-400); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-400); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-200); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-progress: var(--cn-colors-blue-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-400); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-track-segments-progress: var(--cn-colors-blue-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-slider-handle-background: var(--cn-colors-pure-white); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-green-500); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-500); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-purple-500); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-500); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-unselected-thumb: var(--cn-colors-pure-white); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-colors-chrome-300); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-switch-selected-thumb: var(--cn-colors-pure-white); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-blue-600); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-700); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-700); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-700); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-green-700); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ + --cn-component-tag-green-background: var(--cn-colors-green-100); /* Background color for green tags. Creates a distinct surface with green theme styling. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-green-50); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-700); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-700); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-700); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-700); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-700); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-purple-700); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --cn-component-tag-purple-background: var(--cn-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-red-text: var(--cn-colors-red-700); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-violet-700); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --cn-component-tag-violet-background: var(--cn-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-700); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-red-600); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-chrome-950) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-chrome-950) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-chrome-950) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-chrome-950) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-chrome-950) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-200); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-400); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-purple-400); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-300); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-150); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-pure-white); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-400); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-300) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-400); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-chrome-300); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-500); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-pure-white); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-700); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-pure-white); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-pure-white); + --cn-brand-color-50: var(--cn-colors-cyan-50); + --cn-brand-color-100: var(--cn-colors-cyan-100); + --cn-brand-color-200: var(--cn-colors-cyan-200); + --cn-brand-color-300: var(--cn-colors-cyan-300); + --cn-brand-color-400: var(--cn-colors-cyan-400); + --cn-brand-color-500: var(--cn-colors-cyan-500); + --cn-brand-color-600: var(--cn-colors-cyan-600); + --cn-brand-color-700: var(--cn-colors-cyan-700); + --cn-brand-color-800: var(--cn-colors-cyan-800); + --cn-brand-color-900: var(--cn-colors-cyan-900); + --cn-brand-color-950: var(--cn-colors-cyan-950); + --cn-brand-on-color-50: var(--cn-colors-chrome-950); + --cn-brand-on-color-100: var(--cn-colors-chrome-950); + --cn-brand-on-color-200: var(--cn-colors-chrome-950); + --cn-brand-on-color-300: var(--cn-colors-chrome-950); + --cn-brand-on-color-400: var(--cn-colors-chrome-950); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-white); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-700); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-2); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/light-high-contrast-protanopia-gitness.css b/packages/core-design-system/src/styles/light-high-contrast-protanopia-gitness.css new file mode 100644 index 0000000000..06891d7b88 --- /dev/null +++ b/packages/core-design-system/src/styles/light-high-contrast-protanopia-gitness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:19 GMT + * Copyright (c) Harness. + */ + +.light-high-contrast-protanopia-gitness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-50); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-100); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-900); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-800); + /** + * Primary color for text and icons in success content. Adjusted for protanopia using blue instead of green. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-blue-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-600); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-700); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-300); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-200) l c h / 0.7); + /** + * Border color for success containers. Adjusted for protanopia using blue instead of green. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-blue-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-chrome-300) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-150); + --cn-component-alert-danger-title: var(--cn-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-500) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-600) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-blue-700); /* Text color for success badges. Adjusted for protanopia using blue instead of green. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-blue-400) l c h / 0.6); /* Border color for success badges. Adjusted for protanopia using blue instead of green. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-blue-300) l c h / 0.1); /* Background color for success badges. Adjusted for protanopia using blue instead of green. */ + --cn-component-badge-danger-text: var(--cn-colors-red-700); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-700); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-400) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-700); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-400) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-purple-700); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-purple-400) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-purple-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-blue-700); /* Text color for success buttons. Adjusted for protanopia using blue instead of green. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-blue-300) l c h / 0.1); /* Background color for success buttons. Adjusted for protanopia using blue instead of green. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-blue-400) l c h / 0.6); /* Border color for success buttons. Adjusted for protanopia using blue instead of green. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-blue-300) l c h / 0.15); /* Hover state background color for success buttons. Adjusted for protanopia using blue instead of green. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-blue-300) l c h / 0.25); /* Active state background color for success buttons. Adjusted for protanopia using blue instead of green. */ + --cn-component-btn-danger-text: var(--cn-colors-red-700); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-500) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-blue-400) l c h / 0.12); /* Blue background highlighting newly added code lines. Adjusted for protanopia using blue instead of green. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-blue-400) l c h / 0.2); /* Background for line numbers of added code. Adjusted for protanopia using blue instead of green. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-blue-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. Adjusted for protanopia using blue instead of green. */ + --cn-component-diff-add-widget: var(--cn-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-400) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-400) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-400) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-400) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-purple-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-500); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-blue-500); /* Border color for completed pipeline states. Adjusted for protanopia using blue instead of green. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-sidebar-border: var(--cn-colors-chrome-800); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-colors-chrome-800); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: lch(from var(--cn-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: lch(from var(--cn-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-colors-chrome-400); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-400); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-200); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-progress: var(--cn-colors-blue-500); /* Filled portion color for slider tracks. Adjusted for protanopia using blue instead of green. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-400); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-track-segments-progress: var(--cn-colors-blue-700); /* Color for segment markers on the filled track portion. Adjusted for protanopia using blue instead of green. */ + --cn-component-slider-handle-background: var(--cn-colors-pure-white); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-blue-500); /* Color for success status indicators. Adjusted for protanopia using blue instead of green. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-500); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-purple-500); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-500); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-unselected-thumb: var(--cn-colors-pure-white); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-colors-chrome-300); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-switch-selected-thumb: var(--cn-colors-pure-white); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-blue-600); /* Background color for the selected state of switch controls. Adjusted for protanopia using blue instead of green. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-700); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-700); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-700); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-blue-700); /* Text color for green tags. Adjusted for protanopia using blue instead of green. */ + --cn-component-tag-green-background: var(--cn-colors-blue-100); /* Background color for green tags. Adjusted for protanopia using blue instead of green. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for green tags. Adjusted for protanopia using blue instead of green. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-700); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-blue-700); /* Text color for lime tags. Adjusted for protanopia using blue instead of green. */ + --cn-component-tag-lime-background: var(--cn-colors-blue-100); /* Background color for lime tags. Adjusted for protanopia using blue instead of green. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for lime tags. Adjusted for protanopia using blue instead of green. */ + --cn-component-tag-mint-text: var(--cn-colors-blue-700); /* Text color for mint tags. Adjusted for protanopia using blue instead of green. */ + --cn-component-tag-mint-background: var(--cn-colors-blue-100); /* Background color for mint tags. Adjusted for protanopia using blue instead of green. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for mint tags. Adjusted for protanopia using blue instead of green. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-700); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-700); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-purple-700); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --cn-component-tag-purple-background: var(--cn-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-red-text: var(--cn-colors-red-700); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-violet-700); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --cn-component-tag-violet-background: var(--cn-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-700); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-red-600); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-chrome-950) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-chrome-950) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-chrome-950) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-chrome-950) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-chrome-950) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-200); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-400); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-purple-400); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-300); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-150); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-pure-white); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-400); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-300) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-400); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-chrome-300); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-500); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-pure-white); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-700); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-pure-white); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-pure-white); + --cn-brand-color-50: var(--cn-colors-chrome-150); + --cn-brand-color-100: var(--cn-colors-chrome-150); + --cn-brand-color-200: var(--cn-colors-chrome-150); + --cn-brand-color-300: var(--cn-colors-chrome-150); + --cn-brand-color-400: var(--cn-colors-chrome-150); + --cn-brand-color-500: var(--cn-colors-chrome-900); + --cn-brand-color-600: var(--cn-colors-chrome-150); + --cn-brand-color-700: var(--cn-colors-chrome-900); + --cn-brand-color-800: var(--cn-colors-chrome-900); + --cn-brand-color-900: var(--cn-colors-chrome-900); + --cn-brand-color-950: var(--cn-colors-chrome-900); + --cn-brand-on-color-50: var(--cn-colors-pure-black); + --cn-brand-on-color-100: var(--cn-colors-pure-black); + --cn-brand-on-color-200: var(--cn-colors-pure-black); + --cn-brand-on-color-300: var(--cn-colors-pure-black); + --cn-brand-on-color-400: var(--cn-colors-pure-black); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-black); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-700); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-2); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. Adjusted for protanopia using blue instead of green. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags. Adjusted for protanopia using blue instead of green. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. Adjusted for protanopia using blue instead of green. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. Adjusted for protanopia using blue instead of green. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/light-high-contrast-protanopia-harness.css b/packages/core-design-system/src/styles/light-high-contrast-protanopia-harness.css new file mode 100644 index 0000000000..b3a72350dd --- /dev/null +++ b/packages/core-design-system/src/styles/light-high-contrast-protanopia-harness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:18 GMT + * Copyright (c) Harness. + */ + +.light-high-contrast-protanopia-harness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-50); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-100); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-900); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-800); + /** + * Primary color for text and icons in success content. Adjusted for protanopia using blue instead of green. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-blue-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-600); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-700); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-300); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-200) l c h / 0.7); + /** + * Border color for success containers. Adjusted for protanopia using blue instead of green. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-blue-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-chrome-300) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-150); + --cn-component-alert-danger-title: var(--cn-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-500) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-600) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-blue-700); /* Text color for success badges. Adjusted for protanopia using blue instead of green. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-blue-400) l c h / 0.6); /* Border color for success badges. Adjusted for protanopia using blue instead of green. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-blue-300) l c h / 0.1); /* Background color for success badges. Adjusted for protanopia using blue instead of green. */ + --cn-component-badge-danger-text: var(--cn-colors-red-700); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-700); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-400) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-700); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-400) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-purple-700); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-purple-400) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-purple-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-blue-700); /* Text color for success buttons. Adjusted for protanopia using blue instead of green. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-blue-300) l c h / 0.1); /* Background color for success buttons. Adjusted for protanopia using blue instead of green. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-blue-400) l c h / 0.6); /* Border color for success buttons. Adjusted for protanopia using blue instead of green. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-blue-300) l c h / 0.15); /* Hover state background color for success buttons. Adjusted for protanopia using blue instead of green. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-blue-300) l c h / 0.25); /* Active state background color for success buttons. Adjusted for protanopia using blue instead of green. */ + --cn-component-btn-danger-text: var(--cn-colors-red-700); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-500) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-blue-400) l c h / 0.12); /* Blue background highlighting newly added code lines. Adjusted for protanopia using blue instead of green. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-blue-400) l c h / 0.2); /* Background for line numbers of added code. Adjusted for protanopia using blue instead of green. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-blue-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. Adjusted for protanopia using blue instead of green. */ + --cn-component-diff-add-widget: var(--cn-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-400) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-400) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-400) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-400) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-purple-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-500); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-blue-500); /* Border color for completed pipeline states. Adjusted for protanopia using blue instead of green. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-sidebar-border: var(--cn-colors-chrome-800); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-colors-chrome-800); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: lch(from var(--cn-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: lch(from var(--cn-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-colors-chrome-400); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-400); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-200); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-progress: var(--cn-colors-blue-500); /* Filled portion color for slider tracks. Adjusted for protanopia using blue instead of green. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-400); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-track-segments-progress: var(--cn-colors-blue-700); /* Color for segment markers on the filled track portion. Adjusted for protanopia using blue instead of green. */ + --cn-component-slider-handle-background: var(--cn-colors-pure-white); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-blue-500); /* Color for success status indicators. Adjusted for protanopia using blue instead of green. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-500); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-purple-500); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-500); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-unselected-thumb: var(--cn-colors-pure-white); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-colors-chrome-300); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-switch-selected-thumb: var(--cn-colors-pure-white); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-blue-600); /* Background color for the selected state of switch controls. Adjusted for protanopia using blue instead of green. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-700); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-700); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-700); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-blue-700); /* Text color for green tags. Adjusted for protanopia using blue instead of green. */ + --cn-component-tag-green-background: var(--cn-colors-blue-100); /* Background color for green tags. Adjusted for protanopia using blue instead of green. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for green tags. Adjusted for protanopia using blue instead of green. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-700); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-blue-700); /* Text color for lime tags. Adjusted for protanopia using blue instead of green. */ + --cn-component-tag-lime-background: var(--cn-colors-blue-100); /* Background color for lime tags. Adjusted for protanopia using blue instead of green. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for lime tags. Adjusted for protanopia using blue instead of green. */ + --cn-component-tag-mint-text: var(--cn-colors-blue-700); /* Text color for mint tags. Adjusted for protanopia using blue instead of green. */ + --cn-component-tag-mint-background: var(--cn-colors-blue-100); /* Background color for mint tags. Adjusted for protanopia using blue instead of green. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for mint tags. Adjusted for protanopia using blue instead of green. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-700); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-700); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-purple-700); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --cn-component-tag-purple-background: var(--cn-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-red-text: var(--cn-colors-red-700); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-violet-700); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --cn-component-tag-violet-background: var(--cn-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-700); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-red-600); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-chrome-950) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-chrome-950) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-chrome-950) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-chrome-950) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-chrome-950) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-200); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-400); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-purple-400); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-300); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-150); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-pure-white); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-400); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-300) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-400); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-chrome-300); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-500); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-pure-white); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-700); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-pure-white); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-pure-white); + --cn-brand-color-50: var(--cn-colors-cyan-50); + --cn-brand-color-100: var(--cn-colors-cyan-100); + --cn-brand-color-200: var(--cn-colors-cyan-200); + --cn-brand-color-300: var(--cn-colors-cyan-300); + --cn-brand-color-400: var(--cn-colors-cyan-400); + --cn-brand-color-500: var(--cn-colors-cyan-500); + --cn-brand-color-600: var(--cn-colors-cyan-600); + --cn-brand-color-700: var(--cn-colors-cyan-700); + --cn-brand-color-800: var(--cn-colors-cyan-800); + --cn-brand-color-900: var(--cn-colors-cyan-900); + --cn-brand-color-950: var(--cn-colors-cyan-950); + --cn-brand-on-color-50: var(--cn-colors-chrome-950); + --cn-brand-on-color-100: var(--cn-colors-chrome-950); + --cn-brand-on-color-200: var(--cn-colors-chrome-950); + --cn-brand-on-color-300: var(--cn-colors-chrome-950); + --cn-brand-on-color-400: var(--cn-colors-chrome-950); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-white); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-700); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-2); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. Adjusted for protanopia using blue instead of green. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags. Adjusted for protanopia using blue instead of green. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. Adjusted for protanopia using blue instead of green. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. Adjusted for protanopia using blue instead of green. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/light-high-contrast-tritanopia-gitness.css b/packages/core-design-system/src/styles/light-high-contrast-tritanopia-gitness.css new file mode 100644 index 0000000000..a4dc5537fc --- /dev/null +++ b/packages/core-design-system/src/styles/light-high-contrast-tritanopia-gitness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:26 GMT + * Copyright (c) Harness. + */ + +.light-high-contrast-tritanopia-gitness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1.4px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-50); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-100); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-900); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-800); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-cyan-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-orange-600); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-700); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-300); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-200) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-cyan-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-orange-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-chrome-300) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-150); + --cn-component-alert-danger-title: var(--cn-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-500) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-600) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-cyan-700); /* Text color for success badges. Communicates positive status through readable green text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-cyan-400) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-cyan-300) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-red-700); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-orange-700); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-orange-400) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-orange-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-700); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-400) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-cyan-700); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-cyan-400) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-cyan-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-cyan-700); /* Text color for success buttons. Communicates positive actions through readable green text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-cyan-300) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-cyan-400) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-cyan-300) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-cyan-300) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-red-700); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-500) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-cyan-400) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-cyan-400) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-cyan-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-400) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-400) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-400) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-400) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-cyan-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-500); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-cyan-500); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-sidebar-border: var(--cn-colors-chrome-800); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-colors-chrome-800); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: lch(from var(--cn-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: lch(from var(--cn-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-colors-chrome-400); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-400); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-200); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-progress: var(--cn-colors-blue-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-400); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-track-segments-progress: var(--cn-colors-cyan-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-slider-handle-background: var(--cn-colors-pure-white); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-cyan-500); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-500); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-orange-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-cyan-500); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-500); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-unselected-thumb: var(--cn-colors-pure-white); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-colors-chrome-300); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-switch-selected-thumb: var(--cn-colors-pure-white); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-blue-600); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-700); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-700); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-700); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-cyan-700); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ + --cn-component-tag-green-background: var(--cn-colors-cyan-100); /* Background color for green tags. Creates a distinct surface with green theme styling. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-700); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-700); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-700); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-700); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-700); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-cyan-700); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --cn-component-tag-purple-background: var(--cn-colors-cyan-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-red-text: var(--cn-colors-red-700); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-cyan-700); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --cn-component-tag-violet-background: var(--cn-colors-cyan-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-yellow-text: var(--cn-colors-orange-700); /* Text color for yellow tags. Signals caution states with readable amber text. */ + --cn-component-tag-yellow-background: var(--cn-colors-orange-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-red-600); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-chrome-950) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-chrome-950) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-chrome-950) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-chrome-950) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-chrome-950) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-orange-200); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-400); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-cyan-400); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-300); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-150); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-pure-white); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-400); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-300) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-400); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-chrome-300); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-500); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-pure-white); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-700); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-pure-white); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-pure-white); + --cn-brand-color-50: var(--cn-colors-chrome-150); + --cn-brand-color-100: var(--cn-colors-chrome-150); + --cn-brand-color-200: var(--cn-colors-chrome-150); + --cn-brand-color-300: var(--cn-colors-chrome-150); + --cn-brand-color-400: var(--cn-colors-chrome-150); + --cn-brand-color-500: var(--cn-colors-chrome-900); + --cn-brand-color-600: var(--cn-colors-chrome-150); + --cn-brand-color-700: var(--cn-colors-chrome-900); + --cn-brand-color-800: var(--cn-colors-chrome-900); + --cn-brand-color-900: var(--cn-colors-chrome-900); + --cn-brand-color-950: var(--cn-colors-chrome-900); + --cn-brand-on-color-50: var(--cn-colors-pure-black); + --cn-brand-on-color-100: var(--cn-colors-pure-black); + --cn-brand-on-color-200: var(--cn-colors-pure-black); + --cn-brand-on-color-300: var(--cn-colors-pure-black); + --cn-brand-on-color-400: var(--cn-colors-pure-black); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-black); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-700); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-2); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/light-high-contrast-tritanopia-harness.css b/packages/core-design-system/src/styles/light-high-contrast-tritanopia-harness.css new file mode 100644 index 0000000000..116e1b5401 --- /dev/null +++ b/packages/core-design-system/src/styles/light-high-contrast-tritanopia-harness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:26 GMT + * Copyright (c) Harness. + */ + +.light-high-contrast-tritanopia-harness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1.4px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-pure-white); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-chrome-50); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-100); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-900); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-800); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-cyan-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-orange-600); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-700); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-300); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-200) l c h / 0.7); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-cyan-500); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-500); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-orange-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-chrome-300) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-150); + --cn-component-alert-danger-title: var(--cn-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-500) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-600) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-cyan-700); /* Text color for success badges. Communicates positive status through readable green text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-cyan-400) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-cyan-300) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-red-700); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-orange-700); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-orange-400) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-orange-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-700); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-400) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-cyan-700); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-cyan-400) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-cyan-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-cyan-700); /* Text color for success buttons. Communicates positive actions through readable green text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-cyan-300) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-cyan-400) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-cyan-300) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-cyan-300) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-red-700); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-500) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-cyan-400) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-cyan-400) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-cyan-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-400) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-400) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-400) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-400) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-cyan-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-500); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-cyan-500); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-sidebar-border: var(--cn-colors-chrome-800); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-colors-chrome-800); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: lch(from var(--cn-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: lch(from var(--cn-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-colors-chrome-400); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-400); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-200); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-progress: var(--cn-colors-blue-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-400); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-track-segments-progress: var(--cn-colors-cyan-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-slider-handle-background: var(--cn-colors-pure-white); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-cyan-500); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-500); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-orange-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-cyan-500); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-500); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-unselected-thumb: var(--cn-colors-pure-white); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-switch-unselected-background: var(--cn-colors-chrome-300); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-switch-selected-thumb: var(--cn-colors-pure-white); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-blue-600); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-700); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-700); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-700); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-cyan-700); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ + --cn-component-tag-green-background: var(--cn-colors-cyan-100); /* Background color for green tags. Creates a distinct surface with green theme styling. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-700); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-700); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-700); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-700); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-700); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-cyan-700); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --cn-component-tag-purple-background: var(--cn-colors-cyan-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-red-text: var(--cn-colors-red-700); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-cyan-700); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --cn-component-tag-violet-background: var(--cn-colors-cyan-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-yellow-text: var(--cn-colors-orange-700); /* Text color for yellow tags. Signals caution states with readable amber text. */ + --cn-component-tag-yellow-background: var(--cn-colors-orange-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-title: var(--cn-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-background: var(--cn-colors-red-600); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-chrome-950) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-chrome-950) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-chrome-950) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-chrome-950) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-chrome-950) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-chrome-950) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-orange-200); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-400); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-cyan-400); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-300); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-150); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-pure-white); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-400); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-300) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-400); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-chrome-300); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-500); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-pure-white); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-200); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-700); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-pure-white); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-pure-white); + --cn-brand-color-50: var(--cn-colors-cyan-50); + --cn-brand-color-100: var(--cn-colors-cyan-100); + --cn-brand-color-200: var(--cn-colors-cyan-200); + --cn-brand-color-300: var(--cn-colors-cyan-300); + --cn-brand-color-400: var(--cn-colors-cyan-400); + --cn-brand-color-500: var(--cn-colors-cyan-500); + --cn-brand-color-600: var(--cn-colors-cyan-600); + --cn-brand-color-700: var(--cn-colors-cyan-700); + --cn-brand-color-800: var(--cn-colors-cyan-800); + --cn-brand-color-900: var(--cn-colors-cyan-900); + --cn-brand-color-950: var(--cn-colors-cyan-950); + --cn-brand-on-color-50: var(--cn-colors-chrome-950); + --cn-brand-on-color-100: var(--cn-colors-chrome-950); + --cn-brand-on-color-200: var(--cn-colors-chrome-950); + --cn-brand-on-color-300: var(--cn-colors-chrome-950); + --cn-brand-on-color-400: var(--cn-colors-chrome-950); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-white); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-700); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-2); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-separator-background: var(--cn-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/light-protanopia-gitness.css b/packages/core-design-system/src/styles/light-protanopia-gitness.css new file mode 100644 index 0000000000..2cb86f2167 --- /dev/null +++ b/packages/core-design-system/src/styles/light-protanopia-gitness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:17 GMT + * Copyright (c) Harness. + */ + +.light-protanopia-gitness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-chrome-50); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-850); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-700); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. Using blue instead of green for protanopia visibility. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-blue-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-800); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-100); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. Using blue instead of green for protanopia visibility. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-blue-400); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-400); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-chrome-400) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-150); + --cn-component-alert-danger-title: var(--cn-colors-red-800); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-600) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-blue-600); /* Text color for success badges. Communicates positive status through readable blue text. Adjusted for protanopia visibility. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-blue-400) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. Adjusted for protanopia visibility. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-blue-300) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. Adjusted for protanopia visibility. */ + --cn-component-badge-danger-text: var(--cn-colors-red-600); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-600); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-400) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-600); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-400) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-purple-600); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-purple-400) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-purple-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-200); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-blue-600); /* Text color for success buttons. Communicates positive actions through readable blue text. Adjusted for protanopia visibility. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-blue-300) l c h / 0.12); /* Background color for success buttons. Creates subtle but recognizable positive action styling. Adjusted for protanopia visibility. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-blue-400) l c h / 0.25); /* Border color for success buttons. Provides definition for positive action buttons. Adjusted for protanopia visibility. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-blue-300) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. Adjusted for protanopia visibility. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-blue-300) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. Adjusted for protanopia visibility. */ + --cn-component-btn-danger-text: var(--cn-colors-red-600); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.12); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Blue background highlighting newly added code lines while maintaining readability. Using blue instead of green for protanopia visibility. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. Using blue instead of green for protanopia visibility. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-blue-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. Using blue instead of green for protanopia visibility. */ + --cn-component-diff-add-widget: var(--cn-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-purple-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-400); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-blue-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. Using blue instead of green for protanopia visibility. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-sidebar-border: var(--cn-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: lch(from var(--cn-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: lch(from var(--cn-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-separator-background: var(--cn-border-width-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-900); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-blue-300); /* Color for success status indicators. Communicates completed or positive states. Using blue instead of green for protanopia visibility. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-unselected-background: var(--cn-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-50); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-chrome-900); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-600); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-600); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-blue-600); /* Text color for green tags. Using blue instead of green for protanopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-blue-100); /* Background color for green tags. Using blue instead of green for protanopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for green tags. Using blue instead of green for protanopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-600); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-blue-600); /* Text color for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --cn-component-tag-lime-background: var(--cn-colors-blue-100); /* Background color for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --cn-component-tag-mint-text: var(--cn-colors-blue-600); /* Text color for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --cn-component-tag-mint-background: var(--cn-colors-blue-100); /* Background color for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-600); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-600); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-purple-600); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --cn-component-tag-purple-background: var(--cn-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-red-text: var(--cn-colors-red-600); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-violet-600); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --cn-component-tag-violet-background: var(--cn-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-background: var(--cn-colors-red-200); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-chrome-900) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-200); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-300); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-purple-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-pure-white); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-300); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-200) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-300); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-400); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-pure-white); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-500); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-pure-white); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-pure-white); + --cn-brand-color-50: var(--cn-colors-chrome-150); + --cn-brand-color-100: var(--cn-colors-chrome-150); + --cn-brand-color-200: var(--cn-colors-chrome-150); + --cn-brand-color-300: var(--cn-colors-chrome-150); + --cn-brand-color-400: var(--cn-colors-chrome-150); + --cn-brand-color-500: var(--cn-colors-chrome-900); + --cn-brand-color-600: var(--cn-colors-chrome-150); + --cn-brand-color-700: var(--cn-colors-chrome-900); + --cn-brand-color-800: var(--cn-colors-chrome-900); + --cn-brand-color-900: var(--cn-colors-chrome-900); + --cn-brand-color-950: var(--cn-colors-chrome-900); + --cn-brand-on-color-50: var(--cn-colors-pure-black); + --cn-brand-on-color-100: var(--cn-colors-pure-black); + --cn-brand-on-color-200: var(--cn-colors-pure-black); + --cn-brand-on-color-300: var(--cn-colors-pure-black); + --cn-brand-on-color-400: var(--cn-colors-pure-black); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-black); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-500); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-2); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags. Using blue instead of green for protanopia visibility. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-title: var(--cn-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/light-protanopia-harness.css b/packages/core-design-system/src/styles/light-protanopia-harness.css new file mode 100644 index 0000000000..65cbc01940 --- /dev/null +++ b/packages/core-design-system/src/styles/light-protanopia-harness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:16 GMT + * Copyright (c) Harness. + */ + +.light-protanopia-harness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-chrome-50); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-850); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-700); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. Using blue instead of green for protanopia visibility. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-blue-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-yellow-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-800); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-100); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. Using blue instead of green for protanopia visibility. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-blue-400); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-400); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-yellow-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-chrome-400) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-150); + --cn-component-alert-danger-title: var(--cn-colors-red-800); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-600) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-blue-600); /* Text color for success badges. Communicates positive status through readable blue text. Adjusted for protanopia visibility. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-blue-400) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. Adjusted for protanopia visibility. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-blue-300) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. Adjusted for protanopia visibility. */ + --cn-component-badge-danger-text: var(--cn-colors-red-600); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-yellow-600); /* Text color for warning badges. Signals caution states with readable amber text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-yellow-400) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-600); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-400) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-purple-600); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-purple-400) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-purple-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-200); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-blue-600); /* Text color for success buttons. Communicates positive actions through readable blue text. Adjusted for protanopia visibility. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-blue-300) l c h / 0.12); /* Background color for success buttons. Creates subtle but recognizable positive action styling. Adjusted for protanopia visibility. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-blue-400) l c h / 0.25); /* Border color for success buttons. Provides definition for positive action buttons. Adjusted for protanopia visibility. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-blue-300) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. Adjusted for protanopia visibility. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-blue-300) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. Adjusted for protanopia visibility. */ + --cn-component-btn-danger-text: var(--cn-colors-red-600); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.12); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Blue background highlighting newly added code lines while maintaining readability. Using blue instead of green for protanopia visibility. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. Using blue instead of green for protanopia visibility. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-blue-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. Using blue instead of green for protanopia visibility. */ + --cn-component-diff-add-widget: var(--cn-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-purple-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-400); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-blue-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. Using blue instead of green for protanopia visibility. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-sidebar-border: var(--cn-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: lch(from var(--cn-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: lch(from var(--cn-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-separator-background: var(--cn-border-width-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-900); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-blue-300); /* Color for success status indicators. Communicates completed or positive states. Using blue instead of green for protanopia visibility. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-unselected-background: var(--cn-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-50); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-chrome-900); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-600); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-600); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-blue-600); /* Text color for green tags. Using blue instead of green for protanopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-blue-100); /* Background color for green tags. Using blue instead of green for protanopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for green tags. Using blue instead of green for protanopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-600); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-blue-600); /* Text color for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --cn-component-tag-lime-background: var(--cn-colors-blue-100); /* Background color for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --cn-component-tag-mint-text: var(--cn-colors-blue-600); /* Text color for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --cn-component-tag-mint-background: var(--cn-colors-blue-100); /* Background color for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-600); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-600); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-purple-600); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ + --cn-component-tag-purple-background: var(--cn-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-red-text: var(--cn-colors-red-600); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-violet-600); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ + --cn-component-tag-violet-background: var(--cn-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-yellow-text: var(--cn-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ + --cn-component-tag-yellow-background: var(--cn-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-background: var(--cn-colors-red-200); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-shadow-color-0: lch(from var(--cn-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-chrome-900) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-yellow-200); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-300); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-purple-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-pure-white); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-300); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-200) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-300); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-400); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-pure-white); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-500); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-pure-white); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-pure-white); + --cn-brand-color-50: var(--cn-colors-cyan-50); + --cn-brand-color-100: var(--cn-colors-cyan-100); + --cn-brand-color-200: var(--cn-colors-cyan-200); + --cn-brand-color-300: var(--cn-colors-cyan-300); + --cn-brand-color-400: var(--cn-colors-cyan-400); + --cn-brand-color-500: var(--cn-colors-cyan-500); + --cn-brand-color-600: var(--cn-colors-cyan-600); + --cn-brand-color-700: var(--cn-colors-cyan-700); + --cn-brand-color-800: var(--cn-colors-cyan-800); + --cn-brand-color-900: var(--cn-colors-cyan-900); + --cn-brand-color-950: var(--cn-colors-cyan-950); + --cn-brand-on-color-50: var(--cn-colors-chrome-950); + --cn-brand-on-color-100: var(--cn-colors-chrome-950); + --cn-brand-on-color-200: var(--cn-colors-chrome-950); + --cn-brand-on-color-300: var(--cn-colors-chrome-950); + --cn-brand-on-color-400: var(--cn-colors-chrome-950); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-white); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-500); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-2); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags. Using blue instead of green for protanopia visibility. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. Using blue instead of lime/green for protanopia visibility. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. Using blue instead of mint/green for protanopia visibility. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-title: var(--cn-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/light-tritanopia-gitness.css b/packages/core-design-system/src/styles/light-tritanopia-gitness.css new file mode 100644 index 0000000000..30f988690d --- /dev/null +++ b/packages/core-design-system/src/styles/light-tritanopia-gitness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:24 GMT + * Copyright (c) Harness. + */ + +.light-tritanopia-gitness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-chrome-50); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-850); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-700); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-cyan-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-orange-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-800); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-100); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-cyan-400); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-400); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-orange-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-chrome-400) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-150); + --cn-component-alert-danger-title: var(--cn-colors-red-800); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-600) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-cyan-600); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-cyan-400) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-cyan-200) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-red-600); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-orange-600); /* Text color for warning badges. Signals caution states with readable orange text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-orange-400) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-orange-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-600); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-400) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-cyan-600); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-cyan-400) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-cyan-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-200); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-cyan-600); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-cyan-200) l c h / 0.12); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-cyan-400) l c h / 0.25); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-cyan-200) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-cyan-200) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-red-600); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.12); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-cyan-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-400); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-cyan-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-sidebar-border: var(--cn-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: lch(from var(--cn-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: lch(from var(--cn-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-separator-background: var(--cn-border-width-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-900); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-orange-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-unselected-background: var(--cn-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-50); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-chrome-900); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-600); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-600); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-cyan-600); /* Text color for green tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-cyan-100); /* Background color for green tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for green tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-600); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-600); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-600); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-cyan-600); /* Text color for purple tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-purple-background: var(--cn-colors-cyan-100); /* Background color for purple tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for purple tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-red-text: var(--cn-colors-red-600); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-cyan-600); /* Text color for violet tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-violet-background: var(--cn-colors-cyan-100); /* Background color for violet tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for violet tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-yellow-text: var(--cn-colors-orange-600); /* Text color for yellow tags, replaced with orange for tritanopia visibility. */ + --cn-component-tag-yellow-background: var(--cn-colors-orange-100); /* Background color for yellow tags, replaced with orange for tritanopia visibility. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for yellow tags, replaced with orange for tritanopia visibility. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-background: var(--cn-colors-red-200); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-orange-200); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-300); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-cyan-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-pure-white); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-300); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-200) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-300); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-400); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-pure-white); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-500); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-pure-white); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-pure-white); + --cn-shadow-color-0: lch(from var(--cn-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-chrome-900) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-brand-color-50: var(--cn-colors-chrome-150); + --cn-brand-color-100: var(--cn-colors-chrome-150); + --cn-brand-color-200: var(--cn-colors-chrome-150); + --cn-brand-color-300: var(--cn-colors-chrome-150); + --cn-brand-color-400: var(--cn-colors-chrome-150); + --cn-brand-color-500: var(--cn-colors-chrome-900); + --cn-brand-color-600: var(--cn-colors-chrome-150); + --cn-brand-color-700: var(--cn-colors-chrome-900); + --cn-brand-color-800: var(--cn-colors-chrome-900); + --cn-brand-color-900: var(--cn-colors-chrome-900); + --cn-brand-color-950: var(--cn-colors-chrome-900); + --cn-brand-on-color-50: var(--cn-colors-pure-black); + --cn-brand-on-color-100: var(--cn-colors-pure-black); + --cn-brand-on-color-200: var(--cn-colors-pure-black); + --cn-brand-on-color-300: var(--cn-colors-pure-black); + --cn-brand-on-color-400: var(--cn-colors-pure-black); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-black); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-500); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-2); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags, replaced with cyan. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags, replaced with orange. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-title: var(--cn-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/light-tritanopia-harness.css b/packages/core-design-system/src/styles/light-tritanopia-harness.css new file mode 100644 index 0000000000..e7162d9aba --- /dev/null +++ b/packages/core-design-system/src/styles/light-tritanopia-harness.css @@ -0,0 +1,491 @@ +/** + * Harness Design System + * Generated style tokens - DO NOT EDIT DIRECTLY + * Generated on Tue, 18 Mar 2025 06:44:23 GMT + * Copyright (c) Harness. + */ + +.light-tritanopia-harness { + --cn-icon-stroke-width-xxs: 1.1px; + --cn-icon-stroke-width-xs: 1px; + --cn-icon-stroke-width-sm: 1.1px; + --cn-icon-stroke-width-default: 1.1px; + --cn-icon-stroke-width-md: 1.4px; + --cn-icon-stroke-width-lg: 2px; + /** + * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. + * + * Common uses: Application background, page base layer, lowest-level containers. + */ + --cn-background-1: var(--cn-colors-chrome-50); + /** + * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. + * + * Common uses: Cards, containers, form fields, dropdown menus. + */ + --cn-background-2: var(--cn-colors-pure-white); + /** + * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. + * + * Common uses: Popovers, tooltips, highlighted containers. + */ + --cn-background-3: var(--cn-colors-chrome-50); + /** + * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. + * + * Common uses: Headings, labels, emphasized text, primary buttons. + */ + --cn-text-1: var(--cn-colors-chrome-950); + /** + * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. + * + * Common uses: Body text, primary content, default icons, form inputs. + */ + --cn-text-2: var(--cn-colors-chrome-850); + /** + * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. + * + * Common uses: Supporting text, metadata, secondary information, placeholders. + */ + --cn-text-3: var(--cn-colors-chrome-700); + /** + * Primary color for text and icons in success content. Communicates positive outcomes and completion states. + * + * Common uses: Success message text, completion text, positive indicators. + */ + --cn-text-success: var(--cn-colors-cyan-600); + /** + * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. + * + * Common uses: Error message text, validation text, destructive action labels. + */ + --cn-text-danger: var(--cn-colors-red-600); + /** + * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. + * + * Common uses: Warning message text, alert text, important notifications. + */ + --cn-text-warning: var(--cn-colors-orange-500); + /** + * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. + * + * Common uses: Focus states, hover states, active elements, primary containers. + */ + --cn-border-1: var(--cn-colors-chrome-800); + /** + * Standard border color for general use. Provides balanced visual definition for common UI elements. + * + * Common uses: Containers, cards, dividers, separators, default form inputs. + */ + --cn-border-2: var(--cn-colors-chrome-100); + /** + * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. + * + * Common uses: Subtle dividers, grouped content, secondary containers, table rows. + */ + --cn-border-3: lch(from var(--cn-colors-chrome-100) l c h / 0.8); + /** + * Border color for success containers. Reinforces positive status through visual framing. + * + * Common uses: Success alert borders, confirmation boundaries, completed state indicators. + */ + --cn-border-success: var(--cn-colors-cyan-400); + /** + * Border color for error containers. Emphasizes critical information through visual framing. + * + * Common uses: Error alert borders, validation boundaries, destructive action containers. + */ + --cn-border-danger: var(--cn-colors-red-400); + /** + * Border color for warning containers. Frames cautionary information with distinct boundary. + * + * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. + */ + --cn-border-warning: var(--cn-colors-orange-500); + /** + * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. + * + * Common uses: Button hover states, link hover states, soft interactions, menu items. + */ + --cn-state-hover: lch(from var(--cn-colors-chrome-400) l c h / 0.15); + /** + * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. + * + * Common uses: Selected list items, active tabs, chosen options, current navigation item. + */ + --cn-state-selected: lch(from var(--cn-colors-chrome-400) l c h / 0.2); + /** + * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. + * + * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. + */ + --cn-state-disabled-text: var(--cn-colors-chrome-500); + /** + * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. + * + * Common uses: Disabled buttons, inactive form controls, unavailable options. + */ + --cn-state-disabled-background: var(--cn-colors-chrome-150); + --cn-component-alert-danger-title: var(--cn-colors-red-800); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ + --cn-component-alert-danger-description: var(--cn-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ + --cn-component-alert-danger-background: lch(from var(--cn-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ + --cn-component-alert-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ + --cn-component-badge-default-background: var(--cn-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ + --cn-component-badge-neutral-background: lch(from var(--cn-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ + --cn-component-badge-neutral-border: lch(from var(--cn-colors-chrome-600) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ + --cn-component-badge-success-text: var(--cn-colors-cyan-600); /* Text color for success badges. Communicates positive status through readable cyan text. */ + --cn-component-badge-success-border: lch(from var(--cn-colors-cyan-400) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ + --cn-component-badge-success-background: lch(from var(--cn-colors-cyan-200) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ + --cn-component-badge-danger-text: var(--cn-colors-red-600); /* Text color for danger badges. Communicates error or warning status with high visibility. */ + --cn-component-badge-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ + --cn-component-badge-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ + --cn-component-badge-warning-text: var(--cn-colors-orange-600); /* Text color for warning badges. Signals caution states with readable orange text. */ + --cn-component-badge-warning-border: lch(from var(--cn-colors-orange-400) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ + --cn-component-badge-warning-background: lch(from var(--cn-colors-orange-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ + --cn-component-badge-running-text: var(--cn-colors-orange-600); /* Text color for running state badges. Indicates active or in-progress operations. */ + --cn-component-badge-running-border: lch(from var(--cn-colors-orange-400) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ + --cn-component-badge-running-background: lch(from var(--cn-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ + --cn-component-badge-merged-text: var(--cn-colors-cyan-600); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ + --cn-component-badge-merged-border: lch(from var(--cn-colors-cyan-400) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ + --cn-component-badge-merged-background: lch(from var(--cn-colors-cyan-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ + --cn-component-btn-secondary-background: var(--cn-colors-chrome-200); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ + --cn-component-btn-success-text: var(--cn-colors-cyan-600); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ + --cn-component-btn-success-background: lch(from var(--cn-colors-cyan-200) l c h / 0.12); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ + --cn-component-btn-success-border: lch(from var(--cn-colors-cyan-400) l c h / 0.25); /* Border color for success buttons. Provides definition for positive action buttons. */ + --cn-component-btn-success-state-hover: lch(from var(--cn-colors-cyan-200) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-success-state-active: lch(from var(--cn-colors-cyan-200) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-btn-danger-text: var(--cn-colors-red-600); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ + --cn-component-btn-danger-background: lch(from var(--cn-colors-red-300) l c h / 0.12); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ + --cn-component-btn-danger-border: lch(from var(--cn-colors-red-400) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ + --cn-component-btn-danger-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ + --cn-component-btn-danger-state-active: lch(from var(--cn-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ + --cn-component-dialog-backdrop: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ + --cn-component-dropdown-item-delete-state-hover: lch(from var(--cn-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ + --cn-component-diff-add-content: lch(from var(--cn-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ + --cn-component-diff-add-line-number: lch(from var(--cn-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ + --cn-component-diff-add-content-highlight: lch(from var(--cn-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ + --cn-component-diff-add-widget: var(--cn-colors-pure-white); /* Background for interactive UI elements related to added content. */ + --cn-component-diff-del-content: lch(from var(--cn-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ + --cn-component-diff-del-line-number: lch(from var(--cn-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ + --cn-component-diff-del-content-highlight: lch(from var(--cn-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ + --cn-component-diff-hunk-content: lch(from var(--cn-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ + --cn-component-diff-hunk-line-number: lch(from var(--cn-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ + --cn-component-link-visited: var(--cn-colors-cyan-600); /* Visited state color for text links. Differentiates links the user has already activated. */ + --cn-component-pipeline-card-error-border: var(--cn-colors-red-400); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ + --cn-component-pipeline-card-completed-border: var(--cn-colors-cyan-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ + --cn-component-pipeline-background-dotes: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ + --cn-component-sidebar-background: var(--cn-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ + --cn-component-sidebar-border: var(--cn-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ + --cn-component-sidebar-separator: var(--cn-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ + --cn-component-sidebar-hover: lch(from var(--cn-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ + --cn-component-sidebar-selected: lch(from var(--cn-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ + --cn-component-sidebar-item-unselected-text: var(--cn-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ + --cn-component-sidebar-item-unselected-icon: var(--cn-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ + --cn-component-sidebar-item-selected-text: var(--cn-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ + --cn-component-sidebar-item-selected-icon: var(--cn-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ + --cn-component-sidebar-logo-text: var(--cn-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ + --cn-component-sidebar-search-background: var(--cn-colors-chrome-950); /* Search input specific background on sidebar navigation. */ + --cn-component-sidebar-search-border: var(--cn-colors-chrome-800); /* Search input specific border on sidebar navigation. */ + --cn-component-sidebar-search-placeholder: var(--cn-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ + --cn-component-sidebar-search-btn-background: var(--cn-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ + --cn-component-sidebar-search-btn-border: var(--cn-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ + --cn-component-sidebar-search-btn-text: var(--cn-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ + --cn-component-sidebar-footer-username: var(--cn-colors-pure-white); /* Username in the footer sidebar navigation menu. */ + --cn-component-sidebar-footer-data: var(--cn-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ + --cn-component-scrollbar-thumb: var(--cn-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ + --cn-component-selection-selected-item: var(--cn-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ + --cn-component-selection-selected-background: var(--cn-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ + --cn-component-selection-selected-border: var(--cn-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ + --cn-component-separator-background: var(--cn-border-width-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ + --cn-component-slider-track-base: var(--cn-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ + --cn-component-slider-track-segments-base: var(--cn-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ + --cn-component-slider-handle-background: var(--cn-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ + --cn-component-slider-handle-border: var(--cn-colors-chrome-900); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ + --cn-component-status-indicator-completed: var(--cn-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ + --cn-component-status-indicator-cancelled: var(--cn-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ + --cn-component-status-indicator-warning: var(--cn-colors-orange-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ + --cn-component-status-indicator-running: var(--cn-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ + --cn-component-status-indicator-merged: var(--cn-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ + --cn-component-status-indicator-action-required: var(--cn-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ + --cn-component-status-indicator-waiting: var(--cn-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ + --cn-component-switch-unselected-background: var(--cn-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ + --cn-component-switch-selected-thumb: var(--cn-colors-chrome-50); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ + --cn-component-switch-selected-background: var(--cn-colors-chrome-900); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ + --cn-component-table-row-alternate-background: lch(from var(--cn-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ + --cn-component-tag-blue-text: var(--cn-colors-blue-600); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ + --cn-component-tag-blue-background: var(--cn-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ + --cn-component-tag-blue-background-subtle: var(--cn-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-brown-text: var(--cn-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ + --cn-component-tag-brown-background: var(--cn-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ + --cn-component-tag-brown-background-subtle: var(--cn-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-cyan-text: var(--cn-colors-cyan-600); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ + --cn-component-tag-cyan-background: var(--cn-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ + --cn-component-tag-cyan-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-green-text: var(--cn-colors-cyan-600); /* Text color for green tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-green-background: var(--cn-colors-cyan-100); /* Background color for green tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-green-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for green tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-indigo-text: var(--cn-colors-indigo-600); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ + --cn-component-tag-indigo-background: var(--cn-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ + --cn-component-tag-indigo-background-subtle: var(--cn-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-lime-text: var(--cn-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ + --cn-component-tag-lime-background: var(--cn-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ + --cn-component-tag-lime-background-subtle: var(--cn-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-mint-text: var(--cn-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ + --cn-component-tag-mint-background: var(--cn-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ + --cn-component-tag-mint-background-subtle: var(--cn-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-orange-text: var(--cn-colors-orange-600); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ + --cn-component-tag-orange-background: var(--cn-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ + --cn-component-tag-orange-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-pink-text: var(--cn-colors-pink-600); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ + --cn-component-tag-pink-background: var(--cn-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ + --cn-component-tag-pink-background-subtle: var(--cn-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-purple-text: var(--cn-colors-cyan-600); /* Text color for purple tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-purple-background: var(--cn-colors-cyan-100); /* Background color for purple tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-purple-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for purple tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-red-text: var(--cn-colors-red-600); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ + --cn-component-tag-red-background: var(--cn-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ + --cn-component-tag-red-background-subtle: var(--cn-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ + --cn-component-tag-violet-text: var(--cn-colors-cyan-600); /* Text color for violet tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-violet-background: var(--cn-colors-cyan-100); /* Background color for violet tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-violet-background-subtle: var(--cn-colors-cyan-50); /* Subtle background variation for violet tags, replaced with cyan for tritanopia visibility. */ + --cn-component-tag-yellow-text: var(--cn-colors-orange-600); /* Text color for yellow tags, replaced with orange for tritanopia visibility. */ + --cn-component-tag-yellow-background: var(--cn-colors-orange-100); /* Background color for yellow tags, replaced with orange for tritanopia visibility. */ + --cn-component-tag-yellow-background-subtle: var(--cn-colors-orange-50); /* Subtle background variation for yellow tags, replaced with orange for tritanopia visibility. */ + --cn-component-tag-gray-text: var(--cn-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ + --cn-component-tag-gray-background: var(--cn-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ + --cn-component-tag-gray-background-subtle: var(--cn-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ + --cn-component-toast-danger-background: var(--cn-colors-red-200); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ + --cn-gradient-ai-gradient-stop-1: var(--cn-colors-orange-200); + --cn-gradient-ai-gradient-stop-2: var(--cn-colors-pink-300); + --cn-gradient-ai-gradient-stop-3: var(--cn-colors-cyan-300); + --cn-gradient-ai-gradient-stop-4: var(--cn-colors-cyan-200); + --cn-gradient-skeleton-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-skeleton-gradient-stop-2: var(--cn-colors-pure-white); + --cn-gradient-skeleton-gradient-stop-3: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-running-gradient-stop-1: var(--cn-colors-orange-300); + --cn-gradient-pipeline-running-gradient-stop-2: lch(from var(--cn-colors-chrome-200) l c h / 0.4); + --cn-gradient-pipeline-running-gradient-stop-3: var(--cn-colors-orange-300); + --cn-gradient-pipeline-arrows-gradient-stop-1: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-arrows-gradient-stop-2: var(--cn-colors-blue-400); + --cn-gradient-pipeline-card-background-gradient-from: var(--cn-colors-pure-white); + --cn-gradient-pipeline-card-background-gradient-to: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-from: var(--cn-colors-chrome-50); + --cn-gradient-pipeline-card-border-gradient-to: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-number-gradient-from: var(--cn-colors-chrome-500); + --cn-gradient-pipeline-widget-number-gradient-to: var(--cn-colors-chrome-600); + --cn-gradient-pipeline-widget-blob-big-gradient-from: var(--cn-colors-chrome-100); + --cn-gradient-pipeline-widget-blob-big-gradient-to: var(--cn-colors-pure-white); + --cn-gradient-pipeline-widget-blob-small-gradient-from: var(--cn-colors-chrome-150); + --cn-gradient-pipeline-widget-blob-small-gradient-to: var(--cn-colors-pure-white); + --cn-shadow-color-0: lch(from var(--cn-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ + --cn-shadow-color-1: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ + --cn-shadow-color-2: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ + --cn-shadow-color-3: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ + --cn-shadow-color-4: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ + --cn-shadow-color-5: lch(from var(--cn-colors-chrome-300) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ + --cn-shadow-color-6: lch(from var(--cn-colors-chrome-300) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ + --cn-shadow-color-inner: lch(from var(--cn-colors-chrome-900) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ + --cn-brand-color-50: var(--cn-colors-cyan-50); + --cn-brand-color-100: var(--cn-colors-cyan-100); + --cn-brand-color-200: var(--cn-colors-cyan-200); + --cn-brand-color-300: var(--cn-colors-cyan-300); + --cn-brand-color-400: var(--cn-colors-cyan-400); + --cn-brand-color-500: var(--cn-colors-cyan-500); + --cn-brand-color-600: var(--cn-colors-cyan-600); + --cn-brand-color-700: var(--cn-colors-cyan-700); + --cn-brand-color-800: var(--cn-colors-cyan-800); + --cn-brand-color-900: var(--cn-colors-cyan-900); + --cn-brand-color-950: var(--cn-colors-cyan-950); + --cn-brand-on-color-50: var(--cn-colors-chrome-950); + --cn-brand-on-color-100: var(--cn-colors-chrome-950); + --cn-brand-on-color-200: var(--cn-colors-chrome-950); + --cn-brand-on-color-300: var(--cn-colors-chrome-950); + --cn-brand-on-color-400: var(--cn-colors-chrome-950); + --cn-brand-on-color-500: var(--cn-colors-pure-white); + --cn-brand-on-color-600: var(--cn-colors-pure-white); + --cn-brand-on-color-700: var(--cn-colors-pure-white); + --cn-brand-on-color-800: var(--cn-colors-pure-white); + --cn-brand-on-color-900: var(--cn-colors-pure-white); + --cn-brand-on-color-950: var(--cn-colors-pure-white); + /** + * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. + * + * Common uses: Links, buttons, interactive icons, highlighted elements. + */ + --cn-text-accent: var(--cn-brand-color-500); + /** + * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. + * + * Common uses: Focus rings, keyboard navigation highlights, selection indicators. + */ + --cn-border-focus: var(--cn-brand-color-500); + /** + * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. + * + * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. + */ + --cn-state-disabled-border: var(--cn-border-3); + --cn-component-accordion-title: var(--cn-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ + --cn-component-accordion-description: var(--cn-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ + --cn-component-accordion-chevron: var(--cn-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ + --cn-component-accordion-border: var(--cn-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ + --cn-component-alert-default-title: var(--cn-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ + --cn-component-alert-default-description: var(--cn-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ + --cn-component-alert-default-background: var(--cn-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ + --cn-component-alert-default-border: var(--cn-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ + --cn-component-avatar-text: var(--cn-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ + --cn-component-avatar-background: var(--cn-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ + --cn-component-avatar-border: var(--cn-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ + --cn-component-badge-default-text: var(--cn-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ + --cn-component-badge-default-border: var(--cn-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ + --cn-component-badge-neutral-text: var(--cn-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ + --cn-component-badge-ai-text: var(--cn-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ + --cn-component-badge-ai-background: var(--cn-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ + --cn-component-badge-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-breadcrumb-item-inactive: var(--cn-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ + --cn-component-breadcrumb-item-current: var(--cn-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ + --cn-component-breadcrumb-separator: var(--cn-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ + --cn-component-btn-primary-text: var(--cn-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ + --cn-component-btn-primary-background: var(--cn-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ + --cn-component-btn-secondary-text: var(--cn-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ + --cn-component-btn-secondary-border: var(--cn-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-btn-outline-background: var(--cn-background-2); /* Background color for outline buttons. */ + --cn-component-btn-outline-unselected-text: var(--cn-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ + --cn-component-btn-outline-unselected-icon: var(--cn-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-outline-unselected-border: var(--cn-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ + --cn-component-btn-outline-selected-text: var(--cn-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ + --cn-component-btn-outline-selected-icon: var(--cn-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ + --cn-component-btn-outline-selected-border: var(--cn-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ + --cn-component-btn-ghost-unselected-text: var(--cn-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ + --cn-component-btn-ghost-unselected-icon: var(--cn-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ + --cn-component-btn-ghost-selected-text: var(--cn-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ + --cn-component-btn-ghost-selected-icon: var(--cn-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ + --cn-component-btn-ai-text: var(--cn-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ + --cn-component-btn-ai-background: var(--cn-background-2); /* Background color for AI-powered buttons. */ + --cn-component-btn-ai-border: linear-gradient(94deg, var(--cn-gradient-ai-gradient-stop-1) 0%, var(--cn-gradient-ai-gradient-stop-2) 35%, var(--cn-gradient-ai-gradient-stop-3) 65%, var(--cn-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ + --cn-component-card-background: var(--cn-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ + --cn-component-card-border: var(--cn-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ + --cn-component-dialog-title: var(--cn-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ + --cn-component-dialog-description: var(--cn-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ + --cn-component-dialog-background: var(--cn-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ + --cn-component-dialog-border: var(--cn-border-2); /* Border color for dialog components. */ + --cn-component-dropdown-background: var(--cn-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ + --cn-component-dropdown-border: var(--cn-border-2); /* Border color for dropdown menus container. */ + --cn-component-dropdown-item-text: var(--cn-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ + --cn-component-dropdown-item-delete-text: var(--cn-text-danger); /* Text color for dropdown menu delete-item. */ + --cn-component-diff-grey: var(--cn-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ + --cn-component-diff-add-widget-color: var(--cn-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ + --cn-component-diff-plain-content: var(--cn-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ + --cn-component-diff-plain-line-number: var(--cn-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ + --cn-component-diff-plain-line-number-color: var(--cn-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ + --cn-component-diff-empty-content: var(--cn-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ + --cn-component-diff-hunk-content-color: var(--cn-text-2); /* Text color for section header content showing file position information. */ + --cn-component-diff-expand-content: var(--cn-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ + --cn-component-input-text: var(--cn-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ + --cn-component-input-placeholder: var(--cn-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ + --cn-component-input-icon: var(--cn-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ + --cn-component-input-background: var(--cn-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ + --cn-component-input-border: var(--cn-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ + --cn-component-label-text: var(--cn-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ + --cn-component-nav-tabs-unselected-text: var(--cn-text-2); /* Unselected tab item text. */ + --cn-component-nav-tabs-selected-text: var(--cn-text-1); /* Selected tab item text. */ + --cn-component-nav-tabs-border: var(--cn-border-3); /* Navigation container border. */ + --cn-component-nav-tabs-background: var(--cn-background-2); /* Navigation tabs container background. */ + --cn-component-pipeline-arrow-border: var(--cn-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ + --cn-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--cn-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--cn-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--cn-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ + --cn-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-background-gradient-from) 10%, var(--cn-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ + --cn-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--cn-gradient-pipeline-card-border-gradient-from) 10%, var(--cn-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ + --cn-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--cn-gradient-pipeline-running-gradient-stop-1) 0%, var(--cn-gradient-pipeline-running-gradient-stop-2) 30%, var(--cn-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ + --cn-component-pipeline-card-canvas-1-background: var(--cn-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ + --cn-component-pipeline-card-canvas-1-border: var(--cn-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ + --cn-component-pipeline-card-canvas-2-background: var(--cn-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ + --cn-component-pipeline-card-canvas-2-border: var(--cn-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ + --cn-component-sidebar-logo-icon: var(--cn-brand-color-300); /* Icon color for Logo in sidebar navigation. */ + --cn-component-selection-unselected-item: var(--cn-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ + --cn-component-selection-unselected-background: var(--cn-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ + --cn-component-selection-unselected-border: var(--cn-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ + --cn-component-skeleton-background: linear-gradient(90deg, var(--cn-gradient-skeleton-gradient-stop-1) 0%, var(--cn-gradient-skeleton-gradient-stop-2) 50%, var(--cn-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ + --cn-component-slider-track-progress: var(--cn-brand-color-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ + --cn-component-slider-track-segments-progress: var(--cn-brand-color-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ + --cn-component-switch-unselected-thumb: var(--cn-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ + --cn-component-table-header-text: var(--cn-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ + --cn-component-table-header-background: var(--cn-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ + --cn-component-table-row-border: var(--cn-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ + --cn-component-table-cell-text: var(--cn-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ + --cn-component-tabs-background: var(--cn-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ + --cn-component-tabs-border: var(--cn-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ + --cn-component-tabs-item-unselected-text: var(--cn-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ + --cn-component-tabs-item-unselected-background: var(--cn-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ + --cn-component-tabs-item-selected-text: var(--cn-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ + --cn-component-tabs-item-selected-background: var(--cn-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ + --cn-component-tabs-item-selected-border: var(--cn-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ + --cn-component-tag-blue-border: var(--cn-component-tag-blue-background); /* Border color for blue tags. */ + --cn-component-tag-brown-border: var(--cn-component-tag-brown-background); /* Border color for brown tags. */ + --cn-component-tag-cyan-border: var(--cn-component-tag-cyan-background); /* Border color for cyan tags. */ + --cn-component-tag-green-border: var(--cn-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ + --cn-component-tag-indigo-border: var(--cn-component-tag-indigo-background); /* Border color for indigo tags. */ + --cn-component-tag-lime-border: var(--cn-component-tag-lime-background); /* Border color for lime tags. */ + --cn-component-tag-mint-border: var(--cn-component-tag-mint-background); /* Border color for mint tags. */ + --cn-component-tag-orange-border: var(--cn-component-tag-orange-background); /* Border color for orange tags. */ + --cn-component-tag-pink-border: var(--cn-component-tag-pink-background); /* Border color for pink tags. */ + --cn-component-tag-purple-border: var(--cn-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ + --cn-component-tag-red-border: var(--cn-component-tag-red-background); /* Border color for red tags. */ + --cn-component-tag-violet-border: var(--cn-component-tag-violet-background); /* Border color for violet tags, replaced with cyan. */ + --cn-component-tag-yellow-border: var(--cn-component-tag-yellow-background); /* Border color for yellow tags, replaced with orange. */ + --cn-component-tag-gray-border: var(--cn-component-tag-gray-background); /* Border color for gray tags. */ + --cn-component-toast-default-title: var(--cn-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ + --cn-component-toast-default-description: var(--cn-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ + --cn-component-toast-default-background: var(--cn-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ + --cn-component-toast-default-border: var(--cn-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ + --cn-component-toast-danger-title: var(--cn-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ + --cn-component-toast-danger-description: var(--cn-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ + --cn-component-toast-danger-border: var(--cn-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ + --cn-component-tooltip-text: var(--cn-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ + --cn-component-tooltip-background: var(--cn-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ + --cn-gradient-pipeline-arrows-gradient-stop-3: var(--cn-border-1); + /** + * No shadow. + * Common uses: Flat designs, disabled states, removing shadows on mobile. + */ + --cn-shadow-0: 0 0 0 0 var(--cn-shadow-color-0); + /** + * Small shadow. + * Common uses: Buttons in their rest state, form inputs, subtle UI elements. + */ + --cn-shadow-1: 0 1px 2px 0 var(--cn-shadow-color-1); + /** + * Default shadow. + * Common uses: Cards, dropdowns, popovers in their default state. + */ + --cn-shadow-2: 0 1px 3px 0 var(--cn-shadow-color-2), 0 1px 2px -1px var(--cn-shadow-color-2); + /** + * Medium shadow. + * Common uses: Elevated cards, active buttons, interactive elements on hover. + */ + --cn-shadow-3: 0 4px 6px -1px var(--cn-shadow-color-3), 0 2px 4px -2px var(--cn-shadow-color-3); + /** + * Large shadow. + * Common uses: Modals, floating panels, navigation dropdowns. + */ + --cn-shadow-4: 0 10px 15px -3px var(--cn-shadow-color-4), 0 4px 6px -4px var(--cn-shadow-color-4); + /** + * Extra large shadow. + * Common uses: Large modals, sidebars, elevated content sections. + */ + --cn-shadow-5: 0 20px 25px -5px var(--cn-shadow-color-5), 0 8px 10px -6px var(--cn-shadow-color-5); + /** + * Extra extra large shadow. + * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. + */ + --cn-shadow-6: 0 25px 50px -12px var(--cn-shadow-color-6); + /** + * Inner shadow. + * Common uses: Pressed buttons, selected states, inset form fields. + */ + --cn-shadow-inner: inset 0 2px 4px 0 var(--cn-shadow-color-inner); + --cn-ring-focus: 0 0 0 2px var(--cn-background-1), 0 0 0 4px var(--cn-border-focus); /* Focus ring effect with background offset and accent border. */ + --cn-component-btn-primary-border: var(--cn-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ + --cn-component-link-default: var(--cn-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ + --cn-component-nav-tabs-selected-border: var(--cn-border-focus); /* Selected tab item border. */ + --cn-component-tabs-item-unselected-border: var(--cn-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ +} diff --git a/packages/core-design-system/src/styles/source-dark-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-desktop-gitness.css deleted file mode 100644 index 18b3cb9315..0000000000 --- a/packages/core-design-system/src/styles/source-dark-desktop-gitness.css +++ /dev/null @@ -1,493 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:06:48 GMT - * Copyright (c) Harness. - */ - -.source-dark-desktop-gitness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-chrome-1000); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-950); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-900); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-50); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-300); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-500); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-green-200); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-200); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-200); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-300); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-850); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-850) l c h / 0.7); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-green-400); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-400); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-500); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-700); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-950); - --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-green-200); /* Text color for success badges. Communicates positive status through readable green text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-green-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-green-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-purple-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-green-200); /* Text color for success buttons. Communicates positive actions through readable green text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-green-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-green-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-green-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-green-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-green-500) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-green-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-green-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-purple-300); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-green-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-green-300); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-200); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-200); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-200); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-green-200); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ - --canary-component-tag-green-background: var(--canary-colors-green-900); /* Background color for green tags. Creates a distinct surface with green theme styling. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-green-950); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-200); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-200); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-200); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-200); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-200); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-purple-200); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ - --canary-component-tag-purple-background: var(--canary-colors-purple-900); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-red-text: var(--canary-colors-red-200); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-violet-200); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ - --canary-component-tag-violet-background: var(--canary-colors-violet-900); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-200); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); - --canary-brand-color-50: var(--canary-colors-chrome-150); - --canary-brand-color-100: var(--canary-colors-chrome-150); - --canary-brand-color-200: var(--canary-colors-chrome-150); - --canary-brand-color-300: var(--canary-colors-chrome-150); - --canary-brand-color-400: var(--canary-colors-chrome-150); - --canary-brand-color-500: var(--canary-colors-chrome-900); - --canary-brand-color-600: var(--canary-colors-chrome-150); - --canary-brand-color-700: var(--canary-colors-chrome-900); - --canary-brand-color-800: var(--canary-colors-chrome-900); - --canary-brand-color-900: var(--canary-colors-chrome-900); - --canary-brand-color-950: var(--canary-colors-chrome-900); - --canary-brand-on-color-50: var(--canary-colors-pure-black); - --canary-brand-on-color-100: var(--canary-colors-pure-black); - --canary-brand-on-color-200: var(--canary-colors-pure-black); - --canary-brand-on-color-300: var(--canary-colors-pure-black); - --canary-brand-on-color-400: var(--canary-colors-pure-black); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-black); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-200); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-400); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-1); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-2); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-title: var(--canary-text-1); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-description: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-dark-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-desktop-harness.css deleted file mode 100644 index 63251fb9ae..0000000000 --- a/packages/core-design-system/src/styles/source-dark-desktop-harness.css +++ /dev/null @@ -1,493 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:06:48 GMT - * Copyright (c) Harness. - */ - -.source-dark-desktop-harness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-chrome-1000); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-950); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-900); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-50); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-300); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-500); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-green-200); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-200); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-200); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-300); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-850); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-850) l c h / 0.7); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-green-400); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-400); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-500); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-700); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-950); - --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-green-200); /* Text color for success badges. Communicates positive status through readable green text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-green-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-green-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-purple-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-green-200); /* Text color for success buttons. Communicates positive actions through readable green text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-green-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-green-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-green-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-green-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-green-500) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-green-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-green-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-purple-300); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-green-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-green-300); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-200); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-200); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-200); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-green-200); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ - --canary-component-tag-green-background: var(--canary-colors-green-900); /* Background color for green tags. Creates a distinct surface with green theme styling. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-green-950); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-200); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-200); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-200); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-200); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-200); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-purple-200); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ - --canary-component-tag-purple-background: var(--canary-colors-purple-900); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-red-text: var(--canary-colors-red-200); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-violet-200); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ - --canary-component-tag-violet-background: var(--canary-colors-violet-900); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-200); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); - --canary-brand-color-50: var(--canary-colors-cyan-50); - --canary-brand-color-100: var(--canary-colors-cyan-100); - --canary-brand-color-200: var(--canary-colors-cyan-200); - --canary-brand-color-300: var(--canary-colors-cyan-300); - --canary-brand-color-400: var(--canary-colors-cyan-400); - --canary-brand-color-500: var(--canary-colors-cyan-500); - --canary-brand-color-600: var(--canary-colors-cyan-600); - --canary-brand-color-700: var(--canary-colors-cyan-700); - --canary-brand-color-800: var(--canary-colors-cyan-800); - --canary-brand-color-900: var(--canary-colors-cyan-900); - --canary-brand-color-950: var(--canary-colors-cyan-950); - --canary-brand-on-color-50: var(--canary-colors-chrome-950); - --canary-brand-on-color-100: var(--canary-colors-chrome-950); - --canary-brand-on-color-200: var(--canary-colors-chrome-950); - --canary-brand-on-color-300: var(--canary-colors-chrome-950); - --canary-brand-on-color-400: var(--canary-colors-chrome-950); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-white); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-200); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-400); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-1); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-2); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-title: var(--canary-text-1); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-description: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-dark-deuteranopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-deuteranopia-desktop-gitness.css deleted file mode 100644 index 04ca3c7fcf..0000000000 --- a/packages/core-design-system/src/styles/source-dark-deuteranopia-desktop-gitness.css +++ /dev/null @@ -1,492 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:02 GMT - * Copyright (c) Harness. - */ - -.source-dark-deuteranopia-desktop-gitness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-chrome-1000); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-950); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-900); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-50); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-300); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-500); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-cyan-200); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-orange-200); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-200); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-300); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-850); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-850) l c h / 0.7); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-cyan-300); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-orange-300); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-300); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-700); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-950); - --canary-component-alert-danger-title: var(--canary-colors-orange-100); /* Text color for danger alerts. Communicates critical information through high-contrast text. */ - --canary-component-alert-danger-description: var(--canary-colors-orange-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-cyan-200); /* Text color for success badges. Communicates positive status through readable cyan text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-orange-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-cyan-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-cyan-200); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-orange-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-orange-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-orange-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-orange-500) l c h / 0.12); /* Orange background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-orange-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-orange-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-blue-300); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-orange-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-orange-300); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-200); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-200); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-200); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-cyan-200); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-cyan-900); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-200); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-200); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-200); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-200); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-200); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-cyan-200); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-purple-background: var(--canary-colors-cyan-900); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-red-text: var(--canary-colors-orange-200); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-red-background: var(--canary-colors-orange-900); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-violet-text: var(--canary-colors-blue-200); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-violet-background: var(--canary-colors-blue-900); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-200); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-orange-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-orange-200); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); - --canary-brand-color-50: var(--canary-colors-chrome-150); - --canary-brand-color-100: var(--canary-colors-chrome-150); - --canary-brand-color-200: var(--canary-colors-chrome-150); - --canary-brand-color-300: var(--canary-colors-chrome-150); - --canary-brand-color-400: var(--canary-colors-chrome-150); - --canary-brand-color-500: var(--canary-colors-chrome-900); - --canary-brand-color-600: var(--canary-colors-chrome-150); - --canary-brand-color-700: var(--canary-colors-chrome-900); - --canary-brand-color-800: var(--canary-colors-chrome-900); - --canary-brand-color-900: var(--canary-colors-chrome-900); - --canary-brand-color-950: var(--canary-colors-chrome-900); - --canary-brand-on-color-50: var(--canary-colors-pure-black); - --canary-brand-on-color-100: var(--canary-colors-pure-black); - --canary-brand-on-color-200: var(--canary-colors-pure-black); - --canary-brand-on-color-300: var(--canary-colors-pure-black); - --canary-brand-on-color-400: var(--canary-colors-pure-black); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-black); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-200); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-400); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-1); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags, replaced with orange. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-dark-deuteranopia-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-deuteranopia-desktop-harness.css deleted file mode 100644 index 53e4faea49..0000000000 --- a/packages/core-design-system/src/styles/source-dark-deuteranopia-desktop-harness.css +++ /dev/null @@ -1,492 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:01 GMT - * Copyright (c) Harness. - */ - -.source-dark-deuteranopia-desktop-harness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-chrome-1000); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-950); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-900); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-50); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-300); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-500); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-cyan-200); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-orange-200); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-200); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-300); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-850); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-850) l c h / 0.7); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-cyan-300); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-orange-300); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-300); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-700); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-950); - --canary-component-alert-danger-title: var(--canary-colors-orange-100); /* Text color for danger alerts. Communicates critical information through high-contrast text. */ - --canary-component-alert-danger-description: var(--canary-colors-orange-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-cyan-200); /* Text color for success badges. Communicates positive status through readable cyan text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-orange-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-cyan-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-cyan-200); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-orange-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-orange-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-orange-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-orange-500) l c h / 0.12); /* Orange background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-orange-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-orange-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-blue-300); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-orange-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-orange-300); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-200); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-200); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-200); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-cyan-200); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-cyan-900); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-200); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-200); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-200); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-200); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-200); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-cyan-200); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-purple-background: var(--canary-colors-cyan-900); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-red-text: var(--canary-colors-orange-200); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-red-background: var(--canary-colors-orange-900); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-violet-text: var(--canary-colors-blue-200); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-violet-background: var(--canary-colors-blue-900); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-200); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-orange-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-orange-200); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); - --canary-brand-color-50: var(--canary-colors-cyan-50); - --canary-brand-color-100: var(--canary-colors-cyan-100); - --canary-brand-color-200: var(--canary-colors-cyan-200); - --canary-brand-color-300: var(--canary-colors-cyan-300); - --canary-brand-color-400: var(--canary-colors-cyan-400); - --canary-brand-color-500: var(--canary-colors-cyan-500); - --canary-brand-color-600: var(--canary-colors-cyan-600); - --canary-brand-color-700: var(--canary-colors-cyan-700); - --canary-brand-color-800: var(--canary-colors-cyan-800); - --canary-brand-color-900: var(--canary-colors-cyan-900); - --canary-brand-color-950: var(--canary-colors-cyan-950); - --canary-brand-on-color-50: var(--canary-colors-chrome-950); - --canary-brand-on-color-100: var(--canary-colors-chrome-950); - --canary-brand-on-color-200: var(--canary-colors-chrome-950); - --canary-brand-on-color-300: var(--canary-colors-chrome-950); - --canary-brand-on-color-400: var(--canary-colors-chrome-950); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-white); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-200); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-400); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-1); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags, replaced with orange. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-dark-dimmer-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-dimmer-desktop-gitness.css deleted file mode 100644 index ea9d0cda39..0000000000 --- a/packages/core-design-system/src/styles/source-dark-dimmer-desktop-gitness.css +++ /dev/null @@ -1,492 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:06:51 GMT - * Copyright (c) Harness. - */ - -.source-dark-dimmer-desktop-gitness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-pure-black); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-1000); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-950); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-150); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-400); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-600); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-green-300); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-300); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-300); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-500); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-900); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: var(--canary-colors-chrome-900); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-green-500); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-500); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-600); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-700); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-950); - --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-green-300); /* Text color for success badges. Communicates positive status through readable green text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-green-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-green-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-red-300); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-300); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-300); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-purple-300); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-outline-selected-border: var(--canary-border-width-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-success-text: var(--canary-colors-green-300); /* Text color for success buttons. Communicates positive actions through readable green text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-green-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-green-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-green-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-green-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-red-300); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-green-500) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-green-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-green-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-purple-400); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-green-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-100); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-100); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-green-400); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-purple-400); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-300); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-300); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-300); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-green-300); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ - --canary-component-tag-green-background: var(--canary-colors-green-900); /* Background color for green tags. Creates a distinct surface with green theme styling. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-green-950); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-300); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-300); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-300); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-300); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-300); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-purple-300); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ - --canary-component-tag-purple-background: var(--canary-colors-purple-900); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-red-text: var(--canary-colors-red-300); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-violet-300); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ - --canary-component-tag-violet-background: var(--canary-colors-violet-900); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-300); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); - --canary-brand-color-50: var(--canary-colors-chrome-150); - --canary-brand-color-100: var(--canary-colors-chrome-150); - --canary-brand-color-200: var(--canary-colors-chrome-150); - --canary-brand-color-300: var(--canary-colors-chrome-150); - --canary-brand-color-400: var(--canary-colors-chrome-150); - --canary-brand-color-500: var(--canary-colors-chrome-900); - --canary-brand-color-600: var(--canary-colors-chrome-150); - --canary-brand-color-700: var(--canary-colors-chrome-900); - --canary-brand-color-800: var(--canary-colors-chrome-900); - --canary-brand-color-900: var(--canary-colors-chrome-900); - --canary-brand-color-950: var(--canary-colors-chrome-900); - --canary-brand-on-color-50: var(--canary-colors-pure-black); - --canary-brand-on-color-100: var(--canary-colors-pure-black); - --canary-brand-on-color-200: var(--canary-colors-pure-black); - --canary-brand-on-color-300: var(--canary-colors-pure-black); - --canary-brand-on-color-400: var(--canary-colors-pure-black); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-black); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-300); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-600); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-dark-dimmer-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-dimmer-desktop-harness.css deleted file mode 100644 index ad2c9a4c40..0000000000 --- a/packages/core-design-system/src/styles/source-dark-dimmer-desktop-harness.css +++ /dev/null @@ -1,492 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:06:50 GMT - * Copyright (c) Harness. - */ - -.source-dark-dimmer-desktop-harness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-pure-black); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-1000); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-950); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-150); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-400); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-600); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-green-300); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-300); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-300); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-500); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-900); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: var(--canary-colors-chrome-900); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-green-500); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-500); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-600); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-700); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-950); - --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-green-300); /* Text color for success badges. Communicates positive status through readable green text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-green-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-green-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-red-300); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-300); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-300); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-purple-300); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-outline-selected-border: var(--canary-border-width-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-success-text: var(--canary-colors-green-300); /* Text color for success buttons. Communicates positive actions through readable green text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-green-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-green-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-green-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-green-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-red-300); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-green-500) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-green-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-green-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-purple-400); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-green-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-100); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-100); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-green-400); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-purple-400); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-300); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-300); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-300); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-green-300); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ - --canary-component-tag-green-background: var(--canary-colors-green-900); /* Background color for green tags. Creates a distinct surface with green theme styling. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-green-950); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-300); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-300); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-300); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-300); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-300); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-purple-300); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ - --canary-component-tag-purple-background: var(--canary-colors-purple-900); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-red-text: var(--canary-colors-red-300); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-violet-300); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ - --canary-component-tag-violet-background: var(--canary-colors-violet-900); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-300); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); - --canary-brand-color-50: var(--canary-colors-cyan-50); - --canary-brand-color-100: var(--canary-colors-cyan-100); - --canary-brand-color-200: var(--canary-colors-cyan-200); - --canary-brand-color-300: var(--canary-colors-cyan-300); - --canary-brand-color-400: var(--canary-colors-cyan-400); - --canary-brand-color-500: var(--canary-colors-cyan-500); - --canary-brand-color-600: var(--canary-colors-cyan-600); - --canary-brand-color-700: var(--canary-colors-cyan-700); - --canary-brand-color-800: var(--canary-colors-cyan-800); - --canary-brand-color-900: var(--canary-colors-cyan-900); - --canary-brand-color-950: var(--canary-colors-cyan-950); - --canary-brand-on-color-50: var(--canary-colors-chrome-950); - --canary-brand-on-color-100: var(--canary-colors-chrome-950); - --canary-brand-on-color-200: var(--canary-colors-chrome-950); - --canary-brand-on-color-300: var(--canary-colors-chrome-950); - --canary-brand-on-color-400: var(--canary-colors-chrome-950); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-white); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-300); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-600); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-dark-dimmer-deuteranopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-dimmer-deuteranopia-desktop-gitness.css deleted file mode 100644 index e3014fd1f4..0000000000 --- a/packages/core-design-system/src/styles/source-dark-dimmer-deuteranopia-desktop-gitness.css +++ /dev/null @@ -1,492 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:04 GMT - * Copyright (c) Harness. - */ - -.source-dark-dimmer-deuteranopia-desktop-gitness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-pure-black); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-1000); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-950); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-150); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-400); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-600); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-cyan-300); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-orange-300); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-300); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-500); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-900); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: var(--canary-colors-chrome-900); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-cyan-500); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-orange-500); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-600); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-700); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-950); - --canary-component-alert-danger-title: var(--canary-colors-orange-100); /* Text color for danger alerts. Communicates critical information through high-contrast text. */ - --canary-component-alert-danger-description: var(--canary-colors-orange-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-cyan-300); /* Text color for success badges. Communicates positive status through readable cyan text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-orange-300); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-300); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-300); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-cyan-300); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-cyan-300); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-orange-300); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-orange-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-orange-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-orange-500) l c h / 0.12); /* Orange background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-orange-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-orange-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-blue-400); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-orange-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-100); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-100); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-cyan-400); /* Color for success status indicators. Communicates completed or positive states using cyan for deuteranopia accessibility. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-orange-400); /* Color for danger status indicators. Communicates error or critical warning states using orange for deuteranopia accessibility. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-cyan-400); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-300); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-300); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-300); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-cyan-300); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-cyan-900); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-300); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-300); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-300); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-300); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-300); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-cyan-300); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-purple-background: var(--canary-colors-cyan-900); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-red-text: var(--canary-colors-orange-300); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-red-background: var(--canary-colors-orange-900); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-violet-text: var(--canary-colors-blue-300); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-violet-background: var(--canary-colors-blue-900); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-300); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-orange-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-orange-200); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); - --canary-brand-color-50: var(--canary-colors-chrome-150); - --canary-brand-color-100: var(--canary-colors-chrome-150); - --canary-brand-color-200: var(--canary-colors-chrome-150); - --canary-brand-color-300: var(--canary-colors-chrome-150); - --canary-brand-color-400: var(--canary-colors-chrome-150); - --canary-brand-color-500: var(--canary-colors-chrome-900); - --canary-brand-color-600: var(--canary-colors-chrome-150); - --canary-brand-color-700: var(--canary-colors-chrome-900); - --canary-brand-color-800: var(--canary-colors-chrome-900); - --canary-brand-color-900: var(--canary-colors-chrome-900); - --canary-brand-color-950: var(--canary-colors-chrome-900); - --canary-brand-on-color-50: var(--canary-colors-pure-black); - --canary-brand-on-color-100: var(--canary-colors-pure-black); - --canary-brand-on-color-200: var(--canary-colors-pure-black); - --canary-brand-on-color-300: var(--canary-colors-pure-black); - --canary-brand-on-color-400: var(--canary-colors-pure-black); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-black); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-300); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-600); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags, replaced with orange. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-dark-dimmer-deuteranopia-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-dimmer-deuteranopia-desktop-harness.css deleted file mode 100644 index 2a53587673..0000000000 --- a/packages/core-design-system/src/styles/source-dark-dimmer-deuteranopia-desktop-harness.css +++ /dev/null @@ -1,492 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:03 GMT - * Copyright (c) Harness. - */ - -.source-dark-dimmer-deuteranopia-desktop-harness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-pure-black); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-1000); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-950); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-150); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-400); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-600); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-cyan-300); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-orange-300); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-300); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-500); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-900); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: var(--canary-colors-chrome-900); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-cyan-500); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-orange-500); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-600); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-700); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-950); - --canary-component-alert-danger-title: var(--canary-colors-orange-100); /* Text color for danger alerts. Communicates critical information through high-contrast text. */ - --canary-component-alert-danger-description: var(--canary-colors-orange-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-cyan-300); /* Text color for success badges. Communicates positive status through readable cyan text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-orange-300); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-300); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-300); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-cyan-300); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-cyan-300); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-orange-300); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-orange-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-orange-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-orange-500) l c h / 0.12); /* Orange background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-orange-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-orange-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-blue-400); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-orange-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-100); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-100); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-cyan-400); /* Color for success status indicators. Communicates completed or positive states using cyan for deuteranopia accessibility. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-orange-400); /* Color for danger status indicators. Communicates error or critical warning states using orange for deuteranopia accessibility. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-cyan-400); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-300); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-300); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-300); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-cyan-300); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-cyan-900); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-300); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-300); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-300); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-300); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-300); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-cyan-300); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-purple-background: var(--canary-colors-cyan-900); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-red-text: var(--canary-colors-orange-300); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-red-background: var(--canary-colors-orange-900); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-violet-text: var(--canary-colors-blue-300); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-violet-background: var(--canary-colors-blue-900); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-300); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-orange-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-orange-200); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); - --canary-brand-color-50: var(--canary-colors-cyan-50); - --canary-brand-color-100: var(--canary-colors-cyan-100); - --canary-brand-color-200: var(--canary-colors-cyan-200); - --canary-brand-color-300: var(--canary-colors-cyan-300); - --canary-brand-color-400: var(--canary-colors-cyan-400); - --canary-brand-color-500: var(--canary-colors-cyan-500); - --canary-brand-color-600: var(--canary-colors-cyan-600); - --canary-brand-color-700: var(--canary-colors-cyan-700); - --canary-brand-color-800: var(--canary-colors-cyan-800); - --canary-brand-color-900: var(--canary-colors-cyan-900); - --canary-brand-color-950: var(--canary-colors-cyan-950); - --canary-brand-on-color-50: var(--canary-colors-chrome-950); - --canary-brand-on-color-100: var(--canary-colors-chrome-950); - --canary-brand-on-color-200: var(--canary-colors-chrome-950); - --canary-brand-on-color-300: var(--canary-colors-chrome-950); - --canary-brand-on-color-400: var(--canary-colors-chrome-950); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-white); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-300); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-600); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags, replaced with orange. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-dark-dimmer-protanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-dimmer-protanopia-desktop-gitness.css deleted file mode 100644 index 3ecc1b3ee1..0000000000 --- a/packages/core-design-system/src/styles/source-dark-dimmer-protanopia-desktop-gitness.css +++ /dev/null @@ -1,492 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:06:58 GMT - * Copyright (c) Harness. - */ - -.source-dark-dimmer-protanopia-desktop-gitness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-pure-black); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-1000); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-950); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-150); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-400); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-600); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-blue-300); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-300); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-300); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-500); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-900); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: var(--canary-colors-chrome-900); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-blue-500); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-500); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-600); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-700); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-950); - --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-blue-300); /* Text color for success badges. Communicates positive status through readable blue text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-blue-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-red-300); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-300); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-300); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-purple-300); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-blue-300); /* Text color for success buttons. Communicates positive actions through readable blue text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-blue-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-blue-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-blue-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-red-300); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Blue background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-blue-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-purple-400); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-blue-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-100); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-100); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-blue-300); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-purple-400); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-300); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-300); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-300); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-blue-300); /* Text color for green tags. Adjusted for protanopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-blue-900); /* Background color for green tags. Adjusted for protanopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for green tags. Adjusted for protanopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-300); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-300); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-300); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-300); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-300); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-purple-300); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ - --canary-component-tag-purple-background: var(--canary-colors-purple-900); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-red-text: var(--canary-colors-red-300); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-violet-300); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ - --canary-component-tag-violet-background: var(--canary-colors-violet-900); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-300); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); - --canary-brand-color-50: var(--canary-colors-chrome-150); - --canary-brand-color-100: var(--canary-colors-chrome-150); - --canary-brand-color-200: var(--canary-colors-chrome-150); - --canary-brand-color-300: var(--canary-colors-chrome-150); - --canary-brand-color-400: var(--canary-colors-chrome-150); - --canary-brand-color-500: var(--canary-colors-chrome-900); - --canary-brand-color-600: var(--canary-colors-chrome-150); - --canary-brand-color-700: var(--canary-colors-chrome-900); - --canary-brand-color-800: var(--canary-colors-chrome-900); - --canary-brand-color-900: var(--canary-colors-chrome-900); - --canary-brand-color-950: var(--canary-colors-chrome-900); - --canary-brand-on-color-50: var(--canary-colors-pure-black); - --canary-brand-on-color-100: var(--canary-colors-pure-black); - --canary-brand-on-color-200: var(--canary-colors-pure-black); - --canary-brand-on-color-300: var(--canary-colors-pure-black); - --canary-brand-on-color-400: var(--canary-colors-pure-black); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-black); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-300); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-600); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-dark-dimmer-protanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-dimmer-protanopia-desktop-harness.css deleted file mode 100644 index a81f41fdc3..0000000000 --- a/packages/core-design-system/src/styles/source-dark-dimmer-protanopia-desktop-harness.css +++ /dev/null @@ -1,492 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:06:57 GMT - * Copyright (c) Harness. - */ - -.source-dark-dimmer-protanopia-desktop-harness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-pure-black); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-1000); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-950); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-150); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-400); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-600); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-blue-300); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-300); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-300); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-500); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-900); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: var(--canary-colors-chrome-900); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-blue-500); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-500); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-600); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-700); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-950); - --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-blue-300); /* Text color for success badges. Communicates positive status through readable blue text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-blue-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-red-300); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-300); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-300); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-purple-300); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-blue-300); /* Text color for success buttons. Communicates positive actions through readable blue text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-blue-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-blue-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-blue-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-red-300); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Blue background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-blue-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-purple-400); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-blue-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-100); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-100); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-blue-300); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-purple-400); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-300); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-300); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-300); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-blue-300); /* Text color for green tags. Adjusted for protanopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-blue-900); /* Background color for green tags. Adjusted for protanopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for green tags. Adjusted for protanopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-300); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-300); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-300); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-300); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-300); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-purple-300); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ - --canary-component-tag-purple-background: var(--canary-colors-purple-900); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-red-text: var(--canary-colors-red-300); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-violet-300); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ - --canary-component-tag-violet-background: var(--canary-colors-violet-900); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-300); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); - --canary-brand-color-50: var(--canary-colors-cyan-50); - --canary-brand-color-100: var(--canary-colors-cyan-100); - --canary-brand-color-200: var(--canary-colors-cyan-200); - --canary-brand-color-300: var(--canary-colors-cyan-300); - --canary-brand-color-400: var(--canary-colors-cyan-400); - --canary-brand-color-500: var(--canary-colors-cyan-500); - --canary-brand-color-600: var(--canary-colors-cyan-600); - --canary-brand-color-700: var(--canary-colors-cyan-700); - --canary-brand-color-800: var(--canary-colors-cyan-800); - --canary-brand-color-900: var(--canary-colors-cyan-900); - --canary-brand-color-950: var(--canary-colors-cyan-950); - --canary-brand-on-color-50: var(--canary-colors-chrome-950); - --canary-brand-on-color-100: var(--canary-colors-chrome-950); - --canary-brand-on-color-200: var(--canary-colors-chrome-950); - --canary-brand-on-color-300: var(--canary-colors-chrome-950); - --canary-brand-on-color-400: var(--canary-colors-chrome-950); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-white); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-300); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-600); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-dark-dimmer-tritanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-dimmer-tritanopia-desktop-gitness.css deleted file mode 100644 index 24ed455aae..0000000000 --- a/packages/core-design-system/src/styles/source-dark-dimmer-tritanopia-desktop-gitness.css +++ /dev/null @@ -1,492 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:10 GMT - * Copyright (c) Harness. - */ - -.source-dark-dimmer-tritanopia-desktop-gitness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-pure-black); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-1000); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-950); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-150); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-400); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-600); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-cyan-300); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-300); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-orange-300); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-500); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-900); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: var(--canary-colors-chrome-900); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-cyan-500); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-500); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-orange-600); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-700); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-950); - --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-cyan-300); /* Text color for success badges. Communicates positive status through readable cyan text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-red-300); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-orange-300); /* Text color for warning badges. Signals caution states with readable orange text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-300); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-cyan-300); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-cyan-300); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-red-300); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-cyan-400); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed: var(--canary-colors-cyan-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-100); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-100); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-cyan-400); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-orange-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-cyan-400); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-300); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-300); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-300); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-cyan-300); /* Text color for green tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-cyan-900); /* Background color for green tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-300); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-300); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-300); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-300); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-300); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-cyan-300); /* Text color for purple tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-purple-background: var(--canary-colors-cyan-900); /* Background color for purple tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-red-text: var(--canary-colors-red-300); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-cyan-300); /* Text color for violet tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-violet-background: var(--canary-colors-cyan-900); /* Background color for violet tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for violet tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-yellow-text: var(--canary-colors-orange-300); /* Text color for yellow tags, replaced with orange for tritanopia visibility. */ - --canary-component-tag-yellow-background: var(--canary-colors-orange-900); /* Background color for yellow tags, replaced with orange for tritanopia visibility. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for yellow tags, replaced with orange for tritanopia visibility. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-orange-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); - --canary-brand-color-50: var(--canary-colors-chrome-150); - --canary-brand-color-100: var(--canary-colors-chrome-150); - --canary-brand-color-200: var(--canary-colors-chrome-150); - --canary-brand-color-300: var(--canary-colors-chrome-150); - --canary-brand-color-400: var(--canary-colors-chrome-150); - --canary-brand-color-500: var(--canary-colors-chrome-900); - --canary-brand-color-600: var(--canary-colors-chrome-150); - --canary-brand-color-700: var(--canary-colors-chrome-900); - --canary-brand-color-800: var(--canary-colors-chrome-900); - --canary-brand-color-900: var(--canary-colors-chrome-900); - --canary-brand-color-950: var(--canary-colors-chrome-900); - --canary-brand-on-color-50: var(--canary-colors-pure-black); - --canary-brand-on-color-100: var(--canary-colors-pure-black); - --canary-brand-on-color-200: var(--canary-colors-pure-black); - --canary-brand-on-color-300: var(--canary-colors-pure-black); - --canary-brand-on-color-400: var(--canary-colors-pure-black); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-black); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-300); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-600); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with cyan. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags, replaced with orange. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-dark-dimmer-tritanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-dimmer-tritanopia-desktop-harness.css deleted file mode 100644 index 2f229a0c19..0000000000 --- a/packages/core-design-system/src/styles/source-dark-dimmer-tritanopia-desktop-harness.css +++ /dev/null @@ -1,492 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:10 GMT - * Copyright (c) Harness. - */ - -.source-dark-dimmer-tritanopia-desktop-harness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-pure-black); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-1000); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-950); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-150); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-400); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-600); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-cyan-300); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-300); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-orange-300); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-500); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-900); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: var(--canary-colors-chrome-900); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-cyan-500); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-500); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-orange-600); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-700); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-950); - --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-cyan-300); /* Text color for success badges. Communicates positive status through readable cyan text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-red-300); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-orange-300); /* Text color for warning badges. Signals caution states with readable orange text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-300); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-cyan-300); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-cyan-300); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-red-300); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-cyan-400); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed: var(--canary-colors-cyan-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-100); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-100); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-cyan-400); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-orange-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-cyan-400); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-300); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-300); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-300); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-cyan-300); /* Text color for green tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-cyan-900); /* Background color for green tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-300); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-300); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-300); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-300); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-300); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-cyan-300); /* Text color for purple tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-purple-background: var(--canary-colors-cyan-900); /* Background color for purple tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-red-text: var(--canary-colors-red-300); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-cyan-300); /* Text color for violet tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-violet-background: var(--canary-colors-cyan-900); /* Background color for violet tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for violet tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-yellow-text: var(--canary-colors-orange-300); /* Text color for yellow tags, replaced with orange for tritanopia visibility. */ - --canary-component-tag-yellow-background: var(--canary-colors-orange-900); /* Background color for yellow tags, replaced with orange for tritanopia visibility. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for yellow tags, replaced with orange for tritanopia visibility. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-orange-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); - --canary-brand-color-50: var(--canary-colors-cyan-50); - --canary-brand-color-100: var(--canary-colors-cyan-100); - --canary-brand-color-200: var(--canary-colors-cyan-200); - --canary-brand-color-300: var(--canary-colors-cyan-300); - --canary-brand-color-400: var(--canary-colors-cyan-400); - --canary-brand-color-500: var(--canary-colors-cyan-500); - --canary-brand-color-600: var(--canary-colors-cyan-600); - --canary-brand-color-700: var(--canary-colors-cyan-700); - --canary-brand-color-800: var(--canary-colors-cyan-800); - --canary-brand-color-900: var(--canary-colors-cyan-900); - --canary-brand-color-950: var(--canary-colors-cyan-950); - --canary-brand-on-color-50: var(--canary-colors-chrome-950); - --canary-brand-on-color-100: var(--canary-colors-chrome-950); - --canary-brand-on-color-200: var(--canary-colors-chrome-950); - --canary-brand-on-color-300: var(--canary-colors-chrome-950); - --canary-brand-on-color-400: var(--canary-colors-chrome-950); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-white); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-300); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-600); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with cyan. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags, replaced with orange. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-dark-high-contrast-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-high-contrast-desktop-gitness.css deleted file mode 100644 index 858318f4c1..0000000000 --- a/packages/core-design-system/src/styles/source-dark-high-contrast-desktop-gitness.css +++ /dev/null @@ -1,492 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:06:54 GMT - * Copyright (c) Harness. - */ - -.source-dark-high-contrast-desktop-gitness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-chrome-1000); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-950); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-850); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-50); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-200); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-400); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-green-200); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-200); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-200); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-200); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-700); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-800) l c h / 0.7); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-green-300); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-300); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-300); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-700); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-950); - --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-green-200); /* Text color for success badges. Communicates positive status through readable green text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-green-300) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-green-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-purple-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-green-200); /* Text color for success buttons. Communicates positive actions through readable green text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-green-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-green-300) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-green-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-green-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-green-500) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-green-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-green-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-purple-300); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-green-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-green-300); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-100); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-800); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-100); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-800); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-100); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-800); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-green-100); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ - --canary-component-tag-green-background: var(--canary-colors-green-800); /* Background color for green tags. Creates a distinct surface with green theme styling. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-green-950); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-100); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-800); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-100); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-800); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-100); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-800); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-100); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-800); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-100); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-800); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-purple-100); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ - --canary-component-tag-purple-background: var(--canary-colors-purple-800); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-red-text: var(--canary-colors-red-100); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-800); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-violet-100); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ - --canary-component-tag-violet-background: var(--canary-colors-violet-800); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-100); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-800); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); - --canary-brand-color-50: var(--canary-colors-chrome-150); - --canary-brand-color-100: var(--canary-colors-chrome-150); - --canary-brand-color-200: var(--canary-colors-chrome-150); - --canary-brand-color-300: var(--canary-colors-chrome-150); - --canary-brand-color-400: var(--canary-colors-chrome-150); - --canary-brand-color-500: var(--canary-colors-chrome-900); - --canary-brand-color-600: var(--canary-colors-chrome-150); - --canary-brand-color-700: var(--canary-colors-chrome-900); - --canary-brand-color-800: var(--canary-colors-chrome-900); - --canary-brand-color-900: var(--canary-colors-chrome-900); - --canary-brand-color-950: var(--canary-colors-chrome-900); - --canary-brand-on-color-50: var(--canary-colors-pure-black); - --canary-brand-on-color-100: var(--canary-colors-pure-black); - --canary-brand-on-color-200: var(--canary-colors-pure-black); - --canary-brand-on-color-300: var(--canary-colors-pure-black); - --canary-brand-on-color-400: var(--canary-colors-pure-black); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-black); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-200); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-300); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-dark-high-contrast-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-high-contrast-desktop-harness.css deleted file mode 100644 index 31444da571..0000000000 --- a/packages/core-design-system/src/styles/source-dark-high-contrast-desktop-harness.css +++ /dev/null @@ -1,492 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:06:53 GMT - * Copyright (c) Harness. - */ - -.source-dark-high-contrast-desktop-harness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-chrome-1000); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-950); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-850); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-50); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-200); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-400); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-green-200); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-200); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-200); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-200); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-700); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-800) l c h / 0.7); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-green-300); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-300); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-300); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-700); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-950); - --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-green-200); /* Text color for success badges. Communicates positive status through readable green text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-green-300) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-green-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-purple-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-green-200); /* Text color for success buttons. Communicates positive actions through readable green text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-green-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-green-300) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-green-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-green-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-green-500) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-green-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-green-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-purple-300); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-green-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-green-300); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-100); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-800); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-100); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-800); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-100); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-800); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-green-100); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ - --canary-component-tag-green-background: var(--canary-colors-green-800); /* Background color for green tags. Creates a distinct surface with green theme styling. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-green-950); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-100); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-800); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-100); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-800); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-100); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-800); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-100); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-800); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-100); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-800); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-purple-100); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ - --canary-component-tag-purple-background: var(--canary-colors-purple-800); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-red-text: var(--canary-colors-red-100); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-800); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-violet-100); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ - --canary-component-tag-violet-background: var(--canary-colors-violet-800); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-100); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-800); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); - --canary-brand-color-50: var(--canary-colors-cyan-50); - --canary-brand-color-100: var(--canary-colors-cyan-100); - --canary-brand-color-200: var(--canary-colors-cyan-200); - --canary-brand-color-300: var(--canary-colors-cyan-300); - --canary-brand-color-400: var(--canary-colors-cyan-400); - --canary-brand-color-500: var(--canary-colors-cyan-500); - --canary-brand-color-600: var(--canary-colors-cyan-600); - --canary-brand-color-700: var(--canary-colors-cyan-700); - --canary-brand-color-800: var(--canary-colors-cyan-800); - --canary-brand-color-900: var(--canary-colors-cyan-900); - --canary-brand-color-950: var(--canary-colors-cyan-950); - --canary-brand-on-color-50: var(--canary-colors-chrome-950); - --canary-brand-on-color-100: var(--canary-colors-chrome-950); - --canary-brand-on-color-200: var(--canary-colors-chrome-950); - --canary-brand-on-color-300: var(--canary-colors-chrome-950); - --canary-brand-on-color-400: var(--canary-colors-chrome-950); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-white); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-200); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-300); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-dark-high-contrast-deuteranopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-high-contrast-deuteranopia-desktop-gitness.css deleted file mode 100644 index 81fb040879..0000000000 --- a/packages/core-design-system/src/styles/source-dark-high-contrast-deuteranopia-desktop-gitness.css +++ /dev/null @@ -1,492 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:06 GMT - * Copyright (c) Harness. - */ - -.source-dark-high-contrast-deuteranopia-desktop-gitness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-chrome-1000); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-950); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-850); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-50); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-200); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-400); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-cyan-200); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-orange-200); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-200); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-200); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-700); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-800) l c h / 0.7); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-cyan-300); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-orange-300); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-300); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-700); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-950); - --canary-component-alert-danger-title: var(--canary-colors-orange-100); /* Text color for danger alerts. Communicates critical information through high-contrast orange text. */ - --canary-component-alert-danger-description: var(--canary-colors-orange-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-cyan-200); /* Text color for success badges. Communicates positive status through readable cyan text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-orange-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-cyan-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-cyan-200); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-orange-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-orange-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-orange-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-orange-500) l c h / 0.12); /* Orange background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-orange-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-orange-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-blue-300); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-orange-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-orange-300); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-100); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-800); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-100); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-800); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-100); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-800); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-cyan-100); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-cyan-800); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-100); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-800); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-100); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-800); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-100); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-800); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-100); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-800); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-100); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-800); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-cyan-100); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-purple-background: var(--canary-colors-cyan-800); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-red-text: var(--canary-colors-orange-100); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-red-background: var(--canary-colors-orange-800); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-violet-text: var(--canary-colors-blue-100); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-violet-background: var(--canary-colors-blue-800); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-100); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-800); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-orange-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-orange-200); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); - --canary-brand-color-50: var(--canary-colors-chrome-150); - --canary-brand-color-100: var(--canary-colors-chrome-150); - --canary-brand-color-200: var(--canary-colors-chrome-150); - --canary-brand-color-300: var(--canary-colors-chrome-150); - --canary-brand-color-400: var(--canary-colors-chrome-150); - --canary-brand-color-500: var(--canary-colors-chrome-900); - --canary-brand-color-600: var(--canary-colors-chrome-150); - --canary-brand-color-700: var(--canary-colors-chrome-900); - --canary-brand-color-800: var(--canary-colors-chrome-900); - --canary-brand-color-900: var(--canary-colors-chrome-900); - --canary-brand-color-950: var(--canary-colors-chrome-900); - --canary-brand-on-color-50: var(--canary-colors-pure-black); - --canary-brand-on-color-100: var(--canary-colors-pure-black); - --canary-brand-on-color-200: var(--canary-colors-pure-black); - --canary-brand-on-color-300: var(--canary-colors-pure-black); - --canary-brand-on-color-400: var(--canary-colors-pure-black); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-black); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-200); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-300); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags, replaced with orange. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-dark-high-contrast-deuteranopia-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-high-contrast-deuteranopia-desktop-harness.css deleted file mode 100644 index 4ce941a3f6..0000000000 --- a/packages/core-design-system/src/styles/source-dark-high-contrast-deuteranopia-desktop-harness.css +++ /dev/null @@ -1,492 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:05 GMT - * Copyright (c) Harness. - */ - -.source-dark-high-contrast-deuteranopia-desktop-harness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-chrome-1000); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-950); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-850); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-50); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-200); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-400); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-cyan-200); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-orange-200); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-200); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-200); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-700); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-800) l c h / 0.7); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-cyan-300); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-orange-300); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-300); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-700); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-950); - --canary-component-alert-danger-title: var(--canary-colors-orange-100); /* Text color for danger alerts. Communicates critical information through high-contrast orange text. */ - --canary-component-alert-danger-description: var(--canary-colors-orange-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-cyan-200); /* Text color for success badges. Communicates positive status through readable cyan text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-orange-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-cyan-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-cyan-200); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-orange-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-orange-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-orange-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-orange-500) l c h / 0.12); /* Orange background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-orange-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-orange-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-blue-300); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-orange-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-orange-300); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-100); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-800); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-100); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-800); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-100); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-800); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-cyan-100); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-cyan-800); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-100); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-800); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-100); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-800); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-100); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-800); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-100); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-800); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-100); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-800); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-cyan-100); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-purple-background: var(--canary-colors-cyan-800); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-red-text: var(--canary-colors-orange-100); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-red-background: var(--canary-colors-orange-800); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-violet-text: var(--canary-colors-blue-100); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-violet-background: var(--canary-colors-blue-800); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-100); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-800); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-orange-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-orange-200); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); - --canary-brand-color-50: var(--canary-colors-cyan-50); - --canary-brand-color-100: var(--canary-colors-cyan-100); - --canary-brand-color-200: var(--canary-colors-cyan-200); - --canary-brand-color-300: var(--canary-colors-cyan-300); - --canary-brand-color-400: var(--canary-colors-cyan-400); - --canary-brand-color-500: var(--canary-colors-cyan-500); - --canary-brand-color-600: var(--canary-colors-cyan-600); - --canary-brand-color-700: var(--canary-colors-cyan-700); - --canary-brand-color-800: var(--canary-colors-cyan-800); - --canary-brand-color-900: var(--canary-colors-cyan-900); - --canary-brand-color-950: var(--canary-colors-cyan-950); - --canary-brand-on-color-50: var(--canary-colors-chrome-950); - --canary-brand-on-color-100: var(--canary-colors-chrome-950); - --canary-brand-on-color-200: var(--canary-colors-chrome-950); - --canary-brand-on-color-300: var(--canary-colors-chrome-950); - --canary-brand-on-color-400: var(--canary-colors-chrome-950); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-white); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-200); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-300); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags, replaced with orange. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-dark-high-contrast-protanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-high-contrast-protanopia-desktop-gitness.css deleted file mode 100644 index 69288ded0d..0000000000 --- a/packages/core-design-system/src/styles/source-dark-high-contrast-protanopia-desktop-gitness.css +++ /dev/null @@ -1,492 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:00 GMT - * Copyright (c) Harness. - */ - -.source-dark-high-contrast-protanopia-desktop-gitness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-chrome-1000); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-950); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-900); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-50); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-200); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-400); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-blue-200); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-200); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-200); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-200); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-800); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-800) l c h / 0.7); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-blue-300); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-300); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-300); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-700); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-950); - --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-blue-200); /* Text color for success badges. Communicates positive status through readable blue text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-blue-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-purple-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-blue-200); /* Text color for success buttons. Communicates positive actions through readable blue text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-blue-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-blue-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-blue-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Blue background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-blue-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-purple-300); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-blue-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-blue-300); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-100); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-800); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-100); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-800); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-100); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-800); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-blue-100); /* Text color for green tags. Adjusted for protanopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-blue-800); /* Background color for green tags. Adjusted for protanopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for green tags. Adjusted for protanopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-100); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-800); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-100); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-800); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-100); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-800); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-100); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-800); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-100); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-800); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-purple-100); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ - --canary-component-tag-purple-background: var(--canary-colors-purple-800); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-red-text: var(--canary-colors-red-100); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-800); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-violet-100); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ - --canary-component-tag-violet-background: var(--canary-colors-violet-800); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-100); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-800); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); - --canary-brand-color-50: var(--canary-colors-chrome-150); - --canary-brand-color-100: var(--canary-colors-chrome-150); - --canary-brand-color-200: var(--canary-colors-chrome-150); - --canary-brand-color-300: var(--canary-colors-chrome-150); - --canary-brand-color-400: var(--canary-colors-chrome-150); - --canary-brand-color-500: var(--canary-colors-chrome-900); - --canary-brand-color-600: var(--canary-colors-chrome-150); - --canary-brand-color-700: var(--canary-colors-chrome-900); - --canary-brand-color-800: var(--canary-colors-chrome-900); - --canary-brand-color-900: var(--canary-colors-chrome-900); - --canary-brand-color-950: var(--canary-colors-chrome-900); - --canary-brand-on-color-50: var(--canary-colors-pure-black); - --canary-brand-on-color-100: var(--canary-colors-pure-black); - --canary-brand-on-color-200: var(--canary-colors-pure-black); - --canary-brand-on-color-300: var(--canary-colors-pure-black); - --canary-brand-on-color-400: var(--canary-colors-pure-black); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-black); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-200); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-300); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-dark-high-contrast-protanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-high-contrast-protanopia-desktop-harness.css deleted file mode 100644 index c1b51870ff..0000000000 --- a/packages/core-design-system/src/styles/source-dark-high-contrast-protanopia-desktop-harness.css +++ /dev/null @@ -1,492 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:06:59 GMT - * Copyright (c) Harness. - */ - -.source-dark-high-contrast-protanopia-desktop-harness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-chrome-1000); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-950); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-900); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-50); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-200); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-400); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-blue-200); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-200); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-200); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-200); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-800); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-800) l c h / 0.7); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-blue-300); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-300); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-300); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-700); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-950); - --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-blue-200); /* Text color for success badges. Communicates positive status through readable blue text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-blue-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-purple-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-blue-200); /* Text color for success buttons. Communicates positive actions through readable blue text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-blue-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-blue-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-blue-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Blue background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-blue-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-purple-300); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-blue-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-blue-300); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-100); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-800); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-100); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-800); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-100); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-800); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-blue-100); /* Text color for green tags. Adjusted for protanopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-blue-800); /* Background color for green tags. Adjusted for protanopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for green tags. Adjusted for protanopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-100); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-800); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-100); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-800); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-100); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-800); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-100); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-800); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-100); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-800); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-purple-100); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ - --canary-component-tag-purple-background: var(--canary-colors-purple-800); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-red-text: var(--canary-colors-red-100); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-800); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-violet-100); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ - --canary-component-tag-violet-background: var(--canary-colors-violet-800); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-100); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-800); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); - --canary-brand-color-50: var(--canary-colors-cyan-50); - --canary-brand-color-100: var(--canary-colors-cyan-100); - --canary-brand-color-200: var(--canary-colors-cyan-200); - --canary-brand-color-300: var(--canary-colors-cyan-300); - --canary-brand-color-400: var(--canary-colors-cyan-400); - --canary-brand-color-500: var(--canary-colors-cyan-500); - --canary-brand-color-600: var(--canary-colors-cyan-600); - --canary-brand-color-700: var(--canary-colors-cyan-700); - --canary-brand-color-800: var(--canary-colors-cyan-800); - --canary-brand-color-900: var(--canary-colors-cyan-900); - --canary-brand-color-950: var(--canary-colors-cyan-950); - --canary-brand-on-color-50: var(--canary-colors-chrome-950); - --canary-brand-on-color-100: var(--canary-colors-chrome-950); - --canary-brand-on-color-200: var(--canary-colors-chrome-950); - --canary-brand-on-color-300: var(--canary-colors-chrome-950); - --canary-brand-on-color-400: var(--canary-colors-chrome-950); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-white); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-200); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-300); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-dark-high-contrast-tritanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-high-contrast-tritanopia-desktop-gitness.css deleted file mode 100644 index 4d3ecd41f1..0000000000 --- a/packages/core-design-system/src/styles/source-dark-high-contrast-tritanopia-desktop-gitness.css +++ /dev/null @@ -1,492 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:12 GMT - * Copyright (c) Harness. - */ - -.source-dark-high-contrast-tritanopia-desktop-gitness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-pure-black); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-1000); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-950); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-50); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-200); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-400); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-colors-cyan-200); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-cyan-200); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-200); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-orange-200); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-200); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-700); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-800) l c h / 0.7); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-colors-cyan-300); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-cyan-300); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-300); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-orange-300); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-700); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-950); - --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-cyan-200); /* Text color for success badges. Communicates positive status through readable cyan text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-orange-200); /* Text color for warning badges. Signals caution states with readable orange text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-orange-300) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-cyan-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-cyan-200); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-cyan-300); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-sidebar-logo-icon: var(--canary-colors-cyan-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-progress: var(--canary-colors-cyan-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-track-segments-progress: var(--canary-colors-cyan-600); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-orange-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-100); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-800); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-100); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-800); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-100); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-800); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-cyan-100); /* Text color for green tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-cyan-800); /* Background color for green tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-100); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-800); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-100); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-800); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-100); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-800); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-100); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-800); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-100); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-800); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-cyan-100); /* Text color for purple tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-purple-background: var(--canary-colors-cyan-800); /* Background color for purple tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-red-text: var(--canary-colors-red-100); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-800); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-cyan-100); /* Text color for violet tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-violet-background: var(--canary-colors-cyan-800); /* Background color for violet tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for violet tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-yellow-text: var(--canary-colors-orange-100); /* Text color for yellow tags, replaced with orange for tritanopia visibility. */ - --canary-component-tag-yellow-background: var(--canary-colors-orange-800); /* Background color for yellow tags, replaced with orange for tritanopia visibility. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for yellow tags, replaced with orange for tritanopia visibility. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-orange-100); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); - --canary-brand-color-50: var(--canary-colors-chrome-150); - --canary-brand-color-100: var(--canary-colors-chrome-150); - --canary-brand-color-200: var(--canary-colors-chrome-150); - --canary-brand-color-300: var(--canary-colors-chrome-150); - --canary-brand-color-400: var(--canary-colors-chrome-150); - --canary-brand-color-500: var(--canary-colors-chrome-900); - --canary-brand-color-600: var(--canary-colors-chrome-150); - --canary-brand-color-700: var(--canary-colors-chrome-900); - --canary-brand-color-800: var(--canary-colors-chrome-900); - --canary-brand-color-900: var(--canary-colors-chrome-900); - --canary-brand-color-950: var(--canary-colors-chrome-900); - --canary-brand-on-color-50: var(--canary-colors-pure-black); - --canary-brand-on-color-100: var(--canary-colors-pure-black); - --canary-brand-on-color-200: var(--canary-colors-pure-black); - --canary-brand-on-color-300: var(--canary-colors-pure-black); - --canary-brand-on-color-400: var(--canary-colors-pure-black); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-black); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with cyan. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags, replaced with orange. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-dark-high-contrast-tritanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-high-contrast-tritanopia-desktop-harness.css deleted file mode 100644 index 025b9909d0..0000000000 --- a/packages/core-design-system/src/styles/source-dark-high-contrast-tritanopia-desktop-harness.css +++ /dev/null @@ -1,492 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:11 GMT - * Copyright (c) Harness. - */ - -.source-dark-high-contrast-tritanopia-desktop-harness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-pure-black); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-1000); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-950); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-50); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-200); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-400); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-colors-cyan-200); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-cyan-200); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-200); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-orange-200); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-200); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-700); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-800) l c h / 0.7); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-colors-cyan-300); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-cyan-300); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-300); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-orange-300); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-700); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-950); - --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-cyan-200); /* Text color for success badges. Communicates positive status through readable cyan text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-orange-200); /* Text color for warning badges. Signals caution states with readable orange text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-orange-300) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-cyan-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-cyan-200); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-cyan-300); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-sidebar-logo-icon: var(--canary-colors-cyan-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-progress: var(--canary-colors-cyan-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-track-segments-progress: var(--canary-colors-cyan-600); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-orange-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-100); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-800); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-100); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-800); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-100); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-800); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-cyan-100); /* Text color for green tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-cyan-800); /* Background color for green tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-100); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-800); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-100); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-800); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-100); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-800); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-100); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-800); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-100); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-800); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-cyan-100); /* Text color for purple tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-purple-background: var(--canary-colors-cyan-800); /* Background color for purple tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-red-text: var(--canary-colors-red-100); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-800); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-cyan-100); /* Text color for violet tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-violet-background: var(--canary-colors-cyan-800); /* Background color for violet tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for violet tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-yellow-text: var(--canary-colors-orange-100); /* Text color for yellow tags, replaced with orange for tritanopia visibility. */ - --canary-component-tag-yellow-background: var(--canary-colors-orange-800); /* Background color for yellow tags, replaced with orange for tritanopia visibility. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for yellow tags, replaced with orange for tritanopia visibility. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-orange-100); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); - --canary-brand-color-50: var(--canary-colors-cyan-50); - --canary-brand-color-100: var(--canary-colors-cyan-100); - --canary-brand-color-200: var(--canary-colors-cyan-200); - --canary-brand-color-300: var(--canary-colors-cyan-300); - --canary-brand-color-400: var(--canary-colors-cyan-400); - --canary-brand-color-500: var(--canary-colors-cyan-500); - --canary-brand-color-600: var(--canary-colors-cyan-600); - --canary-brand-color-700: var(--canary-colors-cyan-700); - --canary-brand-color-800: var(--canary-colors-cyan-800); - --canary-brand-color-900: var(--canary-colors-cyan-900); - --canary-brand-color-950: var(--canary-colors-cyan-950); - --canary-brand-on-color-50: var(--canary-colors-chrome-950); - --canary-brand-on-color-100: var(--canary-colors-chrome-950); - --canary-brand-on-color-200: var(--canary-colors-chrome-950); - --canary-brand-on-color-300: var(--canary-colors-chrome-950); - --canary-brand-on-color-400: var(--canary-colors-chrome-950); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-white); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with cyan. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags, replaced with orange. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-dark-protanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-protanopia-desktop-gitness.css deleted file mode 100644 index 6e908f2351..0000000000 --- a/packages/core-design-system/src/styles/source-dark-protanopia-desktop-gitness.css +++ /dev/null @@ -1,492 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:06:56 GMT - * Copyright (c) Harness. - */ - -.source-dark-protanopia-desktop-gitness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-chrome-1000); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-950); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-900); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-50); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-300); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-500); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-blue-200); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-100); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-200); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-300); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-850); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-850) l c h / 0.7); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-blue-400); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-400); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-400); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-700); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-950); - --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-blue-200); /* Text color for success badges. Communicates positive status through readable blue text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-blue-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-purple-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-blue-200); /* Text color for success buttons. Communicates positive actions through readable blue text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-blue-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-blue-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-blue-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Blue background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-blue-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-purple-300); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-blue-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-blue-300); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-200); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-200); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-200); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-blue-200); /* Text color for green tags. Adjusted for protanopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-blue-900); /* Background color for green tags. Adjusted for protanopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for green tags. Adjusted for protanopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-200); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-200); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-200); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-200); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-200); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-purple-200); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ - --canary-component-tag-purple-background: var(--canary-colors-purple-900); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-red-text: var(--canary-colors-red-200); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-violet-200); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ - --canary-component-tag-violet-background: var(--canary-colors-violet-900); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-200); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); - --canary-brand-color-50: var(--canary-colors-chrome-150); - --canary-brand-color-100: var(--canary-colors-chrome-150); - --canary-brand-color-200: var(--canary-colors-chrome-150); - --canary-brand-color-300: var(--canary-colors-chrome-150); - --canary-brand-color-400: var(--canary-colors-chrome-150); - --canary-brand-color-500: var(--canary-colors-chrome-900); - --canary-brand-color-600: var(--canary-colors-chrome-150); - --canary-brand-color-700: var(--canary-colors-chrome-900); - --canary-brand-color-800: var(--canary-colors-chrome-900); - --canary-brand-color-900: var(--canary-colors-chrome-900); - --canary-brand-color-950: var(--canary-colors-chrome-900); - --canary-brand-on-color-50: var(--canary-colors-pure-black); - --canary-brand-on-color-100: var(--canary-colors-pure-black); - --canary-brand-on-color-200: var(--canary-colors-pure-black); - --canary-brand-on-color-300: var(--canary-colors-pure-black); - --canary-brand-on-color-400: var(--canary-colors-pure-black); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-black); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-200); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-400); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-dark-protanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-protanopia-desktop-harness.css deleted file mode 100644 index 92509c46f7..0000000000 --- a/packages/core-design-system/src/styles/source-dark-protanopia-desktop-harness.css +++ /dev/null @@ -1,492 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:06:55 GMT - * Copyright (c) Harness. - */ - -.source-dark-protanopia-desktop-harness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-chrome-1000); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-950); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-900); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-50); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-300); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-500); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-blue-200); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-100); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-200); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-300); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-850); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-850) l c h / 0.7); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-blue-400); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-400); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-400); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-700); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-950); - --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-blue-200); /* Text color for success badges. Communicates positive status through readable blue text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-blue-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-200); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-purple-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-blue-200); /* Text color for success buttons. Communicates positive actions through readable blue text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-blue-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-blue-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-blue-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Blue background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-blue-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-purple-300); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-blue-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-blue-300); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-200); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-200); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-200); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-blue-200); /* Text color for green tags. Adjusted for protanopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-blue-900); /* Background color for green tags. Adjusted for protanopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for green tags. Adjusted for protanopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-200); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-200); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-200); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-200); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-200); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-purple-200); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ - --canary-component-tag-purple-background: var(--canary-colors-purple-900); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-950); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-red-text: var(--canary-colors-red-200); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-violet-200); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ - --canary-component-tag-violet-background: var(--canary-colors-violet-900); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-950); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-200); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-900); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-950); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); - --canary-brand-color-50: var(--canary-colors-cyan-50); - --canary-brand-color-100: var(--canary-colors-cyan-100); - --canary-brand-color-200: var(--canary-colors-cyan-200); - --canary-brand-color-300: var(--canary-colors-cyan-300); - --canary-brand-color-400: var(--canary-colors-cyan-400); - --canary-brand-color-500: var(--canary-colors-cyan-500); - --canary-brand-color-600: var(--canary-colors-cyan-600); - --canary-brand-color-700: var(--canary-colors-cyan-700); - --canary-brand-color-800: var(--canary-colors-cyan-800); - --canary-brand-color-900: var(--canary-colors-cyan-900); - --canary-brand-color-950: var(--canary-colors-cyan-950); - --canary-brand-on-color-50: var(--canary-colors-chrome-950); - --canary-brand-on-color-100: var(--canary-colors-chrome-950); - --canary-brand-on-color-200: var(--canary-colors-chrome-950); - --canary-brand-on-color-300: var(--canary-colors-chrome-950); - --canary-brand-on-color-400: var(--canary-colors-chrome-950); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-white); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-200); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-400); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-dark-tritanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-dark-tritanopia-desktop-gitness.css deleted file mode 100644 index e491fbfcf2..0000000000 --- a/packages/core-design-system/src/styles/source-dark-tritanopia-desktop-gitness.css +++ /dev/null @@ -1,492 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:09 GMT - * Copyright (c) Harness. - */ - -.source-dark-tritanopia-desktop-gitness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-chrome-1000); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-950); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-900); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-50); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-300); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-500); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-cyan-200); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-200); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-orange-200); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-300); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-850); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-850) l c h / 0.7); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-cyan-500); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-400); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-orange-400); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-700); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-950); - --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-cyan-200); /* Text color for success badges. Communicates positive status through readable cyan text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-orange-200); /* Text color for warning badges. Signals caution states with readable orange text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-cyan-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-cyan-200); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-cyan-300); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-orange-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-200); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-200); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-200); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-cyan-200); /* Text color for green tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-cyan-900); /* Background color for green tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-200); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-200); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-200); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-200); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-200); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-cyan-200); /* Text color for purple tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-purple-background: var(--canary-colors-cyan-900); /* Background color for purple tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-red-text: var(--canary-colors-red-200); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-cyan-200); /* Text color for violet tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-violet-background: var(--canary-colors-cyan-900); /* Background color for violet tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for violet tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-yellow-text: var(--canary-colors-orange-200); /* Text color for yellow tags, replaced with orange for tritanopia visibility. */ - --canary-component-tag-yellow-background: var(--canary-colors-orange-900); /* Background color for yellow tags, replaced with orange for tritanopia visibility. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for yellow tags, replaced with orange for tritanopia visibility. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-orange-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); - --canary-brand-color-50: var(--canary-colors-chrome-150); - --canary-brand-color-100: var(--canary-colors-chrome-150); - --canary-brand-color-200: var(--canary-colors-chrome-150); - --canary-brand-color-300: var(--canary-colors-chrome-150); - --canary-brand-color-400: var(--canary-colors-chrome-150); - --canary-brand-color-500: var(--canary-colors-chrome-900); - --canary-brand-color-600: var(--canary-colors-chrome-150); - --canary-brand-color-700: var(--canary-colors-chrome-900); - --canary-brand-color-800: var(--canary-colors-chrome-900); - --canary-brand-color-900: var(--canary-colors-chrome-900); - --canary-brand-color-950: var(--canary-colors-chrome-900); - --canary-brand-on-color-50: var(--canary-colors-pure-black); - --canary-brand-on-color-100: var(--canary-colors-pure-black); - --canary-brand-on-color-200: var(--canary-colors-pure-black); - --canary-brand-on-color-300: var(--canary-colors-pure-black); - --canary-brand-on-color-400: var(--canary-colors-pure-black); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-black); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-200); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-400); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with cyan. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags, replaced with orange. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-dark-tritanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-dark-tritanopia-desktop-harness.css deleted file mode 100644 index 49515df5c7..0000000000 --- a/packages/core-design-system/src/styles/source-dark-tritanopia-desktop-harness.css +++ /dev/null @@ -1,492 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:07 GMT - * Copyright (c) Harness. - */ - -.source-dark-tritanopia-desktop-harness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-chrome-1000); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-950); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-900); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-50); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-300); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-500); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-cyan-200); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-200); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-orange-200); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-300); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-850); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-850) l c h / 0.7); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-cyan-500); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-400); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-orange-400); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-pure-white) l c h / 0.08); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-pure-white) l c h / 0.1); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-700); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-950); - --canary-component-alert-danger-title: var(--canary-colors-red-100); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-200); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-850); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-300) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-cyan-200); /* Text color for success badges. Communicates positive status through readable cyan text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-red-200); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-orange-200); /* Text color for warning badges. Signals caution states with readable orange text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-200); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-cyan-200); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-850); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-cyan-200); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-500) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.2); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-red-200); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-chrome-900); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-cyan-300); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-850) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-pure-black); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-850); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-950); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-pure-white); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-pure-white); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-850); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-600); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-850); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-300); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-orange-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-300); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-950); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-pure-white); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-200); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-900); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-950); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-200); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-900); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-950); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-200); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-900); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-cyan-200); /* Text color for green tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-cyan-900); /* Background color for green tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for green tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-200); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-900); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-950); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-200); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-900); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-950); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-200); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-900); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-950); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-200); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-900); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-200); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-900); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-950); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-cyan-200); /* Text color for purple tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-purple-background: var(--canary-colors-cyan-900); /* Background color for purple tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for purple tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-red-text: var(--canary-colors-red-200); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-900); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-950); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-cyan-200); /* Text color for violet tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-violet-background: var(--canary-colors-cyan-900); /* Background color for violet tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-cyan-950); /* Subtle background variation for violet tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-yellow-text: var(--canary-colors-orange-200); /* Text color for yellow tags, replaced with orange for tritanopia visibility. */ - --canary-component-tag-yellow-background: var(--canary-colors-orange-900); /* Background color for yellow tags, replaced with orange for tritanopia visibility. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-orange-950); /* Subtle background variation for yellow tags, replaced with orange for tritanopia visibility. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-200); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-850); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-900); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-red-700); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-pure-black) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-pure-black) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-pure-black) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-pure-white) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-100); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-200); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-orange-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-850); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-chrome-800); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-200); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-800) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-200); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-pure-white); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-300); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-900); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-850); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-chrome-950); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-800); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-chrome-850); - --canary-brand-color-50: var(--canary-colors-cyan-50); - --canary-brand-color-100: var(--canary-colors-cyan-100); - --canary-brand-color-200: var(--canary-colors-cyan-200); - --canary-brand-color-300: var(--canary-colors-cyan-300); - --canary-brand-color-400: var(--canary-colors-cyan-400); - --canary-brand-color-500: var(--canary-colors-cyan-500); - --canary-brand-color-600: var(--canary-colors-cyan-600); - --canary-brand-color-700: var(--canary-colors-cyan-700); - --canary-brand-color-800: var(--canary-colors-cyan-800); - --canary-brand-color-900: var(--canary-colors-cyan-900); - --canary-brand-color-950: var(--canary-colors-cyan-950); - --canary-brand-on-color-50: var(--canary-colors-chrome-950); - --canary-brand-on-color-100: var(--canary-colors-chrome-950); - --canary-brand-on-color-200: var(--canary-colors-chrome-950); - --canary-brand-on-color-300: var(--canary-colors-chrome-950); - --canary-brand-on-color-400: var(--canary-colors-chrome-950); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-white); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-200); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-400); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-600); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-600); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-1); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-border: var(--canary-border-3); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-border-3); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: var(--canary-state-hover); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: var(--canary-state-selected); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-text-2); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-text-3); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-text-1); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-text-1); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-text-1); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-component-sidebar-background); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-border-2); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-text-3); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-background-3); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-border-2); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-text-3); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-text-1); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-text-3); /* User data in the footer sidebar navigation menu. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-300); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-800); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-background-2); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with cyan. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags, replaced with orange. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - --canary-component-tooltip-border: var(--canary-border-3); /* Border color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-light-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-desktop-gitness.css deleted file mode 100644 index 8ee7f3b7e8..0000000000 --- a/packages/core-design-system/src/styles/source-light-desktop-gitness.css +++ /dev/null @@ -1,491 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:06:53 GMT - * Copyright (c) Harness. - */ - -.source-light-desktop-gitness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-chrome-50); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-pure-white); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-50); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-950); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-850); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-700); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-green-600); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-600); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-500); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-800); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-100); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-green-400); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-400); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-500); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.15); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-500); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-150); - --canary-component-alert-danger-title: var(--canary-colors-red-800); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-green-600); /* Text color for success badges. Communicates positive status through readable green text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-green-400) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-green-200) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-red-600); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-600); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-400) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-600); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-purple-600); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-400) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-200); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-green-600); /* Text color for success buttons. Communicates positive actions through readable green text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-green-200) l c h / 0.12); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-green-400) l c h / 0.25); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-green-200) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-green-200) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-red-600); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.12); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-green-500) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-green-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-green-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-purple-600); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-400); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-green-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-separator-background: var(--canary-border-width-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-900); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-green-300); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-50); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-chrome-900); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-600); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-600); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-green-600); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ - --canary-component-tag-green-background: var(--canary-colors-green-100); /* Background color for green tags. Creates a distinct surface with green theme styling. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-green-50); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-600); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-600); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-600); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-purple-600); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ - --canary-component-tag-purple-background: var(--canary-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-red-text: var(--canary-colors-red-600); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-violet-600); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ - --canary-component-tag-violet-background: var(--canary-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-background: var(--canary-colors-red-200); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-300); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); - --canary-brand-color-50: var(--canary-colors-chrome-150); - --canary-brand-color-100: var(--canary-colors-chrome-150); - --canary-brand-color-200: var(--canary-colors-chrome-150); - --canary-brand-color-300: var(--canary-colors-chrome-150); - --canary-brand-color-400: var(--canary-colors-chrome-150); - --canary-brand-color-500: var(--canary-colors-chrome-900); - --canary-brand-color-600: var(--canary-colors-chrome-150); - --canary-brand-color-700: var(--canary-colors-chrome-900); - --canary-brand-color-800: var(--canary-colors-chrome-900); - --canary-brand-color-900: var(--canary-colors-chrome-900); - --canary-brand-color-950: var(--canary-colors-chrome-900); - --canary-brand-on-color-50: var(--canary-colors-pure-black); - --canary-brand-on-color-100: var(--canary-colors-pure-black); - --canary-brand-on-color-200: var(--canary-colors-pure-black); - --canary-brand-on-color-300: var(--canary-colors-pure-black); - --canary-brand-on-color-400: var(--canary-colors-pure-black); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-black); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-500); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-500); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-light-desktop-harness.css b/packages/core-design-system/src/styles/source-light-desktop-harness.css deleted file mode 100644 index 1accb4853f..0000000000 --- a/packages/core-design-system/src/styles/source-light-desktop-harness.css +++ /dev/null @@ -1,491 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:06:52 GMT - * Copyright (c) Harness. - */ - -.source-light-desktop-harness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-chrome-50); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-pure-white); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-50); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-950); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-850); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-700); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-green-600); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-600); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-500); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-800); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-100); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-green-400); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-400); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-500); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.15); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-500); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-150); - --canary-component-alert-danger-title: var(--canary-colors-red-800); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-green-600); /* Text color for success badges. Communicates positive status through readable green text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-green-400) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-green-200) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-red-600); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-600); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-400) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-600); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-purple-600); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-400) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-200); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-green-600); /* Text color for success buttons. Communicates positive actions through readable green text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-green-200) l c h / 0.12); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-green-400) l c h / 0.25); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-green-200) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-green-200) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-red-600); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.12); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-green-500) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-green-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-green-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-purple-600); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-400); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-green-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-separator-background: var(--canary-border-width-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-900); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-green-300); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-50); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-chrome-900); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-600); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-600); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-green-600); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ - --canary-component-tag-green-background: var(--canary-colors-green-100); /* Background color for green tags. Creates a distinct surface with green theme styling. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-green-50); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-600); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-600); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-600); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-purple-600); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ - --canary-component-tag-purple-background: var(--canary-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-red-text: var(--canary-colors-red-600); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-violet-600); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ - --canary-component-tag-violet-background: var(--canary-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-background: var(--canary-colors-red-200); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-300); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); - --canary-brand-color-50: var(--canary-colors-cyan-50); - --canary-brand-color-100: var(--canary-colors-cyan-100); - --canary-brand-color-200: var(--canary-colors-cyan-200); - --canary-brand-color-300: var(--canary-colors-cyan-300); - --canary-brand-color-400: var(--canary-colors-cyan-400); - --canary-brand-color-500: var(--canary-colors-cyan-500); - --canary-brand-color-600: var(--canary-colors-cyan-600); - --canary-brand-color-700: var(--canary-colors-cyan-700); - --canary-brand-color-800: var(--canary-colors-cyan-800); - --canary-brand-color-900: var(--canary-colors-cyan-900); - --canary-brand-color-950: var(--canary-colors-cyan-950); - --canary-brand-on-color-50: var(--canary-colors-chrome-950); - --canary-brand-on-color-100: var(--canary-colors-chrome-950); - --canary-brand-on-color-200: var(--canary-colors-chrome-950); - --canary-brand-on-color-300: var(--canary-colors-chrome-950); - --canary-brand-on-color-400: var(--canary-colors-chrome-950); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-white); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-500); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-500); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-light-deuteranopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-deuteranopia-desktop-gitness.css deleted file mode 100644 index 85b3758d23..0000000000 --- a/packages/core-design-system/src/styles/source-light-deuteranopia-desktop-gitness.css +++ /dev/null @@ -1,491 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:24 GMT - * Copyright (c) Harness. - */ - -.source-light-deuteranopia-desktop-gitness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-chrome-50); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-pure-white); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-50); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-950); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-850); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-700); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-cyan-600); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-orange-600); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-500); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-800); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-100); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-cyan-400); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-orange-400); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-500); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.15); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-500); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-150); - --canary-component-alert-danger-title: var(--canary-colors-orange-800); /* Text color for danger alerts. Communicates critical information through high-contrast orange text. */ - --canary-component-alert-danger-description: var(--canary-colors-orange-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-cyan-600); /* Text color for success badges. Communicates positive status through readable cyan text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-orange-600); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-600); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-400) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-600); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-cyan-600); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-400) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-200); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-cyan-600); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.12); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.25); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-200) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-200) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-orange-600); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-orange-300) l c h / 0.12); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-orange-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-orange-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-orange-500) l c h / 0.12); /* Orange background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-orange-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-orange-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-blue-600); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-orange-400); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-separator-background: var(--canary-border-width-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-900); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-orange-400); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-50); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-chrome-900); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-600); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-600); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-cyan-600); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-cyan-100); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-600); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-600); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-600); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-cyan-600); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-purple-background: var(--canary-colors-cyan-100); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-red-text: var(--canary-colors-orange-600); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-red-background: var(--canary-colors-orange-100); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-violet-text: var(--canary-colors-blue-600); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-violet-background: var(--canary-colors-blue-100); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-background: var(--canary-colors-orange-200); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-300); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); - --canary-brand-color-50: var(--canary-colors-chrome-150); - --canary-brand-color-100: var(--canary-colors-chrome-150); - --canary-brand-color-200: var(--canary-colors-chrome-150); - --canary-brand-color-300: var(--canary-colors-chrome-150); - --canary-brand-color-400: var(--canary-colors-chrome-150); - --canary-brand-color-500: var(--canary-colors-chrome-900); - --canary-brand-color-600: var(--canary-colors-chrome-150); - --canary-brand-color-700: var(--canary-colors-chrome-900); - --canary-brand-color-800: var(--canary-colors-chrome-900); - --canary-brand-color-900: var(--canary-colors-chrome-900); - --canary-brand-color-950: var(--canary-colors-chrome-900); - --canary-brand-on-color-50: var(--canary-colors-pure-black); - --canary-brand-on-color-100: var(--canary-colors-pure-black); - --canary-brand-on-color-200: var(--canary-colors-pure-black); - --canary-brand-on-color-300: var(--canary-colors-pure-black); - --canary-brand-on-color-400: var(--canary-colors-pure-black); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-black); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-500); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-500); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags, replaced with orange. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-light-deuteranopia-desktop-harness.css b/packages/core-design-system/src/styles/source-light-deuteranopia-desktop-harness.css deleted file mode 100644 index 5c8d52306a..0000000000 --- a/packages/core-design-system/src/styles/source-light-deuteranopia-desktop-harness.css +++ /dev/null @@ -1,491 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:23 GMT - * Copyright (c) Harness. - */ - -.source-light-deuteranopia-desktop-harness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-chrome-50); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-pure-white); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-50); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-950); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-850); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-700); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-cyan-600); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-orange-600); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-500); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-800); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-100); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-cyan-400); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-orange-400); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-500); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.15); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-500); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-150); - --canary-component-alert-danger-title: var(--canary-colors-orange-800); /* Text color for danger alerts. Communicates critical information through high-contrast orange text. */ - --canary-component-alert-danger-description: var(--canary-colors-orange-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-cyan-600); /* Text color for success badges. Communicates positive status through readable cyan text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-orange-600); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-600); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-400) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-600); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-cyan-600); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-400) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-200); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-cyan-600); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.12); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.25); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-200) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-200) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-orange-600); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-orange-300) l c h / 0.12); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-orange-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-orange-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-orange-500) l c h / 0.12); /* Orange background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-orange-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-orange-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-blue-600); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-orange-400); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-separator-background: var(--canary-border-width-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-900); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-orange-400); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-50); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-chrome-900); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-600); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-600); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-cyan-600); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-cyan-100); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-600); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-600); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-600); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-cyan-600); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-purple-background: var(--canary-colors-cyan-100); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-red-text: var(--canary-colors-orange-600); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-red-background: var(--canary-colors-orange-100); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-violet-text: var(--canary-colors-blue-600); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-violet-background: var(--canary-colors-blue-100); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-background: var(--canary-colors-orange-200); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-300); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); - --canary-brand-color-50: var(--canary-colors-cyan-50); - --canary-brand-color-100: var(--canary-colors-cyan-100); - --canary-brand-color-200: var(--canary-colors-cyan-200); - --canary-brand-color-300: var(--canary-colors-cyan-300); - --canary-brand-color-400: var(--canary-colors-cyan-400); - --canary-brand-color-500: var(--canary-colors-cyan-500); - --canary-brand-color-600: var(--canary-colors-cyan-600); - --canary-brand-color-700: var(--canary-colors-cyan-700); - --canary-brand-color-800: var(--canary-colors-cyan-800); - --canary-brand-color-900: var(--canary-colors-cyan-900); - --canary-brand-color-950: var(--canary-colors-cyan-950); - --canary-brand-on-color-50: var(--canary-colors-chrome-950); - --canary-brand-on-color-100: var(--canary-colors-chrome-950); - --canary-brand-on-color-200: var(--canary-colors-chrome-950); - --canary-brand-on-color-300: var(--canary-colors-chrome-950); - --canary-brand-on-color-400: var(--canary-colors-chrome-950); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-white); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-500); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-500); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags, replaced with orange. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-light-dimmer-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-dimmer-desktop-gitness.css deleted file mode 100644 index 1eca3b8291..0000000000 --- a/packages/core-design-system/src/styles/source-light-dimmer-desktop-gitness.css +++ /dev/null @@ -1,491 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:15 GMT - * Copyright (c) Harness. - */ - -.source-light-dimmer-desktop-gitness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-pure-white); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-pure-white); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-50); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-800); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-700); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-600); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-green-500); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-500); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-500); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-600); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: lch(from var(--canary-colors-chrome-100) l c h / 0.8); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-green-300); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-300); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-400); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.1); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.15); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-500); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-150); - --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.15); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-100); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.07); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.3); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-green-500); /* Text color for success badges. Communicates positive status through readable green text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-green-300) l c h / 0.3); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-green-200) l c h / 0.07); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-red-500); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.3); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.07); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-500); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.3); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.07); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-500); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.3); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.07); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-purple-500); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.3); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-300) l c h / 0.07); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-green-500); /* Text color for success buttons. Communicates positive actions through readable green text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-green-200) l c h / 0.08); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-green-300) l c h / 0.3); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-green-200) l c h / 0.1); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-green-200) l c h / 0.15); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-red-500); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.08); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.3); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.07); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-green-500) l c h / 0.08); /* Green background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-green-500) l c h / 0.12); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-green-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.08); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.08); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-purple-500); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-green-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-100); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-700); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-700); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-green-300); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-100); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-chrome-700); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.07); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-500); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-500); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-green-600); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ - --canary-component-tag-green-background: var(--canary-colors-green-100); /* Background color for green tags. Creates a distinct surface with green theme styling. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-green-50); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-500); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-500); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-500); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-purple-500); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ - --canary-component-tag-purple-background: var(--canary-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-red-text: var(--canary-colors-red-500); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-violet-500); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ - --canary-component-tag-violet-background: var(--canary-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-background: var(--canary-colors-red-100); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Light shadow color with 40% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Medium shadow color with 40% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Medium shadow color with 35% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Deep shadow color with 35% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.07); /* Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-300); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-300); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.3); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); - --canary-brand-color-50: var(--canary-colors-chrome-150); - --canary-brand-color-100: var(--canary-colors-chrome-150); - --canary-brand-color-200: var(--canary-colors-chrome-150); - --canary-brand-color-300: var(--canary-colors-chrome-150); - --canary-brand-color-400: var(--canary-colors-chrome-150); - --canary-brand-color-500: var(--canary-colors-chrome-900); - --canary-brand-color-600: var(--canary-colors-chrome-150); - --canary-brand-color-700: var(--canary-colors-chrome-900); - --canary-brand-color-800: var(--canary-colors-chrome-900); - --canary-brand-color-900: var(--canary-colors-chrome-900); - --canary-brand-color-950: var(--canary-colors-chrome-900); - --canary-brand-on-color-50: var(--canary-colors-pure-black); - --canary-brand-on-color-100: var(--canary-colors-pure-black); - --canary-brand-on-color-200: var(--canary-colors-pure-black); - --canary-brand-on-color-300: var(--canary-colors-pure-black); - --canary-brand-on-color-400: var(--canary-colors-pure-black); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-black); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-400); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-500); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-600); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-light-dimmer-desktop-harness.css b/packages/core-design-system/src/styles/source-light-dimmer-desktop-harness.css deleted file mode 100644 index 6827636722..0000000000 --- a/packages/core-design-system/src/styles/source-light-dimmer-desktop-harness.css +++ /dev/null @@ -1,491 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:14 GMT - * Copyright (c) Harness. - */ - -.source-light-dimmer-desktop-harness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-pure-white); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-pure-white); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-50); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-800); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-700); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-600); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-green-500); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-500); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-500); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-600); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: lch(from var(--canary-colors-chrome-100) l c h / 0.8); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-green-300); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-300); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-400); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.1); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.15); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-500); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-150); - --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.15); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-100); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.07); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.3); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-green-500); /* Text color for success badges. Communicates positive status through readable green text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-green-300) l c h / 0.3); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-green-200) l c h / 0.07); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-red-500); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.3); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.07); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-500); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.3); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.07); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-500); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.3); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.07); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-purple-500); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.3); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-300) l c h / 0.07); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-green-500); /* Text color for success buttons. Communicates positive actions through readable green text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-green-200) l c h / 0.08); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-green-300) l c h / 0.3); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-green-200) l c h / 0.1); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-green-200) l c h / 0.15); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-red-500); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.08); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.3); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.07); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-green-500) l c h / 0.08); /* Green background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-green-500) l c h / 0.12); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-green-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.08); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.08); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-purple-500); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-green-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-100); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-700); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-700); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-green-300); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-100); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-chrome-700); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.07); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-500); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-500); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-green-600); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ - --canary-component-tag-green-background: var(--canary-colors-green-100); /* Background color for green tags. Creates a distinct surface with green theme styling. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-green-50); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-500); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-500); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-500); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-purple-500); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ - --canary-component-tag-purple-background: var(--canary-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-red-text: var(--canary-colors-red-500); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-violet-500); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ - --canary-component-tag-violet-background: var(--canary-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-background: var(--canary-colors-red-100); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Light shadow color with 40% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Medium shadow color with 40% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Medium shadow color with 35% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Deep shadow color with 35% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.07); /* Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-300); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-300); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.3); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); - --canary-brand-color-50: var(--canary-colors-cyan-50); - --canary-brand-color-100: var(--canary-colors-cyan-100); - --canary-brand-color-200: var(--canary-colors-cyan-200); - --canary-brand-color-300: var(--canary-colors-cyan-300); - --canary-brand-color-400: var(--canary-colors-cyan-400); - --canary-brand-color-500: var(--canary-colors-cyan-500); - --canary-brand-color-600: var(--canary-colors-cyan-600); - --canary-brand-color-700: var(--canary-colors-cyan-700); - --canary-brand-color-800: var(--canary-colors-cyan-800); - --canary-brand-color-900: var(--canary-colors-cyan-900); - --canary-brand-color-950: var(--canary-colors-cyan-950); - --canary-brand-on-color-50: var(--canary-colors-chrome-950); - --canary-brand-on-color-100: var(--canary-colors-chrome-950); - --canary-brand-on-color-200: var(--canary-colors-chrome-950); - --canary-brand-on-color-300: var(--canary-colors-chrome-950); - --canary-brand-on-color-400: var(--canary-colors-chrome-950); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-white); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-400); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-500); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-600); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-light-dimmer-deuteranopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-dimmer-deuteranopia-desktop-gitness.css deleted file mode 100644 index 852767c3b3..0000000000 --- a/packages/core-design-system/src/styles/source-light-dimmer-deuteranopia-desktop-gitness.css +++ /dev/null @@ -1,491 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:25 GMT - * Copyright (c) Harness. - */ - -.source-light-dimmer-deuteranopia-desktop-gitness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-pure-white); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-pure-white); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-50); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-800); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-700); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-600); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-cyan-500); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-orange-500); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-500); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-600); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: lch(from var(--canary-colors-chrome-100) l c h / 0.8); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-cyan-300); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-orange-300); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-400); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.1); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.15); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-500); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-150); - --canary-component-alert-danger-title: var(--canary-colors-orange-700); /* Text color for danger alerts. Communicates critical information through high-contrast orange text. */ - --canary-component-alert-danger-description: var(--canary-colors-orange-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-orange-400) l c h / 0.15); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-100); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.07); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.3); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-cyan-500); /* Text color for success badges. Communicates positive status through readable cyan text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.3); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.07); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-orange-500); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.3); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-orange-300) l c h / 0.07); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-500); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.3); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.07); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-500); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.3); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.07); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-cyan-500); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.3); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-300) l c h / 0.07); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-cyan-500); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.08); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.3); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-200) l c h / 0.1); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-200) l c h / 0.15); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-orange-500); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-orange-300) l c h / 0.08); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.3); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-orange-300) l c h / 0.15); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-orange-300) l c h / 0.07); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.08); /* Cyan background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-orange-500) l c h / 0.08); /* Orange background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-orange-500) l c h / 0.12); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-orange-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.08); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-blue-500); /* Visited state color for text links, replaced with blue for deuteranopia visibility. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-orange-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-100); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-700); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-700); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-orange-400); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-100); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-chrome-700); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.07); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-500); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-500); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-cyan-600); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-cyan-100); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-500); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-500); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-500); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-cyan-500); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-purple-background: var(--canary-colors-cyan-100); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-red-text: var(--canary-colors-orange-500); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-red-background: var(--canary-colors-orange-100); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-violet-text: var(--canary-colors-blue-500); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-violet-background: var(--canary-colors-blue-100); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-background: var(--canary-colors-orange-100); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Light shadow color with 40% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Medium shadow color with 40% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Medium shadow color with 35% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Deep shadow color with 35% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.07); /* Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-orange-300); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-300); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.3); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); - --canary-brand-color-50: var(--canary-colors-chrome-150); - --canary-brand-color-100: var(--canary-colors-chrome-150); - --canary-brand-color-200: var(--canary-colors-chrome-150); - --canary-brand-color-300: var(--canary-colors-chrome-150); - --canary-brand-color-400: var(--canary-colors-chrome-150); - --canary-brand-color-500: var(--canary-colors-chrome-900); - --canary-brand-color-600: var(--canary-colors-chrome-150); - --canary-brand-color-700: var(--canary-colors-chrome-900); - --canary-brand-color-800: var(--canary-colors-chrome-900); - --canary-brand-color-900: var(--canary-colors-chrome-900); - --canary-brand-color-950: var(--canary-colors-chrome-900); - --canary-brand-on-color-50: var(--canary-colors-pure-black); - --canary-brand-on-color-100: var(--canary-colors-pure-black); - --canary-brand-on-color-200: var(--canary-colors-pure-black); - --canary-brand-on-color-300: var(--canary-colors-pure-black); - --canary-brand-on-color-400: var(--canary-colors-pure-black); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-black); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-400); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-500); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-600); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags, replaced with orange. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-light-dimmer-deuteranopia-desktop-harness.css b/packages/core-design-system/src/styles/source-light-dimmer-deuteranopia-desktop-harness.css deleted file mode 100644 index bfee67b4fe..0000000000 --- a/packages/core-design-system/src/styles/source-light-dimmer-deuteranopia-desktop-harness.css +++ /dev/null @@ -1,491 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:25 GMT - * Copyright (c) Harness. - */ - -.source-light-dimmer-deuteranopia-desktop-harness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-pure-white); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-pure-white); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-50); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-800); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-700); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-600); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-cyan-500); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-orange-500); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-500); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-600); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: lch(from var(--canary-colors-chrome-100) l c h / 0.8); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-cyan-300); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-orange-300); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-400); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.1); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.15); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-500); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-150); - --canary-component-alert-danger-title: var(--canary-colors-orange-700); /* Text color for danger alerts. Communicates critical information through high-contrast orange text. */ - --canary-component-alert-danger-description: var(--canary-colors-orange-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-orange-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-orange-400) l c h / 0.15); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-100); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.07); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.3); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-cyan-500); /* Text color for success badges. Communicates positive status through readable cyan text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.3); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.07); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-orange-500); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.3); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-orange-300) l c h / 0.07); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-500); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.3); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.07); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-500); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.3); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.07); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-cyan-500); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.3); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-300) l c h / 0.07); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-cyan-500); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.08); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.3); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-200) l c h / 0.1); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-200) l c h / 0.15); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-orange-500); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-orange-300) l c h / 0.08); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-orange-300) l c h / 0.3); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-orange-300) l c h / 0.15); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-orange-300) l c h / 0.07); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.08); /* Cyan background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-orange-500) l c h / 0.08); /* Orange background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-orange-500) l c h / 0.12); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-orange-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.08); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-blue-500); /* Visited state color for text links, replaced with blue for deuteranopia visibility. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-orange-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-100); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-700); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-700); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-orange-400); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-100); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-chrome-700); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.07); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-500); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-500); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-cyan-600); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-cyan-100); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-500); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-500); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-500); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-cyan-500); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-purple-background: var(--canary-colors-cyan-100); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-red-text: var(--canary-colors-orange-500); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-red-background: var(--canary-colors-orange-100); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-violet-text: var(--canary-colors-blue-500); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-violet-background: var(--canary-colors-blue-100); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-background: var(--canary-colors-orange-100); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Light shadow color with 40% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Medium shadow color with 40% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Medium shadow color with 35% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Deep shadow color with 35% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.07); /* Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-orange-300); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-300); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.3); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); - --canary-brand-color-50: var(--canary-colors-cyan-50); - --canary-brand-color-100: var(--canary-colors-cyan-100); - --canary-brand-color-200: var(--canary-colors-cyan-200); - --canary-brand-color-300: var(--canary-colors-cyan-300); - --canary-brand-color-400: var(--canary-colors-cyan-400); - --canary-brand-color-500: var(--canary-colors-cyan-500); - --canary-brand-color-600: var(--canary-colors-cyan-600); - --canary-brand-color-700: var(--canary-colors-cyan-700); - --canary-brand-color-800: var(--canary-colors-cyan-800); - --canary-brand-color-900: var(--canary-colors-cyan-900); - --canary-brand-color-950: var(--canary-colors-cyan-950); - --canary-brand-on-color-50: var(--canary-colors-chrome-950); - --canary-brand-on-color-100: var(--canary-colors-chrome-950); - --canary-brand-on-color-200: var(--canary-colors-chrome-950); - --canary-brand-on-color-300: var(--canary-colors-chrome-950); - --canary-brand-on-color-400: var(--canary-colors-chrome-950); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-white); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-400); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-500); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-600); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags, replaced with orange. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-light-dimmer-protanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-dimmer-protanopia-desktop-gitness.css deleted file mode 100644 index e127095669..0000000000 --- a/packages/core-design-system/src/styles/source-light-dimmer-protanopia-desktop-gitness.css +++ /dev/null @@ -1,491 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:20 GMT - * Copyright (c) Harness. - */ - -.source-light-dimmer-protanopia-desktop-gitness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-pure-white); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-pure-white); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-50); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-800); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-700); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-600); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. Using blue instead of green for protanopia visibility. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-blue-500); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-500); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-500); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-600); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: lch(from var(--canary-colors-chrome-100) l c h / 0.8); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); - /** - * Border color for success containers. Reinforces positive status through visual framing. Using blue instead of green for protanopia visibility. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-blue-300); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-300); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-400); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.1); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.15); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-500); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-150); - --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.15); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-100); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.07); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.3); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-blue-500); /* Text color for success badges. Communicates positive status through readable blue text. Using blue instead of green for protanopia visibility. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.3); /* Border color for success badges. Provides subtle definition for success state indicators. Using blue instead of green for protanopia visibility. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-blue-200) l c h / 0.07); /* Background color for success badges. Creates a subtle but recognizable success indicator. Using blue instead of green for protanopia visibility. */ - --canary-component-badge-danger-text: var(--canary-colors-red-500); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.3); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.07); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-500); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.3); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.07); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-500); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.3); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.07); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-purple-500); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.3); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-300) l c h / 0.07); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-blue-500); /* Text color for success buttons. Communicates positive actions through readable blue text. Using blue instead of green for protanopia visibility. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-blue-200) l c h / 0.08); /* Background color for success buttons. Creates subtle but recognizable positive action styling. Using blue instead of green for protanopia visibility. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.3); /* Border color for success buttons. Provides definition for positive action buttons. Using blue instead of green for protanopia visibility. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-blue-200) l c h / 0.1); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. Using blue instead of green for protanopia visibility. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-blue-200) l c h / 0.15); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. Using blue instead of green for protanopia visibility. */ - --canary-component-btn-danger-text: var(--canary-colors-red-500); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.08); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.3); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.07); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-blue-500) l c h / 0.08); /* Blue background highlighting newly added code lines while maintaining readability. Using blue instead of green for protanopia visibility. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for line numbers of added code, providing visual connection to added content. Using blue instead of green for protanopia visibility. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-blue-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within added lines. Using blue instead of green for protanopia visibility. */ - --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.08); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.08); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-purple-500); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-blue-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. Using blue instead of green for protanopia visibility. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-100); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-700); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-700); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-blue-300); /* Color for success status indicators. Communicates completed or positive states. Using blue instead of green for protanopia visibility. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-100); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-chrome-700); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.07); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-500); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-500); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-blue-500); /* Text color for green tags. Using blue instead of green for protanopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-blue-100); /* Background color for green tags. Using blue instead of green for protanopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for green tags. Using blue instead of green for protanopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-500); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-blue-500); /* Text color for lime tags. Using blue instead of lime/green for protanopia visibility. */ - --canary-component-tag-lime-background: var(--canary-colors-blue-100); /* Background color for lime tags. Using blue instead of lime/green for protanopia visibility. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for lime tags. Using blue instead of lime/green for protanopia visibility. */ - --canary-component-tag-mint-text: var(--canary-colors-blue-500); /* Text color for mint tags. Using blue instead of mint/green for protanopia visibility. */ - --canary-component-tag-mint-background: var(--canary-colors-blue-100); /* Background color for mint tags. Using blue instead of mint/green for protanopia visibility. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for mint tags. Using blue instead of mint/green for protanopia visibility. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-500); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-500); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-purple-500); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ - --canary-component-tag-purple-background: var(--canary-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-red-text: var(--canary-colors-red-500); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-violet-500); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ - --canary-component-tag-violet-background: var(--canary-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-background: var(--canary-colors-red-100); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Light shadow color with 40% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Medium shadow color with 40% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Medium shadow color with 35% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Deep shadow color with 35% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.07); /* Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-300); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-300); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.3); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); - --canary-brand-color-50: var(--canary-colors-chrome-150); - --canary-brand-color-100: var(--canary-colors-chrome-150); - --canary-brand-color-200: var(--canary-colors-chrome-150); - --canary-brand-color-300: var(--canary-colors-chrome-150); - --canary-brand-color-400: var(--canary-colors-chrome-150); - --canary-brand-color-500: var(--canary-colors-chrome-900); - --canary-brand-color-600: var(--canary-colors-chrome-150); - --canary-brand-color-700: var(--canary-colors-chrome-900); - --canary-brand-color-800: var(--canary-colors-chrome-900); - --canary-brand-color-900: var(--canary-colors-chrome-900); - --canary-brand-color-950: var(--canary-colors-chrome-900); - --canary-brand-on-color-50: var(--canary-colors-pure-black); - --canary-brand-on-color-100: var(--canary-colors-pure-black); - --canary-brand-on-color-200: var(--canary-colors-pure-black); - --canary-brand-on-color-300: var(--canary-colors-pure-black); - --canary-brand-on-color-400: var(--canary-colors-pure-black); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-black); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-400); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-500); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-600); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. Using blue instead of green for protanopia visibility. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. Using blue instead of lime/green for protanopia visibility. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. Using blue instead of mint/green for protanopia visibility. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-light-dimmer-protanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-light-dimmer-protanopia-desktop-harness.css deleted file mode 100644 index 9025635d1f..0000000000 --- a/packages/core-design-system/src/styles/source-light-dimmer-protanopia-desktop-harness.css +++ /dev/null @@ -1,491 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:20 GMT - * Copyright (c) Harness. - */ - -.source-light-dimmer-protanopia-desktop-harness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-pure-white); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-pure-white); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-50); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-800); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-700); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-600); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. Using blue instead of green for protanopia visibility. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-blue-500); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-500); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-500); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-600); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: lch(from var(--canary-colors-chrome-100) l c h / 0.8); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); - /** - * Border color for success containers. Reinforces positive status through visual framing. Using blue instead of green for protanopia visibility. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-blue-300); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-300); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-400); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.1); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.15); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-500); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-150); - --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.15); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-100); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.07); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.3); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-blue-500); /* Text color for success badges. Communicates positive status through readable blue text. Using blue instead of green for protanopia visibility. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.3); /* Border color for success badges. Provides subtle definition for success state indicators. Using blue instead of green for protanopia visibility. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-blue-200) l c h / 0.07); /* Background color for success badges. Creates a subtle but recognizable success indicator. Using blue instead of green for protanopia visibility. */ - --canary-component-badge-danger-text: var(--canary-colors-red-500); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.3); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.07); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-500); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-300) l c h / 0.3); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.07); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-500); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.3); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.07); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-purple-500); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-300) l c h / 0.3); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-300) l c h / 0.07); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-blue-500); /* Text color for success buttons. Communicates positive actions through readable blue text. Using blue instead of green for protanopia visibility. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-blue-200) l c h / 0.08); /* Background color for success buttons. Creates subtle but recognizable positive action styling. Using blue instead of green for protanopia visibility. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-blue-300) l c h / 0.3); /* Border color for success buttons. Provides definition for positive action buttons. Using blue instead of green for protanopia visibility. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-blue-200) l c h / 0.1); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. Using blue instead of green for protanopia visibility. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-blue-200) l c h / 0.15); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. Using blue instead of green for protanopia visibility. */ - --canary-component-btn-danger-text: var(--canary-colors-red-500); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.08); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.3); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.07); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-blue-500) l c h / 0.08); /* Blue background highlighting newly added code lines while maintaining readability. Using blue instead of green for protanopia visibility. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for line numbers of added code, providing visual connection to added content. Using blue instead of green for protanopia visibility. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-blue-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within added lines. Using blue instead of green for protanopia visibility. */ - --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.08); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.08); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-purple-500); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-blue-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. Using blue instead of green for protanopia visibility. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-100); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-700); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-700); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-blue-300); /* Color for success status indicators. Communicates completed or positive states. Using blue instead of green for protanopia visibility. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-100); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-chrome-700); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.07); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-500); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-500); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-blue-500); /* Text color for green tags. Using blue instead of green for protanopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-blue-100); /* Background color for green tags. Using blue instead of green for protanopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for green tags. Using blue instead of green for protanopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-500); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-blue-500); /* Text color for lime tags. Using blue instead of lime/green for protanopia visibility. */ - --canary-component-tag-lime-background: var(--canary-colors-blue-100); /* Background color for lime tags. Using blue instead of lime/green for protanopia visibility. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for lime tags. Using blue instead of lime/green for protanopia visibility. */ - --canary-component-tag-mint-text: var(--canary-colors-blue-500); /* Text color for mint tags. Using blue instead of mint/green for protanopia visibility. */ - --canary-component-tag-mint-background: var(--canary-colors-blue-100); /* Background color for mint tags. Using blue instead of mint/green for protanopia visibility. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for mint tags. Using blue instead of mint/green for protanopia visibility. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-500); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-500); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-purple-500); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ - --canary-component-tag-purple-background: var(--canary-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-red-text: var(--canary-colors-red-500); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-violet-500); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ - --canary-component-tag-violet-background: var(--canary-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-background: var(--canary-colors-red-100); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Light shadow color with 40% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Medium shadow color with 40% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Medium shadow color with 35% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Deep shadow color with 35% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.07); /* Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-300); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-300); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.3); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); - --canary-brand-color-50: var(--canary-colors-cyan-50); - --canary-brand-color-100: var(--canary-colors-cyan-100); - --canary-brand-color-200: var(--canary-colors-cyan-200); - --canary-brand-color-300: var(--canary-colors-cyan-300); - --canary-brand-color-400: var(--canary-colors-cyan-400); - --canary-brand-color-500: var(--canary-colors-cyan-500); - --canary-brand-color-600: var(--canary-colors-cyan-600); - --canary-brand-color-700: var(--canary-colors-cyan-700); - --canary-brand-color-800: var(--canary-colors-cyan-800); - --canary-brand-color-900: var(--canary-colors-cyan-900); - --canary-brand-color-950: var(--canary-colors-cyan-950); - --canary-brand-on-color-50: var(--canary-colors-chrome-950); - --canary-brand-on-color-100: var(--canary-colors-chrome-950); - --canary-brand-on-color-200: var(--canary-colors-chrome-950); - --canary-brand-on-color-300: var(--canary-colors-chrome-950); - --canary-brand-on-color-400: var(--canary-colors-chrome-950); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-white); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-400); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-500); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-600); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. Using blue instead of green for protanopia visibility. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. Using blue instead of lime/green for protanopia visibility. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. Using blue instead of mint/green for protanopia visibility. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-light-dimmer-tritanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-dimmer-tritanopia-desktop-gitness.css deleted file mode 100644 index 0be958c9b7..0000000000 --- a/packages/core-design-system/src/styles/source-light-dimmer-tritanopia-desktop-gitness.css +++ /dev/null @@ -1,491 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:30 GMT - * Copyright (c) Harness. - */ - -.source-light-dimmer-tritanopia-desktop-gitness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-pure-white); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-pure-white); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-50); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-800); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-700); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-600); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-cyan-500); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-500); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-orange-500); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-600); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: lch(from var(--canary-colors-chrome-100) l c h / 0.8); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-cyan-300); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-300); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-orange-400); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.1); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.15); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-500); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-150); - --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.15); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-100); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.07); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.3); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-cyan-500); /* Text color for success badges. Communicates positive status through readable cyan text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.3); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.07); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-red-500); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.3); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.07); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-orange-500); /* Text color for warning badges. Signals caution states with readable orange text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-orange-300) l c h / 0.3); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-orange-200) l c h / 0.07); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-500); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.3); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.07); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-cyan-500); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.3); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-300) l c h / 0.07); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-cyan-500); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.08); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.3); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-200) l c h / 0.1); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-200) l c h / 0.15); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-red-500); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.08); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.3); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.07); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.08); /* Cyan background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.08); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.08); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-cyan-500); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-100); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-700); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-700); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-orange-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-100); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-chrome-700); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.07); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-500); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-500); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-cyan-600); /* Text color for green tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-cyan-100); /* Background color for green tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for green tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-500); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-500); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-500); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-cyan-600); /* Text color for purple tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-purple-background: var(--canary-colors-cyan-100); /* Background color for purple tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for purple tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-red-text: var(--canary-colors-red-500); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-cyan-600); /* Text color for violet tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-violet-background: var(--canary-colors-cyan-100); /* Background color for violet tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for violet tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-yellow-text: var(--canary-colors-orange-600); /* Text color for yellow tags, replaced with orange for tritanopia visibility. */ - --canary-component-tag-yellow-background: var(--canary-colors-orange-100); /* Background color for yellow tags, replaced with orange for tritanopia visibility. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for yellow tags, replaced with orange for tritanopia visibility. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-background: var(--canary-colors-red-100); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Light shadow color with 40% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Medium shadow color with 40% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Medium shadow color with 35% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Deep shadow color with 35% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.07); /* Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-orange-200); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-300); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.3); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); - --canary-brand-color-50: var(--canary-colors-chrome-150); - --canary-brand-color-100: var(--canary-colors-chrome-150); - --canary-brand-color-200: var(--canary-colors-chrome-150); - --canary-brand-color-300: var(--canary-colors-chrome-150); - --canary-brand-color-400: var(--canary-colors-chrome-150); - --canary-brand-color-500: var(--canary-colors-chrome-900); - --canary-brand-color-600: var(--canary-colors-chrome-150); - --canary-brand-color-700: var(--canary-colors-chrome-900); - --canary-brand-color-800: var(--canary-colors-chrome-900); - --canary-brand-color-900: var(--canary-colors-chrome-900); - --canary-brand-color-950: var(--canary-colors-chrome-900); - --canary-brand-on-color-50: var(--canary-colors-pure-black); - --canary-brand-on-color-100: var(--canary-colors-pure-black); - --canary-brand-on-color-200: var(--canary-colors-pure-black); - --canary-brand-on-color-300: var(--canary-colors-pure-black); - --canary-brand-on-color-400: var(--canary-colors-pure-black); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-black); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-400); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-500); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-600); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with cyan. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags, replaced with orange. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-light-dimmer-tritanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-light-dimmer-tritanopia-desktop-harness.css deleted file mode 100644 index 5b21c477c4..0000000000 --- a/packages/core-design-system/src/styles/source-light-dimmer-tritanopia-desktop-harness.css +++ /dev/null @@ -1,491 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:29 GMT - * Copyright (c) Harness. - */ - -.source-light-dimmer-tritanopia-desktop-harness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-pure-white); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-pure-white); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-50); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-800); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-700); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-600); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-cyan-500); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-500); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-orange-500); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-600); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: lch(from var(--canary-colors-chrome-100) l c h / 0.8); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-cyan-300); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-300); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-orange-400); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.1); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.15); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-500); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-150); - --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-500); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.08); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.15); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-100); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.07); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.3); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-cyan-500); /* Text color for success badges. Communicates positive status through readable cyan text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.3); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.07); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-red-500); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.3); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.07); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-orange-500); /* Text color for warning badges. Signals caution states with readable orange text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-orange-300) l c h / 0.3); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-orange-200) l c h / 0.07); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-500); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-300) l c h / 0.3); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.07); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-cyan-500); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-300) l c h / 0.3); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-300) l c h / 0.07); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-cyan-500); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.08); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-300) l c h / 0.3); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-200) l c h / 0.1); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-200) l c h / 0.15); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-red-500); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.08); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-300) l c h / 0.3); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.07); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.08); /* Cyan background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.08); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.15); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.08); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-cyan-500); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-300); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-300); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-chrome-100); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-700); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-700); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-orange-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-100); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-chrome-700); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.07); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-500); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-500); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-cyan-600); /* Text color for green tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-cyan-100); /* Background color for green tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for green tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-500); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-500); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-500); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-cyan-600); /* Text color for purple tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-purple-background: var(--canary-colors-cyan-100); /* Background color for purple tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for purple tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-red-text: var(--canary-colors-red-500); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-cyan-600); /* Text color for violet tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-violet-background: var(--canary-colors-cyan-100); /* Background color for violet tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for violet tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-yellow-text: var(--canary-colors-orange-600); /* Text color for yellow tags, replaced with orange for tritanopia visibility. */ - --canary-component-tag-yellow-background: var(--canary-colors-orange-100); /* Background color for yellow tags, replaced with orange for tritanopia visibility. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for yellow tags, replaced with orange for tritanopia visibility. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-background: var(--canary-colors-red-100); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Light shadow color with 40% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Medium shadow color with 40% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Medium shadow color with 35% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Deep shadow color with 35% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.35); /* Very deep shadow color with 35% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.4); /* Extremely deep shadow color with 40% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.07); /* Subtle inner shadow color with 7% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-orange-200); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-300); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.3); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); - --canary-brand-color-50: var(--canary-colors-cyan-50); - --canary-brand-color-100: var(--canary-colors-cyan-100); - --canary-brand-color-200: var(--canary-colors-cyan-200); - --canary-brand-color-300: var(--canary-colors-cyan-300); - --canary-brand-color-400: var(--canary-colors-cyan-400); - --canary-brand-color-500: var(--canary-colors-cyan-500); - --canary-brand-color-600: var(--canary-colors-cyan-600); - --canary-brand-color-700: var(--canary-colors-cyan-700); - --canary-brand-color-800: var(--canary-colors-cyan-800); - --canary-brand-color-900: var(--canary-colors-cyan-900); - --canary-brand-color-950: var(--canary-colors-cyan-950); - --canary-brand-on-color-50: var(--canary-colors-chrome-950); - --canary-brand-on-color-100: var(--canary-colors-chrome-950); - --canary-brand-on-color-200: var(--canary-colors-chrome-950); - --canary-brand-on-color-300: var(--canary-colors-chrome-950); - --canary-brand-on-color-400: var(--canary-colors-chrome-950); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-white); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-400); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-500); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-400); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-600); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with cyan. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags, replaced with orange. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-light-high-contrast-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-high-contrast-desktop-gitness.css deleted file mode 100644 index 2d17323c4d..0000000000 --- a/packages/core-design-system/src/styles/source-light-high-contrast-desktop-gitness.css +++ /dev/null @@ -1,491 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:16 GMT - * Copyright (c) Harness. - */ - -.source-light-high-contrast-desktop-gitness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-pure-white); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-50); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-100); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-950); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-900); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-800); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-green-600); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-600); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-600); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-700); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-300); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-200) l c h / 0.7); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-green-500); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-500); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-500); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-chrome-300) l c h / 0.15); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-500); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-150); - --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-green-700); /* Text color for success badges. Communicates positive status through readable green text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-green-400) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-green-300) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-red-700); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-700); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-400) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-700); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-purple-700); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-400) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-green-700); /* Text color for success buttons. Communicates positive actions through readable green text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-green-300) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-green-400) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-green-300) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-green-300) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-red-700); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-500) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-green-400) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-green-400) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-green-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-400) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-400) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-400) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-purple-600); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-500); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-green-500); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-sidebar-border: var(--canary-colors-chrome-800); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-colors-chrome-800); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-400); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-400); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-200); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-progress: var(--canary-colors-blue-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-400); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-track-segments-progress: var(--canary-colors-blue-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-slider-handle-background: var(--canary-colors-pure-white); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-green-500); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-500); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-purple-500); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-500); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-unselected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-colors-chrome-300); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-switch-selected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-blue-600); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-700); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-700); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-700); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-green-700); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ - --canary-component-tag-green-background: var(--canary-colors-green-100); /* Background color for green tags. Creates a distinct surface with green theme styling. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-green-50); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-700); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-700); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-700); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-700); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-700); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-purple-700); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ - --canary-component-tag-purple-background: var(--canary-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-red-text: var(--canary-colors-red-700); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-violet-700); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ - --canary-component-tag-violet-background: var(--canary-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-700); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-red-600); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-chrome-950) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-950) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-400); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-400); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-300); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-150); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-400); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-400); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-300); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-500); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-700); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); - --canary-brand-color-50: var(--canary-colors-chrome-150); - --canary-brand-color-100: var(--canary-colors-chrome-150); - --canary-brand-color-200: var(--canary-colors-chrome-150); - --canary-brand-color-300: var(--canary-colors-chrome-150); - --canary-brand-color-400: var(--canary-colors-chrome-150); - --canary-brand-color-500: var(--canary-colors-chrome-900); - --canary-brand-color-600: var(--canary-colors-chrome-150); - --canary-brand-color-700: var(--canary-colors-chrome-900); - --canary-brand-color-800: var(--canary-colors-chrome-900); - --canary-brand-color-900: var(--canary-colors-chrome-900); - --canary-brand-color-950: var(--canary-colors-chrome-900); - --canary-brand-on-color-50: var(--canary-colors-pure-black); - --canary-brand-on-color-100: var(--canary-colors-pure-black); - --canary-brand-on-color-200: var(--canary-colors-pure-black); - --canary-brand-on-color-300: var(--canary-colors-pure-black); - --canary-brand-on-color-400: var(--canary-colors-pure-black); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-black); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-700); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-500); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-light-high-contrast-desktop-harness.css b/packages/core-design-system/src/styles/source-light-high-contrast-desktop-harness.css deleted file mode 100644 index 1c66261e91..0000000000 --- a/packages/core-design-system/src/styles/source-light-high-contrast-desktop-harness.css +++ /dev/null @@ -1,491 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:15 GMT - * Copyright (c) Harness. - */ - -.source-light-high-contrast-desktop-harness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-pure-white); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-50); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-100); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-950); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-900); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-800); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-green-600); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-600); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-600); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-700); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-300); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-200) l c h / 0.7); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-green-500); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-500); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-500); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-chrome-300) l c h / 0.15); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-500); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-150); - --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-green-700); /* Text color for success badges. Communicates positive status through readable green text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-green-400) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-green-300) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-red-700); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-700); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-400) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-700); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-purple-700); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-400) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-green-700); /* Text color for success buttons. Communicates positive actions through readable green text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-green-300) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-green-400) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-green-300) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-green-300) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-red-700); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-500) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-green-400) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-green-400) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-green-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-400) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-400) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-400) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-purple-600); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-500); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-green-500); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-sidebar-border: var(--canary-colors-chrome-800); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-colors-chrome-800); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-400); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-400); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-200); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-progress: var(--canary-colors-blue-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-400); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-track-segments-progress: var(--canary-colors-blue-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-slider-handle-background: var(--canary-colors-pure-white); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-green-500); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-500); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-purple-500); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-500); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-unselected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-colors-chrome-300); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-switch-selected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-blue-600); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-700); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-700); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-700); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-green-700); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ - --canary-component-tag-green-background: var(--canary-colors-green-100); /* Background color for green tags. Creates a distinct surface with green theme styling. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-green-50); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-700); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-700); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-700); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-700); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-700); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-purple-700); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ - --canary-component-tag-purple-background: var(--canary-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-red-text: var(--canary-colors-red-700); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-violet-700); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ - --canary-component-tag-violet-background: var(--canary-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-700); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-red-600); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-chrome-950) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-950) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-400); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-400); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-300); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-150); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-400); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-400); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-300); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-500); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-700); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); - --canary-brand-color-50: var(--canary-colors-cyan-50); - --canary-brand-color-100: var(--canary-colors-cyan-100); - --canary-brand-color-200: var(--canary-colors-cyan-200); - --canary-brand-color-300: var(--canary-colors-cyan-300); - --canary-brand-color-400: var(--canary-colors-cyan-400); - --canary-brand-color-500: var(--canary-colors-cyan-500); - --canary-brand-color-600: var(--canary-colors-cyan-600); - --canary-brand-color-700: var(--canary-colors-cyan-700); - --canary-brand-color-800: var(--canary-colors-cyan-800); - --canary-brand-color-900: var(--canary-colors-cyan-900); - --canary-brand-color-950: var(--canary-colors-cyan-950); - --canary-brand-on-color-50: var(--canary-colors-chrome-950); - --canary-brand-on-color-100: var(--canary-colors-chrome-950); - --canary-brand-on-color-200: var(--canary-colors-chrome-950); - --canary-brand-on-color-300: var(--canary-colors-chrome-950); - --canary-brand-on-color-400: var(--canary-colors-chrome-950); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-white); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-700); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-500); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-light-high-contrast-deuteranopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-high-contrast-deuteranopia-desktop-gitness.css deleted file mode 100644 index 57a0a8d25f..0000000000 --- a/packages/core-design-system/src/styles/source-light-high-contrast-deuteranopia-desktop-gitness.css +++ /dev/null @@ -1,491 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:27 GMT - * Copyright (c) Harness. - */ - -.source-light-high-contrast-deuteranopia-desktop-gitness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-pure-white); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-50); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-100); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-950); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-900); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-800); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-cyan-600); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-orange-600); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-600); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-700); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-300); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-200) l c h / 0.7); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-cyan-500); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-orange-500); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-500); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-chrome-300) l c h / 0.15); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-500); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-150); - --canary-component-alert-danger-title: var(--canary-colors-orange-700); /* Text color for danger alerts. Communicates critical information through high-contrast orange text. */ - --canary-component-alert-danger-description: var(--canary-colors-orange-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-orange-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-orange-500) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-cyan-700); /* Text color for success badges. Communicates positive status through readable cyan text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-orange-700); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-orange-400) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-700); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-400) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-700); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-cyan-700); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-400) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-cyan-700); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-300) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-300) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-orange-700); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-orange-400) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-orange-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-orange-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-500) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-400) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-400) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-orange-400) l c h / 0.12); /* Orange background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-orange-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-400) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-400) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-blue-600); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-orange-500); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-500); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-sidebar-border: var(--canary-colors-chrome-800); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-colors-chrome-800); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-400); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-400); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-200); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-progress: var(--canary-colors-blue-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-400); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-track-segments-progress: var(--canary-colors-blue-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-slider-handle-background: var(--canary-colors-pure-white); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-cyan-500); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-orange-500); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-cyan-500); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-500); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-unselected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-colors-chrome-300); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-switch-selected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-blue-600); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-700); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-700); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-700); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-cyan-700); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-cyan-100); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-700); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-700); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-700); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-700); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-700); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-cyan-700); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-purple-background: var(--canary-colors-cyan-100); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-red-text: var(--canary-colors-orange-700); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-red-background: var(--canary-colors-orange-100); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-violet-text: var(--canary-colors-blue-700); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-violet-background: var(--canary-colors-blue-100); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-700); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-orange-600); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-chrome-950) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-950) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-orange-400); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-400); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-300); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-150); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-400); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-400); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-300); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-500); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-700); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); - --canary-brand-color-50: var(--canary-colors-chrome-150); - --canary-brand-color-100: var(--canary-colors-chrome-150); - --canary-brand-color-200: var(--canary-colors-chrome-150); - --canary-brand-color-300: var(--canary-colors-chrome-150); - --canary-brand-color-400: var(--canary-colors-chrome-150); - --canary-brand-color-500: var(--canary-colors-chrome-900); - --canary-brand-color-600: var(--canary-colors-chrome-150); - --canary-brand-color-700: var(--canary-colors-chrome-900); - --canary-brand-color-800: var(--canary-colors-chrome-900); - --canary-brand-color-900: var(--canary-colors-chrome-900); - --canary-brand-color-950: var(--canary-colors-chrome-900); - --canary-brand-on-color-50: var(--canary-colors-pure-black); - --canary-brand-on-color-100: var(--canary-colors-pure-black); - --canary-brand-on-color-200: var(--canary-colors-pure-black); - --canary-brand-on-color-300: var(--canary-colors-pure-black); - --canary-brand-on-color-400: var(--canary-colors-pure-black); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-black); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-700); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-500); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags, replaced with orange. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-light-high-contrast-deuteranopia-desktop-harness.css b/packages/core-design-system/src/styles/source-light-high-contrast-deuteranopia-desktop-harness.css deleted file mode 100644 index 6337abecea..0000000000 --- a/packages/core-design-system/src/styles/source-light-high-contrast-deuteranopia-desktop-harness.css +++ /dev/null @@ -1,491 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:26 GMT - * Copyright (c) Harness. - */ - -.source-light-high-contrast-deuteranopia-desktop-harness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-pure-white); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-50); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-100); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-950); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-900); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-800); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-cyan-600); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-orange-600); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-600); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-700); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-300); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-200) l c h / 0.7); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-cyan-500); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-orange-500); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-500); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-chrome-300) l c h / 0.15); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-500); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-150); - --canary-component-alert-danger-title: var(--canary-colors-orange-700); /* Text color for danger alerts. Communicates critical information through high-contrast orange text. */ - --canary-component-alert-danger-description: var(--canary-colors-orange-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-orange-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-orange-500) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-cyan-700); /* Text color for success badges. Communicates positive status through readable cyan text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-orange-700); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-orange-400) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-700); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-400) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-700); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-cyan-700); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-400) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-cyan-700); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-300) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-300) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-orange-700); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast orange text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-orange-400) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-orange-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-orange-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-500) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-400) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-400) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-orange-400) l c h / 0.12); /* Orange background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-orange-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-400) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-400) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-blue-600); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-orange-500); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-500); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-sidebar-border: var(--canary-colors-chrome-800); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-colors-chrome-800); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-400); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-400); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-200); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-progress: var(--canary-colors-blue-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-400); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-track-segments-progress: var(--canary-colors-blue-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-slider-handle-background: var(--canary-colors-pure-white); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-cyan-500); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-orange-500); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-cyan-500); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-500); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-unselected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-colors-chrome-300); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-switch-selected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-blue-600); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-700); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-700); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-700); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-cyan-700); /* Text color for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-cyan-100); /* Background color for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for green tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-700); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-700); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-700); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-700); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-700); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-cyan-700); /* Text color for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-purple-background: var(--canary-colors-cyan-100); /* Background color for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for purple tags, replaced with cyan for deuteranopia visibility. */ - --canary-component-tag-red-text: var(--canary-colors-orange-700); /* Text color for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-red-background: var(--canary-colors-orange-100); /* Background color for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for red tags, replaced with orange for deuteranopia visibility. */ - --canary-component-tag-violet-text: var(--canary-colors-blue-700); /* Text color for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-violet-background: var(--canary-colors-blue-100); /* Background color for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for violet tags, replaced with blue for deuteranopia visibility. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-700); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-orange-600); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-chrome-950) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-950) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-orange-400); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-400); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-300); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-150); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-400); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-400); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-300); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-500); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-700); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); - --canary-brand-color-50: var(--canary-colors-cyan-50); - --canary-brand-color-100: var(--canary-colors-cyan-100); - --canary-brand-color-200: var(--canary-colors-cyan-200); - --canary-brand-color-300: var(--canary-colors-cyan-300); - --canary-brand-color-400: var(--canary-colors-cyan-400); - --canary-brand-color-500: var(--canary-colors-cyan-500); - --canary-brand-color-600: var(--canary-colors-cyan-600); - --canary-brand-color-700: var(--canary-colors-cyan-700); - --canary-brand-color-800: var(--canary-colors-cyan-800); - --canary-brand-color-900: var(--canary-colors-cyan-900); - --canary-brand-color-950: var(--canary-colors-cyan-950); - --canary-brand-on-color-50: var(--canary-colors-chrome-950); - --canary-brand-on-color-100: var(--canary-colors-chrome-950); - --canary-brand-on-color-200: var(--canary-colors-chrome-950); - --canary-brand-on-color-300: var(--canary-colors-chrome-950); - --canary-brand-on-color-400: var(--canary-colors-chrome-950); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-white); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-700); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-500); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags, replaced with orange. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with blue. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-light-high-contrast-protanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-high-contrast-protanopia-desktop-gitness.css deleted file mode 100644 index 2680fb5e39..0000000000 --- a/packages/core-design-system/src/styles/source-light-high-contrast-protanopia-desktop-gitness.css +++ /dev/null @@ -1,491 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:22 GMT - * Copyright (c) Harness. - */ - -.source-light-high-contrast-protanopia-desktop-gitness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-pure-white); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-50); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-100); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-950); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-900); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-800); - /** - * Primary color for text and icons in success content. Adjusted for protanopia using blue instead of green. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-blue-600); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-600); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-600); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-700); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-300); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-200) l c h / 0.7); - /** - * Border color for success containers. Adjusted for protanopia using blue instead of green. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-blue-500); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-500); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-500); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-chrome-300) l c h / 0.15); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-500); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-150); - --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-blue-700); /* Text color for success badges. Adjusted for protanopia using blue instead of green. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-blue-400) l c h / 0.6); /* Border color for success badges. Adjusted for protanopia using blue instead of green. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-blue-300) l c h / 0.1); /* Background color for success badges. Adjusted for protanopia using blue instead of green. */ - --canary-component-badge-danger-text: var(--canary-colors-red-700); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-700); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-400) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-700); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-purple-700); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-400) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-blue-700); /* Text color for success buttons. Adjusted for protanopia using blue instead of green. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-blue-300) l c h / 0.1); /* Background color for success buttons. Adjusted for protanopia using blue instead of green. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-blue-400) l c h / 0.6); /* Border color for success buttons. Adjusted for protanopia using blue instead of green. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-blue-300) l c h / 0.15); /* Hover state background color for success buttons. Adjusted for protanopia using blue instead of green. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-blue-300) l c h / 0.25); /* Active state background color for success buttons. Adjusted for protanopia using blue instead of green. */ - --canary-component-btn-danger-text: var(--canary-colors-red-700); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-500) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-blue-400) l c h / 0.12); /* Blue background highlighting newly added code lines. Adjusted for protanopia using blue instead of green. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-blue-400) l c h / 0.2); /* Background for line numbers of added code. Adjusted for protanopia using blue instead of green. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-blue-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. Adjusted for protanopia using blue instead of green. */ - --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-400) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-400) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-400) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-purple-600); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-500); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-blue-500); /* Border color for completed pipeline states. Adjusted for protanopia using blue instead of green. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-sidebar-border: var(--canary-colors-chrome-800); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-colors-chrome-800); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-400); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-400); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-200); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-progress: var(--canary-colors-blue-500); /* Filled portion color for slider tracks. Adjusted for protanopia using blue instead of green. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-400); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-track-segments-progress: var(--canary-colors-blue-700); /* Color for segment markers on the filled track portion. Adjusted for protanopia using blue instead of green. */ - --canary-component-slider-handle-background: var(--canary-colors-pure-white); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-blue-500); /* Color for success status indicators. Adjusted for protanopia using blue instead of green. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-500); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-purple-500); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-500); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-unselected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-colors-chrome-300); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-switch-selected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-blue-600); /* Background color for the selected state of switch controls. Adjusted for protanopia using blue instead of green. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-700); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-700); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-700); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-blue-700); /* Text color for green tags. Adjusted for protanopia using blue instead of green. */ - --canary-component-tag-green-background: var(--canary-colors-blue-100); /* Background color for green tags. Adjusted for protanopia using blue instead of green. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for green tags. Adjusted for protanopia using blue instead of green. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-700); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-blue-700); /* Text color for lime tags. Adjusted for protanopia using blue instead of green. */ - --canary-component-tag-lime-background: var(--canary-colors-blue-100); /* Background color for lime tags. Adjusted for protanopia using blue instead of green. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for lime tags. Adjusted for protanopia using blue instead of green. */ - --canary-component-tag-mint-text: var(--canary-colors-blue-700); /* Text color for mint tags. Adjusted for protanopia using blue instead of green. */ - --canary-component-tag-mint-background: var(--canary-colors-blue-100); /* Background color for mint tags. Adjusted for protanopia using blue instead of green. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for mint tags. Adjusted for protanopia using blue instead of green. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-700); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-700); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-purple-700); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ - --canary-component-tag-purple-background: var(--canary-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-red-text: var(--canary-colors-red-700); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-violet-700); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ - --canary-component-tag-violet-background: var(--canary-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-700); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-red-600); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-chrome-950) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-950) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-400); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-400); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-300); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-150); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-400); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-400); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-300); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-500); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-700); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); - --canary-brand-color-50: var(--canary-colors-chrome-150); - --canary-brand-color-100: var(--canary-colors-chrome-150); - --canary-brand-color-200: var(--canary-colors-chrome-150); - --canary-brand-color-300: var(--canary-colors-chrome-150); - --canary-brand-color-400: var(--canary-colors-chrome-150); - --canary-brand-color-500: var(--canary-colors-chrome-900); - --canary-brand-color-600: var(--canary-colors-chrome-150); - --canary-brand-color-700: var(--canary-colors-chrome-900); - --canary-brand-color-800: var(--canary-colors-chrome-900); - --canary-brand-color-900: var(--canary-colors-chrome-900); - --canary-brand-color-950: var(--canary-colors-chrome-900); - --canary-brand-on-color-50: var(--canary-colors-pure-black); - --canary-brand-on-color-100: var(--canary-colors-pure-black); - --canary-brand-on-color-200: var(--canary-colors-pure-black); - --canary-brand-on-color-300: var(--canary-colors-pure-black); - --canary-brand-on-color-400: var(--canary-colors-pure-black); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-black); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-700); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-500); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. Adjusted for protanopia using blue instead of green. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. Adjusted for protanopia using blue instead of green. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. Adjusted for protanopia using blue instead of green. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. Adjusted for protanopia using blue instead of green. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-light-high-contrast-protanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-light-high-contrast-protanopia-desktop-harness.css deleted file mode 100644 index 74d0796946..0000000000 --- a/packages/core-design-system/src/styles/source-light-high-contrast-protanopia-desktop-harness.css +++ /dev/null @@ -1,491 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:21 GMT - * Copyright (c) Harness. - */ - -.source-light-high-contrast-protanopia-desktop-harness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-pure-white); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-50); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-100); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-950); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-900); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-800); - /** - * Primary color for text and icons in success content. Adjusted for protanopia using blue instead of green. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-blue-600); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-600); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-600); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-700); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-300); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-200) l c h / 0.7); - /** - * Border color for success containers. Adjusted for protanopia using blue instead of green. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-blue-500); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-500); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-500); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-chrome-300) l c h / 0.15); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-500); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-150); - --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-blue-700); /* Text color for success badges. Adjusted for protanopia using blue instead of green. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-blue-400) l c h / 0.6); /* Border color for success badges. Adjusted for protanopia using blue instead of green. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-blue-300) l c h / 0.1); /* Background color for success badges. Adjusted for protanopia using blue instead of green. */ - --canary-component-badge-danger-text: var(--canary-colors-red-700); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-700); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-400) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-700); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-purple-700); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-400) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-blue-700); /* Text color for success buttons. Adjusted for protanopia using blue instead of green. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-blue-300) l c h / 0.1); /* Background color for success buttons. Adjusted for protanopia using blue instead of green. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-blue-400) l c h / 0.6); /* Border color for success buttons. Adjusted for protanopia using blue instead of green. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-blue-300) l c h / 0.15); /* Hover state background color for success buttons. Adjusted for protanopia using blue instead of green. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-blue-300) l c h / 0.25); /* Active state background color for success buttons. Adjusted for protanopia using blue instead of green. */ - --canary-component-btn-danger-text: var(--canary-colors-red-700); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-500) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-blue-400) l c h / 0.12); /* Blue background highlighting newly added code lines. Adjusted for protanopia using blue instead of green. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-blue-400) l c h / 0.2); /* Background for line numbers of added code. Adjusted for protanopia using blue instead of green. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-blue-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. Adjusted for protanopia using blue instead of green. */ - --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-400) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-400) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-400) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-purple-600); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-500); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-blue-500); /* Border color for completed pipeline states. Adjusted for protanopia using blue instead of green. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-sidebar-border: var(--canary-colors-chrome-800); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-colors-chrome-800); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-400); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-400); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-200); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-progress: var(--canary-colors-blue-500); /* Filled portion color for slider tracks. Adjusted for protanopia using blue instead of green. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-400); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-track-segments-progress: var(--canary-colors-blue-700); /* Color for segment markers on the filled track portion. Adjusted for protanopia using blue instead of green. */ - --canary-component-slider-handle-background: var(--canary-colors-pure-white); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-blue-500); /* Color for success status indicators. Adjusted for protanopia using blue instead of green. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-500); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-purple-500); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-500); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-unselected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-colors-chrome-300); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-switch-selected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-blue-600); /* Background color for the selected state of switch controls. Adjusted for protanopia using blue instead of green. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-700); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-700); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-700); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-blue-700); /* Text color for green tags. Adjusted for protanopia using blue instead of green. */ - --canary-component-tag-green-background: var(--canary-colors-blue-100); /* Background color for green tags. Adjusted for protanopia using blue instead of green. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for green tags. Adjusted for protanopia using blue instead of green. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-700); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-blue-700); /* Text color for lime tags. Adjusted for protanopia using blue instead of green. */ - --canary-component-tag-lime-background: var(--canary-colors-blue-100); /* Background color for lime tags. Adjusted for protanopia using blue instead of green. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for lime tags. Adjusted for protanopia using blue instead of green. */ - --canary-component-tag-mint-text: var(--canary-colors-blue-700); /* Text color for mint tags. Adjusted for protanopia using blue instead of green. */ - --canary-component-tag-mint-background: var(--canary-colors-blue-100); /* Background color for mint tags. Adjusted for protanopia using blue instead of green. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for mint tags. Adjusted for protanopia using blue instead of green. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-700); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-700); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-purple-700); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ - --canary-component-tag-purple-background: var(--canary-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-red-text: var(--canary-colors-red-700); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-violet-700); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ - --canary-component-tag-violet-background: var(--canary-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-700); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-red-600); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-chrome-950) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-950) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-400); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-400); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-300); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-150); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-400); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-400); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-300); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-500); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-700); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); - --canary-brand-color-50: var(--canary-colors-cyan-50); - --canary-brand-color-100: var(--canary-colors-cyan-100); - --canary-brand-color-200: var(--canary-colors-cyan-200); - --canary-brand-color-300: var(--canary-colors-cyan-300); - --canary-brand-color-400: var(--canary-colors-cyan-400); - --canary-brand-color-500: var(--canary-colors-cyan-500); - --canary-brand-color-600: var(--canary-colors-cyan-600); - --canary-brand-color-700: var(--canary-colors-cyan-700); - --canary-brand-color-800: var(--canary-colors-cyan-800); - --canary-brand-color-900: var(--canary-colors-cyan-900); - --canary-brand-color-950: var(--canary-colors-cyan-950); - --canary-brand-on-color-50: var(--canary-colors-chrome-950); - --canary-brand-on-color-100: var(--canary-colors-chrome-950); - --canary-brand-on-color-200: var(--canary-colors-chrome-950); - --canary-brand-on-color-300: var(--canary-colors-chrome-950); - --canary-brand-on-color-400: var(--canary-colors-chrome-950); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-white); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-700); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-500); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. Adjusted for protanopia using blue instead of green. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. Adjusted for protanopia using blue instead of green. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. Adjusted for protanopia using blue instead of green. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. Adjusted for protanopia using blue instead of green. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-light-high-contrast-tritanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-high-contrast-tritanopia-desktop-gitness.css deleted file mode 100644 index e3c6b2455b..0000000000 --- a/packages/core-design-system/src/styles/source-light-high-contrast-tritanopia-desktop-gitness.css +++ /dev/null @@ -1,491 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:32 GMT - * Copyright (c) Harness. - */ - -.source-light-high-contrast-tritanopia-desktop-gitness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1.4px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-pure-white); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-50); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-100); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-950); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-900); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-800); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-cyan-600); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-600); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-orange-600); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-700); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-300); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-200) l c h / 0.7); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-cyan-500); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-500); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-orange-500); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-chrome-300) l c h / 0.15); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-500); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-150); - --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-cyan-700); /* Text color for success badges. Communicates positive status through readable green text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-red-700); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-orange-700); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-orange-400) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-orange-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-700); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-cyan-700); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-400) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-cyan-700); /* Text color for success buttons. Communicates positive actions through readable green text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-300) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-300) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-red-700); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-500) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-400) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-400) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-400) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-400) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-400) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-cyan-600); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-500); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-500); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-sidebar-border: var(--canary-colors-chrome-800); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-colors-chrome-800); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-400); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-400); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-200); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-progress: var(--canary-colors-blue-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-400); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-track-segments-progress: var(--canary-colors-cyan-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-slider-handle-background: var(--canary-colors-pure-white); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-cyan-500); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-500); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-orange-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-cyan-500); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-500); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-unselected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-colors-chrome-300); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-switch-selected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-blue-600); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-700); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-700); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-700); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-cyan-700); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ - --canary-component-tag-green-background: var(--canary-colors-cyan-100); /* Background color for green tags. Creates a distinct surface with green theme styling. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-700); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-700); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-700); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-700); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-700); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-cyan-700); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ - --canary-component-tag-purple-background: var(--canary-colors-cyan-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-red-text: var(--canary-colors-red-700); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-cyan-700); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ - --canary-component-tag-violet-background: var(--canary-colors-cyan-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-yellow-text: var(--canary-colors-orange-700); /* Text color for yellow tags. Signals caution states with readable amber text. */ - --canary-component-tag-yellow-background: var(--canary-colors-orange-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-red-600); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-chrome-950) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-950) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-orange-200); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-400); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-400); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-300); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-150); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-400); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-400); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-300); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-500); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-700); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); - --canary-brand-color-50: var(--canary-colors-chrome-150); - --canary-brand-color-100: var(--canary-colors-chrome-150); - --canary-brand-color-200: var(--canary-colors-chrome-150); - --canary-brand-color-300: var(--canary-colors-chrome-150); - --canary-brand-color-400: var(--canary-colors-chrome-150); - --canary-brand-color-500: var(--canary-colors-chrome-900); - --canary-brand-color-600: var(--canary-colors-chrome-150); - --canary-brand-color-700: var(--canary-colors-chrome-900); - --canary-brand-color-800: var(--canary-colors-chrome-900); - --canary-brand-color-900: var(--canary-colors-chrome-900); - --canary-brand-color-950: var(--canary-colors-chrome-900); - --canary-brand-on-color-50: var(--canary-colors-pure-black); - --canary-brand-on-color-100: var(--canary-colors-pure-black); - --canary-brand-on-color-200: var(--canary-colors-pure-black); - --canary-brand-on-color-300: var(--canary-colors-pure-black); - --canary-brand-on-color-400: var(--canary-colors-pure-black); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-black); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-700); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-500); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-light-high-contrast-tritanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-light-high-contrast-tritanopia-desktop-harness.css deleted file mode 100644 index d9bbb03c73..0000000000 --- a/packages/core-design-system/src/styles/source-light-high-contrast-tritanopia-desktop-harness.css +++ /dev/null @@ -1,491 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:31 GMT - * Copyright (c) Harness. - */ - -.source-light-high-contrast-tritanopia-desktop-harness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1.4px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-pure-white); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-chrome-50); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-100); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-950); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-900); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-800); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-cyan-600); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-600); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-orange-600); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-700); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-300); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-200) l c h / 0.7); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-cyan-500); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-500); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-orange-500); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-chrome-300) l c h / 0.15); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-500); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-150); - --canary-component-alert-danger-title: var(--canary-colors-red-700); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-400) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.6); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-cyan-700); /* Text color for success badges. Communicates positive status through readable green text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.6); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-red-700); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.6); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-orange-700); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-orange-400) l c h / 0.6); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-orange-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-700); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.6); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-cyan-700); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-400) l c h / 0.6); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-150); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-cyan-700); /* Text color for success buttons. Communicates positive actions through readable green text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.6); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-300) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-300) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-red-700); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.6); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-500) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-400) l c h / 0.12); /* Green background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-400) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-400) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-400) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-400) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-400) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-cyan-600); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-500); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-500); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-sidebar-border: var(--canary-colors-chrome-800); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-colors-chrome-800); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-400); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-400); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-200); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-progress: var(--canary-colors-blue-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-400); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-track-segments-progress: var(--canary-colors-cyan-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-slider-handle-background: var(--canary-colors-pure-white); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-700); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-cyan-500); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-500); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-orange-400); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-400); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-cyan-500); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-500); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-unselected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-switch-unselected-background: var(--canary-colors-chrome-300); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-switch-selected-thumb: var(--canary-colors-pure-white); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-blue-600); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-700); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-700); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-700); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-cyan-700); /* Text color for green tags. Ensures readability while maintaining the green color theme. */ - --canary-component-tag-green-background: var(--canary-colors-cyan-100); /* Background color for green tags. Creates a distinct surface with green theme styling. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for green tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-700); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-700); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-700); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-700); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-700); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-cyan-700); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ - --canary-component-tag-purple-background: var(--canary-colors-cyan-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-red-text: var(--canary-colors-red-700); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-cyan-700); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ - --canary-component-tag-violet-background: var(--canary-colors-cyan-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-yellow-text: var(--canary-colors-orange-700); /* Text color for yellow tags. Signals caution states with readable amber text. */ - --canary-component-tag-yellow-background: var(--canary-colors-orange-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-title: var(--canary-colors-pure-white); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-colors-pure-white); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-background: var(--canary-colors-red-600); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-chrome-950) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-chrome-950) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-chrome-950) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-950) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-orange-200); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-400); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-400); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-300); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-150); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-400); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-300) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-400); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-300); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-500); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-200); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-700); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); - --canary-brand-color-50: var(--canary-colors-cyan-50); - --canary-brand-color-100: var(--canary-colors-cyan-100); - --canary-brand-color-200: var(--canary-colors-cyan-200); - --canary-brand-color-300: var(--canary-colors-cyan-300); - --canary-brand-color-400: var(--canary-colors-cyan-400); - --canary-brand-color-500: var(--canary-colors-cyan-500); - --canary-brand-color-600: var(--canary-colors-cyan-600); - --canary-brand-color-700: var(--canary-colors-cyan-700); - --canary-brand-color-800: var(--canary-colors-cyan-800); - --canary-brand-color-900: var(--canary-colors-cyan-900); - --canary-brand-color-950: var(--canary-colors-cyan-950); - --canary-brand-on-color-50: var(--canary-colors-chrome-950); - --canary-brand-on-color-100: var(--canary-colors-chrome-950); - --canary-brand-on-color-200: var(--canary-colors-chrome-950); - --canary-brand-on-color-300: var(--canary-colors-chrome-950); - --canary-brand-on-color-400: var(--canary-colors-chrome-950); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-white); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-700); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-500); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-separator-background: var(--canary-border-3); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-light-protanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-protanopia-desktop-gitness.css deleted file mode 100644 index 67359c8b18..0000000000 --- a/packages/core-design-system/src/styles/source-light-protanopia-desktop-gitness.css +++ /dev/null @@ -1,491 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:19 GMT - * Copyright (c) Harness. - */ - -.source-light-protanopia-desktop-gitness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-chrome-50); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-pure-white); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-50); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-950); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-850); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-700); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. Using blue instead of green for protanopia visibility. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-blue-600); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-600); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-500); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-800); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-100); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); - /** - * Border color for success containers. Reinforces positive status through visual framing. Using blue instead of green for protanopia visibility. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-blue-400); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-400); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-500); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.15); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-500); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-150); - --canary-component-alert-danger-title: var(--canary-colors-red-800); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-blue-600); /* Text color for success badges. Communicates positive status through readable blue text. Adjusted for protanopia visibility. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-blue-400) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. Adjusted for protanopia visibility. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-blue-300) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. Adjusted for protanopia visibility. */ - --canary-component-badge-danger-text: var(--canary-colors-red-600); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-600); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-400) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-600); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-purple-600); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-400) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-200); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-blue-600); /* Text color for success buttons. Communicates positive actions through readable blue text. Adjusted for protanopia visibility. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-blue-300) l c h / 0.12); /* Background color for success buttons. Creates subtle but recognizable positive action styling. Adjusted for protanopia visibility. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-blue-400) l c h / 0.25); /* Border color for success buttons. Provides definition for positive action buttons. Adjusted for protanopia visibility. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-blue-300) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. Adjusted for protanopia visibility. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-blue-300) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. Adjusted for protanopia visibility. */ - --canary-component-btn-danger-text: var(--canary-colors-red-600); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.12); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Blue background highlighting newly added code lines while maintaining readability. Using blue instead of green for protanopia visibility. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. Using blue instead of green for protanopia visibility. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-blue-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. Using blue instead of green for protanopia visibility. */ - --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-purple-600); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-400); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-blue-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. Using blue instead of green for protanopia visibility. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-separator-background: var(--canary-border-width-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-900); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-blue-300); /* Color for success status indicators. Communicates completed or positive states. Using blue instead of green for protanopia visibility. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-50); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-chrome-900); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-600); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-600); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-blue-600); /* Text color for green tags. Using blue instead of green for protanopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-blue-100); /* Background color for green tags. Using blue instead of green for protanopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for green tags. Using blue instead of green for protanopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-600); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-blue-600); /* Text color for lime tags. Using blue instead of lime/green for protanopia visibility. */ - --canary-component-tag-lime-background: var(--canary-colors-blue-100); /* Background color for lime tags. Using blue instead of lime/green for protanopia visibility. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for lime tags. Using blue instead of lime/green for protanopia visibility. */ - --canary-component-tag-mint-text: var(--canary-colors-blue-600); /* Text color for mint tags. Using blue instead of mint/green for protanopia visibility. */ - --canary-component-tag-mint-background: var(--canary-colors-blue-100); /* Background color for mint tags. Using blue instead of mint/green for protanopia visibility. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for mint tags. Using blue instead of mint/green for protanopia visibility. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-600); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-600); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-purple-600); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ - --canary-component-tag-purple-background: var(--canary-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-red-text: var(--canary-colors-red-600); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-violet-600); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ - --canary-component-tag-violet-background: var(--canary-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-background: var(--canary-colors-red-200); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-300); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); - --canary-brand-color-50: var(--canary-colors-chrome-150); - --canary-brand-color-100: var(--canary-colors-chrome-150); - --canary-brand-color-200: var(--canary-colors-chrome-150); - --canary-brand-color-300: var(--canary-colors-chrome-150); - --canary-brand-color-400: var(--canary-colors-chrome-150); - --canary-brand-color-500: var(--canary-colors-chrome-900); - --canary-brand-color-600: var(--canary-colors-chrome-150); - --canary-brand-color-700: var(--canary-colors-chrome-900); - --canary-brand-color-800: var(--canary-colors-chrome-900); - --canary-brand-color-900: var(--canary-colors-chrome-900); - --canary-brand-color-950: var(--canary-colors-chrome-900); - --canary-brand-on-color-50: var(--canary-colors-pure-black); - --canary-brand-on-color-100: var(--canary-colors-pure-black); - --canary-brand-on-color-200: var(--canary-colors-pure-black); - --canary-brand-on-color-300: var(--canary-colors-pure-black); - --canary-brand-on-color-400: var(--canary-colors-pure-black); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-black); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-500); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-500); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. Using blue instead of green for protanopia visibility. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. Using blue instead of lime/green for protanopia visibility. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. Using blue instead of mint/green for protanopia visibility. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-light-protanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-light-protanopia-desktop-harness.css deleted file mode 100644 index be591910d8..0000000000 --- a/packages/core-design-system/src/styles/source-light-protanopia-desktop-harness.css +++ /dev/null @@ -1,491 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:17 GMT - * Copyright (c) Harness. - */ - -.source-light-protanopia-desktop-harness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-chrome-50); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-pure-white); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-50); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-950); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-850); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-700); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. Using blue instead of green for protanopia visibility. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-blue-600); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-600); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-yellow-500); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-800); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-100); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); - /** - * Border color for success containers. Reinforces positive status through visual framing. Using blue instead of green for protanopia visibility. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-blue-400); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-400); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-yellow-500); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.15); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-500); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-150); - --canary-component-alert-danger-title: var(--canary-colors-red-800); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-blue-600); /* Text color for success badges. Communicates positive status through readable blue text. Adjusted for protanopia visibility. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-blue-400) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. Adjusted for protanopia visibility. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-blue-300) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. Adjusted for protanopia visibility. */ - --canary-component-badge-danger-text: var(--canary-colors-red-600); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-yellow-600); /* Text color for warning badges. Signals caution states with readable amber text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-yellow-400) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-yellow-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-600); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-purple-600); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-purple-400) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-purple-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-200); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-blue-600); /* Text color for success buttons. Communicates positive actions through readable blue text. Adjusted for protanopia visibility. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-blue-300) l c h / 0.12); /* Background color for success buttons. Creates subtle but recognizable positive action styling. Adjusted for protanopia visibility. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-blue-400) l c h / 0.25); /* Border color for success buttons. Provides definition for positive action buttons. Adjusted for protanopia visibility. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-blue-300) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. Adjusted for protanopia visibility. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-blue-300) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. Adjusted for protanopia visibility. */ - --canary-component-btn-danger-text: var(--canary-colors-red-600); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.12); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Blue background highlighting newly added code lines while maintaining readability. Using blue instead of green for protanopia visibility. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. Using blue instead of green for protanopia visibility. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-blue-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. Using blue instead of green for protanopia visibility. */ - --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-purple-600); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-400); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-blue-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. Using blue instead of green for protanopia visibility. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-separator-background: var(--canary-border-width-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-900); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-blue-300); /* Color for success status indicators. Communicates completed or positive states. Using blue instead of green for protanopia visibility. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-yellow-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-purple-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-50); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-chrome-900); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-600); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-600); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-blue-600); /* Text color for green tags. Using blue instead of green for protanopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-blue-100); /* Background color for green tags. Using blue instead of green for protanopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for green tags. Using blue instead of green for protanopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-600); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-blue-600); /* Text color for lime tags. Using blue instead of lime/green for protanopia visibility. */ - --canary-component-tag-lime-background: var(--canary-colors-blue-100); /* Background color for lime tags. Using blue instead of lime/green for protanopia visibility. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for lime tags. Using blue instead of lime/green for protanopia visibility. */ - --canary-component-tag-mint-text: var(--canary-colors-blue-600); /* Text color for mint tags. Using blue instead of mint/green for protanopia visibility. */ - --canary-component-tag-mint-background: var(--canary-colors-blue-100); /* Background color for mint tags. Using blue instead of mint/green for protanopia visibility. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for mint tags. Using blue instead of mint/green for protanopia visibility. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-600); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-600); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-purple-600); /* Text color for purple tags. Ensures readability while maintaining the purple color theme. */ - --canary-component-tag-purple-background: var(--canary-colors-purple-100); /* Background color for purple tags. Creates a distinct surface with purple theme styling. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-purple-50); /* Subtle background variation for purple tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-red-text: var(--canary-colors-red-600); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-violet-600); /* Text color for violet tags. Ensures readability while maintaining the violet color theme. */ - --canary-component-tag-violet-background: var(--canary-colors-violet-100); /* Background color for violet tags. Creates a distinct surface with violet theme styling. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-violet-50); /* Subtle background variation for violet tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-yellow-text: var(--canary-colors-yellow-600); /* Text color for yellow tags. Ensures readability while maintaining the yellow color theme. */ - --canary-component-tag-yellow-background: var(--canary-colors-yellow-100); /* Background color for yellow tags. Creates a distinct surface with yellow theme styling. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-yellow-50); /* Subtle background variation for yellow tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-background: var(--canary-colors-red-200); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-yellow-200); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-300); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-purple-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); - --canary-brand-color-50: var(--canary-colors-cyan-50); - --canary-brand-color-100: var(--canary-colors-cyan-100); - --canary-brand-color-200: var(--canary-colors-cyan-200); - --canary-brand-color-300: var(--canary-colors-cyan-300); - --canary-brand-color-400: var(--canary-colors-cyan-400); - --canary-brand-color-500: var(--canary-colors-cyan-500); - --canary-brand-color-600: var(--canary-colors-cyan-600); - --canary-brand-color-700: var(--canary-colors-cyan-700); - --canary-brand-color-800: var(--canary-colors-cyan-800); - --canary-brand-color-900: var(--canary-colors-cyan-900); - --canary-brand-color-950: var(--canary-colors-cyan-950); - --canary-brand-on-color-50: var(--canary-colors-chrome-950); - --canary-brand-on-color-100: var(--canary-colors-chrome-950); - --canary-brand-on-color-200: var(--canary-colors-chrome-950); - --canary-brand-on-color-300: var(--canary-colors-chrome-950); - --canary-brand-on-color-400: var(--canary-colors-chrome-950); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-white); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-500); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-500); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags. Using blue instead of green for protanopia visibility. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. Using blue instead of lime/green for protanopia visibility. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. Using blue instead of mint/green for protanopia visibility. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-light-tritanopia-desktop-gitness.css b/packages/core-design-system/src/styles/source-light-tritanopia-desktop-gitness.css deleted file mode 100644 index 0971cbbe76..0000000000 --- a/packages/core-design-system/src/styles/source-light-tritanopia-desktop-gitness.css +++ /dev/null @@ -1,491 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:29 GMT - * Copyright (c) Harness. - */ - -.source-light-tritanopia-desktop-gitness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-chrome-50); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-pure-white); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-50); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-950); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-850); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-700); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-cyan-600); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-600); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-orange-500); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-800); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-100); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-cyan-400); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-400); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-orange-500); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.15); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-500); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-150); - --canary-component-alert-danger-title: var(--canary-colors-red-800); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-cyan-600); /* Text color for success badges. Communicates positive status through readable cyan text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-red-600); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-orange-600); /* Text color for warning badges. Signals caution states with readable orange text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-orange-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-600); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-cyan-600); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-400) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-200); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-cyan-600); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.12); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.25); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-200) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-200) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-red-600); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.12); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-cyan-600); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-400); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-separator-background: var(--canary-border-width-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-900); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-orange-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-50); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-chrome-900); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-600); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-600); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-cyan-600); /* Text color for green tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-cyan-100); /* Background color for green tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for green tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-600); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-600); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-600); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-cyan-600); /* Text color for purple tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-purple-background: var(--canary-colors-cyan-100); /* Background color for purple tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for purple tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-red-text: var(--canary-colors-red-600); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-cyan-600); /* Text color for violet tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-violet-background: var(--canary-colors-cyan-100); /* Background color for violet tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for violet tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-yellow-text: var(--canary-colors-orange-600); /* Text color for yellow tags, replaced with orange for tritanopia visibility. */ - --canary-component-tag-yellow-background: var(--canary-colors-orange-100); /* Background color for yellow tags, replaced with orange for tritanopia visibility. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for yellow tags, replaced with orange for tritanopia visibility. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-background: var(--canary-colors-red-200); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-orange-200); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-300); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); - --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-brand-color-50: var(--canary-colors-chrome-150); - --canary-brand-color-100: var(--canary-colors-chrome-150); - --canary-brand-color-200: var(--canary-colors-chrome-150); - --canary-brand-color-300: var(--canary-colors-chrome-150); - --canary-brand-color-400: var(--canary-colors-chrome-150); - --canary-brand-color-500: var(--canary-colors-chrome-900); - --canary-brand-color-600: var(--canary-colors-chrome-150); - --canary-brand-color-700: var(--canary-colors-chrome-900); - --canary-brand-color-800: var(--canary-colors-chrome-900); - --canary-brand-color-900: var(--canary-colors-chrome-900); - --canary-brand-color-950: var(--canary-colors-chrome-900); - --canary-brand-on-color-50: var(--canary-colors-pure-black); - --canary-brand-on-color-100: var(--canary-colors-pure-black); - --canary-brand-on-color-200: var(--canary-colors-pure-black); - --canary-brand-on-color-300: var(--canary-colors-pure-black); - --canary-brand-on-color-400: var(--canary-colors-pure-black); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-black); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-500); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-500); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with cyan. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags, replaced with orange. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} diff --git a/packages/core-design-system/src/styles/source-light-tritanopia-desktop-harness.css b/packages/core-design-system/src/styles/source-light-tritanopia-desktop-harness.css deleted file mode 100644 index 2cba1948c3..0000000000 --- a/packages/core-design-system/src/styles/source-light-tritanopia-desktop-harness.css +++ /dev/null @@ -1,491 +0,0 @@ -/** - * Harness Design System - * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Mon, 17 Mar 2025 12:07:28 GMT - * Copyright (c) Harness. - */ - -.source-light-tritanopia-desktop-harness { - --canary-icon-stroke-width-xxs: 1.1px; - --canary-icon-stroke-width-xs: 1px; - --canary-icon-stroke-width-sm: 1.1px; - --canary-icon-stroke-width-default: 1.1px; - --canary-icon-stroke-width-md: 1.4px; - --canary-icon-stroke-width-lg: 2px; - /** - * Level 1. Represents the lowest layer in the stack. This is the foundation that everything else sits on, like the app's main background. - * - * Common uses: Application background, page base layer, lowest-level containers. - */ - --canary-background-1: var(--canary-colors-chrome-50); - /** - * Level 2. Represents elements that sit on top of the bottom layer. Creates visual hierarchy through subtle elevation. - * - * Common uses: Cards, containers, form fields, dropdown menus. - */ - --canary-background-2: var(--canary-colors-pure-white); - /** - * Level 3. Represents elements that sit on top of the middle layer. Creates strong visual emphasis through maximum elevation. - * - * Common uses: Popovers, tooltips, highlighted containers. - */ - --canary-background-3: var(--canary-colors-chrome-50); - /** - * Highest contrast color for text and icons in important content. Creates maximum readability and emphasis for key information. - * - * Common uses: Headings, labels, emphasized text, primary buttons. - */ - --canary-text-1: var(--canary-colors-chrome-950); - /** - * Primary color for text and icons in general content. Provides optimal readability for extended reading while reducing visual strain. - * - * Common uses: Body text, primary content, default icons, form inputs. - */ - --canary-text-2: var(--canary-colors-chrome-850); - /** - * Reduced emphasis color for text and icons in secondary information. Creates visual hierarchy through lower contrast. - * - * Common uses: Supporting text, metadata, secondary information, placeholders. - */ - --canary-text-3: var(--canary-colors-chrome-700); - /** - * Primary color for text and icons in success content. Communicates positive outcomes and completion states. - * - * Common uses: Success message text, completion text, positive indicators. - */ - --canary-text-success: var(--canary-colors-cyan-600); - /** - * Primary color for text and icons in error content. Communicates problems, warnings, and destructive actions. - * - * Common uses: Error message text, validation text, destructive action labels. - */ - --canary-text-danger: var(--canary-colors-red-600); - /** - * Primary color for text and icons in warning content. Communicates caution and potential issues requiring attention. - * - * Common uses: Warning message text, alert text, important notifications. - */ - --canary-text-warning: var(--canary-colors-orange-500); - /** - * Enhanced border color for interactive states. Creates strong visual definition for important boundaries. - * - * Common uses: Focus states, hover states, active elements, primary containers. - */ - --canary-border-1: var(--canary-colors-chrome-800); - /** - * Standard border color for general use. Provides balanced visual definition for common UI elements. - * - * Common uses: Containers, cards, dividers, separators, default form inputs. - */ - --canary-border-2: var(--canary-colors-chrome-100); - /** - * Softer border color for minimal separation. Creates subtle visual boundaries that don't dominate the UI. - * - * Common uses: Subtle dividers, grouped content, secondary containers, table rows. - */ - --canary-border-3: lch(from var(--canary-colors-chrome-100) l c h / 0.8); - /** - * Border color for success containers. Reinforces positive status through visual framing. - * - * Common uses: Success alert borders, confirmation boundaries, completed state indicators. - */ - --canary-border-success: var(--canary-colors-cyan-400); - /** - * Border color for error containers. Emphasizes critical information through visual framing. - * - * Common uses: Error alert borders, validation boundaries, destructive action containers. - */ - --canary-border-danger: var(--canary-colors-red-400); - /** - * Border color for warning containers. Frames cautionary information with distinct boundary. - * - * Common uses: Warning alert borders, notice boundaries, attention-requiring elements. - */ - --canary-border-warning: var(--canary-colors-orange-500); - /** - * Light overlay for gentle interactive effects. Creates subtle visual feedback during user interaction. - * - * Common uses: Button hover states, link hover states, soft interactions, menu items. - */ - --canary-state-hover: lch(from var(--canary-colors-chrome-400) l c h / 0.15); - /** - * Strong overlay for emphasized selection states. Creates distinct visual indication of active or selected elements. - * - * Common uses: Selected list items, active tabs, chosen options, current navigation item. - */ - --canary-state-selected: lch(from var(--canary-colors-chrome-400) l c h / 0.2); - /** - * Lowest emphasis text color for unavailable options. Creates visual differentiation between interactive and non-interactive elements. - * - * Common uses: Disabled buttons, inactive form elements, unavailable options, placeholders. - */ - --canary-state-disabled-text: var(--canary-colors-chrome-500); - /** - * Muted background color for disabled elements. Reduces visual prominence of non-interactive elements in the UI. - * - * Common uses: Disabled buttons, inactive form controls, unavailable options. - */ - --canary-state-disabled-background: var(--canary-colors-chrome-150); - --canary-component-alert-danger-title: var(--canary-colors-red-800); /* Text color for danger alerts. Communicates critical information through high-contrast red text. */ - --canary-component-alert-danger-description: var(--canary-colors-red-600); /* Description text color for danger alerts. Ensures readability while maintaining the error state styling. */ - --canary-component-alert-danger-background: lch(from var(--canary-colors-red-500) l c h / 0.1); /* Background color for danger alerts. Creates subtle but recognizable error state styling. */ - --canary-component-alert-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger alerts. Provides definition for error state alerts. */ - --canary-component-badge-default-background: var(--canary-colors-chrome-150); /* Background color for secondary badges. Creates less prominent badge styling for secondary information. */ - --canary-component-badge-neutral-background: lch(from var(--canary-colors-chrome-500) l c h / 0.1); /* Background color for neutral badges. Creates subtle visual styling for general-purpose indicators. */ - --canary-component-badge-neutral-border: lch(from var(--canary-colors-chrome-600) l c h / 0.2); /* Border color for outline badges. Creates definition for badges without background fill. */ - --canary-component-badge-success-text: var(--canary-colors-cyan-600); /* Text color for success badges. Communicates positive status through readable cyan text. */ - --canary-component-badge-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.2); /* Border color for success badges. Provides subtle definition for success state indicators. */ - --canary-component-badge-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.1); /* Background color for success badges. Creates a subtle but recognizable success indicator. */ - --canary-component-badge-danger-text: var(--canary-colors-red-600); /* Text color for danger badges. Communicates error or warning status with high visibility. */ - --canary-component-badge-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger badges. Creates definition for error or warning indicators. */ - --canary-component-badge-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Background color for danger badges. Provides subtle visual indication of error states. */ - --canary-component-badge-warning-text: var(--canary-colors-orange-600); /* Text color for warning badges. Signals caution states with readable orange text. */ - --canary-component-badge-warning-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for warning badges. Defines the boundary of caution status indicators. */ - --canary-component-badge-warning-background: lch(from var(--canary-colors-orange-200) l c h / 0.1); /* Background color for warning badges. Creates subtle but recognizable caution indicators. */ - --canary-component-badge-running-text: var(--canary-colors-orange-600); /* Text color for running state badges. Indicates active or in-progress operations. */ - --canary-component-badge-running-border: lch(from var(--canary-colors-orange-400) l c h / 0.2); /* Border color for running state badges. Defines the boundary of active status indicators. */ - --canary-component-badge-running-background: lch(from var(--canary-colors-orange-300) l c h / 0.1); /* Background color for running state badges. Creates subtle visual indication of in-progress states. */ - --canary-component-badge-merged-text: var(--canary-colors-cyan-600); /* Text color for merged state badges. Indicates completed merge actions in version control contexts. */ - --canary-component-badge-merged-border: lch(from var(--canary-colors-cyan-400) l c h / 0.2); /* Border color for merged state badges. Defines the boundary of merge status indicators. */ - --canary-component-badge-merged-background: lch(from var(--canary-colors-cyan-300) l c h / 0.1); /* Background color for merged state badges. Creates subtle but recognizable merge indicators. */ - --canary-component-btn-secondary-background: var(--canary-colors-chrome-200); /* Background color for secondary action buttons. Creates visual hierarchy between primary and secondary actions. */ - --canary-component-btn-success-text: var(--canary-colors-cyan-600); /* Text color for success buttons. Communicates positive actions through readable cyan text. */ - --canary-component-btn-success-background: lch(from var(--canary-colors-cyan-200) l c h / 0.12); /* Background color for success buttons. Creates subtle but recognizable positive action styling. */ - --canary-component-btn-success-border: lch(from var(--canary-colors-cyan-400) l c h / 0.25); /* Border color for success buttons. Provides definition for positive action buttons. */ - --canary-component-btn-success-state-hover: lch(from var(--canary-colors-cyan-200) l c h / 0.15); /* Hover state background color for success buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-success-state-active: lch(from var(--canary-colors-cyan-200) l c h / 0.25); /* Active state background color for success buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-btn-danger-text: var(--canary-colors-red-600); /* Text color for danger buttons. Communicates destructive or warning actions through high-contrast red text. */ - --canary-component-btn-danger-background: lch(from var(--canary-colors-red-300) l c h / 0.12); /* Background color for danger buttons. Creates subtle but recognizable destructive action styling. */ - --canary-component-btn-danger-border: lch(from var(--canary-colors-red-400) l c h / 0.2); /* Border color for danger buttons. Provides definition for destructive action buttons. */ - --canary-component-btn-danger-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.15); /* Hover state background color for danger buttons. Creates subtle feedback for user interaction. */ - --canary-component-btn-danger-state-active: lch(from var(--canary-colors-red-300) l c h / 0.25); /* Active state background color for danger buttons. Provides stronger visual feedback for clicks/presses. */ - --canary-component-dialog-backdrop: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Overlay color behind dialog components. Creates focus on the dialog by dimming content underneath. */ - --canary-component-dropdown-item-delete-state-hover: lch(from var(--canary-colors-red-300) l c h / 0.1); /* Specific hover state color for dropdown delete-item. */ - --canary-component-diff-add-content: lch(from var(--canary-colors-cyan-500) l c h / 0.12); /* Cyan background highlighting newly added code lines while maintaining readability. */ - --canary-component-diff-add-line-number: lch(from var(--canary-colors-cyan-500) l c h / 0.2); /* Background for line numbers of added code, providing visual connection to added content. */ - --canary-component-diff-add-content-highlight: lch(from var(--canary-colors-cyan-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within added lines. */ - --canary-component-diff-add-widget: var(--canary-colors-pure-white); /* Background for interactive UI elements related to added content. */ - --canary-component-diff-del-content: lch(from var(--canary-colors-red-500) l c h / 0.12); /* Red background highlighting removed code lines without causing eye strain. */ - --canary-component-diff-del-line-number: lch(from var(--canary-colors-red-500) l c h / 0.2); /* Background for line numbers of deleted code, connecting numbers to removed content. */ - --canary-component-diff-del-content-highlight: lch(from var(--canary-colors-red-500) l c h / 0.25); /* Stronger emphasis color for specific character changes within deleted lines. */ - --canary-component-diff-hunk-content: lch(from var(--canary-colors-blue-500) l c h / 0.12); /* Background for diff section headers ('hunks') that indicate which part of the file is displayed. */ - --canary-component-diff-hunk-line-number: lch(from var(--canary-colors-blue-500) l c h / 0.2); /* Background for line numbers in section headers. */ - --canary-component-link-visited: var(--canary-colors-cyan-600); /* Visited state color for text links. Differentiates links the user has already activated. */ - --canary-component-pipeline-card-error-border: var(--canary-colors-red-400); /* Border color for error pipeline states. Clearly indicates failed or problematic pipeline execution. */ - --canary-component-pipeline-card-completed-border: var(--canary-colors-cyan-400); /* Border color for completed pipeline states. Indicates successful pipeline execution. */ - --canary-component-pipeline-background-dotes: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Refers to the dotted pattern visible in the background of the workspace. */ - --canary-component-sidebar-background: var(--canary-colors-chrome-900); /* Background color for navigation components. Creates a consistent foundation for navigation elements. */ - --canary-component-sidebar-border: var(--canary-colors-chrome-850); /* Border color for navigation components. Creates visual boundaries and separation from adjacent content. */ - --canary-component-sidebar-separator: var(--canary-colors-chrome-850); /* Color for separators between navigation sections. Creates visual organization within the navigation structure. */ - --canary-component-sidebar-hover: lch(from var(--canary-colors-chrome-700) l c h / 0.15); /* Hover state for navigation items. */ - --canary-component-sidebar-selected: lch(from var(--canary-colors-chrome-700) l c h / 0.2); /* Selected state for navigation items. */ - --canary-component-sidebar-item-unselected-text: var(--canary-colors-chrome-200); /* Text color for unselected navigation items. Provides readable but less emphasized styling for available options. */ - --canary-component-sidebar-item-unselected-icon: var(--canary-colors-chrome-500); /* Icon color for unselected navigation items. Creates subtle visual indicators for navigation options. */ - --canary-component-sidebar-item-selected-text: var(--canary-colors-pure-white); /* Text color for selected navigation items. Increases contrast to highlight the current location. */ - --canary-component-sidebar-item-selected-icon: var(--canary-colors-pure-white); /* Icon color for selected navigation items. Creates stronger visual indication of the current selection. */ - --canary-component-sidebar-logo-text: var(--canary-colors-chrome-50); /* Text color for Logo in sidebar navigation. */ - --canary-component-sidebar-search-background: var(--canary-colors-chrome-950); /* Search input specific background on sidebar navigation. */ - --canary-component-sidebar-search-border: var(--canary-colors-chrome-800); /* Search input specific border on sidebar navigation. */ - --canary-component-sidebar-search-placeholder: var(--canary-colors-chrome-500); /* Search input specific placeholder on sidebar navigation. */ - --canary-component-sidebar-search-btn-background: var(--canary-colors-chrome-900); /* Search input specific button background on sidebar navigation. */ - --canary-component-sidebar-search-btn-border: var(--canary-colors-chrome-800); /* Search input specific button border on sidebar navigation. */ - --canary-component-sidebar-search-btn-text: var(--canary-colors-chrome-500); /* Search input specific button text on sidebar navigation. */ - --canary-component-sidebar-footer-username: var(--canary-colors-pure-white); /* Username in the footer sidebar navigation menu. */ - --canary-component-sidebar-footer-data: var(--canary-colors-chrome-500); /* User data in the footer sidebar navigation menu. */ - --canary-component-scrollbar-thumb: var(--canary-colors-chrome-150); /* Color for scrollbar thumb/handle elements. Provides subtle contrast against the scrollbar track for improved usability. */ - --canary-component-selection-selected-item: var(--canary-colors-pure-white); /* Color for selected items in selection controls. Creates high contrast against selected background state. */ - --canary-component-selection-selected-background: var(--canary-colors-chrome-900); /* Background color for selected state in selection controls. Creates strong visual indication of active selection. */ - --canary-component-selection-selected-border: var(--canary-colors-chrome-900); /* Border color for selected elements in selection controls. Reinforces the selected state with consistent styling. */ - --canary-component-separator-background: var(--canary-border-width-2); /* Background color for separator elements. Creates visual division between content sections with a subtle line or space. */ - --canary-component-slider-track-base: var(--canary-colors-chrome-150); /* Background color for slider tracks. Represents the full range of available values in an unselected state. */ - --canary-component-slider-track-segments-base: var(--canary-colors-chrome-300); /* Color for segment markers on the unfilled track portion. Creates visual indicators for specific values or intervals. */ - --canary-component-slider-handle-background: var(--canary-colors-chrome-100); /* Background color for slider handles. Creates a distinct, interactive element for adjusting values. */ - --canary-component-slider-handle-border: var(--canary-colors-chrome-900); /* Border color for slider handles. Provides definition and contrast for the interactive control. */ - --canary-component-status-indicator-completed: var(--canary-colors-cyan-300); /* Color for success status indicators. Communicates completed or positive states. */ - --canary-component-status-indicator-cancelled: var(--canary-colors-red-400); /* Color for danger status indicators. Communicates error or critical warning states. */ - --canary-component-status-indicator-warning: var(--canary-colors-orange-300); /* Color for warning status indicators. Communicates caution or potential issue states. */ - --canary-component-status-indicator-running: var(--canary-colors-orange-300); /* Color for running status indicators. Communicates active or in-progress operations. */ - --canary-component-status-indicator-merged: var(--canary-colors-cyan-300); /* Color for merged status indicators. Communicates successful integration or completion in version control contexts. */ - --canary-component-status-indicator-action-required: var(--canary-colors-blue-400); /* Color for action-required status indicators. Communicates that user attention or intervention is needed. */ - --canary-component-status-indicator-waiting: var(--canary-colors-chrome-400); /* Color for pending status indicators. Communicates in waiting states. */ - --canary-component-switch-unselected-background: var(--canary-colors-chrome-150); /* Background color for the unselected state of switch controls. Creates visual distinction from the selected state. */ - --canary-component-switch-selected-thumb: var(--canary-colors-chrome-50); /* Color for the movable thumb element in selected switch controls. Provides clear contrast against the active track. */ - --canary-component-switch-selected-background: var(--canary-colors-chrome-900); /* Background color for the selected state of switch controls. Creates strong visual indication of active state. */ - --canary-component-table-row-alternate-background: lch(from var(--canary-colors-chrome-200) l c h / 0.1); /* Background color for alternate table rows. Improves readability by differentiating adjacent rows. */ - --canary-component-tag-blue-text: var(--canary-colors-blue-600); /* Text color for blue tags. Ensures readability while maintaining the blue color theme. */ - --canary-component-tag-blue-background: var(--canary-colors-blue-100); /* Background color for blue tags. Creates a distinct surface with blue theme styling. */ - --canary-component-tag-blue-background-subtle: var(--canary-colors-blue-50); /* Subtle background variation for blue tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-brown-text: var(--canary-colors-brown-600); /* Text color for brown tags. Ensures readability while maintaining the brown color theme. */ - --canary-component-tag-brown-background: var(--canary-colors-brown-100); /* Background color for brown tags. Creates a distinct surface with brown theme styling. */ - --canary-component-tag-brown-background-subtle: var(--canary-colors-brown-50); /* Subtle background variation for brown tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-cyan-text: var(--canary-colors-cyan-600); /* Text color for cyan tags. Ensures readability while maintaining the cyan color theme. */ - --canary-component-tag-cyan-background: var(--canary-colors-cyan-100); /* Background color for cyan tags. Creates a distinct surface with cyan theme styling. */ - --canary-component-tag-cyan-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for cyan tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-green-text: var(--canary-colors-cyan-600); /* Text color for green tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-green-background: var(--canary-colors-cyan-100); /* Background color for green tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-green-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for green tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-indigo-text: var(--canary-colors-indigo-600); /* Text color for indigo tags. Ensures readability while maintaining the indigo color theme. */ - --canary-component-tag-indigo-background: var(--canary-colors-indigo-100); /* Background color for indigo tags. Creates a distinct surface with indigo theme styling. */ - --canary-component-tag-indigo-background-subtle: var(--canary-colors-indigo-50); /* Subtle background variation for indigo tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-lime-text: var(--canary-colors-lime-600); /* Text color for lime tags. Ensures readability while maintaining the lime color theme. */ - --canary-component-tag-lime-background: var(--canary-colors-lime-100); /* Background color for lime tags. Creates a distinct surface with lime theme styling. */ - --canary-component-tag-lime-background-subtle: var(--canary-colors-lime-50); /* Subtle background variation for lime tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-mint-text: var(--canary-colors-mint-600); /* Text color for mint tags. Ensures readability while maintaining the mint color theme. */ - --canary-component-tag-mint-background: var(--canary-colors-mint-100); /* Background color for mint tags. Creates a distinct surface with mint theme styling. */ - --canary-component-tag-mint-background-subtle: var(--canary-colors-mint-50); /* Subtle background variation for mint tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-orange-text: var(--canary-colors-orange-600); /* Text color for orange tags. Ensures readability while maintaining the orange color theme. */ - --canary-component-tag-orange-background: var(--canary-colors-orange-100); /* Background color for orange tags. Creates a distinct surface with orange theme styling. */ - --canary-component-tag-orange-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for orange tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-pink-text: var(--canary-colors-pink-600); /* Text color for pink tags. Ensures readability while maintaining the pink color theme. */ - --canary-component-tag-pink-background: var(--canary-colors-pink-100); /* Background color for pink tags. Creates a distinct surface with pink theme styling. */ - --canary-component-tag-pink-background-subtle: var(--canary-colors-pink-50); /* Subtle background variation for pink tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-purple-text: var(--canary-colors-cyan-600); /* Text color for purple tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-purple-background: var(--canary-colors-cyan-100); /* Background color for purple tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-purple-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for purple tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-red-text: var(--canary-colors-red-600); /* Text color for red tags. Ensures readability while maintaining the red color theme. */ - --canary-component-tag-red-background: var(--canary-colors-red-100); /* Background color for red tags. Creates a distinct surface with red theme styling. */ - --canary-component-tag-red-background-subtle: var(--canary-colors-red-50); /* Subtle background variation for red tags. Provides a softer alternative for less emphasis. */ - --canary-component-tag-violet-text: var(--canary-colors-cyan-600); /* Text color for violet tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-violet-background: var(--canary-colors-cyan-100); /* Background color for violet tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-violet-background-subtle: var(--canary-colors-cyan-50); /* Subtle background variation for violet tags, replaced with cyan for tritanopia visibility. */ - --canary-component-tag-yellow-text: var(--canary-colors-orange-600); /* Text color for yellow tags, replaced with orange for tritanopia visibility. */ - --canary-component-tag-yellow-background: var(--canary-colors-orange-100); /* Background color for yellow tags, replaced with orange for tritanopia visibility. */ - --canary-component-tag-yellow-background-subtle: var(--canary-colors-orange-50); /* Subtle background variation for yellow tags, replaced with orange for tritanopia visibility. */ - --canary-component-tag-gray-text: var(--canary-colors-chrome-850); /* Text color for gray tags. Ensures readability while maintaining the gray color theme. */ - --canary-component-tag-gray-background: var(--canary-colors-chrome-100); /* Background color for gray tags. Creates a distinct surface with gray theme styling. */ - --canary-component-tag-gray-background-subtle: var(--canary-colors-chrome-50); /* Subtle background variation for gray tags. Provides a softer alternative for less emphasis. */ - --canary-component-toast-danger-background: var(--canary-colors-red-200); /* Background color for danger toast notifications. Creates high-visibility indication of errors or warnings. */ - --canary-gradient-ai-gradient-stop-1: var(--canary-colors-orange-200); - --canary-gradient-ai-gradient-stop-2: var(--canary-colors-pink-300); - --canary-gradient-ai-gradient-stop-3: var(--canary-colors-cyan-300); - --canary-gradient-ai-gradient-stop-4: var(--canary-colors-cyan-200); - --canary-gradient-skeleton-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-skeleton-gradient-stop-2: var(--canary-colors-pure-white); - --canary-gradient-skeleton-gradient-stop-3: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-running-gradient-stop-1: var(--canary-colors-orange-300); - --canary-gradient-pipeline-running-gradient-stop-2: lch(from var(--canary-colors-chrome-200) l c h / 0.4); - --canary-gradient-pipeline-running-gradient-stop-3: var(--canary-colors-orange-300); - --canary-gradient-pipeline-arrows-gradient-stop-1: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-arrows-gradient-stop-2: var(--canary-colors-blue-400); - --canary-gradient-pipeline-card-background-gradient-from: var(--canary-colors-pure-white); - --canary-gradient-pipeline-card-background-gradient-to: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-from: var(--canary-colors-chrome-50); - --canary-gradient-pipeline-card-border-gradient-to: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-number-gradient-from: var(--canary-colors-chrome-500); - --canary-gradient-pipeline-widget-number-gradient-to: var(--canary-colors-chrome-600); - --canary-gradient-pipeline-widget-blob-big-gradient-from: var(--canary-colors-chrome-100); - --canary-gradient-pipeline-widget-blob-big-gradient-to: var(--canary-colors-pure-white); - --canary-gradient-pipeline-widget-blob-small-gradient-from: var(--canary-colors-chrome-150); - --canary-gradient-pipeline-widget-blob-small-gradient-to: var(--canary-colors-pure-white); - --canary-shadow-color-0: lch(from var(--canary-colors-chrome-300) l c h / 0); /* Transparent shadow color. Used when no shadow effect is desired. */ - --canary-shadow-color-1: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Light shadow color with 60% opacity. Creates subtle depth for small UI elements. */ - --canary-shadow-color-2: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Medium shadow color with 60% opacity. Provides balanced depth for common UI components. */ - --canary-shadow-color-3: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Medium shadow color with 50% opacity. Creates moderate depth for elevated components. */ - --canary-shadow-color-4: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Deep shadow color with 50% opacity. Provides significant depth for floating elements. */ - --canary-shadow-color-5: lch(from var(--canary-colors-chrome-300) l c h / 0.5); /* Very deep shadow color with 50% opacity. Creates dramatic elevation for modal content. */ - --canary-shadow-color-6: lch(from var(--canary-colors-chrome-300) l c h / 0.6); /* Extremely deep shadow color with 60% opacity. Provides maximum depth for highly elevated elements. */ - --canary-shadow-color-inner: lch(from var(--canary-colors-chrome-900) l c h / 0.1); /* Subtle inner shadow color with 10% opacity. Creates inset effect for pressed or focused states. */ - --canary-brand-color-50: var(--canary-colors-cyan-50); - --canary-brand-color-100: var(--canary-colors-cyan-100); - --canary-brand-color-200: var(--canary-colors-cyan-200); - --canary-brand-color-300: var(--canary-colors-cyan-300); - --canary-brand-color-400: var(--canary-colors-cyan-400); - --canary-brand-color-500: var(--canary-colors-cyan-500); - --canary-brand-color-600: var(--canary-colors-cyan-600); - --canary-brand-color-700: var(--canary-colors-cyan-700); - --canary-brand-color-800: var(--canary-colors-cyan-800); - --canary-brand-color-900: var(--canary-colors-cyan-900); - --canary-brand-color-950: var(--canary-colors-cyan-950); - --canary-brand-on-color-50: var(--canary-colors-chrome-950); - --canary-brand-on-color-100: var(--canary-colors-chrome-950); - --canary-brand-on-color-200: var(--canary-colors-chrome-950); - --canary-brand-on-color-300: var(--canary-colors-chrome-950); - --canary-brand-on-color-400: var(--canary-colors-chrome-950); - --canary-brand-on-color-500: var(--canary-colors-pure-white); - --canary-brand-on-color-600: var(--canary-colors-pure-white); - --canary-brand-on-color-700: var(--canary-colors-pure-white); - --canary-brand-on-color-800: var(--canary-colors-pure-white); - --canary-brand-on-color-900: var(--canary-colors-pure-white); - --canary-brand-on-color-950: var(--canary-colors-pure-white); - /** - * Contrasting color for text and icons in interactive elements or design focus. Creates visual distinction for actionable items. - * - * Common uses: Links, buttons, interactive icons, highlighted elements. - */ - --canary-text-accent: var(--canary-brand-color-500); - /** - * Focus state indicator color. Provides clear visual feedback for keyboard navigation and accessibility. - * - * Common uses: Focus rings, keyboard navigation highlights, selection indicators. - */ - --canary-border-focus: var(--canary-brand-color-500); - /** - * Muted border color for disabled element boundaries. Creates subtle containment while indicating non-interactive state. - * - * Common uses: Disabled form inputs, inactive controls, unavailable action boundaries. - */ - --canary-state-disabled-border: var(--canary-border-3); - --canary-component-accordion-title: var(--canary-text-1); /* Text color for accordion triggers/headers. Used for the clickable area that expands/collapses content. */ - --canary-component-accordion-description: var(--canary-text-2); /* Text color for accordion content. Applied to the expandable text within accordion panels. */ - --canary-component-accordion-chevron: var(--canary-text-3); /* Color for the accordion expansion indicator icon. Visually signals the collapsed/expanded state. */ - --canary-component-accordion-border: var(--canary-border-2); /* Border color for accordion items. Provides visual separation between accordion panels. */ - --canary-component-alert-default-title: var(--canary-text-1); /* Title text color for informational alerts. Ensures high visibility for the alert heading. */ - --canary-component-alert-default-description: var(--canary-text-2); /* Description text color for informational alerts. Provides readable contrast for alert content. */ - --canary-component-alert-default-background: var(--canary-background-3); /* Background color for informational alerts. Creates visual distinction from surrounding content. */ - --canary-component-alert-default-border: var(--canary-border-3); /* Border color for informational alerts. Subtly defines the alert's boundaries. */ - --canary-component-avatar-text: var(--canary-text-2); /* Text color for avatar initials or text. Ensures visibility against the avatar background. */ - --canary-component-avatar-background: var(--canary-background-3); /* Background color for avatar components. Provides contrast for text or image content. */ - --canary-component-avatar-border: var(--canary-border-3); /* Border color for avatars. Creates subtle definition around the avatar element. */ - --canary-component-badge-default-text: var(--canary-text-2); /* Text color for secondary badges. Provides readable contrast on secondary badge styling. */ - --canary-component-badge-default-border: var(--canary-component-badge-default-background); /* Border color for secondary badges. Matches background for clean, cohesive appearance. */ - --canary-component-badge-neutral-text: var(--canary-text-2); /* Text color for outline badges. Ensures readability for badges with transparent backgrounds. */ - --canary-component-badge-ai-text: var(--canary-text-1); /* Text color for AI-related badges. Ensures high contrast against AI badge gradient border. */ - --canary-component-badge-ai-background: var(--canary-background-3); /* Background color for AI-related badges. Creates a subtle backdrop that highlights the gradient border. */ - --canary-component-badge-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-related badges. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-breadcrumb-item-inactive: var(--canary-text-2); /* Text color for inactive breadcrumb items. Provides reduced emphasis for previous navigation steps. */ - --canary-component-breadcrumb-item-current: var(--canary-text-1); /* Text color for current breadcrumb item. Emphasizes the user's current location in the navigation hierarchy. */ - --canary-component-breadcrumb-separator: var(--canary-state-disabled-text); /* Color for breadcrumb separator characters. Creates visual distinction between breadcrumb items. */ - --canary-component-btn-primary-text: var(--canary-brand-on-color-500); /* Text and icon color for primary action buttons. Ensures maximum contrast and visibility for primary CTA elements. */ - --canary-component-btn-primary-background: var(--canary-brand-color-500); /* Background color for primary action buttons. Creates emphasis for the most important action in a given context. */ - --canary-component-btn-secondary-text: var(--canary-text-2); /* Text and icon color for secondary action buttons. Provides readable contrast for supporting actions. */ - --canary-component-btn-secondary-border: var(--canary-component-btn-secondary-background); /* Border color for secondary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-btn-outline-background: var(--canary-background-2); /* Background color for outline buttons. */ - --canary-component-btn-outline-unselected-text: var(--canary-text-2); /* Text color for unselected outline buttons. Provides readable contrast against transparent backgrounds. */ - --canary-component-btn-outline-unselected-icon: var(--canary-text-3); /* Icon color for unselected outline buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-outline-unselected-border: var(--canary-border-2); /* Border color for unselected outline buttons. Defines the clickable area with a visible boundary. */ - --canary-component-btn-outline-selected-text: var(--canary-text-1); /* Text color for selected outline buttons. Increases contrast for active button states. */ - --canary-component-btn-outline-selected-icon: var(--canary-text-1); /* Icon color for selected outline buttons. Increases visibility for active button states. */ - --canary-component-btn-outline-selected-border: var(--canary-border-1); /* Border color for selected outline buttons. Creates stronger visual indication of the active state. */ - --canary-component-btn-ghost-unselected-text: var(--canary-text-2); /* Text color for unselected ghost buttons. Provides readable contrast for minimal styling. */ - --canary-component-btn-ghost-unselected-icon: var(--canary-text-3); /* Icon color for unselected ghost buttons. Creates subtle emphasis for button icons. */ - --canary-component-btn-ghost-selected-text: var(--canary-text-1); /* Text color for selected ghost buttons. Increases contrast for active button states. */ - --canary-component-btn-ghost-selected-icon: var(--canary-text-1); /* Icon color for selected ghost buttons. Increases visibility for active button states. */ - --canary-component-btn-ai-text: var(--canary-text-1); /* Text color for AI-powered buttons. Ensures high contrast against AI button gradient border. */ - --canary-component-btn-ai-background: var(--canary-background-2); /* Background color for AI-powered buttons. */ - --canary-component-btn-ai-border: linear-gradient(94deg, var(--canary-gradient-ai-gradient-stop-1) 0%, var(--canary-gradient-ai-gradient-stop-2) 35%, var(--canary-gradient-ai-gradient-stop-3) 65%, var(--canary-gradient-ai-gradient-stop-4) 100%); /* Gradient border color for AI-powered buttons. Creates distinctive multi-color styling to highlight AI functionality. */ - --canary-component-card-background: var(--canary-background-2); /* Background color for card components. Creates a distinct surface that appears elevated from the page background. */ - --canary-component-card-border: var(--canary-border-2); /* Border color for card components. Defines the card boundaries and enhances visual separation from surrounding content. */ - --canary-component-dialog-title: var(--canary-text-1); /* Text color for dialog titles. Ensures high visibility and emphasis for the modal heading. */ - --canary-component-dialog-description: var(--canary-text-2); /* Text color for dialog content. Provides readable contrast for the modal's primary text content. */ - --canary-component-dialog-background: var(--canary-background-3); /* Background color for dialog components. Creates a distinct surface for modal content that appears above the main UI. */ - --canary-component-dialog-border: var(--canary-border-2); /* Border color for dialog components. */ - --canary-component-dropdown-background: var(--canary-background-2); /* Background color for dropdown menus. Creates a distinct surface for selectable options. */ - --canary-component-dropdown-border: var(--canary-border-2); /* Border color for dropdown menus container. */ - --canary-component-dropdown-item-text: var(--canary-text-2); /* Text color for dropdown menu items. Ensures readability of selectable options. */ - --canary-component-dropdown-item-delete-text: var(--canary-text-danger); /* Text color for dropdown menu delete-item. */ - --canary-component-diff-grey: var(--canary-background-1); /* Neutral base color for the diff interface that allows code and difference highlights to remain visually prominent. */ - --canary-component-diff-add-widget-color: var(--canary-text-1); /* Text/icon color for add-related interactive elements, ensuring readability. */ - --canary-component-diff-plain-content: var(--canary-background-1); /* Neutral background for unchanged code that allows modified content to stand out. */ - --canary-component-diff-plain-line-number: var(--canary-background-1); /* Background for line numbers of unchanged code, maintaining visual rhythm. */ - --canary-component-diff-plain-line-number-color: var(--canary-text-3); /* Text color for unchanged line numbers, visually subdued compared to changed content. */ - --canary-component-diff-empty-content: var(--canary-background-1); /* Background for placeholder spaces and empty lines, maintaining visual continuity. */ - --canary-component-diff-hunk-content-color: var(--canary-text-2); /* Text color for section header content showing file position information. */ - --canary-component-diff-expand-content: var(--canary-background-2); /* Background for controls that expand/collapse code sections to show additional context. */ - --canary-component-input-text: var(--canary-text-2); /* Text color for input field content. Ensures readability of user-entered information. */ - --canary-component-input-placeholder: var(--canary-text-3); /* Text color for input field placeholders. Provides lower-contrast guidance text that doesn't compete with entered content. */ - --canary-component-input-icon: var(--canary-text-3); /* Color for icons within input components. Creates visual harmony with placeholder text and decorative elements. */ - --canary-component-input-background: var(--canary-background-2); /* Background color for input fields. Creates a distinct surface for user interaction and data entry. */ - --canary-component-input-border: var(--canary-border-2); /* Border color for input fields. Defines the input area with a visible boundary for improved usability. */ - --canary-component-label-text: var(--canary-text-1); /* Text color for form labels and field identifiers. Ensures high contrast for important contextual information. */ - --canary-component-nav-tabs-unselected-text: var(--canary-text-2); /* Unselected tab item text. */ - --canary-component-nav-tabs-selected-text: var(--canary-text-1); /* Selected tab item text. */ - --canary-component-nav-tabs-border: var(--canary-border-3); /* Navigation container border. */ - --canary-component-nav-tabs-background: var(--canary-background-2); /* Navigation tabs container background. */ - --canary-component-pipeline-arrow-border: var(--canary-border-1); /* Border color for pipeline connection arrows. Defines the visual path between pipeline components. */ - --canary-component-pipeline-arrow-running-border: linear-gradient(90deg, var(--canary-gradient-pipeline-arrows-gradient-stop-1) 0%, var(--canary-gradient-pipeline-arrows-gradient-stop-2) 50%, var(--canary-gradient-pipeline-arrows-gradient-stop-3) 100%); /* Gradient border color for active pipeline arrows. Visually indicates data flow between active pipeline components. */ - --canary-component-pipeline-card-background: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-background-gradient-from) 10%, var(--canary-gradient-pipeline-card-background-gradient-to) 75%); /* Gradient background for pipeline cards. Creates a visually distinctive surface for pipeline visualization elements. */ - --canary-component-pipeline-card-border: radial-gradient(90% 100% at 15% 0%,var(--canary-gradient-pipeline-card-border-gradient-from) 10%, var(--canary-gradient-pipeline-card-border-gradient-to) 75%); /* Gradient border for pipeline cards. Enhances the visual depth and distinction of pipeline components. */ - --canary-component-pipeline-card-running-border: radial-gradient(604% 142% at 0% 0%, var(--canary-gradient-pipeline-running-gradient-stop-1) 0%, var(--canary-gradient-pipeline-running-gradient-stop-2) 30%, var(--canary-gradient-pipeline-running-gradient-stop-3) 100%); /* Animated gradient border for running pipeline states. Provides visual indication of active processing. */ - --canary-component-pipeline-card-canvas-1-background: var(--canary-background-1); /* The background color for the primary/top-level canvas where pipeline components are arranged. Creates the base visual layer for the main workflow area. */ - --canary-component-pipeline-card-canvas-1-border: var(--canary-border-3); /* Solid border for the outermost pipeline canvas elements. Defines the boundaries of the top-level workflow container. */ - --canary-component-pipeline-card-canvas-2-background: var(--canary-background-2); /* Background color for nested/secondary canvas elements that appear within the main workflow. Provides visual distinction for grouped pipeline components. */ - --canary-component-pipeline-card-canvas-2-border: var(--canary-border-2); /* Border styling applied to nested canvas containers. Creates clear visual boundaries between different sections within the pipeline visualization. */ - --canary-component-sidebar-logo-icon: var(--canary-brand-color-300); /* Icon color for Logo in sidebar navigation. */ - --canary-component-selection-unselected-item: var(--canary-text-3); /* Color for unselected items in selection controls. Provides readable but less emphasized styling for available options. */ - --canary-component-selection-unselected-background: var(--canary-background-1); /* Background color for unselected state in selection controls. Creates visual distinction from selected items. */ - --canary-component-selection-unselected-border: var(--canary-border-1); /* Border color for unselected elements in selection controls. Defines the clickable area with a visible boundary. */ - --canary-component-skeleton-background: linear-gradient(90deg, var(--canary-gradient-skeleton-gradient-stop-1) 0%, var(--canary-gradient-skeleton-gradient-stop-2) 50%, var(--canary-gradient-skeleton-gradient-stop-3) 100%); /* Animation color that sweeps across skeleton elements. Creates a "shimmer" effect indicating content loading states. */ - --canary-component-slider-track-progress: var(--canary-brand-color-500); /* Filled portion color for slider tracks. Visually represents the selected value or range within the track. */ - --canary-component-slider-track-segments-progress: var(--canary-brand-color-700); /* Color for segment markers on the filled track portion. Maintains visibility of markers within the selected range. */ - --canary-component-switch-unselected-thumb: var(--canary-text-3); /* Color for the movable thumb element in unselected switch controls. Creates visual contrast against the track. */ - --canary-component-table-header-text: var(--canary-text-2); /* Text color for table header cells. Ensures readability of column labels and titles. */ - --canary-component-table-header-background: var(--canary-background-3); /* Background color for table header rows. Creates visual distinction between headers and data rows. */ - --canary-component-table-row-border: var(--canary-border-3); /* Border color for table rows. Provides subtle separation between data rows. */ - --canary-component-table-cell-text: var(--canary-text-1); /* Text color for table cell content. Ensures high readability of tabular data. */ - --canary-component-tabs-background: var(--canary-background-1); /* Background color for the tabs container. Creates a consistent foundation for tab elements. */ - --canary-component-tabs-border: var(--canary-border-3); /* Border color for tab containers and separators. Provides subtle definition for tab boundaries. */ - --canary-component-tabs-item-unselected-text: var(--canary-text-3); /* Text color for unselected tab items. Provides reduced emphasis for available but inactive tabs. */ - --canary-component-tabs-item-unselected-background: var(--canary-background-1); /* Background color for unselected tab items. Creates visual distinction from the active tab. */ - --canary-component-tabs-item-selected-text: var(--canary-text-1); /* Text color for the selected tab item. Increases contrast to highlight the active tab. */ - --canary-component-tabs-item-selected-background: var(--canary-background-3); /* Background color for the selected tab item. Creates strong visual indication of the active tab. */ - --canary-component-tabs-item-selected-border: var(--canary-border-2); /* Border color for the selected tab item. Reinforces the active state with defined boundaries. */ - --canary-component-tag-blue-border: var(--canary-component-tag-blue-background); /* Border color for blue tags. */ - --canary-component-tag-brown-border: var(--canary-component-tag-brown-background); /* Border color for brown tags. */ - --canary-component-tag-cyan-border: var(--canary-component-tag-cyan-background); /* Border color for cyan tags. */ - --canary-component-tag-green-border: var(--canary-component-tag-green-background); /* Border color for green tags, replaced with cyan. */ - --canary-component-tag-indigo-border: var(--canary-component-tag-indigo-background); /* Border color for indigo tags. */ - --canary-component-tag-lime-border: var(--canary-component-tag-lime-background); /* Border color for lime tags. */ - --canary-component-tag-mint-border: var(--canary-component-tag-mint-background); /* Border color for mint tags. */ - --canary-component-tag-orange-border: var(--canary-component-tag-orange-background); /* Border color for orange tags. */ - --canary-component-tag-pink-border: var(--canary-component-tag-pink-background); /* Border color for pink tags. */ - --canary-component-tag-purple-border: var(--canary-component-tag-purple-background); /* Border color for purple tags, replaced with cyan. */ - --canary-component-tag-red-border: var(--canary-component-tag-red-background); /* Border color for red tags. */ - --canary-component-tag-violet-border: var(--canary-component-tag-violet-background); /* Border color for violet tags, replaced with cyan. */ - --canary-component-tag-yellow-border: var(--canary-component-tag-yellow-background); /* Border color for yellow tags, replaced with orange. */ - --canary-component-tag-gray-border: var(--canary-component-tag-gray-background); /* Border color for gray tags. */ - --canary-component-toast-default-title: var(--canary-text-1); /* Title text color for informational toast notifications. Ensures high visibility for the notification headline. */ - --canary-component-toast-default-description: var(--canary-text-2); /* Description text color for informational toast notifications. Provides readable contrast for notification content. */ - --canary-component-toast-default-background: var(--canary-background-3); /* Background color for informational toast notifications. Creates visual distinction from UI content beneath. */ - --canary-component-toast-default-border: var(--canary-border-3); /* Border color for informational toast notifications. Subtly defines the notification's boundaries. */ - --canary-component-toast-danger-title: var(--canary-text-1); /* Title text color for danger toast notifications. Provides maximum contrast against the error background. */ - --canary-component-toast-danger-description: var(--canary-text-1); /* Description text color for danger toast notifications. Ensures readability of critical information. */ - --canary-component-toast-danger-border: var(--canary-component-toast-danger-background); /* Border color for danger toast notifications. Reinforces the critical nature of the notification message. */ - --canary-component-tooltip-text: var(--canary-text-2); /* Text color for tooltip content. Ensures readability of helpful contextual information. */ - --canary-component-tooltip-background: var(--canary-background-3); /* Background color for tooltips. Creates a distinct surface for contextual information that appears above UI elements. */ - --canary-gradient-pipeline-arrows-gradient-stop-3: var(--canary-border-1); - /** - * No shadow. - * Common uses: Flat designs, disabled states, removing shadows on mobile. - */ - --canary-shadow-0: 0 0 0 0 var(--canary-shadow-color-0); - /** - * Small shadow. - * Common uses: Buttons in their rest state, form inputs, subtle UI elements. - */ - --canary-shadow-1: 0 1px 2px 0 var(--canary-shadow-color-1); - /** - * Default shadow. - * Common uses: Cards, dropdowns, popovers in their default state. - */ - --canary-shadow-2: 0 1px 3px 0 var(--canary-shadow-color-2), 0 1px 2px -1px var(--canary-shadow-color-2); - /** - * Medium shadow. - * Common uses: Elevated cards, active buttons, interactive elements on hover. - */ - --canary-shadow-3: 0 4px 6px -1px var(--canary-shadow-color-3), 0 2px 4px -2px var(--canary-shadow-color-3); - /** - * Large shadow. - * Common uses: Modals, floating panels, navigation dropdowns. - */ - --canary-shadow-4: 0 10px 15px -3px var(--canary-shadow-color-4), 0 4px 6px -4px var(--canary-shadow-color-4); - /** - * Extra large shadow. - * Common uses: Large modals, sidebars, elevated content sections. - */ - --canary-shadow-5: 0 20px 25px -5px var(--canary-shadow-color-5), 0 8px 10px -6px var(--canary-shadow-color-5); - /** - * Extra extra large shadow. - * Common uses: This aggressive shadow is typically used sparingly in UI design, primarily for elements that need maximum visual emphasis and elevation. - */ - --canary-shadow-6: 0 25px 50px -12px var(--canary-shadow-color-6); - /** - * Inner shadow. - * Common uses: Pressed buttons, selected states, inset form fields. - */ - --canary-shadow-inner: inset 0 2px 4px 0 var(--canary-shadow-color-inner); - --canary-ring-focus: 0 0 0 2px var(--canary-background-1), 0 0 0 4px var(--canary-border-focus); /* Focus ring effect with background offset and accent border. */ - --canary-component-btn-primary-border: var(--canary-component-btn-primary-background); /* Border color for primary action buttons. Matches background for clean, cohesive appearance. */ - --canary-component-link-default: var(--canary-text-accent); /* Default color for text links. Creates distinct visual identification of interactive text elements. */ - --canary-component-nav-tabs-selected-border: var(--canary-border-focus); /* Selected tab item border. */ - --canary-component-tabs-item-unselected-border: var(--canary-component-tabs-item-unselected-background); /* Border color for unselected tab items. Maintains consistent styling with the tab background. */ -} From e4af8d98ee7e1664a8da72d3f1477d992e8ae9d5 Mon Sep 17 00:00:00 2001 From: Pranesh Date: Wed, 19 Mar 2025 07:44:05 +0530 Subject: [PATCH 5/5] Updated architecture of core design system --- apps/gitness/src/test-component.tsx | 6 +- packages/core-design-system/package.json | 5 +- packages/core-design-system/scripts/build.js | 45 +- .../scripts/complete-log.js | 2 - .../core-design-system/scripts/constants.js | 7 + .../core-design-system/src/core-styles.css | 6 - .../src/styles-esm/breakpoint.ts | 2 +- .../src/styles-esm/colors.ts | 2 +- .../src/styles-esm/components.ts | 2 +- .../core-design-system/src/styles-esm/core.ts | 2 +- .../styles-esm/dark-deuteranopia-gitness.ts | 2 +- .../styles-esm/dark-deuteranopia-harness.ts | 2 +- .../dark-dimmer-deuteranopia-gitness.ts | 2 +- .../dark-dimmer-deuteranopia-harness.ts | 2 +- .../src/styles-esm/dark-dimmer-gitness.ts | 2 +- .../src/styles-esm/dark-dimmer-harness.ts | 2 +- .../dark-dimmer-protanopia-gitness.ts | 2 +- .../dark-dimmer-protanopia-harness.ts | 2 +- .../dark-dimmer-tritanopia-gitness.ts | 2 +- .../dark-dimmer-tritanopia-harness.ts | 2 +- .../src/styles-esm/dark-gitness.ts | 2 +- .../src/styles-esm/dark-harness.ts | 2 +- ...dark-high-contrast-deuteranopia-gitness.ts | 2 +- ...dark-high-contrast-deuteranopia-harness.ts | 2 +- .../styles-esm/dark-high-contrast-gitness.ts | 2 +- .../styles-esm/dark-high-contrast-harness.ts | 2 +- .../dark-high-contrast-protanopia-gitness.ts | 2 +- .../dark-high-contrast-protanopia-harness.ts | 2 +- .../dark-high-contrast-tritanopia-gitness.ts | 2 +- .../dark-high-contrast-tritanopia-harness.ts | 2 +- .../src/styles-esm/dark-protanopia-gitness.ts | 2 +- .../src/styles-esm/dark-protanopia-harness.ts | 2 +- .../src/styles-esm/dark-tritanopia-gitness.ts | 2 +- .../src/styles-esm/dark-tritanopia-harness.ts | 2 +- .../src/styles-esm/index.ts | 2 +- .../styles-esm/light-deuteranopia-gitness.ts | 2 +- .../styles-esm/light-deuteranopia-harness.ts | 2 +- .../light-dimmer-deuteranopia-gitness.ts | 2 +- .../light-dimmer-deuteranopia-harness.ts | 2 +- .../src/styles-esm/light-dimmer-gitness.ts | 2 +- .../src/styles-esm/light-dimmer-harness.ts | 2 +- .../light-dimmer-protanopia-gitness.ts | 2 +- .../light-dimmer-protanopia-harness.ts | 2 +- .../light-dimmer-tritanopia-gitness.ts | 2 +- .../light-dimmer-tritanopia-harness.ts | 2 +- .../src/styles-esm/light-gitness.ts | 2 +- .../src/styles-esm/light-harness.ts | 2 +- ...ight-high-contrast-deuteranopia-gitness.ts | 2 +- ...ight-high-contrast-deuteranopia-harness.ts | 2 +- .../styles-esm/light-high-contrast-gitness.ts | 2 +- .../styles-esm/light-high-contrast-harness.ts | 2 +- .../light-high-contrast-protanopia-gitness.ts | 2 +- .../light-high-contrast-protanopia-harness.ts | 2 +- .../light-high-contrast-tritanopia-gitness.ts | 2 +- .../light-high-contrast-tritanopia-harness.ts | 2 +- .../styles-esm/light-protanopia-gitness.ts | 2 +- .../styles-esm/light-protanopia-harness.ts | 2 +- .../styles-esm/light-tritanopia-gitness.ts | 2 +- .../styles-esm/light-tritanopia-harness.ts | 2 +- .../src/styles/breakpoint.css | 2 +- .../core-design-system/src/styles/colors.css | 2 +- .../src/styles/components.css | 2 +- .../src/styles/core-imports.css | 12 + .../core-design-system/src/styles/core.css | 2 +- .../src/styles/dark-deuteranopia-gitness.css | 2 +- .../src/styles/dark-deuteranopia-harness.css | 2 +- .../dark-dimmer-deuteranopia-gitness.css | 2 +- .../dark-dimmer-deuteranopia-harness.css | 2 +- .../src/styles/dark-dimmer-gitness.css | 2 +- .../src/styles/dark-dimmer-harness.css | 2 +- .../styles/dark-dimmer-protanopia-gitness.css | 2 +- .../styles/dark-dimmer-protanopia-harness.css | 2 +- .../styles/dark-dimmer-tritanopia-gitness.css | 2 +- .../styles/dark-dimmer-tritanopia-harness.css | 2 +- .../src/styles/dark-gitness.css | 2 +- .../src/styles/dark-harness.css | 2 +- ...ark-high-contrast-deuteranopia-gitness.css | 2 +- ...ark-high-contrast-deuteranopia-harness.css | 2 +- .../src/styles/dark-high-contrast-gitness.css | 2 +- .../src/styles/dark-high-contrast-harness.css | 2 +- .../dark-high-contrast-protanopia-gitness.css | 2 +- .../dark-high-contrast-protanopia-harness.css | 2 +- .../dark-high-contrast-tritanopia-gitness.css | 2 +- .../dark-high-contrast-tritanopia-harness.css | 2 +- .../src/styles/dark-protanopia-gitness.css | 2 +- .../src/styles/dark-protanopia-harness.css | 2 +- .../src/styles/dark-tritanopia-gitness.css | 2 +- .../src/styles/dark-tritanopia-harness.css | 2 +- .../src/styles/enterprise.css | 12 + .../core-design-system/src/styles/index.css | 64 - .../src/styles/light-deuteranopia-gitness.css | 2 +- .../src/styles/light-deuteranopia-harness.css | 2 +- .../light-dimmer-deuteranopia-gitness.css | 2 +- .../light-dimmer-deuteranopia-harness.css | 2 +- .../src/styles/light-dimmer-gitness.css | 2 +- .../src/styles/light-dimmer-harness.css | 2 +- .../light-dimmer-protanopia-gitness.css | 2 +- .../light-dimmer-protanopia-harness.css | 2 +- .../light-dimmer-tritanopia-gitness.css | 2 +- .../light-dimmer-tritanopia-harness.css | 2 +- .../src/styles/light-gitness.css | 2 +- .../src/styles/light-harness.css | 2 +- ...ght-high-contrast-deuteranopia-gitness.css | 2 +- ...ght-high-contrast-deuteranopia-harness.css | 2 +- .../styles/light-high-contrast-gitness.css | 2 +- .../styles/light-high-contrast-harness.css | 2 +- ...light-high-contrast-protanopia-gitness.css | 2 +- ...light-high-contrast-protanopia-harness.css | 2 +- ...light-high-contrast-tritanopia-gitness.css | 2 +- ...light-high-contrast-tritanopia-harness.css | 2 +- .../src/styles/light-protanopia-gitness.css | 2 +- .../src/styles/light-protanopia-harness.css | 2 +- .../src/styles/light-tritanopia-gitness.css | 2 +- .../src/styles/light-tritanopia-harness.css | 2 +- .../core-design-system/src/styles/oss.css | 34 + packages/ui/src/components/badge/badge.tsx | 1 + packages/ui/src/styles.css | 3 +- packages/ui/tailwind-design-system.ts | 22 +- .../tailwind-utils-config/components/badge.ts | 68 +- .../utilities/typography.ts | 4 +- pnpm-lock.yaml | 3107 +++++++++-------- 121 files changed, 1908 insertions(+), 1700 deletions(-) delete mode 100644 packages/core-design-system/src/core-styles.css create mode 100644 packages/core-design-system/src/styles/core-imports.css create mode 100644 packages/core-design-system/src/styles/enterprise.css delete mode 100644 packages/core-design-system/src/styles/index.css create mode 100644 packages/core-design-system/src/styles/oss.css diff --git a/apps/gitness/src/test-component.tsx b/apps/gitness/src/test-component.tsx index 322f0b7e64..026ae44cd6 100644 --- a/apps/gitness/src/test-component.tsx +++ b/apps/gitness/src/test-component.tsx @@ -22,7 +22,7 @@ export default function TestComponent() {
Default - outline + neutral Success warning danger @@ -38,7 +38,7 @@ export default function TestComponent() {
Default - outline + neutral {/* Success */} @@ -68,7 +68,7 @@ export default function TestComponent() {
Default - outline + neutral {/* Success */} diff --git a/packages/core-design-system/package.json b/packages/core-design-system/package.json index 401e1ef812..1afc1574ed 100644 --- a/packages/core-design-system/package.json +++ b/packages/core-design-system/package.json @@ -5,7 +5,9 @@ "type": "module", "main": "src/core-style-esm.js", "exports": { - "./styles": "./src/core-styles.css", + "./core-styles": "./src/styles/core-imports.css", + "./oss-styles": "./src/styles/oss.css", + "./enterprise-styles": "./src/styles/enterprise.css", "./styles-esm": "./src/core-styles-esm.ts" }, "scripts": { @@ -24,7 +26,6 @@ "license": "ISC", "devDependencies": { "@tokens-studio/sd-transforms": "^1.2.9", - "chalk-animation": "^2.0.3", "figlet": "^1.8.0", "gradient-string": "^3.0.0", "rimraf": "^6.0.1", diff --git a/packages/core-design-system/scripts/build.js b/packages/core-design-system/scripts/build.js index cc4b44378b..5c7f78edd0 100644 --- a/packages/core-design-system/scripts/build.js +++ b/packages/core-design-system/scripts/build.js @@ -10,6 +10,7 @@ import { DESIGN_SYSTEM_PREFIX, DESIGN_SYSTEM_ROOT, DESIGN_SYSTEM_ROOT_ESM, + getExportFileHeader, STYLE_BUILD_FORMATS } from './constants.js' import { generateCoreFiles, generateThemeFiles } from './sd-file-generators.js' @@ -161,36 +162,50 @@ async function createIndexFile() { // Organize files by type const coreFiles = cssFiles.filter(file => !file.startsWith('dark-') && !file.startsWith('light-')) - const darkFiles = cssFiles.filter(file => file.startsWith('dark-')) - const lightFiles = cssFiles.filter(file => file.startsWith('light-')) + const darkFiles = cssFiles.filter(file => file.includes('gitness') && file.startsWith('dark-')) + const lightFiles = cssFiles.filter(file => file.includes('gitness') && file.startsWith('light-')) - console.log('\n=== Theme File Summary (css) ===') + console.log('\n=== Theme File Summary (OSS) ===') console.table({ 'Dark Theme Files': { count: darkFiles.length }, 'Light Theme Files': { count: lightFiles.length } }) console.log('\n') - // Generate content - const content = `/** - * Harness Design System - * Main stylesheet importing all token files - * DO NOT UPDATE IT MANUALLY - * Generated on ${new Date().toUTCString()} - */ - + /** + * Core imports + * */ + const coreStyles = `${getExportFileHeader()} + /* Core tokens */ -${coreFiles.map(file => `@import './${file}';`).join('\n')} +${coreFiles.map(file => `@import './${file}';`).join('\n')}` + + /** + * OSS themes imports + * */ + const ossContent = `${getExportFileHeader()} /* Theme files - Dark */ ${darkFiles.map(file => `@import './${file}';`).join('\n')} /* Theme files - Light */ -${lightFiles.map(file => `@import './${file}';`).join('\n')}; -` +${lightFiles.map(file => `@import './${file}';`).join('\n')}` + + /** + * Enterprise themes imports + * */ + const enterpriseContent = `${getExportFileHeader()} + +/* Theme files - Dark */ +@import './dark-harness.css'; + +/* Theme files - Light */ +@import './light-harness.css';` // Write file - await fs.writeFile(`${DESIGN_SYSTEM_ROOT}/index.css`, content) + await fs.writeFile(`${DESIGN_SYSTEM_ROOT}/oss.css`, ossContent) + await fs.writeFile(`${DESIGN_SYSTEM_ROOT}/enterprise.css`, enterpriseContent) + await fs.writeFile(`${DESIGN_SYSTEM_ROOT}/core-imports.css`, coreStyles) console.log( '\n\x1b[1m\x1b[32m%s\x1b[0m', diff --git a/packages/core-design-system/scripts/complete-log.js b/packages/core-design-system/scripts/complete-log.js index c256887386..ebb1f5a346 100644 --- a/packages/core-design-system/scripts/complete-log.js +++ b/packages/core-design-system/scripts/complete-log.js @@ -1,4 +1,3 @@ -import chalkAnimation from 'chalk-animation' import figlet from 'figlet' import { summer } from 'gradient-string' @@ -20,7 +19,6 @@ export function harnessLog() { return } console.log(summer(data)) - // chalkAnimation.rainbow(data).start() } ) } diff --git a/packages/core-design-system/scripts/constants.js b/packages/core-design-system/scripts/constants.js index 9710f319d4..1354f28eb4 100644 --- a/packages/core-design-system/scripts/constants.js +++ b/packages/core-design-system/scripts/constants.js @@ -29,3 +29,10 @@ export const COMMON_CONFIG = { transforms: ['name/kebab', 'attribute/themeable', 'ts/transform/alpha'] // transformGroup: 'tokens-studio' } + +export const getExportFileHeader = () => `/** + * Harness Design System + * Main stylesheet importing all token files + * DO NOT UPDATE IT MANUALLY + * Generated on ${new Date().toUTCString()} + */` diff --git a/packages/core-design-system/src/core-styles.css b/packages/core-design-system/src/core-styles.css deleted file mode 100644 index ebd777781e..0000000000 --- a/packages/core-design-system/src/core-styles.css +++ /dev/null @@ -1,6 +0,0 @@ -/* Do not add any Custom CSS rules */ - -/* Design System */ -@import './styles/index.css'; - -/* ======= 🚨 PROTECTED ZONE - END ======= */ diff --git a/packages/core-design-system/src/styles-esm/breakpoint.ts b/packages/core-design-system/src/styles-esm/breakpoint.ts index be40814225..d7facca23d 100644 --- a/packages/core-design-system/src/styles-esm/breakpoint.ts +++ b/packages/core-design-system/src/styles-esm/breakpoint.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:26 GMT + * Generated on Tue, 18 Mar 2025 14:53:33 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/colors.ts b/packages/core-design-system/src/styles-esm/colors.ts index 340d498597..ea82ce0bea 100644 --- a/packages/core-design-system/src/styles-esm/colors.ts +++ b/packages/core-design-system/src/styles-esm/colors.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:26 GMT + * Generated on Tue, 18 Mar 2025 14:53:33 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/components.ts b/packages/core-design-system/src/styles-esm/components.ts index 4fbb90fa09..13945e5aef 100644 --- a/packages/core-design-system/src/styles-esm/components.ts +++ b/packages/core-design-system/src/styles-esm/components.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:26 GMT + * Generated on Tue, 18 Mar 2025 14:53:33 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/core.ts b/packages/core-design-system/src/styles-esm/core.ts index 67cadc8853..e732022093 100644 --- a/packages/core-design-system/src/styles-esm/core.ts +++ b/packages/core-design-system/src/styles-esm/core.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:26 GMT + * Generated on Tue, 18 Mar 2025 14:53:33 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/dark-deuteranopia-gitness.ts b/packages/core-design-system/src/styles-esm/dark-deuteranopia-gitness.ts index ef093170a5..588231ae2a 100644 --- a/packages/core-design-system/src/styles-esm/dark-deuteranopia-gitness.ts +++ b/packages/core-design-system/src/styles-esm/dark-deuteranopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:06 GMT + * Generated on Tue, 18 Mar 2025 14:53:21 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/dark-deuteranopia-harness.ts b/packages/core-design-system/src/styles-esm/dark-deuteranopia-harness.ts index cdf731f894..d34b7bc54f 100644 --- a/packages/core-design-system/src/styles-esm/dark-deuteranopia-harness.ts +++ b/packages/core-design-system/src/styles-esm/dark-deuteranopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:06 GMT + * Generated on Tue, 18 Mar 2025 14:53:21 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/dark-dimmer-deuteranopia-gitness.ts b/packages/core-design-system/src/styles-esm/dark-dimmer-deuteranopia-gitness.ts index e2b44e6f68..fb17320d36 100644 --- a/packages/core-design-system/src/styles-esm/dark-dimmer-deuteranopia-gitness.ts +++ b/packages/core-design-system/src/styles-esm/dark-dimmer-deuteranopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:08 GMT + * Generated on Tue, 18 Mar 2025 14:53:22 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/dark-dimmer-deuteranopia-harness.ts b/packages/core-design-system/src/styles-esm/dark-dimmer-deuteranopia-harness.ts index bf08bc5e18..af0cbccbe0 100644 --- a/packages/core-design-system/src/styles-esm/dark-dimmer-deuteranopia-harness.ts +++ b/packages/core-design-system/src/styles-esm/dark-dimmer-deuteranopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:07 GMT + * Generated on Tue, 18 Mar 2025 14:53:22 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/dark-dimmer-gitness.ts b/packages/core-design-system/src/styles-esm/dark-dimmer-gitness.ts index d13411bbfb..e6c1df3e4f 100644 --- a/packages/core-design-system/src/styles-esm/dark-dimmer-gitness.ts +++ b/packages/core-design-system/src/styles-esm/dark-dimmer-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:43:58 GMT + * Generated on Tue, 18 Mar 2025 14:53:17 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/dark-dimmer-harness.ts b/packages/core-design-system/src/styles-esm/dark-dimmer-harness.ts index aa50d3c006..32c84fcd3c 100644 --- a/packages/core-design-system/src/styles-esm/dark-dimmer-harness.ts +++ b/packages/core-design-system/src/styles-esm/dark-dimmer-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:43:57 GMT + * Generated on Tue, 18 Mar 2025 14:53:17 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/dark-dimmer-protanopia-gitness.ts b/packages/core-design-system/src/styles-esm/dark-dimmer-protanopia-gitness.ts index e14b25d07e..70c8a794a4 100644 --- a/packages/core-design-system/src/styles-esm/dark-dimmer-protanopia-gitness.ts +++ b/packages/core-design-system/src/styles-esm/dark-dimmer-protanopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:03 GMT + * Generated on Tue, 18 Mar 2025 14:53:20 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/dark-dimmer-protanopia-harness.ts b/packages/core-design-system/src/styles-esm/dark-dimmer-protanopia-harness.ts index 775542ad8b..4be9a2717d 100644 --- a/packages/core-design-system/src/styles-esm/dark-dimmer-protanopia-harness.ts +++ b/packages/core-design-system/src/styles-esm/dark-dimmer-protanopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:03 GMT + * Generated on Tue, 18 Mar 2025 14:53:19 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/dark-dimmer-tritanopia-gitness.ts b/packages/core-design-system/src/styles-esm/dark-dimmer-tritanopia-gitness.ts index 9b55bee358..75bd1499f2 100644 --- a/packages/core-design-system/src/styles-esm/dark-dimmer-tritanopia-gitness.ts +++ b/packages/core-design-system/src/styles-esm/dark-dimmer-tritanopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:11 GMT + * Generated on Tue, 18 Mar 2025 14:53:24 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/dark-dimmer-tritanopia-harness.ts b/packages/core-design-system/src/styles-esm/dark-dimmer-tritanopia-harness.ts index b650b7b153..10cdfee817 100644 --- a/packages/core-design-system/src/styles-esm/dark-dimmer-tritanopia-harness.ts +++ b/packages/core-design-system/src/styles-esm/dark-dimmer-tritanopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:11 GMT + * Generated on Tue, 18 Mar 2025 14:53:24 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/dark-gitness.ts b/packages/core-design-system/src/styles-esm/dark-gitness.ts index 4666dc247c..6bb6578bb7 100644 --- a/packages/core-design-system/src/styles-esm/dark-gitness.ts +++ b/packages/core-design-system/src/styles-esm/dark-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:43:56 GMT + * Generated on Tue, 18 Mar 2025 14:53:16 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/dark-harness.ts b/packages/core-design-system/src/styles-esm/dark-harness.ts index 20f75ab6ef..f997e0dc12 100644 --- a/packages/core-design-system/src/styles-esm/dark-harness.ts +++ b/packages/core-design-system/src/styles-esm/dark-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:43:55 GMT + * Generated on Tue, 18 Mar 2025 14:53:16 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/dark-high-contrast-deuteranopia-gitness.ts b/packages/core-design-system/src/styles-esm/dark-high-contrast-deuteranopia-gitness.ts index 3a4839873a..32eea493bc 100644 --- a/packages/core-design-system/src/styles-esm/dark-high-contrast-deuteranopia-gitness.ts +++ b/packages/core-design-system/src/styles-esm/dark-high-contrast-deuteranopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:08 GMT + * Generated on Tue, 18 Mar 2025 14:53:23 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/dark-high-contrast-deuteranopia-harness.ts b/packages/core-design-system/src/styles-esm/dark-high-contrast-deuteranopia-harness.ts index df053a1c8f..dd3bdba1b2 100644 --- a/packages/core-design-system/src/styles-esm/dark-high-contrast-deuteranopia-harness.ts +++ b/packages/core-design-system/src/styles-esm/dark-high-contrast-deuteranopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:08 GMT + * Generated on Tue, 18 Mar 2025 14:53:22 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/dark-high-contrast-gitness.ts b/packages/core-design-system/src/styles-esm/dark-high-contrast-gitness.ts index e0073bfcbe..262223fdd0 100644 --- a/packages/core-design-system/src/styles-esm/dark-high-contrast-gitness.ts +++ b/packages/core-design-system/src/styles-esm/dark-high-contrast-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:00 GMT + * Generated on Tue, 18 Mar 2025 14:53:18 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/dark-high-contrast-harness.ts b/packages/core-design-system/src/styles-esm/dark-high-contrast-harness.ts index b0e830a6ca..c44a5c200a 100644 --- a/packages/core-design-system/src/styles-esm/dark-high-contrast-harness.ts +++ b/packages/core-design-system/src/styles-esm/dark-high-contrast-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:00 GMT + * Generated on Tue, 18 Mar 2025 14:53:18 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/dark-high-contrast-protanopia-gitness.ts b/packages/core-design-system/src/styles-esm/dark-high-contrast-protanopia-gitness.ts index 78018c1d84..fbc092f409 100644 --- a/packages/core-design-system/src/styles-esm/dark-high-contrast-protanopia-gitness.ts +++ b/packages/core-design-system/src/styles-esm/dark-high-contrast-protanopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:05 GMT + * Generated on Tue, 18 Mar 2025 14:53:21 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/dark-high-contrast-protanopia-harness.ts b/packages/core-design-system/src/styles-esm/dark-high-contrast-protanopia-harness.ts index d0445b2e98..d4693b9b6c 100644 --- a/packages/core-design-system/src/styles-esm/dark-high-contrast-protanopia-harness.ts +++ b/packages/core-design-system/src/styles-esm/dark-high-contrast-protanopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:04 GMT + * Generated on Tue, 18 Mar 2025 14:53:20 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/dark-high-contrast-tritanopia-gitness.ts b/packages/core-design-system/src/styles-esm/dark-high-contrast-tritanopia-gitness.ts index d550031f84..88829ec8c9 100644 --- a/packages/core-design-system/src/styles-esm/dark-high-contrast-tritanopia-gitness.ts +++ b/packages/core-design-system/src/styles-esm/dark-high-contrast-tritanopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:13 GMT + * Generated on Tue, 18 Mar 2025 14:53:25 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/dark-high-contrast-tritanopia-harness.ts b/packages/core-design-system/src/styles-esm/dark-high-contrast-tritanopia-harness.ts index 5b7b23c963..67c4d5341b 100644 --- a/packages/core-design-system/src/styles-esm/dark-high-contrast-tritanopia-harness.ts +++ b/packages/core-design-system/src/styles-esm/dark-high-contrast-tritanopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:12 GMT + * Generated on Tue, 18 Mar 2025 14:53:25 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/dark-protanopia-gitness.ts b/packages/core-design-system/src/styles-esm/dark-protanopia-gitness.ts index f6aa542796..513d920b00 100644 --- a/packages/core-design-system/src/styles-esm/dark-protanopia-gitness.ts +++ b/packages/core-design-system/src/styles-esm/dark-protanopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:02 GMT + * Generated on Tue, 18 Mar 2025 14:53:19 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/dark-protanopia-harness.ts b/packages/core-design-system/src/styles-esm/dark-protanopia-harness.ts index 0c877c7c70..cefaf2948c 100644 --- a/packages/core-design-system/src/styles-esm/dark-protanopia-harness.ts +++ b/packages/core-design-system/src/styles-esm/dark-protanopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:01 GMT + * Generated on Tue, 18 Mar 2025 14:53:19 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/dark-tritanopia-gitness.ts b/packages/core-design-system/src/styles-esm/dark-tritanopia-gitness.ts index 171e075dfe..24f458d853 100644 --- a/packages/core-design-system/src/styles-esm/dark-tritanopia-gitness.ts +++ b/packages/core-design-system/src/styles-esm/dark-tritanopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:10 GMT + * Generated on Tue, 18 Mar 2025 14:53:24 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/dark-tritanopia-harness.ts b/packages/core-design-system/src/styles-esm/dark-tritanopia-harness.ts index 9b86fc5edb..e38cfbf000 100644 --- a/packages/core-design-system/src/styles-esm/dark-tritanopia-harness.ts +++ b/packages/core-design-system/src/styles-esm/dark-tritanopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:09 GMT + * Generated on Tue, 18 Mar 2025 14:53:23 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/index.ts b/packages/core-design-system/src/styles-esm/index.ts index 02ca60d26e..a87fbb7517 100644 --- a/packages/core-design-system/src/styles-esm/index.ts +++ b/packages/core-design-system/src/styles-esm/index.ts @@ -1,7 +1,7 @@ /** * Harness Design System * DO NOT UPDATE IT MANUALLY - * Generated on Tue, 18 Mar 2025 06:44:26 GMT + * Generated on Tue, 18 Mar 2025 14:53:33 GMT */ /* Theme files - Combined */ diff --git a/packages/core-design-system/src/styles-esm/light-deuteranopia-gitness.ts b/packages/core-design-system/src/styles-esm/light-deuteranopia-gitness.ts index cbc230a898..253efa6ee9 100644 --- a/packages/core-design-system/src/styles-esm/light-deuteranopia-gitness.ts +++ b/packages/core-design-system/src/styles-esm/light-deuteranopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:20 GMT + * Generated on Tue, 18 Mar 2025 14:53:30 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/light-deuteranopia-harness.ts b/packages/core-design-system/src/styles-esm/light-deuteranopia-harness.ts index f143159443..d38ee460e3 100644 --- a/packages/core-design-system/src/styles-esm/light-deuteranopia-harness.ts +++ b/packages/core-design-system/src/styles-esm/light-deuteranopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:19 GMT + * Generated on Tue, 18 Mar 2025 14:53:29 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/light-dimmer-deuteranopia-gitness.ts b/packages/core-design-system/src/styles-esm/light-dimmer-deuteranopia-gitness.ts index f5b3cf934f..b68ed51dc1 100644 --- a/packages/core-design-system/src/styles-esm/light-dimmer-deuteranopia-gitness.ts +++ b/packages/core-design-system/src/styles-esm/light-dimmer-deuteranopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:21 GMT + * Generated on Tue, 18 Mar 2025 14:53:30 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/light-dimmer-deuteranopia-harness.ts b/packages/core-design-system/src/styles-esm/light-dimmer-deuteranopia-harness.ts index 772c10e156..9413b84708 100644 --- a/packages/core-design-system/src/styles-esm/light-dimmer-deuteranopia-harness.ts +++ b/packages/core-design-system/src/styles-esm/light-dimmer-deuteranopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:21 GMT + * Generated on Tue, 18 Mar 2025 14:53:30 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/light-dimmer-gitness.ts b/packages/core-design-system/src/styles-esm/light-dimmer-gitness.ts index 02bb03bdd8..6ee25f9afa 100644 --- a/packages/core-design-system/src/styles-esm/light-dimmer-gitness.ts +++ b/packages/core-design-system/src/styles-esm/light-dimmer-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:14 GMT + * Generated on Tue, 18 Mar 2025 14:53:26 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/light-dimmer-harness.ts b/packages/core-design-system/src/styles-esm/light-dimmer-harness.ts index 58a326f7c0..595e2d766e 100644 --- a/packages/core-design-system/src/styles-esm/light-dimmer-harness.ts +++ b/packages/core-design-system/src/styles-esm/light-dimmer-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:14 GMT + * Generated on Tue, 18 Mar 2025 14:53:25 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/light-dimmer-protanopia-gitness.ts b/packages/core-design-system/src/styles-esm/light-dimmer-protanopia-gitness.ts index 98d786316b..56cfaaf0fc 100644 --- a/packages/core-design-system/src/styles-esm/light-dimmer-protanopia-gitness.ts +++ b/packages/core-design-system/src/styles-esm/light-dimmer-protanopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:17 GMT + * Generated on Tue, 18 Mar 2025 14:53:28 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/light-dimmer-protanopia-harness.ts b/packages/core-design-system/src/styles-esm/light-dimmer-protanopia-harness.ts index 983771bcd5..0fa8b7fcfe 100644 --- a/packages/core-design-system/src/styles-esm/light-dimmer-protanopia-harness.ts +++ b/packages/core-design-system/src/styles-esm/light-dimmer-protanopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:17 GMT + * Generated on Tue, 18 Mar 2025 14:53:28 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/light-dimmer-tritanopia-gitness.ts b/packages/core-design-system/src/styles-esm/light-dimmer-tritanopia-gitness.ts index 57585e864f..f848cf962f 100644 --- a/packages/core-design-system/src/styles-esm/light-dimmer-tritanopia-gitness.ts +++ b/packages/core-design-system/src/styles-esm/light-dimmer-tritanopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:25 GMT + * Generated on Tue, 18 Mar 2025 14:53:32 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/light-dimmer-tritanopia-harness.ts b/packages/core-design-system/src/styles-esm/light-dimmer-tritanopia-harness.ts index d9f312d1f8..0f9dcf32af 100644 --- a/packages/core-design-system/src/styles-esm/light-dimmer-tritanopia-harness.ts +++ b/packages/core-design-system/src/styles-esm/light-dimmer-tritanopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:25 GMT + * Generated on Tue, 18 Mar 2025 14:53:32 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/light-gitness.ts b/packages/core-design-system/src/styles-esm/light-gitness.ts index 3613daac76..843df43689 100644 --- a/packages/core-design-system/src/styles-esm/light-gitness.ts +++ b/packages/core-design-system/src/styles-esm/light-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:43:59 GMT + * Generated on Tue, 18 Mar 2025 14:53:18 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/light-harness.ts b/packages/core-design-system/src/styles-esm/light-harness.ts index 5d0397c7fd..b90fc0505d 100644 --- a/packages/core-design-system/src/styles-esm/light-harness.ts +++ b/packages/core-design-system/src/styles-esm/light-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:43:59 GMT + * Generated on Tue, 18 Mar 2025 14:53:17 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/light-high-contrast-deuteranopia-gitness.ts b/packages/core-design-system/src/styles-esm/light-high-contrast-deuteranopia-gitness.ts index 092933d00f..4437f921f3 100644 --- a/packages/core-design-system/src/styles-esm/light-high-contrast-deuteranopia-gitness.ts +++ b/packages/core-design-system/src/styles-esm/light-high-contrast-deuteranopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:23 GMT + * Generated on Tue, 18 Mar 2025 14:53:31 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/light-high-contrast-deuteranopia-harness.ts b/packages/core-design-system/src/styles-esm/light-high-contrast-deuteranopia-harness.ts index cdc098ac71..4bea6f80e7 100644 --- a/packages/core-design-system/src/styles-esm/light-high-contrast-deuteranopia-harness.ts +++ b/packages/core-design-system/src/styles-esm/light-high-contrast-deuteranopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:22 GMT + * Generated on Tue, 18 Mar 2025 14:53:31 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/light-high-contrast-gitness.ts b/packages/core-design-system/src/styles-esm/light-high-contrast-gitness.ts index 0c9eee23f0..3ba47e0b7e 100644 --- a/packages/core-design-system/src/styles-esm/light-high-contrast-gitness.ts +++ b/packages/core-design-system/src/styles-esm/light-high-contrast-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:15 GMT + * Generated on Tue, 18 Mar 2025 14:53:27 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/light-high-contrast-harness.ts b/packages/core-design-system/src/styles-esm/light-high-contrast-harness.ts index 23d4b05763..17bd31d8f2 100644 --- a/packages/core-design-system/src/styles-esm/light-high-contrast-harness.ts +++ b/packages/core-design-system/src/styles-esm/light-high-contrast-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:14 GMT + * Generated on Tue, 18 Mar 2025 14:53:26 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/light-high-contrast-protanopia-gitness.ts b/packages/core-design-system/src/styles-esm/light-high-contrast-protanopia-gitness.ts index a12fca52f5..6db57af4ea 100644 --- a/packages/core-design-system/src/styles-esm/light-high-contrast-protanopia-gitness.ts +++ b/packages/core-design-system/src/styles-esm/light-high-contrast-protanopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:19 GMT + * Generated on Tue, 18 Mar 2025 14:53:29 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/light-high-contrast-protanopia-harness.ts b/packages/core-design-system/src/styles-esm/light-high-contrast-protanopia-harness.ts index f58175d31d..3ced1d42f7 100644 --- a/packages/core-design-system/src/styles-esm/light-high-contrast-protanopia-harness.ts +++ b/packages/core-design-system/src/styles-esm/light-high-contrast-protanopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:18 GMT + * Generated on Tue, 18 Mar 2025 14:53:29 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/light-high-contrast-tritanopia-gitness.ts b/packages/core-design-system/src/styles-esm/light-high-contrast-tritanopia-gitness.ts index f53a89a430..11640e9c3c 100644 --- a/packages/core-design-system/src/styles-esm/light-high-contrast-tritanopia-gitness.ts +++ b/packages/core-design-system/src/styles-esm/light-high-contrast-tritanopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:26 GMT + * Generated on Tue, 18 Mar 2025 14:53:33 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/light-high-contrast-tritanopia-harness.ts b/packages/core-design-system/src/styles-esm/light-high-contrast-tritanopia-harness.ts index 3187d6e319..b3355d6476 100644 --- a/packages/core-design-system/src/styles-esm/light-high-contrast-tritanopia-harness.ts +++ b/packages/core-design-system/src/styles-esm/light-high-contrast-tritanopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:26 GMT + * Generated on Tue, 18 Mar 2025 14:53:33 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/light-protanopia-gitness.ts b/packages/core-design-system/src/styles-esm/light-protanopia-gitness.ts index 303a0c0d60..d5e76a7965 100644 --- a/packages/core-design-system/src/styles-esm/light-protanopia-gitness.ts +++ b/packages/core-design-system/src/styles-esm/light-protanopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:17 GMT + * Generated on Tue, 18 Mar 2025 14:53:27 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/light-protanopia-harness.ts b/packages/core-design-system/src/styles-esm/light-protanopia-harness.ts index 9e5b0e8a12..0b49ca327f 100644 --- a/packages/core-design-system/src/styles-esm/light-protanopia-harness.ts +++ b/packages/core-design-system/src/styles-esm/light-protanopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:16 GMT + * Generated on Tue, 18 Mar 2025 14:53:27 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/light-tritanopia-gitness.ts b/packages/core-design-system/src/styles-esm/light-tritanopia-gitness.ts index b76cd3cd1f..f0ba04f3fd 100644 --- a/packages/core-design-system/src/styles-esm/light-tritanopia-gitness.ts +++ b/packages/core-design-system/src/styles-esm/light-tritanopia-gitness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:24 GMT + * Generated on Tue, 18 Mar 2025 14:53:32 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles-esm/light-tritanopia-harness.ts b/packages/core-design-system/src/styles-esm/light-tritanopia-harness.ts index be22e1776d..9f74458d8f 100644 --- a/packages/core-design-system/src/styles-esm/light-tritanopia-harness.ts +++ b/packages/core-design-system/src/styles-esm/light-tritanopia-harness.ts @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:23 GMT + * Generated on Tue, 18 Mar 2025 14:53:31 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/breakpoint.css b/packages/core-design-system/src/styles/breakpoint.css index 9c104993c7..72df4a6bf9 100644 --- a/packages/core-design-system/src/styles/breakpoint.css +++ b/packages/core-design-system/src/styles/breakpoint.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:26 GMT + * Generated on Tue, 18 Mar 2025 14:53:33 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/colors.css b/packages/core-design-system/src/styles/colors.css index 93a1aa38de..880952fd59 100644 --- a/packages/core-design-system/src/styles/colors.css +++ b/packages/core-design-system/src/styles/colors.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:26 GMT + * Generated on Tue, 18 Mar 2025 14:53:33 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/components.css b/packages/core-design-system/src/styles/components.css index 3c6d272ba4..6385dde8ea 100644 --- a/packages/core-design-system/src/styles/components.css +++ b/packages/core-design-system/src/styles/components.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:26 GMT + * Generated on Tue, 18 Mar 2025 14:53:33 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/core-imports.css b/packages/core-design-system/src/styles/core-imports.css new file mode 100644 index 0000000000..8004dd59bd --- /dev/null +++ b/packages/core-design-system/src/styles/core-imports.css @@ -0,0 +1,12 @@ +/** + * Harness Design System + * Main stylesheet importing all token files + * DO NOT UPDATE IT MANUALLY + * Generated on Tue, 18 Mar 2025 14:53:33 GMT + */ + +/* Core tokens */ +@import './breakpoint.css'; +@import './colors.css'; +@import './components.css'; +@import './core.css'; \ No newline at end of file diff --git a/packages/core-design-system/src/styles/core.css b/packages/core-design-system/src/styles/core.css index 421f6398cb..bddac4f60c 100644 --- a/packages/core-design-system/src/styles/core.css +++ b/packages/core-design-system/src/styles/core.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:26 GMT + * Generated on Tue, 18 Mar 2025 14:53:33 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/dark-deuteranopia-gitness.css b/packages/core-design-system/src/styles/dark-deuteranopia-gitness.css index d05f0320a5..c9c888bfbf 100644 --- a/packages/core-design-system/src/styles/dark-deuteranopia-gitness.css +++ b/packages/core-design-system/src/styles/dark-deuteranopia-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:06 GMT + * Generated on Tue, 18 Mar 2025 14:53:21 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/dark-deuteranopia-harness.css b/packages/core-design-system/src/styles/dark-deuteranopia-harness.css index 20250410f2..ba78acb1c8 100644 --- a/packages/core-design-system/src/styles/dark-deuteranopia-harness.css +++ b/packages/core-design-system/src/styles/dark-deuteranopia-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:06 GMT + * Generated on Tue, 18 Mar 2025 14:53:21 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/dark-dimmer-deuteranopia-gitness.css b/packages/core-design-system/src/styles/dark-dimmer-deuteranopia-gitness.css index 2e8fbe8969..3827d9531c 100644 --- a/packages/core-design-system/src/styles/dark-dimmer-deuteranopia-gitness.css +++ b/packages/core-design-system/src/styles/dark-dimmer-deuteranopia-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:08 GMT + * Generated on Tue, 18 Mar 2025 14:53:22 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/dark-dimmer-deuteranopia-harness.css b/packages/core-design-system/src/styles/dark-dimmer-deuteranopia-harness.css index eb749060c0..226be54219 100644 --- a/packages/core-design-system/src/styles/dark-dimmer-deuteranopia-harness.css +++ b/packages/core-design-system/src/styles/dark-dimmer-deuteranopia-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:07 GMT + * Generated on Tue, 18 Mar 2025 14:53:22 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/dark-dimmer-gitness.css b/packages/core-design-system/src/styles/dark-dimmer-gitness.css index 8e6d82d4c5..7ff8850427 100644 --- a/packages/core-design-system/src/styles/dark-dimmer-gitness.css +++ b/packages/core-design-system/src/styles/dark-dimmer-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:43:58 GMT + * Generated on Tue, 18 Mar 2025 14:53:17 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/dark-dimmer-harness.css b/packages/core-design-system/src/styles/dark-dimmer-harness.css index 904013ced3..09e5565fdb 100644 --- a/packages/core-design-system/src/styles/dark-dimmer-harness.css +++ b/packages/core-design-system/src/styles/dark-dimmer-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:43:57 GMT + * Generated on Tue, 18 Mar 2025 14:53:17 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/dark-dimmer-protanopia-gitness.css b/packages/core-design-system/src/styles/dark-dimmer-protanopia-gitness.css index 8e89860d69..c8e3dd1d92 100644 --- a/packages/core-design-system/src/styles/dark-dimmer-protanopia-gitness.css +++ b/packages/core-design-system/src/styles/dark-dimmer-protanopia-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:03 GMT + * Generated on Tue, 18 Mar 2025 14:53:20 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/dark-dimmer-protanopia-harness.css b/packages/core-design-system/src/styles/dark-dimmer-protanopia-harness.css index c8cc4fa8ea..3627e6f0bf 100644 --- a/packages/core-design-system/src/styles/dark-dimmer-protanopia-harness.css +++ b/packages/core-design-system/src/styles/dark-dimmer-protanopia-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:03 GMT + * Generated on Tue, 18 Mar 2025 14:53:19 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/dark-dimmer-tritanopia-gitness.css b/packages/core-design-system/src/styles/dark-dimmer-tritanopia-gitness.css index d88930b740..30838218f6 100644 --- a/packages/core-design-system/src/styles/dark-dimmer-tritanopia-gitness.css +++ b/packages/core-design-system/src/styles/dark-dimmer-tritanopia-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:11 GMT + * Generated on Tue, 18 Mar 2025 14:53:24 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/dark-dimmer-tritanopia-harness.css b/packages/core-design-system/src/styles/dark-dimmer-tritanopia-harness.css index f5bf7e20a0..07e864e5d5 100644 --- a/packages/core-design-system/src/styles/dark-dimmer-tritanopia-harness.css +++ b/packages/core-design-system/src/styles/dark-dimmer-tritanopia-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:11 GMT + * Generated on Tue, 18 Mar 2025 14:53:24 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/dark-gitness.css b/packages/core-design-system/src/styles/dark-gitness.css index e91aa1dc59..7f9a4a57ab 100644 --- a/packages/core-design-system/src/styles/dark-gitness.css +++ b/packages/core-design-system/src/styles/dark-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:43:56 GMT + * Generated on Tue, 18 Mar 2025 14:53:16 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/dark-harness.css b/packages/core-design-system/src/styles/dark-harness.css index 355ccc2914..41889dfbbd 100644 --- a/packages/core-design-system/src/styles/dark-harness.css +++ b/packages/core-design-system/src/styles/dark-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:43:55 GMT + * Generated on Tue, 18 Mar 2025 14:53:16 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/dark-high-contrast-deuteranopia-gitness.css b/packages/core-design-system/src/styles/dark-high-contrast-deuteranopia-gitness.css index c080d94da5..85ec3a7497 100644 --- a/packages/core-design-system/src/styles/dark-high-contrast-deuteranopia-gitness.css +++ b/packages/core-design-system/src/styles/dark-high-contrast-deuteranopia-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:08 GMT + * Generated on Tue, 18 Mar 2025 14:53:23 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/dark-high-contrast-deuteranopia-harness.css b/packages/core-design-system/src/styles/dark-high-contrast-deuteranopia-harness.css index bb10bb63ab..e90dfccd8d 100644 --- a/packages/core-design-system/src/styles/dark-high-contrast-deuteranopia-harness.css +++ b/packages/core-design-system/src/styles/dark-high-contrast-deuteranopia-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:08 GMT + * Generated on Tue, 18 Mar 2025 14:53:22 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/dark-high-contrast-gitness.css b/packages/core-design-system/src/styles/dark-high-contrast-gitness.css index 345f6e8fac..df1cec0d75 100644 --- a/packages/core-design-system/src/styles/dark-high-contrast-gitness.css +++ b/packages/core-design-system/src/styles/dark-high-contrast-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:00 GMT + * Generated on Tue, 18 Mar 2025 14:53:18 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/dark-high-contrast-harness.css b/packages/core-design-system/src/styles/dark-high-contrast-harness.css index 8ad6cb8b00..0d36e2d81c 100644 --- a/packages/core-design-system/src/styles/dark-high-contrast-harness.css +++ b/packages/core-design-system/src/styles/dark-high-contrast-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:00 GMT + * Generated on Tue, 18 Mar 2025 14:53:18 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/dark-high-contrast-protanopia-gitness.css b/packages/core-design-system/src/styles/dark-high-contrast-protanopia-gitness.css index fb0ba84217..82d8f55b32 100644 --- a/packages/core-design-system/src/styles/dark-high-contrast-protanopia-gitness.css +++ b/packages/core-design-system/src/styles/dark-high-contrast-protanopia-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:05 GMT + * Generated on Tue, 18 Mar 2025 14:53:21 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/dark-high-contrast-protanopia-harness.css b/packages/core-design-system/src/styles/dark-high-contrast-protanopia-harness.css index 780afe6dd3..41e48e6571 100644 --- a/packages/core-design-system/src/styles/dark-high-contrast-protanopia-harness.css +++ b/packages/core-design-system/src/styles/dark-high-contrast-protanopia-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:04 GMT + * Generated on Tue, 18 Mar 2025 14:53:20 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/dark-high-contrast-tritanopia-gitness.css b/packages/core-design-system/src/styles/dark-high-contrast-tritanopia-gitness.css index 66293c9c59..9ab827fcd2 100644 --- a/packages/core-design-system/src/styles/dark-high-contrast-tritanopia-gitness.css +++ b/packages/core-design-system/src/styles/dark-high-contrast-tritanopia-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:13 GMT + * Generated on Tue, 18 Mar 2025 14:53:25 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/dark-high-contrast-tritanopia-harness.css b/packages/core-design-system/src/styles/dark-high-contrast-tritanopia-harness.css index 8dd6ad0b71..314d679dc0 100644 --- a/packages/core-design-system/src/styles/dark-high-contrast-tritanopia-harness.css +++ b/packages/core-design-system/src/styles/dark-high-contrast-tritanopia-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:12 GMT + * Generated on Tue, 18 Mar 2025 14:53:25 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/dark-protanopia-gitness.css b/packages/core-design-system/src/styles/dark-protanopia-gitness.css index 916b59385a..56b9979941 100644 --- a/packages/core-design-system/src/styles/dark-protanopia-gitness.css +++ b/packages/core-design-system/src/styles/dark-protanopia-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:02 GMT + * Generated on Tue, 18 Mar 2025 14:53:19 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/dark-protanopia-harness.css b/packages/core-design-system/src/styles/dark-protanopia-harness.css index 39a1ea9437..789a6defcc 100644 --- a/packages/core-design-system/src/styles/dark-protanopia-harness.css +++ b/packages/core-design-system/src/styles/dark-protanopia-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:01 GMT + * Generated on Tue, 18 Mar 2025 14:53:19 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/dark-tritanopia-gitness.css b/packages/core-design-system/src/styles/dark-tritanopia-gitness.css index a63280611d..91b2bf2390 100644 --- a/packages/core-design-system/src/styles/dark-tritanopia-gitness.css +++ b/packages/core-design-system/src/styles/dark-tritanopia-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:10 GMT + * Generated on Tue, 18 Mar 2025 14:53:24 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/dark-tritanopia-harness.css b/packages/core-design-system/src/styles/dark-tritanopia-harness.css index f5dd10e675..366832a78f 100644 --- a/packages/core-design-system/src/styles/dark-tritanopia-harness.css +++ b/packages/core-design-system/src/styles/dark-tritanopia-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:09 GMT + * Generated on Tue, 18 Mar 2025 14:53:23 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/enterprise.css b/packages/core-design-system/src/styles/enterprise.css new file mode 100644 index 0000000000..f0ed7605b8 --- /dev/null +++ b/packages/core-design-system/src/styles/enterprise.css @@ -0,0 +1,12 @@ +/** + * Harness Design System + * Main stylesheet importing all token files + * DO NOT UPDATE IT MANUALLY + * Generated on Tue, 18 Mar 2025 14:53:33 GMT + */ + +/* Theme files - Dark */ +@import './dark-harness.css'; + +/* Theme files - Light */ +@import './light-harness.css'; \ No newline at end of file diff --git a/packages/core-design-system/src/styles/index.css b/packages/core-design-system/src/styles/index.css deleted file mode 100644 index 0d7c0f08af..0000000000 --- a/packages/core-design-system/src/styles/index.css +++ /dev/null @@ -1,64 +0,0 @@ -/** - * Harness Design System - * Main stylesheet importing all token files - * DO NOT UPDATE IT MANUALLY - * Generated on Tue, 18 Mar 2025 06:44:26 GMT - */ - -/* Core tokens */ -@import './breakpoint.css'; -@import './colors.css'; -@import './components.css'; -@import './core.css'; - -/* Theme files - Dark */ -@import './dark-deuteranopia-gitness.css'; -@import './dark-deuteranopia-harness.css'; -@import './dark-dimmer-deuteranopia-gitness.css'; -@import './dark-dimmer-deuteranopia-harness.css'; -@import './dark-dimmer-gitness.css'; -@import './dark-dimmer-harness.css'; -@import './dark-dimmer-protanopia-gitness.css'; -@import './dark-dimmer-protanopia-harness.css'; -@import './dark-dimmer-tritanopia-gitness.css'; -@import './dark-dimmer-tritanopia-harness.css'; -@import './dark-gitness.css'; -@import './dark-harness.css'; -@import './dark-high-contrast-deuteranopia-gitness.css'; -@import './dark-high-contrast-deuteranopia-harness.css'; -@import './dark-high-contrast-gitness.css'; -@import './dark-high-contrast-harness.css'; -@import './dark-high-contrast-protanopia-gitness.css'; -@import './dark-high-contrast-protanopia-harness.css'; -@import './dark-high-contrast-tritanopia-gitness.css'; -@import './dark-high-contrast-tritanopia-harness.css'; -@import './dark-protanopia-gitness.css'; -@import './dark-protanopia-harness.css'; -@import './dark-tritanopia-gitness.css'; -@import './dark-tritanopia-harness.css'; - -/* Theme files - Light */ -@import './light-deuteranopia-gitness.css'; -@import './light-deuteranopia-harness.css'; -@import './light-dimmer-deuteranopia-gitness.css'; -@import './light-dimmer-deuteranopia-harness.css'; -@import './light-dimmer-gitness.css'; -@import './light-dimmer-harness.css'; -@import './light-dimmer-protanopia-gitness.css'; -@import './light-dimmer-protanopia-harness.css'; -@import './light-dimmer-tritanopia-gitness.css'; -@import './light-dimmer-tritanopia-harness.css'; -@import './light-gitness.css'; -@import './light-harness.css'; -@import './light-high-contrast-deuteranopia-gitness.css'; -@import './light-high-contrast-deuteranopia-harness.css'; -@import './light-high-contrast-gitness.css'; -@import './light-high-contrast-harness.css'; -@import './light-high-contrast-protanopia-gitness.css'; -@import './light-high-contrast-protanopia-harness.css'; -@import './light-high-contrast-tritanopia-gitness.css'; -@import './light-high-contrast-tritanopia-harness.css'; -@import './light-protanopia-gitness.css'; -@import './light-protanopia-harness.css'; -@import './light-tritanopia-gitness.css'; -@import './light-tritanopia-harness.css';; diff --git a/packages/core-design-system/src/styles/light-deuteranopia-gitness.css b/packages/core-design-system/src/styles/light-deuteranopia-gitness.css index 2712a4436b..51671863ab 100644 --- a/packages/core-design-system/src/styles/light-deuteranopia-gitness.css +++ b/packages/core-design-system/src/styles/light-deuteranopia-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:20 GMT + * Generated on Tue, 18 Mar 2025 14:53:30 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/light-deuteranopia-harness.css b/packages/core-design-system/src/styles/light-deuteranopia-harness.css index c45ceda35a..2dbde15488 100644 --- a/packages/core-design-system/src/styles/light-deuteranopia-harness.css +++ b/packages/core-design-system/src/styles/light-deuteranopia-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:19 GMT + * Generated on Tue, 18 Mar 2025 14:53:29 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/light-dimmer-deuteranopia-gitness.css b/packages/core-design-system/src/styles/light-dimmer-deuteranopia-gitness.css index 79ca82d906..8ea37aa10c 100644 --- a/packages/core-design-system/src/styles/light-dimmer-deuteranopia-gitness.css +++ b/packages/core-design-system/src/styles/light-dimmer-deuteranopia-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:21 GMT + * Generated on Tue, 18 Mar 2025 14:53:30 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/light-dimmer-deuteranopia-harness.css b/packages/core-design-system/src/styles/light-dimmer-deuteranopia-harness.css index 8705cdfebb..8ddbc26d77 100644 --- a/packages/core-design-system/src/styles/light-dimmer-deuteranopia-harness.css +++ b/packages/core-design-system/src/styles/light-dimmer-deuteranopia-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:21 GMT + * Generated on Tue, 18 Mar 2025 14:53:30 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/light-dimmer-gitness.css b/packages/core-design-system/src/styles/light-dimmer-gitness.css index 5c0795e6ea..9b4d7d367a 100644 --- a/packages/core-design-system/src/styles/light-dimmer-gitness.css +++ b/packages/core-design-system/src/styles/light-dimmer-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:14 GMT + * Generated on Tue, 18 Mar 2025 14:53:26 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/light-dimmer-harness.css b/packages/core-design-system/src/styles/light-dimmer-harness.css index 07733ba0bb..6b6c48cc7d 100644 --- a/packages/core-design-system/src/styles/light-dimmer-harness.css +++ b/packages/core-design-system/src/styles/light-dimmer-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:14 GMT + * Generated on Tue, 18 Mar 2025 14:53:25 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/light-dimmer-protanopia-gitness.css b/packages/core-design-system/src/styles/light-dimmer-protanopia-gitness.css index e54e5c877e..b8d424ade4 100644 --- a/packages/core-design-system/src/styles/light-dimmer-protanopia-gitness.css +++ b/packages/core-design-system/src/styles/light-dimmer-protanopia-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:17 GMT + * Generated on Tue, 18 Mar 2025 14:53:28 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/light-dimmer-protanopia-harness.css b/packages/core-design-system/src/styles/light-dimmer-protanopia-harness.css index 4c6a12ce10..8d615da228 100644 --- a/packages/core-design-system/src/styles/light-dimmer-protanopia-harness.css +++ b/packages/core-design-system/src/styles/light-dimmer-protanopia-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:17 GMT + * Generated on Tue, 18 Mar 2025 14:53:28 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/light-dimmer-tritanopia-gitness.css b/packages/core-design-system/src/styles/light-dimmer-tritanopia-gitness.css index e381739b1d..0d0ea000e7 100644 --- a/packages/core-design-system/src/styles/light-dimmer-tritanopia-gitness.css +++ b/packages/core-design-system/src/styles/light-dimmer-tritanopia-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:25 GMT + * Generated on Tue, 18 Mar 2025 14:53:32 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/light-dimmer-tritanopia-harness.css b/packages/core-design-system/src/styles/light-dimmer-tritanopia-harness.css index 419af5bfa2..7c9eac1f88 100644 --- a/packages/core-design-system/src/styles/light-dimmer-tritanopia-harness.css +++ b/packages/core-design-system/src/styles/light-dimmer-tritanopia-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:25 GMT + * Generated on Tue, 18 Mar 2025 14:53:32 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/light-gitness.css b/packages/core-design-system/src/styles/light-gitness.css index cf2edcbac9..79f8fb6cb7 100644 --- a/packages/core-design-system/src/styles/light-gitness.css +++ b/packages/core-design-system/src/styles/light-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:43:59 GMT + * Generated on Tue, 18 Mar 2025 14:53:18 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/light-harness.css b/packages/core-design-system/src/styles/light-harness.css index 2f03aea28e..f0f90b7eb3 100644 --- a/packages/core-design-system/src/styles/light-harness.css +++ b/packages/core-design-system/src/styles/light-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:43:59 GMT + * Generated on Tue, 18 Mar 2025 14:53:17 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/light-high-contrast-deuteranopia-gitness.css b/packages/core-design-system/src/styles/light-high-contrast-deuteranopia-gitness.css index 6282afe440..1dc8b902e5 100644 --- a/packages/core-design-system/src/styles/light-high-contrast-deuteranopia-gitness.css +++ b/packages/core-design-system/src/styles/light-high-contrast-deuteranopia-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:23 GMT + * Generated on Tue, 18 Mar 2025 14:53:31 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/light-high-contrast-deuteranopia-harness.css b/packages/core-design-system/src/styles/light-high-contrast-deuteranopia-harness.css index f6caf999e2..e7197278ff 100644 --- a/packages/core-design-system/src/styles/light-high-contrast-deuteranopia-harness.css +++ b/packages/core-design-system/src/styles/light-high-contrast-deuteranopia-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:22 GMT + * Generated on Tue, 18 Mar 2025 14:53:31 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/light-high-contrast-gitness.css b/packages/core-design-system/src/styles/light-high-contrast-gitness.css index 9a1c1e76f2..001255e0d2 100644 --- a/packages/core-design-system/src/styles/light-high-contrast-gitness.css +++ b/packages/core-design-system/src/styles/light-high-contrast-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:15 GMT + * Generated on Tue, 18 Mar 2025 14:53:27 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/light-high-contrast-harness.css b/packages/core-design-system/src/styles/light-high-contrast-harness.css index 8465580a12..1145b26d3b 100644 --- a/packages/core-design-system/src/styles/light-high-contrast-harness.css +++ b/packages/core-design-system/src/styles/light-high-contrast-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:14 GMT + * Generated on Tue, 18 Mar 2025 14:53:26 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/light-high-contrast-protanopia-gitness.css b/packages/core-design-system/src/styles/light-high-contrast-protanopia-gitness.css index 06891d7b88..1909f35795 100644 --- a/packages/core-design-system/src/styles/light-high-contrast-protanopia-gitness.css +++ b/packages/core-design-system/src/styles/light-high-contrast-protanopia-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:19 GMT + * Generated on Tue, 18 Mar 2025 14:53:29 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/light-high-contrast-protanopia-harness.css b/packages/core-design-system/src/styles/light-high-contrast-protanopia-harness.css index b3a72350dd..643a42f862 100644 --- a/packages/core-design-system/src/styles/light-high-contrast-protanopia-harness.css +++ b/packages/core-design-system/src/styles/light-high-contrast-protanopia-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:18 GMT + * Generated on Tue, 18 Mar 2025 14:53:29 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/light-high-contrast-tritanopia-gitness.css b/packages/core-design-system/src/styles/light-high-contrast-tritanopia-gitness.css index a4dc5537fc..167443a393 100644 --- a/packages/core-design-system/src/styles/light-high-contrast-tritanopia-gitness.css +++ b/packages/core-design-system/src/styles/light-high-contrast-tritanopia-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:26 GMT + * Generated on Tue, 18 Mar 2025 14:53:33 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/light-high-contrast-tritanopia-harness.css b/packages/core-design-system/src/styles/light-high-contrast-tritanopia-harness.css index 116e1b5401..4abbfb9484 100644 --- a/packages/core-design-system/src/styles/light-high-contrast-tritanopia-harness.css +++ b/packages/core-design-system/src/styles/light-high-contrast-tritanopia-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:26 GMT + * Generated on Tue, 18 Mar 2025 14:53:33 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/light-protanopia-gitness.css b/packages/core-design-system/src/styles/light-protanopia-gitness.css index 2cb86f2167..4c2106bedd 100644 --- a/packages/core-design-system/src/styles/light-protanopia-gitness.css +++ b/packages/core-design-system/src/styles/light-protanopia-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:17 GMT + * Generated on Tue, 18 Mar 2025 14:53:27 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/light-protanopia-harness.css b/packages/core-design-system/src/styles/light-protanopia-harness.css index 65cbc01940..e52116824a 100644 --- a/packages/core-design-system/src/styles/light-protanopia-harness.css +++ b/packages/core-design-system/src/styles/light-protanopia-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:16 GMT + * Generated on Tue, 18 Mar 2025 14:53:27 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/light-tritanopia-gitness.css b/packages/core-design-system/src/styles/light-tritanopia-gitness.css index 30f988690d..dd92d22223 100644 --- a/packages/core-design-system/src/styles/light-tritanopia-gitness.css +++ b/packages/core-design-system/src/styles/light-tritanopia-gitness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:24 GMT + * Generated on Tue, 18 Mar 2025 14:53:32 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/light-tritanopia-harness.css b/packages/core-design-system/src/styles/light-tritanopia-harness.css index e7162d9aba..d5072c7fe0 100644 --- a/packages/core-design-system/src/styles/light-tritanopia-harness.css +++ b/packages/core-design-system/src/styles/light-tritanopia-harness.css @@ -1,7 +1,7 @@ /** * Harness Design System * Generated style tokens - DO NOT EDIT DIRECTLY - * Generated on Tue, 18 Mar 2025 06:44:23 GMT + * Generated on Tue, 18 Mar 2025 14:53:31 GMT * Copyright (c) Harness. */ diff --git a/packages/core-design-system/src/styles/oss.css b/packages/core-design-system/src/styles/oss.css new file mode 100644 index 0000000000..f6d69ad4d8 --- /dev/null +++ b/packages/core-design-system/src/styles/oss.css @@ -0,0 +1,34 @@ +/** + * Harness Design System + * Main stylesheet importing all token files + * DO NOT UPDATE IT MANUALLY + * Generated on Tue, 18 Mar 2025 14:53:33 GMT + */ + +/* Theme files - Dark */ +@import './dark-deuteranopia-gitness.css'; +@import './dark-dimmer-deuteranopia-gitness.css'; +@import './dark-dimmer-gitness.css'; +@import './dark-dimmer-protanopia-gitness.css'; +@import './dark-dimmer-tritanopia-gitness.css'; +@import './dark-gitness.css'; +@import './dark-high-contrast-deuteranopia-gitness.css'; +@import './dark-high-contrast-gitness.css'; +@import './dark-high-contrast-protanopia-gitness.css'; +@import './dark-high-contrast-tritanopia-gitness.css'; +@import './dark-protanopia-gitness.css'; +@import './dark-tritanopia-gitness.css'; + +/* Theme files - Light */ +@import './light-deuteranopia-gitness.css'; +@import './light-dimmer-deuteranopia-gitness.css'; +@import './light-dimmer-gitness.css'; +@import './light-dimmer-protanopia-gitness.css'; +@import './light-dimmer-tritanopia-gitness.css'; +@import './light-gitness.css'; +@import './light-high-contrast-deuteranopia-gitness.css'; +@import './light-high-contrast-gitness.css'; +@import './light-high-contrast-protanopia-gitness.css'; +@import './light-high-contrast-tritanopia-gitness.css'; +@import './light-protanopia-gitness.css'; +@import './light-tritanopia-gitness.css'; \ No newline at end of file diff --git a/packages/ui/src/components/badge/badge.tsx b/packages/ui/src/components/badge/badge.tsx index d2828eede9..f5d21e277b 100644 --- a/packages/ui/src/components/badge/badge.tsx +++ b/packages/ui/src/components/badge/badge.tsx @@ -44,6 +44,7 @@ const badgeVariants = cva('inline-flex items-center transition-colors badge', { size: { default: '', sm: 'badge-sm', + xl: 'h-[18px] px-2 text-12', lg: 'px-3 py-1 text-xs font-normal', md: 'h-6 px-2.5', diff --git a/packages/ui/src/styles.css b/packages/ui/src/styles.css index fe4e690feb..72b61f616a 100644 --- a/packages/ui/src/styles.css +++ b/packages/ui/src/styles.css @@ -1,6 +1,7 @@ /* @import url('./shared-style-variables.css'); */ -@import url('@harnessio/core-design-system/styles'); +@import url('@harnessio/core-design-system/core-styles'); +@import url('@harnessio/core-design-system/oss-styles'); @tailwind base; @tailwind components; diff --git a/packages/ui/tailwind-design-system.ts b/packages/ui/tailwind-design-system.ts index b1683f8a9e..a89b6604a6 100644 --- a/packages/ui/tailwind-design-system.ts +++ b/packages/ui/tailwind-design-system.ts @@ -113,17 +113,19 @@ export default { }, /* New colors design variables */ foreground: { - 1: 'var(--canary-text-1)', - 2: 'var(--canary-text-2)', - 4: 'var(--canary-text-3)', - 5: 'var(--canary-text-3)', - 8: 'var(--canary-text-3)', - accent: 'var(--canary-text-3)' + 1: 'var(--cn-text-1)', + 2: 'var(--cn-text-2)', + 4: 'var(--cn-text-3)', + 3: 'var(--cn-text-3)', + 5: 'var(--cn-text-3)', + 8: 'var(--cn-text-3)', + accent: 'var(--cn-text-3)' }, background: { - 1: 'var(--canary-background-1)', - surface: 'var(--canary-background-1)', - 9: 'var(--canary-background-3)' + 1: 'var(--cn-background-1)', + 3: 'var(--cn-background-1)', + surface: 'var(--cn-background-1)', + 9: 'var(--cn-background-3)' } }, @@ -204,7 +206,7 @@ export default { plugin(({ addUtilities }) => { addUtilities(typographyStyles) }), - plugin(({ addComponents, theme }) => { + plugin(({ addComponents }) => { addComponents(badgeStyles) }), tailwindcssAnimate, diff --git a/packages/ui/tailwind-utils-config/components/badge.ts b/packages/ui/tailwind-utils-config/components/badge.ts index 3619d18de0..537a8df56e 100644 --- a/packages/ui/tailwind-utils-config/components/badge.ts +++ b/packages/ui/tailwind-utils-config/components/badge.ts @@ -1,51 +1,53 @@ -import { PluginAPI } from 'tailwindcss/types/config' - export default { '.badge': { - border: 'var(--canary-badge-border) solid var(--canary-component-badge-default-border)', - color: 'var(--canary-component-badge-default-text)', - backgroundColor: 'var(--canary-component-badge-default-background)', - padding: 'var(--canary-badge-default-py) var(--canary-badge-default-px)', - gap: 'var(--canary-badge-default-gap)', - height: 'var(--canary-badge-size-default)', + border: 'var(--cn-badge-border) solid var(--cn-component-badge-default-border)', + color: 'var(--cn-component-badge-default-text)', + backgroundColor: 'var(--cn-component-badge-default-background)', + padding: 'var(--cn-badge-default-py) var(--cn-badge-default-px)', + gap: 'var(--cn-badge-default-gap)', + height: 'var(--cn-badge-size-default)', + + // '&:hover': { + // backgroundColor: 'var(--cn-state-hover)' + // }, // font: theme!('font.caption.soft'), /** * Variants */ '&-neutral': { - color: 'var(--canary-component-badge-neutral-text)', - backgroundColor: 'var(--canary-component-badge-neutral-background)', - borderColor: 'var(--canary-component-badge-neutral-border)' + color: 'var(--cn-component-badge-neutral-text)', + backgroundColor: 'var(--cn-component-badge-neutral-background)', + borderColor: 'var(--cn-component-badge-neutral-border)' }, '&-success': { - color: 'var(--canary-component-badge-success-text)', - backgroundColor: 'var(--canary-component-badge-success-background)', - borderColor: 'var(--canary-component-badge-success-border)' + color: 'var(--cn-component-badge-success-text)', + backgroundColor: 'var(--cn-component-badge-success-background)', + borderColor: 'var(--cn-component-badge-success-border)' }, '&-warning': { - color: 'var(--canary-component-badge-warning-text)', - backgroundColor: 'var(--canary-component-badge-warning-background)', - borderColor: 'var(--canary-component-badge-warning-border)' + color: 'var(--cn-component-badge-warning-text)', + backgroundColor: 'var(--cn-component-badge-warning-background)', + borderColor: 'var(--cn-component-badge-warning-border)' }, '&-danger': { - color: 'var(--canary-component-badge-danger-text)', - backgroundColor: 'var(--canary-component-badge-danger-background)', - borderColor: 'var(--canary-component-badge-danger-border)' + color: 'var(--cn-component-badge-danger-text)', + backgroundColor: 'var(--cn-component-badge-danger-background)', + borderColor: 'var(--cn-component-badge-danger-border)' }, '&-running': { - color: 'var(--canary-component-badge-running-text)', - backgroundColor: 'var(--canary-component-badge-running-background)', - borderColor: 'var(--canary-component-badge-running-border)' + color: 'var(--cn-component-badge-running-text)', + backgroundColor: 'var(--cn-component-badge-running-background)', + borderColor: 'var(--cn-component-badge-running-border)' }, '&-merged': { - color: 'var(--canary-component-badge-merged-text)', - backgroundColor: 'var(--canary-component-badge-merged-background)', - borderColor: 'var(--canary-component-badge-merged-border)' + color: 'var(--cn-component-badge-merged-text)', + backgroundColor: 'var(--cn-component-badge-merged-background)', + borderColor: 'var(--cn-component-badge-merged-border)' }, '&-ai': { - color: 'var(--canary-component-badge-ai-text)', - backgroundImage: `linear-gradient(to right, var(--canary-component-badge-ai-background), var(--canary-component-badge-ai-background)), var(--canary-component-badge-ai-border)`, + color: 'var(--cn-component-badge-ai-text)', + backgroundImage: `linear-gradient(to right, var(--cn-component-badge-ai-background), var(--cn-component-badge-ai-background)), var(--cn-component-badge-ai-border)`, backgroundOrigin: 'border-box', backgroundClip: 'padding-box, border-box', border: '1px solid transparent' @@ -57,12 +59,12 @@ export default { '&-rounded': { '&-default': { - borderRadius: 'var(--canary-badge-default-radius)' + borderRadius: 'var(--cn-badge-default-radius)' }, '&-full': { - padding: 'var(--canary-badge-default-py) var(--canary-badge-rounded-px)', - borderRadius: 'var(--canary-badge-rounded-radius)' + padding: 'var(--cn-badge-default-py) var(--cn-badge-rounded-px)', + borderRadius: 'var(--cn-badge-rounded-radius)' } }, @@ -71,8 +73,8 @@ export default { */ '&-sm': { - height: 'var(--canary-badge-size-sm)', - // font: 'var(--canary-caption-soft)' + height: 'var(--cn-badge-size-sm)', + // font: 'var(--cn-caption-soft)' '@apply font-caption-soft': '' } } diff --git a/packages/ui/tailwind-utils-config/utilities/typography.ts b/packages/ui/tailwind-utils-config/utilities/typography.ts index 0fa84af4af..26c7cda566 100644 --- a/packages/ui/tailwind-utils-config/utilities/typography.ts +++ b/packages/ui/tailwind-utils-config/utilities/typography.ts @@ -1,10 +1,10 @@ export default { '.font': { '&-caption-soft': { - font: 'var(--canary-caption-soft)' + font: 'var(--cn-caption-soft)' }, '&-caption-normal': { - font: 'var(--canary-caption-normal)' + font: 'var(--cn-caption-normal)' } } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e9c0b47bc7..4c45b26a22 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -31,13 +31,13 @@ importers: version: 9.1.0(eslint@8.57.1) eslint-import-resolver-typescript: specifier: ^3.6.3 - version: 3.8.3(eslint-plugin-import@2.31.0)(eslint@8.57.1) + version: 3.9.1(eslint-plugin-import@2.31.0)(eslint@8.57.1) eslint-plugin-i18next: specifier: ^6.1.1 version: 6.1.1 eslint-plugin-import: specifier: ^2.31.0 - version: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.8.3)(eslint@8.57.1) + version: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.9.1)(eslint@8.57.1) eslint-plugin-jsx-a11y: specifier: ^6.10.2 version: 6.10.2(eslint@8.57.1) @@ -58,7 +58,7 @@ importers: version: 9.1.7 lint-staged: specifier: ^15.2.9 - version: 15.4.3 + version: 15.5.0 prettier: specifier: ^3.3.3 version: 3.5.3 @@ -70,7 +70,7 @@ importers: version: 6.0.1 typescript-eslint: specifier: ^8.14.0 - version: 8.26.0(eslint@8.57.1)(typescript@5.8.2) + version: 8.26.1(eslint@8.57.1)(typescript@5.8.2) apps/design-system: dependencies: @@ -119,7 +119,7 @@ importers: version: 17.0.26(@types/react@17.0.83) '@vitejs/plugin-react-swc': specifier: ^3.7.2 - version: 3.8.0(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) + version: 3.8.0(vite@6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) eslint: specifier: ^8.57.1 version: 8.57.1 @@ -131,19 +131,19 @@ importers: version: 15.15.0 lint-staged: specifier: ^15.2.9 - version: 15.4.3 + version: 15.5.0 typescript: specifier: ~5.6.2 version: 5.6.3 typescript-eslint: specifier: ^8.15.0 - version: 8.26.0(eslint@8.57.1)(typescript@5.6.3) + version: 8.26.1(eslint@8.57.1)(typescript@5.6.3) vite: specifier: ^6.0.3 - version: 6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + version: 6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) vite-tsconfig-paths: specifier: ^5.1.4 - version: 5.1.4(typescript@5.6.3)(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) + version: 5.1.4(typescript@5.6.3)(vite@6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) apps/gitness: dependencies: @@ -194,13 +194,13 @@ importers: version: 11.11.1 i18next: specifier: ^24.0.2 - version: 24.2.2(typescript@5.8.2) + version: 24.2.3(typescript@5.8.2) i18next-browser-languagedetector: specifier: ^8.0.0 version: 8.0.4 jotai: specifier: ^2.6.3 - version: 2.12.1(@types/react@17.0.83)(react@17.0.2) + version: 2.12.2(@types/react@17.0.83)(react@17.0.2) lang-map: specifier: ^0.4.0 version: 0.4.0 @@ -212,7 +212,7 @@ importers: version: 0.40.0 monaco-editor-webpack-plugin: specifier: ^7.1.0 - version: 7.1.0(monaco-editor@0.40.0)(webpack@5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4)) + version: 7.1.0(monaco-editor@0.40.0)(webpack@5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4)) monaco-yaml: specifier: ^4.0.4 version: 4.0.4(monaco-editor@0.40.0) @@ -230,7 +230,7 @@ importers: version: 7.54.2(react@17.0.2) react-i18next: specifier: ^15.1.1 - version: 15.4.1(i18next@24.2.2(typescript@5.8.2))(react-dom@17.0.2(react@17.0.2))(react@17.0.2) + version: 15.4.1(i18next@24.2.3(typescript@5.8.2))(react-dom@17.0.2(react@17.0.2))(react@17.0.2) react-router-dom: specifier: ^6.26.0 version: 6.30.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2) @@ -246,13 +246,13 @@ importers: devDependencies: '@eslint/js': specifier: ^9.9.0 - version: 9.21.0 + version: 9.22.0 '@git-diff-view/react': specifier: ^0.0.16 version: 0.0.16(react-dom@17.0.2(react@17.0.2))(react@17.0.2) '@swc/core': specifier: ^1.9.3 - version: 1.11.7 + version: 1.11.11 '@testing-library/dom': specifier: ^10.4.0 version: 10.4.0 @@ -276,13 +276,13 @@ importers: version: 17.0.26(@types/react@17.0.83) '@vitejs/plugin-react-swc': specifier: ^3.7.2 - version: 3.8.0(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) + version: 3.8.0(vite@6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) '@vitest/coverage-istanbul': specifier: ^2.1.8 - version: 2.1.8(vitest@2.1.9(@types/node@22.13.9)(jsdom@25.0.1)(terser@5.39.0)) + version: 2.1.9(vitest@2.1.9(@types/node@22.13.10)(jsdom@25.0.1)(terser@5.39.0)) css-loader: specifier: ^7.1.2 - version: 7.1.2(webpack@5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4)) + version: 7.1.2(webpack@5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4)) eslint: specifier: ^8.57.1 version: 8.57.1 @@ -297,7 +297,7 @@ importers: version: 15.15.0 html-webpack-plugin: specifier: ^5.6.0 - version: 5.6.3(webpack@5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4)) + version: 5.6.3(webpack@5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4)) immer: specifier: ^10.1.1 version: 10.1.1 @@ -306,19 +306,19 @@ importers: version: 4.1.5 postcss-loader: specifier: ^8.1.1 - version: 8.1.1(postcss@8.5.3)(typescript@5.8.2)(webpack@5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4)) + version: 8.1.1(postcss@8.5.3)(typescript@5.8.2)(webpack@5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4)) prettier: specifier: ^3.0.3 version: 3.5.3 raw-loader: specifier: ^4.0.2 - version: 4.0.2(webpack@5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4)) + version: 4.0.2(webpack@5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4)) style-loader: specifier: ^4.0.0 - version: 4.0.0(webpack@5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4)) + version: 4.0.0(webpack@5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4)) swc-loader: specifier: ^0.2.6 - version: 0.2.6(@swc/core@1.11.7)(webpack@5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4)) + version: 0.2.6(@swc/core@1.11.11)(webpack@5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4)) tailwindcss: specifier: ^3.4.4 version: 3.4.17 @@ -327,19 +327,19 @@ importers: version: 5.8.2 typescript-eslint: specifier: ^8.0.1 - version: 8.26.0(eslint@8.57.1)(typescript@5.8.2) + version: 8.26.1(eslint@8.57.1)(typescript@5.8.2) vite: specifier: ^6.0.3 - version: 6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + version: 6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) vite-plugin-monaco-editor: specifier: ^1.1.0 version: 1.1.0(monaco-editor@0.40.0) vitest: specifier: ^2.1.2 - version: 2.1.9(@types/node@22.13.9)(jsdom@25.0.1)(terser@5.39.0) + version: 2.1.9(@types/node@22.13.10)(jsdom@25.0.1)(terser@5.39.0) webpack: specifier: ^5.98.0 - version: 5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4) + version: 5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4) webpack-cli: specifier: ^5.1.4 version: 5.1.4(webpack-dev-server@5.2.0)(webpack@5.98.0) @@ -351,16 +351,16 @@ importers: dependencies: '@astrojs/react': specifier: ^4.2.0 - version: 4.2.1(@types/node@22.13.9)(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(jiti@1.21.7)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)(terser@5.39.0)(yaml@2.7.0) + version: 4.2.1(@types/node@22.13.10)(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(jiti@1.21.7)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)(terser@5.39.0)(yaml@2.7.0) '@astrojs/starlight': specifier: ^0.31.1 - version: 0.31.1(astro@5.4.2(@types/node@22.13.9)(jiti@1.21.7)(rollup@4.34.9)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0)) + version: 0.31.1(astro@5.5.3(@types/node@22.13.10)(jiti@1.21.7)(rollup@4.36.0)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0)) '@astrojs/starlight-tailwind': specifier: ^3.0.0 - version: 3.0.0(@astrojs/starlight@0.31.1(astro@5.4.2(@types/node@22.13.9)(jiti@1.21.7)(rollup@4.34.9)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0)))(@astrojs/tailwind@6.0.0(astro@5.4.2(@types/node@22.13.9)(jiti@1.21.7)(rollup@4.34.9)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0))(tailwindcss@3.4.17))(tailwindcss@3.4.17) + version: 3.0.0(@astrojs/starlight@0.31.1(astro@5.5.3(@types/node@22.13.10)(jiti@1.21.7)(rollup@4.36.0)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0)))(@astrojs/tailwind@6.0.0(astro@5.5.3(@types/node@22.13.10)(jiti@1.21.7)(rollup@4.36.0)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0))(tailwindcss@3.4.17))(tailwindcss@3.4.17) '@astrojs/tailwind': specifier: ^6.0.0 - version: 6.0.0(astro@5.4.2(@types/node@22.13.9)(jiti@1.21.7)(rollup@4.34.9)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0))(tailwindcss@3.4.17) + version: 6.0.0(astro@5.5.3(@types/node@22.13.10)(jiti@1.21.7)(rollup@4.36.0)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0))(tailwindcss@3.4.17) '@harnessio/ui': specifier: workspace:* version: link:../../packages/ui @@ -369,7 +369,7 @@ importers: version: 1.2.5(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2) astro: specifier: ^5.2.6 - version: 5.4.2(@types/node@22.13.9)(jiti@1.21.7)(rollup@4.34.9)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0) + version: 5.5.3(@types/node@22.13.10)(jiti@1.21.7)(rollup@4.36.0)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0) class-variance-authority: specifier: ^0.7.0 version: 0.7.1 @@ -415,7 +415,7 @@ importers: version: 17.0.83 lint-staged: specifier: ^15.2.9 - version: 15.4.3 + version: 15.5.0 prettier: specifier: ^3.4.2 version: 3.5.3 @@ -526,7 +526,7 @@ importers: version: 2.1.1 cmdk: specifier: ^1.0.0 - version: 1.0.4(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2) + version: 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2) date-fns: specifier: ^3.6.0 version: 3.6.0 @@ -581,7 +581,7 @@ importers: version: 4.17.12 '@types/node': specifier: ^20.14.9 - version: 20.17.23 + version: 20.17.24 '@types/react': specifier: ^17.0.3 version: 17.0.83 @@ -590,10 +590,10 @@ importers: version: 17.0.26(@types/react@17.0.83) '@vitejs/plugin-react-swc': specifier: ^3.7.2 - version: 3.8.0(vite@6.2.0(@types/node@20.17.23)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) + version: 3.8.0(vite@6.2.2(@types/node@20.17.24)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) autoprefixer: specifier: ^10.4.19 - version: 10.4.20(postcss@8.5.3) + version: 10.4.21(postcss@8.5.3) eslint: specifier: ^8.57.1 version: 8.57.1 @@ -608,7 +608,7 @@ importers: version: 15.15.0 jest: specifier: ^29.7.0 - version: 29.7.0(@types/node@20.17.23) + version: 29.7.0(@types/node@20.17.24) lodash-es: specifier: ^4.17.21 version: 4.17.21 @@ -623,13 +623,13 @@ importers: version: 3.4.17 vite: specifier: ^6.0.3 - version: 6.2.0(@types/node@20.17.23)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + version: 6.2.2(@types/node@20.17.24)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) vite-plugin-dts: specifier: ^4.3.0 - version: 4.5.3(@types/node@20.17.23)(rollup@4.34.9)(typescript@5.8.2)(vite@6.2.0(@types/node@20.17.23)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) + version: 4.5.3(@types/node@20.17.24)(rollup@4.36.0)(typescript@5.8.2)(vite@6.2.2(@types/node@20.17.24)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) vite-plugin-svgr: specifier: ^4.3.0 - version: 4.3.0(rollup@4.34.9)(typescript@5.8.2)(vite@6.2.0(@types/node@20.17.23)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) + version: 4.3.0(rollup@4.36.0)(typescript@5.8.2)(vite@6.2.2(@types/node@20.17.24)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) packages/core-design-system: devDependencies: @@ -672,7 +672,7 @@ importers: version: 17.0.26(@types/react@17.0.83) '@vitejs/plugin-react-swc': specifier: ^3.7.2 - version: 3.8.0(vite@6.2.0(@types/node@16.18.126)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) + version: 3.8.0(vite@6.2.2(@types/node@16.18.126)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) dts-bundle-generator: specifier: ^6.4.0 version: 6.13.0 @@ -687,25 +687,25 @@ importers: version: 29.7.0(@types/node@16.18.126) lint-staged: specifier: ^15.2.9 - version: 15.4.3 + version: 15.5.0 npm-run-all: specifier: ^4.1.5 version: 4.1.5 ts-jest: specifier: ^29.1.2 - version: 29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(jest@29.7.0(@types/node@16.18.126))(typescript@5.8.2) + version: 29.2.6(@babel/core@7.26.10)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.10))(jest@29.7.0(@types/node@16.18.126))(typescript@5.8.2) typescript: specifier: ^5.3.3 version: 5.8.2 vite: specifier: ^6.0.3 - version: 6.2.0(@types/node@16.18.126)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + version: 6.2.2(@types/node@16.18.126)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) vite-plugin-dts: specifier: ^4.3.0 - version: 4.5.3(@types/node@16.18.126)(rollup@4.34.9)(typescript@5.8.2)(vite@6.2.0(@types/node@16.18.126)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) + version: 4.5.3(@types/node@16.18.126)(rollup@4.36.0)(typescript@5.8.2)(vite@6.2.2(@types/node@16.18.126)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) vite-plugin-svgr: specifier: ^4.3.0 - version: 4.3.0(rollup@4.34.9)(typescript@5.8.2)(vite@6.2.0(@types/node@16.18.126)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) + version: 4.3.0(rollup@4.36.0)(typescript@5.8.2)(vite@6.2.2(@types/node@16.18.126)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) packages/forms: dependencies: @@ -766,7 +766,7 @@ importers: version: 0.29.14 '@vitejs/plugin-react-swc': specifier: ^3.7.2 - version: 3.8.0(vite@6.2.0(@types/node@16.18.126)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) + version: 3.8.0(vite@6.2.2(@types/node@16.18.126)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) dts-bundle-generator: specifier: ^6.4.0 version: 6.13.0 @@ -778,25 +778,25 @@ importers: version: 29.7.0(@types/node@16.18.126) lint-staged: specifier: ^15.2.9 - version: 15.4.3 + version: 15.5.0 npm-run-all: specifier: ^4.1.5 version: 4.1.5 ts-jest: specifier: ^29.1.2 - version: 29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(jest@29.7.0(@types/node@16.18.126))(typescript@5.8.2) + version: 29.2.6(@babel/core@7.26.10)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.10))(jest@29.7.0(@types/node@16.18.126))(typescript@5.8.2) typescript: specifier: ^5.3.3 version: 5.8.2 vite: specifier: ^6.0.3 - version: 6.2.0(@types/node@16.18.126)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + version: 6.2.2(@types/node@16.18.126)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) vite-plugin-dts: specifier: ^4.3.0 - version: 4.5.3(@types/node@16.18.126)(rollup@4.34.9)(typescript@5.8.2)(vite@6.2.0(@types/node@16.18.126)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) + version: 4.5.3(@types/node@16.18.126)(rollup@4.36.0)(typescript@5.8.2)(vite@6.2.2(@types/node@16.18.126)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) vite-plugin-svgr: specifier: ^4.3.0 - version: 4.3.0(rollup@4.34.9)(typescript@5.8.2)(vite@6.2.0(@types/node@16.18.126)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) + version: 4.3.0(rollup@4.36.0)(typescript@5.8.2)(vite@6.2.2(@types/node@16.18.126)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) packages/pipeline-graph: dependencies: @@ -818,7 +818,7 @@ importers: version: 4.17.12 '@types/node': specifier: ^22.10.1 - version: 22.13.9 + version: 22.13.10 '@types/react': specifier: ^17.0.3 version: 17.0.83 @@ -827,16 +827,16 @@ importers: version: 17.0.26(@types/react@17.0.83) '@vitejs/plugin-react-swc': specifier: ^3.7.2 - version: 3.8.0(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) + version: 3.8.0(vite@6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) vite: specifier: ^6.0.2 - version: 6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + version: 6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) vite-plugin-dts: specifier: ^4.3.0 - version: 4.5.3(@types/node@22.13.9)(rollup@4.34.9)(typescript@5.8.2)(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) + version: 4.5.3(@types/node@22.13.10)(rollup@4.36.0)(typescript@5.8.2)(vite@6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) vite-plugin-svgr: specifier: ^4.3.0 - version: 4.3.0(rollup@4.34.9)(typescript@5.8.2)(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) + version: 4.3.0(rollup@4.36.0)(typescript@5.8.2)(vite@6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) yaml: specifier: ^2.6.1 version: 2.7.0 @@ -980,7 +980,7 @@ importers: version: 2.1.1 cmdk: specifier: ^1.0.0 - version: 1.0.4(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2) + version: 1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2) date-fns: specifier: ^3.6.0 version: 3.6.0 @@ -998,7 +998,7 @@ importers: version: 11.11.1 i18next: specifier: ^24.0.2 - version: 24.2.2(typescript@5.6.3) + version: 24.2.3(typescript@5.6.3) i18next-browser-languagedetector: specifier: ^8.0.0 version: 8.0.4 @@ -1022,10 +1022,10 @@ importers: version: 7.54.2(react@17.0.2) react-i18next: specifier: ^15.1.1 - version: 15.4.1(i18next@24.2.2(typescript@5.6.3))(react-dom@17.0.2(react@17.0.2))(react@17.0.2) + version: 15.4.1(i18next@24.2.3(typescript@5.6.3))(react-dom@17.0.2(react@17.0.2))(react@17.0.2) react-intersection-observer: specifier: ^9.15.1 - version: 9.15.1(react-dom@17.0.2(react@17.0.2))(react@17.0.2) + version: 9.16.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2) react-resizable-panels: specifier: ^2.0.19 version: 2.1.7(react-dom@17.0.2(react@17.0.2))(react@17.0.2) @@ -1074,22 +1074,22 @@ importers: version: 4.17.12 '@types/node': specifier: ^22.9.0 - version: 22.13.9 + version: 22.13.10 '@types/react': specifier: ^17.0.3 version: 17.0.83 '@vitejs/plugin-react-swc': specifier: ^3.8.0 - version: 3.8.0(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) + version: 3.8.0(vite@6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) '@vitest/coverage-istanbul': specifier: ^3.0.6 - version: 3.0.6(vitest@3.0.7(@types/debug@4.1.12)(@types/node@22.13.9)(@vitest/ui@3.0.7)(jiti@1.21.7)(jsdom@25.0.1)(terser@5.39.0)(yaml@2.7.0)) + version: 3.0.9(vitest@3.0.9(@types/debug@4.1.12)(@types/node@22.13.10)(@vitest/ui@3.0.9)(jiti@1.21.7)(jsdom@25.0.1)(terser@5.39.0)(yaml@2.7.0)) '@vitest/ui': specifier: ^3.0.6 - version: 3.0.7(vitest@3.0.7) + version: 3.0.9(vitest@3.0.9) autoprefixer: specifier: ^10.4.20 - version: 10.4.20(postcss@8.5.3) + version: 10.4.21(postcss@8.5.3) eslint: specifier: ^8.57.1 version: 8.57.1 @@ -1107,7 +1107,7 @@ importers: version: 25.0.1 lint-staged: specifier: ^15.2.9 - version: 15.4.3 + version: 15.5.0 react: specifier: 17.0.2 version: 17.0.2 @@ -1122,22 +1122,22 @@ importers: version: 5.6.3 vite: specifier: ^6.1.1 - version: 6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + version: 6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) vite-bundle-analyzer: specifier: ^0.17.1 - version: 0.17.1 + version: 0.17.3 vite-plugin-dts: specifier: ^4.5.0 - version: 4.5.3(@types/node@22.13.9)(rollup@4.34.9)(typescript@5.6.3)(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) + version: 4.5.3(@types/node@22.13.10)(rollup@4.36.0)(typescript@5.6.3)(vite@6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) vite-plugin-svgr: specifier: ^4.3.0 - version: 4.3.0(rollup@4.34.9)(typescript@5.6.3)(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) + version: 4.3.0(rollup@4.36.0)(typescript@5.6.3)(vite@6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) vite-tsconfig-paths: specifier: ^5.1.4 - version: 5.1.4(typescript@5.6.3)(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) + version: 5.1.4(typescript@5.6.3)(vite@6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) vitest: specifier: ^3.0.6 - version: 3.0.7(@types/debug@4.1.12)(@types/node@22.13.9)(@vitest/ui@3.0.7)(jiti@1.21.7)(jsdom@25.0.1)(terser@5.39.0)(yaml@2.7.0) + version: 3.0.9(@types/debug@4.1.12)(@types/node@22.13.10)(@vitest/ui@3.0.9)(jiti@1.21.7)(jsdom@25.0.1)(terser@5.39.0)(yaml@2.7.0) packages/views: dependencies: @@ -1167,7 +1167,7 @@ importers: version: 4.6.0(monaco-editor@0.40.0)(react-dom@17.0.2(react@17.0.2))(react@17.0.2) '@rollup/plugin-yaml': specifier: ^4.1.2 - version: 4.1.2(rollup@4.34.9) + version: 4.1.2(rollup@4.36.0) '@uiw/react-markdown-preview': specifier: ^5.1.1 version: 5.1.3(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2) @@ -1270,7 +1270,7 @@ importers: version: 6.21.0(eslint@8.57.1)(typescript@5.8.2) '@vitejs/plugin-react-swc': specifier: ^3.7.2 - version: 3.8.0(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) + version: 3.8.0(vite@6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) eslint: specifier: ^8.57.1 version: 8.57.1 @@ -1297,10 +1297,10 @@ importers: version: 5.8.2 vite: specifier: ^6.0.3 - version: 6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + version: 6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) vite-plugin-dts: specifier: ^4.3.0 - version: 4.5.3(@types/node@22.13.9)(rollup@4.34.9)(typescript@5.8.2)(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) + version: 4.5.3(@types/node@22.13.10)(rollup@4.36.0)(typescript@5.8.2)(vite@6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) vite-plugin-monaco-editor: specifier: ^1.1.0 version: 1.1.0(monaco-editor@0.40.0) @@ -1325,16 +1325,16 @@ importers: devDependencies: '@babel/core': specifier: ^7.24.7 - version: 7.26.9 + version: 7.26.10 '@babel/preset-env': specifier: ^7.24.7 - version: 7.26.9(@babel/core@7.26.9) + version: 7.26.9(@babel/core@7.26.10) '@babel/preset-react': specifier: ^7.24.7 - version: 7.26.3(@babel/core@7.26.9) + version: 7.26.3(@babel/core@7.26.10) '@babel/preset-typescript': specifier: ^7.24.7 - version: 7.26.0(@babel/core@7.26.9) + version: 7.26.0(@babel/core@7.26.10) '@testing-library/jest-dom': specifier: ^5.17.0 version: 5.17.0 @@ -1364,7 +1364,7 @@ importers: version: 3.8.0(vite@4.5.9(@types/node@16.18.126)(terser@5.39.0)) babel-loader: specifier: ^9.1.3 - version: 9.2.1(@babel/core@7.26.9)(webpack@5.98.0(webpack-cli@5.1.4)) + version: 9.2.1(@babel/core@7.26.10)(webpack@5.98.0(webpack-cli@5.1.4)) babel-plugin-syntax-dynamic-import: specifier: ^6.18.0 version: 6.18.0 @@ -1385,7 +1385,7 @@ importers: version: 5.6.3(webpack@5.98.0(webpack-cli@5.1.4)) lint-staged: specifier: ^15.2.9 - version: 15.4.3 + version: 15.5.0 mini-css-extract-plugin: specifier: ^2.9.0 version: 2.9.2(webpack@5.98.0(webpack-cli@5.1.4)) @@ -1412,7 +1412,7 @@ importers: version: 4.5.9(@types/node@16.18.126)(terser@5.39.0) vite-plugin-dts: specifier: ^3.9.1 - version: 3.9.1(@types/node@16.18.126)(rollup@4.34.9)(typescript@4.9.5)(vite@4.5.9(@types/node@16.18.126)(terser@5.39.0)) + version: 3.9.1(@types/node@16.18.126)(rollup@4.36.0)(typescript@4.9.5)(vite@4.5.9(@types/node@16.18.126)(terser@5.39.0)) vite-plugin-monaco-editor: specifier: ^1.1.0 version: 1.1.0(monaco-editor@0.40.0) @@ -1442,8 +1442,8 @@ packages: resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==} engines: {node: '>=6.0.0'} - '@asamuzakjp/css-color@2.8.3': - resolution: {integrity: sha512-GIc76d9UI1hCvOATjZPyHFmE5qhRccp3/zGfMPapK3jBi+yocEzp6BBB0UnfRYP9NP4FANqUZYb0hnfs3TM3hw==} + '@asamuzakjp/css-color@3.1.1': + resolution: {integrity: sha512-hpRD68SV2OMcZCsrbdkccTw5FXjNDLo5OuqSHyHZfwweGsDWZwDJ2+gONyNAbazZclobMirACLw0lk8WVxIqxA==} '@astrojs/check@0.9.4': resolution: {integrity: sha512-IOheHwCtpUfvogHHsvu0AbeRZEnjJg3MopdLddkJE70mULItS/Vh37BHcI00mcOJcH1vhD3odbpvWokpxam7xA==} @@ -1451,11 +1451,11 @@ packages: peerDependencies: typescript: ^5.0.0 - '@astrojs/compiler@2.10.4': - resolution: {integrity: sha512-86B3QGagP99MvSNwuJGiYSBHnh8nLvm2Q1IFI15wIUJJsPeQTO3eb2uwBmrqRsXykeR/mBzH8XCgz5AAt1BJrQ==} + '@astrojs/compiler@2.11.0': + resolution: {integrity: sha512-zZOO7i+JhojO8qmlyR/URui6LyfHJY6m+L9nwyX5GiKD78YoRaZ5tzz6X0fkl+5bD3uwlDHayf6Oe8Fu36RKNg==} - '@astrojs/internal-helpers@0.6.0': - resolution: {integrity: sha512-XgHIJDQaGlFnTr0sDp1PiJrtqsWzbHP2qkTU+JpQ8SnBewKP2IKOe/wqCkl0CyfyRXRu3TSWu4t/cpYMVfuBNA==} + '@astrojs/internal-helpers@0.6.1': + resolution: {integrity: sha512-l5Pqf6uZu31aG+3Lv8nl/3s4DbUzdlxTWDof4pEpto6GUJNhhCbelVi9dEyurOVyqaelwmS9oSyOWOENSfgo9A==} '@astrojs/language-server@2.15.4': resolution: {integrity: sha512-JivzASqTPR2bao9BWsSc/woPHH7OGSGc9aMxXL4U6egVTqBycB3ZHdBJPuOCVtcGLrzdWTosAqVPz1BVoxE0+A==} @@ -1469,11 +1469,11 @@ packages: prettier-plugin-astro: optional: true - '@astrojs/markdown-remark@6.2.0': - resolution: {integrity: sha512-LUDjgd9p1yG0qTFSocaj3GOLmZs8Hsw/pNtvqzvNY58Acebxvb/46vDO/e/wxYgsKgIfWS+p+ZI5SfOjoVrbCg==} + '@astrojs/markdown-remark@6.3.1': + resolution: {integrity: sha512-c5F5gGrkczUaTVgmMW9g1YMJGzOtRvjjhw6IfGuxarM6ct09MpwysP10US729dy07gg8y+ofVifezvP3BNsWZg==} - '@astrojs/mdx@4.1.0': - resolution: {integrity: sha512-M7BaYhVTT7Q/iS2EoEaUngQnN+D2jPCWmNS1TIY31bDyz3MOf+dZmuqODJOEUdBBAASkQE+MhzyPds/N2o6csw==} + '@astrojs/mdx@4.2.1': + resolution: {integrity: sha512-huVIR6YNtdJ233swDwj4RWCjhpUtz8wTLybPPZi5tdBFxwahMRYcGtGVEHjyUE9z+Je2LUVgQTzrPgvJi53oOQ==} engines: {node: ^18.17.1 || ^20.3.0 || >=22.0.0} peerDependencies: astro: ^5.0.0 @@ -1491,8 +1491,8 @@ packages: react: 17.0.2 react-dom: 17.0.2 - '@astrojs/sitemap@3.2.1': - resolution: {integrity: sha512-uxMfO8f7pALq0ADL6Lk68UV6dNYjJ2xGUzyjjVj60JLBs5a6smtlkBYv3tQ0DzoqwS7c9n4FUx5lgv0yPo/fgA==} + '@astrojs/sitemap@3.3.0': + resolution: {integrity: sha512-nYE4lKQtk+Kbrw/w0G0TTgT724co0jUsU4tPlHY9au5HmTBKbwiCLwO/15b1/y13aZ4Kr9ZbMeMHlXuwn0ty4Q==} '@astrojs/starlight-tailwind@3.0.0': resolution: {integrity: sha512-oYHG9RY+VaOSeAhheVZfm9HDA892qvcQA82VT86POYmg1OsgBuWwdf1ZbofV8iq/z5kO06ajcSdzhPE8lhEx8g==} @@ -1527,12 +1527,12 @@ packages: resolution: {integrity: sha512-oH5UPLMWR3L2wEFLnFJ1TZXqHufiTKAiLfqw5zkhS4dKXLJ10yVztfil/twG8EDTA4F/tvVNw9nOl4ZMslB8rQ==} engines: {node: '>=6.9.0'} - '@babel/core@7.26.9': - resolution: {integrity: sha512-lWBYIrF7qK5+GjY5Uy+/hEgp8OJWOD/rpy74GplYRhEauvbHDeFB8t5hPOZxCZ0Oxf4Cc36tK51/l3ymJysrKw==} + '@babel/core@7.26.10': + resolution: {integrity: sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ==} engines: {node: '>=6.9.0'} - '@babel/generator@7.26.9': - resolution: {integrity: sha512-kEWdzjOAUMW4hAyrzJ0ZaTOu9OmpyDIQicIh0zg0EEcEkYXZb2TjtBhnHi2ViX7PKwZqF4xwqfAm299/QMP3lg==} + '@babel/generator@7.26.10': + resolution: {integrity: sha512-rRHT8siFIXQrAYOYqZQVsAr8vJ+cBNqcVAY6m5V8/4QqzaPl+zDBe6cLEPRDuNOUf3ww8RfJVlOyQMoSI+5Ang==} engines: {node: '>=6.9.0'} '@babel/helper-annotate-as-pure@7.25.9': @@ -1614,12 +1614,12 @@ packages: resolution: {integrity: sha512-ETzz9UTjQSTmw39GboatdymDq4XIQbR8ySgVrylRhPOFpsd+JrKHIuF0de7GCWmem+T4uC5z7EZguod7Wj4A4g==} engines: {node: '>=6.9.0'} - '@babel/helpers@7.26.9': - resolution: {integrity: sha512-Mz/4+y8udxBKdmzt/UjPACs4G3j5SshJJEFFKxlCGPydG4JAHXxjWjAwjd09tf6oINvl1VfMJo+nB7H2YKQ0dA==} + '@babel/helpers@7.26.10': + resolution: {integrity: sha512-UPYc3SauzZ3JGgj87GgZ89JVdC5dj0AoetR5Bw6wj4niittNyFh6+eOGonYvJ1ao6B8lEa3Q3klS7ADZ53bc5g==} engines: {node: '>=6.9.0'} - '@babel/parser@7.26.9': - resolution: {integrity: sha512-81NWa1njQblgZbQHxWHpxxCzNsa3ZwvFqpUg7P+NNUU6f3UU2jBEg4OlF/J6rl8+PQGh1q6/zWScd001YwcA5A==} + '@babel/parser@7.26.10': + resolution: {integrity: sha512-6aQR2zGE/QFi8JpDLjUZEPYOs7+mhKXm86VaKFiLP35JQwQb6bwUE+XbvkH0EptsYhbNBSUGaUBLKqxH1xSgsA==} engines: {node: '>=6.0.0'} hasBin: true @@ -2127,20 +2127,20 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/runtime@7.26.9': - resolution: {integrity: sha512-aA63XwOkcl4xxQa3HjPMqOP6LiK0ZDv3mUPYEFXkpHbaFjtGggE1A61FjFzJnB+p7/oy2gA8E+rcBNl/zC1tMg==} + '@babel/runtime@7.26.10': + resolution: {integrity: sha512-2WJMeRQPHKSPemqk/awGrAiuFfzBmOIPXKizAsVhWH9YJqLZ0H+HS4c8loHGgW6utJ3E/ejXQUsiGaQy2NZ9Fw==} engines: {node: '>=6.9.0'} '@babel/template@7.26.9': resolution: {integrity: sha512-qyRplbeIpNZhmzOysF/wFMuP9sctmh2cFzRAZOn1YapxBsE1i9bJIY586R/WBLfLcmcBlM8ROBiQURnnNy+zfA==} engines: {node: '>=6.9.0'} - '@babel/traverse@7.26.9': - resolution: {integrity: sha512-ZYW7L+pL8ahU5fXmNbPF+iZFHCv5scFak7MZ9bwaRPLUhHh7QQEMjZUg0HevihoqCM5iSYHN61EyCoZvqC+bxg==} + '@babel/traverse@7.26.10': + resolution: {integrity: sha512-k8NuDrxr0WrPH5Aupqb2LCVURP/S0vBEn5mK6iH+GIYob66U5EtoZvcdudR2jQ4cmTwhEwW1DLB+Yyas9zjF6A==} engines: {node: '>=6.9.0'} - '@babel/types@7.26.9': - resolution: {integrity: sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==} + '@babel/types@7.26.10': + resolution: {integrity: sha512-emqcG3vHrpxUKTrxcblR36dcrcoRDvKmnL/dCL6ZsHaShW80qxCAcNhzQZrpeM765VzEos+xOi4s+r4IXzTwdQ==} engines: {node: '>=6.9.0'} '@bcoe/v8-coverage@0.2.3': @@ -2237,17 +2237,23 @@ packages: '@emmetio/stream-reader@2.2.0': resolution: {integrity: sha512-fXVXEyFA5Yv3M3n8sUGT7+fvecGrZP4k6FnWWMSZVQf69kAq0LLpaBQLGcPR30m3zMmKYhECP4k/ZkzvhEW5kw==} + '@emnapi/core@1.3.1': + resolution: {integrity: sha512-pVGjBIt1Y6gg3EJN8jTcfpP/+uuRksIo055oE/OBkDNcjZqVbfkWCksG1Jp4yZnj3iKWyWX8fdG/j6UDYPbFog==} + '@emnapi/runtime@1.3.1': resolution: {integrity: sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==} + '@emnapi/wasi-threads@1.0.1': + resolution: {integrity: sha512-iIBu7mwkq4UQGeMEM8bLwNK962nXdhodeScX4slfQnRhEMMzvYivHhutCIk8uojvmASXXPC2WNEjwxFWk72Oqw==} + '@esbuild/aix-ppc64@0.21.5': resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==} engines: {node: '>=12'} cpu: [ppc64] os: [aix] - '@esbuild/aix-ppc64@0.25.0': - resolution: {integrity: sha512-O7vun9Sf8DFjH2UtqK8Ku3LkquL9SZL8OLY1T5NZkA34+wG3OQF7cl4Ql8vdNzM6fzBbYfLaiRLIOZ+2FOCgBQ==} + '@esbuild/aix-ppc64@0.25.1': + resolution: {integrity: sha512-kfYGy8IdzTGy+z0vFGvExZtxkFlA4zAxgKEahG9KE1ScBjpQnFsNOX8KTU5ojNru5ed5CVoJYXFtoxaq5nFbjQ==} engines: {node: '>=18'} cpu: [ppc64] os: [aix] @@ -2264,8 +2270,8 @@ packages: cpu: [arm64] os: [android] - '@esbuild/android-arm64@0.25.0': - resolution: {integrity: sha512-grvv8WncGjDSyUBjN9yHXNt+cq0snxXbDxy5pJtzMKGmmpPxeAmAhWxXI+01lU5rwZomDgD3kJwulEnhTRUd6g==} + '@esbuild/android-arm64@0.25.1': + resolution: {integrity: sha512-50tM0zCJW5kGqgG7fQ7IHvQOcAn9TKiVRuQ/lN0xR+T2lzEFvAi1ZcS8DiksFcEpf1t/GYOeOfCAgDHFpkiSmA==} engines: {node: '>=18'} cpu: [arm64] os: [android] @@ -2282,8 +2288,8 @@ packages: cpu: [arm] os: [android] - '@esbuild/android-arm@0.25.0': - resolution: {integrity: sha512-PTyWCYYiU0+1eJKmw21lWtC+d08JDZPQ5g+kFyxP0V+es6VPPSUhM6zk8iImp2jbV6GwjX4pap0JFbUQN65X1g==} + '@esbuild/android-arm@0.25.1': + resolution: {integrity: sha512-dp+MshLYux6j/JjdqVLnMglQlFu+MuVeNrmT5nk6q07wNhCdSnB7QZj+7G8VMUGh1q+vj2Bq8kRsuyA00I/k+Q==} engines: {node: '>=18'} cpu: [arm] os: [android] @@ -2300,8 +2306,8 @@ packages: cpu: [x64] os: [android] - '@esbuild/android-x64@0.25.0': - resolution: {integrity: sha512-m/ix7SfKG5buCnxasr52+LI78SQ+wgdENi9CqyCXwjVR2X4Jkz+BpC3le3AoBPYTC9NHklwngVXvbJ9/Akhrfg==} + '@esbuild/android-x64@0.25.1': + resolution: {integrity: sha512-GCj6WfUtNldqUzYkN/ITtlhwQqGWu9S45vUXs7EIYf+7rCiiqH9bCloatO9VhxsL0Pji+PF4Lz2XXCES+Q8hDw==} engines: {node: '>=18'} cpu: [x64] os: [android] @@ -2318,8 +2324,8 @@ packages: cpu: [arm64] os: [darwin] - '@esbuild/darwin-arm64@0.25.0': - resolution: {integrity: sha512-mVwdUb5SRkPayVadIOI78K7aAnPamoeFR2bT5nszFUZ9P8UpK4ratOdYbZZXYSqPKMHfS1wdHCJk1P1EZpRdvw==} + '@esbuild/darwin-arm64@0.25.1': + resolution: {integrity: sha512-5hEZKPf+nQjYoSr/elb62U19/l1mZDdqidGfmFutVUjjUZrOazAtwK+Kr+3y0C/oeJfLlxo9fXb1w7L+P7E4FQ==} engines: {node: '>=18'} cpu: [arm64] os: [darwin] @@ -2336,8 +2342,8 @@ packages: cpu: [x64] os: [darwin] - '@esbuild/darwin-x64@0.25.0': - resolution: {integrity: sha512-DgDaYsPWFTS4S3nWpFcMn/33ZZwAAeAFKNHNa1QN0rI4pUjgqf0f7ONmXf6d22tqTY+H9FNdgeaAa+YIFUn2Rg==} + '@esbuild/darwin-x64@0.25.1': + resolution: {integrity: sha512-hxVnwL2Dqs3fM1IWq8Iezh0cX7ZGdVhbTfnOy5uURtao5OIVCEyj9xIzemDi7sRvKsuSdtCAhMKarxqtlyVyfA==} engines: {node: '>=18'} cpu: [x64] os: [darwin] @@ -2354,8 +2360,8 @@ packages: cpu: [arm64] os: [freebsd] - '@esbuild/freebsd-arm64@0.25.0': - resolution: {integrity: sha512-VN4ocxy6dxefN1MepBx/iD1dH5K8qNtNe227I0mnTRjry8tj5MRk4zprLEdG8WPyAPb93/e4pSgi1SoHdgOa4w==} + '@esbuild/freebsd-arm64@0.25.1': + resolution: {integrity: sha512-1MrCZs0fZa2g8E+FUo2ipw6jw5qqQiH+tERoS5fAfKnRx6NXH31tXBKI3VpmLijLH6yriMZsxJtaXUyFt/8Y4A==} engines: {node: '>=18'} cpu: [arm64] os: [freebsd] @@ -2372,8 +2378,8 @@ packages: cpu: [x64] os: [freebsd] - '@esbuild/freebsd-x64@0.25.0': - resolution: {integrity: sha512-mrSgt7lCh07FY+hDD1TxiTyIHyttn6vnjesnPoVDNmDfOmggTLXRv8Id5fNZey1gl/V2dyVK1VXXqVsQIiAk+A==} + '@esbuild/freebsd-x64@0.25.1': + resolution: {integrity: sha512-0IZWLiTyz7nm0xuIs0q1Y3QWJC52R8aSXxe40VUxm6BB1RNmkODtW6LHvWRrGiICulcX7ZvyH6h5fqdLu4gkww==} engines: {node: '>=18'} cpu: [x64] os: [freebsd] @@ -2390,8 +2396,8 @@ packages: cpu: [arm64] os: [linux] - '@esbuild/linux-arm64@0.25.0': - resolution: {integrity: sha512-9QAQjTWNDM/Vk2bgBl17yWuZxZNQIF0OUUuPZRKoDtqF2k4EtYbpyiG5/Dk7nqeK6kIJWPYldkOcBqjXjrUlmg==} + '@esbuild/linux-arm64@0.25.1': + resolution: {integrity: sha512-jaN3dHi0/DDPelk0nLcXRm1q7DNJpjXy7yWaWvbfkPvI+7XNSc/lDOnCLN7gzsyzgu6qSAmgSvP9oXAhP973uQ==} engines: {node: '>=18'} cpu: [arm64] os: [linux] @@ -2408,8 +2414,8 @@ packages: cpu: [arm] os: [linux] - '@esbuild/linux-arm@0.25.0': - resolution: {integrity: sha512-vkB3IYj2IDo3g9xX7HqhPYxVkNQe8qTK55fraQyTzTX/fxaDtXiEnavv9geOsonh2Fd2RMB+i5cbhu2zMNWJwg==} + '@esbuild/linux-arm@0.25.1': + resolution: {integrity: sha512-NdKOhS4u7JhDKw9G3cY6sWqFcnLITn6SqivVArbzIaf3cemShqfLGHYMx8Xlm/lBit3/5d7kXvriTUGa5YViuQ==} engines: {node: '>=18'} cpu: [arm] os: [linux] @@ -2426,8 +2432,8 @@ packages: cpu: [ia32] os: [linux] - '@esbuild/linux-ia32@0.25.0': - resolution: {integrity: sha512-43ET5bHbphBegyeqLb7I1eYn2P/JYGNmzzdidq/w0T8E2SsYL1U6un2NFROFRg1JZLTzdCoRomg8Rvf9M6W6Gg==} + '@esbuild/linux-ia32@0.25.1': + resolution: {integrity: sha512-OJykPaF4v8JidKNGz8c/q1lBO44sQNUQtq1KktJXdBLn1hPod5rE/Hko5ugKKZd+D2+o1a9MFGUEIUwO2YfgkQ==} engines: {node: '>=18'} cpu: [ia32] os: [linux] @@ -2444,8 +2450,8 @@ packages: cpu: [loong64] os: [linux] - '@esbuild/linux-loong64@0.25.0': - resolution: {integrity: sha512-fC95c/xyNFueMhClxJmeRIj2yrSMdDfmqJnyOY4ZqsALkDrrKJfIg5NTMSzVBr5YW1jf+l7/cndBfP3MSDpoHw==} + '@esbuild/linux-loong64@0.25.1': + resolution: {integrity: sha512-nGfornQj4dzcq5Vp835oM/o21UMlXzn79KobKlcs3Wz9smwiifknLy4xDCLUU0BWp7b/houtdrgUz7nOGnfIYg==} engines: {node: '>=18'} cpu: [loong64] os: [linux] @@ -2462,8 +2468,8 @@ packages: cpu: [mips64el] os: [linux] - '@esbuild/linux-mips64el@0.25.0': - resolution: {integrity: sha512-nkAMFju7KDW73T1DdH7glcyIptm95a7Le8irTQNO/qtkoyypZAnjchQgooFUDQhNAy4iu08N79W4T4pMBwhPwQ==} + '@esbuild/linux-mips64el@0.25.1': + resolution: {integrity: sha512-1osBbPEFYwIE5IVB/0g2X6i1qInZa1aIoj1TdL4AaAb55xIIgbg8Doq6a5BzYWgr+tEcDzYH67XVnTmUzL+nXg==} engines: {node: '>=18'} cpu: [mips64el] os: [linux] @@ -2480,8 +2486,8 @@ packages: cpu: [ppc64] os: [linux] - '@esbuild/linux-ppc64@0.25.0': - resolution: {integrity: sha512-NhyOejdhRGS8Iwv+KKR2zTq2PpysF9XqY+Zk77vQHqNbo/PwZCzB5/h7VGuREZm1fixhs4Q/qWRSi5zmAiO4Fw==} + '@esbuild/linux-ppc64@0.25.1': + resolution: {integrity: sha512-/6VBJOwUf3TdTvJZ82qF3tbLuWsscd7/1w+D9LH0W/SqUgM5/JJD0lrJ1fVIfZsqB6RFmLCe0Xz3fmZc3WtyVg==} engines: {node: '>=18'} cpu: [ppc64] os: [linux] @@ -2498,8 +2504,8 @@ packages: cpu: [riscv64] os: [linux] - '@esbuild/linux-riscv64@0.25.0': - resolution: {integrity: sha512-5S/rbP5OY+GHLC5qXp1y/Mx//e92L1YDqkiBbO9TQOvuFXM+iDqUNG5XopAnXoRH3FjIUDkeGcY1cgNvnXp/kA==} + '@esbuild/linux-riscv64@0.25.1': + resolution: {integrity: sha512-nSut/Mx5gnilhcq2yIMLMe3Wl4FK5wx/o0QuuCLMtmJn+WeWYoEGDN1ipcN72g1WHsnIbxGXd4i/MF0gTcuAjQ==} engines: {node: '>=18'} cpu: [riscv64] os: [linux] @@ -2516,8 +2522,8 @@ packages: cpu: [s390x] os: [linux] - '@esbuild/linux-s390x@0.25.0': - resolution: {integrity: sha512-XM2BFsEBz0Fw37V0zU4CXfcfuACMrppsMFKdYY2WuTS3yi8O1nFOhil/xhKTmE1nPmVyvQJjJivgDT+xh8pXJA==} + '@esbuild/linux-s390x@0.25.1': + resolution: {integrity: sha512-cEECeLlJNfT8kZHqLarDBQso9a27o2Zd2AQ8USAEoGtejOrCYHNtKP8XQhMDJMtthdF4GBmjR2au3x1udADQQQ==} engines: {node: '>=18'} cpu: [s390x] os: [linux] @@ -2534,14 +2540,14 @@ packages: cpu: [x64] os: [linux] - '@esbuild/linux-x64@0.25.0': - resolution: {integrity: sha512-9yl91rHw/cpwMCNytUDxwj2XjFpxML0y9HAOH9pNVQDpQrBxHy01Dx+vaMu0N1CKa/RzBD2hB4u//nfc+Sd3Cw==} + '@esbuild/linux-x64@0.25.1': + resolution: {integrity: sha512-xbfUhu/gnvSEg+EGovRc+kjBAkrvtk38RlerAzQxvMzlB4fXpCFCeUAYzJvrnhFtdeyVCDANSjJvOvGYoeKzFA==} engines: {node: '>=18'} cpu: [x64] os: [linux] - '@esbuild/netbsd-arm64@0.25.0': - resolution: {integrity: sha512-RuG4PSMPFfrkH6UwCAqBzauBWTygTvb1nxWasEJooGSJ/NwRw7b2HOwyRTQIU97Hq37l3npXoZGYMy3b3xYvPw==} + '@esbuild/netbsd-arm64@0.25.1': + resolution: {integrity: sha512-O96poM2XGhLtpTh+s4+nP7YCCAfb4tJNRVZHfIE7dgmax+yMP2WgMd2OecBuaATHKTHsLWHQeuaxMRnCsH8+5g==} engines: {node: '>=18'} cpu: [arm64] os: [netbsd] @@ -2558,14 +2564,14 @@ packages: cpu: [x64] os: [netbsd] - '@esbuild/netbsd-x64@0.25.0': - resolution: {integrity: sha512-jl+qisSB5jk01N5f7sPCsBENCOlPiS/xptD5yxOx2oqQfyourJwIKLRA2yqWdifj3owQZCL2sn6o08dBzZGQzA==} + '@esbuild/netbsd-x64@0.25.1': + resolution: {integrity: sha512-X53z6uXip6KFXBQ+Krbx25XHV/NCbzryM6ehOAeAil7X7oa4XIq+394PWGnwaSQ2WRA0KI6PUO6hTO5zeF5ijA==} engines: {node: '>=18'} cpu: [x64] os: [netbsd] - '@esbuild/openbsd-arm64@0.25.0': - resolution: {integrity: sha512-21sUNbq2r84YE+SJDfaQRvdgznTD8Xc0oc3p3iW/a1EVWeNj/SdUCbm5U0itZPQYRuRTW20fPMWMpcrciH2EJw==} + '@esbuild/openbsd-arm64@0.25.1': + resolution: {integrity: sha512-Na9T3szbXezdzM/Kfs3GcRQNjHzM6GzFBeU1/6IV/npKP5ORtp9zbQjvkDJ47s6BCgaAZnnnu/cY1x342+MvZg==} engines: {node: '>=18'} cpu: [arm64] os: [openbsd] @@ -2582,8 +2588,8 @@ packages: cpu: [x64] os: [openbsd] - '@esbuild/openbsd-x64@0.25.0': - resolution: {integrity: sha512-2gwwriSMPcCFRlPlKx3zLQhfN/2WjJ2NSlg5TKLQOJdV0mSxIcYNTMhk3H3ulL/cak+Xj0lY1Ym9ysDV1igceg==} + '@esbuild/openbsd-x64@0.25.1': + resolution: {integrity: sha512-T3H78X2h1tszfRSf+txbt5aOp/e7TAz3ptVKu9Oyir3IAOFPGV6O9c2naym5TOriy1l0nNf6a4X5UXRZSGX/dw==} engines: {node: '>=18'} cpu: [x64] os: [openbsd] @@ -2600,8 +2606,8 @@ packages: cpu: [x64] os: [sunos] - '@esbuild/sunos-x64@0.25.0': - resolution: {integrity: sha512-bxI7ThgLzPrPz484/S9jLlvUAHYMzy6I0XiU1ZMeAEOBcS0VePBFxh1JjTQt3Xiat5b6Oh4x7UC7IwKQKIJRIg==} + '@esbuild/sunos-x64@0.25.1': + resolution: {integrity: sha512-2H3RUvcmULO7dIE5EWJH8eubZAI4xw54H1ilJnRNZdeo8dTADEZ21w6J22XBkXqGJbe0+wnNJtw3UXRoLJnFEg==} engines: {node: '>=18'} cpu: [x64] os: [sunos] @@ -2618,8 +2624,8 @@ packages: cpu: [arm64] os: [win32] - '@esbuild/win32-arm64@0.25.0': - resolution: {integrity: sha512-ZUAc2YK6JW89xTbXvftxdnYy3m4iHIkDtK3CLce8wg8M2L+YZhIvO1DKpxrd0Yr59AeNNkTiic9YLf6FTtXWMw==} + '@esbuild/win32-arm64@0.25.1': + resolution: {integrity: sha512-GE7XvrdOzrb+yVKB9KsRMq+7a2U/K5Cf/8grVFRAGJmfADr/e/ODQ134RK2/eeHqYV5eQRFxb1hY7Nr15fv1NQ==} engines: {node: '>=18'} cpu: [arm64] os: [win32] @@ -2636,8 +2642,8 @@ packages: cpu: [ia32] os: [win32] - '@esbuild/win32-ia32@0.25.0': - resolution: {integrity: sha512-eSNxISBu8XweVEWG31/JzjkIGbGIJN/TrRoiSVZwZ6pkC6VX4Im/WV2cz559/TXLcYbcrDN8JtKgd9DJVIo8GA==} + '@esbuild/win32-ia32@0.25.1': + resolution: {integrity: sha512-uOxSJCIcavSiT6UnBhBzE8wy3n0hOkJsBOzy7HDAuTDE++1DJMRRVCPGisULScHL+a/ZwdXPpXD3IyFKjA7K8A==} engines: {node: '>=18'} cpu: [ia32] os: [win32] @@ -2654,14 +2660,14 @@ packages: cpu: [x64] os: [win32] - '@esbuild/win32-x64@0.25.0': - resolution: {integrity: sha512-ZENoHJBxA20C2zFzh6AI4fT6RraMzjYw4xKWemRTRmRVtN9c5DcH9r/f2ihEkMjOW5eGgrwCslG/+Y/3bL+DHQ==} + '@esbuild/win32-x64@0.25.1': + resolution: {integrity: sha512-Y1EQdcfwMSeQN/ujR5VayLOJ1BHaK+ssyk0AEzPjC+t1lITgsnccPqFjb6V+LsTp/9Iov4ysfjxLaGJ9RPtkVg==} engines: {node: '>=18'} cpu: [x64] os: [win32] - '@eslint-community/eslint-utils@4.4.1': - resolution: {integrity: sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==} + '@eslint-community/eslint-utils@4.5.1': + resolution: {integrity: sha512-soEIOALTfTK6EjmKMMoLugwaP0rzkad90iIWd1hMO9ARkSAyjfMfkRRhLvD5qH7vvM0Cg72pieUfR6yh6XxC4w==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || >=8.0.0 @@ -2678,8 +2684,8 @@ packages: resolution: {integrity: sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} - '@eslint/js@9.21.0': - resolution: {integrity: sha512-BqStZ3HX8Yz6LvsF5ByXYrtigrV5AXADWLAGc7PH/1SxOb7/FIYYMszZZWiUou/GB9P2lXWk2SV4d+Z8h0nknw==} + '@eslint/js@9.22.0': + resolution: {integrity: sha512-vLFajx9o8d1/oL2ZkpMYbkLv8nDB6yaIwFNt7nI4+I80U/z03SxmfOMsLbvWr3p7C+Wnoh//aOu2pQW8cS0HCQ==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} '@expressive-code/core@0.40.2': @@ -2983,8 +2989,8 @@ packages: peerDependencies: tslib: '2' - '@jsonjoy.com/json-pack@1.1.1': - resolution: {integrity: sha512-osjeBqMJ2lb/j/M8NCPjs1ylqWIcTRTycIhVB5pt6LgzgeRSb0YRZ7j9RfA8wIUrsr/medIuhVyonXRZWLyfdw==} + '@jsonjoy.com/json-pack@1.2.0': + resolution: {integrity: sha512-io1zEbbYcElht3tdlqEOFxZ0dMTYrHz9iMf0gqn1pPjZFTCgM5R4R5IMA20Chb2UPYYsxjzs8CgZ7Nb5n2K2rA==} engines: {node: '>=10.0'} peerDependencies: tslib: '2' @@ -3004,15 +3010,15 @@ packages: '@microsoft/api-extractor-model@7.28.13': resolution: {integrity: sha512-39v/JyldX4MS9uzHcdfmjjfS6cYGAoXV+io8B5a338pkHiSt+gy2eXQ0Q7cGFJ7quSa1VqqlMdlPrB6sLR/cAw==} - '@microsoft/api-extractor-model@7.30.3': - resolution: {integrity: sha512-yEAvq0F78MmStXdqz9TTT4PZ05Xu5R8nqgwI5xmUmQjWBQ9E6R2n8HB/iZMRciG4rf9iwI2mtuQwIzDXBvHn1w==} + '@microsoft/api-extractor-model@7.30.4': + resolution: {integrity: sha512-RobC0gyVYsd2Fao9MTKOfTdBm41P/bCMUmzS5mQ7/MoAKEqy0FOBph3JOYdq4X4BsEnMEiSHc+0NUNmdzxCpjA==} '@microsoft/api-extractor@7.43.0': resolution: {integrity: sha512-GFhTcJpB+MI6FhvXEI9b2K0snulNLWHqC/BbcJtyNYcKUiw7l3Lgis5ApsYncJ0leALX7/of4XfmXk+maT111w==} hasBin: true - '@microsoft/api-extractor@7.51.1': - resolution: {integrity: sha512-VoFvIeYXme8QctXDkixy1KIn750kZaFy2snAEOB3nhDFfbBcJNEcvBrpCIQIV09MqI4g9egKUkg+/12WMRC77w==} + '@microsoft/api-extractor@7.52.1': + resolution: {integrity: sha512-m3I5uAwE05orsu3D1AGyisX5KxsgVXB+U4bWOOaX/Z7Ftp/2Cy41qsNhO6LPvSxHBaapyser5dVorF1t5M6tig==} hasBin: true '@microsoft/tsdoc-config@0.16.2': @@ -3037,6 +3043,9 @@ packages: react: 17.0.2 react-dom: 17.0.2 + '@napi-rs/wasm-runtime@0.2.7': + resolution: {integrity: sha512-5yximcFK5FNompXfJFoWanu5l8v1hNGqNHh9du1xETp9HWk/B/PzvchX55WYOPaIeNglG8++68AAiauBAtbnzw==} + '@nodelib/fs.scandir@2.1.5': resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'} @@ -3729,98 +3738,98 @@ packages: rollup: optional: true - '@rollup/rollup-android-arm-eabi@4.34.9': - resolution: {integrity: sha512-qZdlImWXur0CFakn2BJ2znJOdqYZKiedEPEVNTBrpfPjc/YuTGcaYZcdmNFTkUj3DU0ZM/AElcM8Ybww3xVLzA==} + '@rollup/rollup-android-arm-eabi@4.36.0': + resolution: {integrity: sha512-jgrXjjcEwN6XpZXL0HUeOVGfjXhPyxAbbhD0BlXUB+abTOpbPiN5Wb3kOT7yb+uEtATNYF5x5gIfwutmuBA26w==} cpu: [arm] os: [android] - '@rollup/rollup-android-arm64@4.34.9': - resolution: {integrity: sha512-4KW7P53h6HtJf5Y608T1ISKvNIYLWRKMvfnG0c44M6In4DQVU58HZFEVhWINDZKp7FZps98G3gxwC1sb0wXUUg==} + '@rollup/rollup-android-arm64@4.36.0': + resolution: {integrity: sha512-NyfuLvdPdNUfUNeYKUwPwKsE5SXa2J6bCt2LdB/N+AxShnkpiczi3tcLJrm5mA+eqpy0HmaIY9F6XCa32N5yzg==} cpu: [arm64] os: [android] - '@rollup/rollup-darwin-arm64@4.34.9': - resolution: {integrity: sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==} + '@rollup/rollup-darwin-arm64@4.36.0': + resolution: {integrity: sha512-JQ1Jk5G4bGrD4pWJQzWsD8I1n1mgPXq33+/vP4sk8j/z/C2siRuxZtaUA7yMTf71TCZTZl/4e1bfzwUmFb3+rw==} cpu: [arm64] os: [darwin] - '@rollup/rollup-darwin-x64@4.34.9': - resolution: {integrity: sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==} + '@rollup/rollup-darwin-x64@4.36.0': + resolution: {integrity: sha512-6c6wMZa1lrtiRsbDziCmjE53YbTkxMYhhnWnSW8R/yqsM7a6mSJ3uAVT0t8Y/DGt7gxUWYuFM4bwWk9XCJrFKA==} cpu: [x64] os: [darwin] - '@rollup/rollup-freebsd-arm64@4.34.9': - resolution: {integrity: sha512-2lzjQPJbN5UnHm7bHIUKFMulGTQwdvOkouJDpPysJS+QFBGDJqcfh+CxxtG23Ik/9tEvnebQiylYoazFMAgrYw==} + '@rollup/rollup-freebsd-arm64@4.36.0': + resolution: {integrity: sha512-KXVsijKeJXOl8QzXTsA+sHVDsFOmMCdBRgFmBb+mfEb/7geR7+C8ypAml4fquUt14ZyVXaw2o1FWhqAfOvA4sg==} cpu: [arm64] os: [freebsd] - '@rollup/rollup-freebsd-x64@4.34.9': - resolution: {integrity: sha512-SLl0hi2Ah2H7xQYd6Qaiu01kFPzQ+hqvdYSoOtHYg/zCIFs6t8sV95kaoqjzjFwuYQLtOI0RZre/Ke0nPaQV+g==} + '@rollup/rollup-freebsd-x64@4.36.0': + resolution: {integrity: sha512-dVeWq1ebbvByI+ndz4IJcD4a09RJgRYmLccwlQ8bPd4olz3Y213uf1iwvc7ZaxNn2ab7bjc08PrtBgMu6nb4pQ==} cpu: [x64] os: [freebsd] - '@rollup/rollup-linux-arm-gnueabihf@4.34.9': - resolution: {integrity: sha512-88I+D3TeKItrw+Y/2ud4Tw0+3CxQ2kLgu3QvrogZ0OfkmX/DEppehus7L3TS2Q4lpB+hYyxhkQiYPJ6Mf5/dPg==} + '@rollup/rollup-linux-arm-gnueabihf@4.36.0': + resolution: {integrity: sha512-bvXVU42mOVcF4le6XSjscdXjqx8okv4n5vmwgzcmtvFdifQ5U4dXFYaCB87namDRKlUL9ybVtLQ9ztnawaSzvg==} cpu: [arm] os: [linux] - '@rollup/rollup-linux-arm-musleabihf@4.34.9': - resolution: {integrity: sha512-3qyfWljSFHi9zH0KgtEPG4cBXHDFhwD8kwg6xLfHQ0IWuH9crp005GfoUUh/6w9/FWGBwEHg3lxK1iHRN1MFlA==} + '@rollup/rollup-linux-arm-musleabihf@4.36.0': + resolution: {integrity: sha512-JFIQrDJYrxOnyDQGYkqnNBtjDwTgbasdbUiQvcU8JmGDfValfH1lNpng+4FWlhaVIR4KPkeddYjsVVbmJYvDcg==} cpu: [arm] os: [linux] - '@rollup/rollup-linux-arm64-gnu@4.34.9': - resolution: {integrity: sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==} + '@rollup/rollup-linux-arm64-gnu@4.36.0': + resolution: {integrity: sha512-KqjYVh3oM1bj//5X7k79PSCZ6CvaVzb7Qs7VMWS+SlWB5M8p3FqufLP9VNp4CazJ0CsPDLwVD9r3vX7Ci4J56A==} cpu: [arm64] os: [linux] - '@rollup/rollup-linux-arm64-musl@4.34.9': - resolution: {integrity: sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==} + '@rollup/rollup-linux-arm64-musl@4.36.0': + resolution: {integrity: sha512-QiGnhScND+mAAtfHqeT+cB1S9yFnNQ/EwCg5yE3MzoaZZnIV0RV9O5alJAoJKX/sBONVKeZdMfO8QSaWEygMhw==} cpu: [arm64] os: [linux] - '@rollup/rollup-linux-loongarch64-gnu@4.34.9': - resolution: {integrity: sha512-dRAgTfDsn0TE0HI6cmo13hemKpVHOEyeciGtvlBTkpx/F65kTvShtY/EVyZEIfxFkV5JJTuQ9tP5HGBS0hfxIg==} + '@rollup/rollup-linux-loongarch64-gnu@4.36.0': + resolution: {integrity: sha512-1ZPyEDWF8phd4FQtTzMh8FQwqzvIjLsl6/84gzUxnMNFBtExBtpL51H67mV9xipuxl1AEAerRBgBwFNpkw8+Lg==} cpu: [loong64] os: [linux] - '@rollup/rollup-linux-powerpc64le-gnu@4.34.9': - resolution: {integrity: sha512-PHcNOAEhkoMSQtMf+rJofwisZqaU8iQ8EaSps58f5HYll9EAY5BSErCZ8qBDMVbq88h4UxaNPlbrKqfWP8RfJA==} + '@rollup/rollup-linux-powerpc64le-gnu@4.36.0': + resolution: {integrity: sha512-VMPMEIUpPFKpPI9GZMhJrtu8rxnp6mJR3ZzQPykq4xc2GmdHj3Q4cA+7avMyegXy4n1v+Qynr9fR88BmyO74tg==} cpu: [ppc64] os: [linux] - '@rollup/rollup-linux-riscv64-gnu@4.34.9': - resolution: {integrity: sha512-Z2i0Uy5G96KBYKjeQFKbbsB54xFOL5/y1P5wNBsbXB8yE+At3oh0DVMjQVzCJRJSfReiB2tX8T6HUFZ2k8iaKg==} + '@rollup/rollup-linux-riscv64-gnu@4.36.0': + resolution: {integrity: sha512-ttE6ayb/kHwNRJGYLpuAvB7SMtOeQnVXEIpMtAvx3kepFQeowVED0n1K9nAdraHUPJ5hydEMxBpIR7o4nrm8uA==} cpu: [riscv64] os: [linux] - '@rollup/rollup-linux-s390x-gnu@4.34.9': - resolution: {integrity: sha512-U+5SwTMoeYXoDzJX5dhDTxRltSrIax8KWwfaaYcynuJw8mT33W7oOgz0a+AaXtGuvhzTr2tVKh5UO8GVANTxyQ==} + '@rollup/rollup-linux-s390x-gnu@4.36.0': + resolution: {integrity: sha512-4a5gf2jpS0AIe7uBjxDeUMNcFmaRTbNv7NxI5xOCs4lhzsVyGR/0qBXduPnoWf6dGC365saTiwag8hP1imTgag==} cpu: [s390x] os: [linux] - '@rollup/rollup-linux-x64-gnu@4.34.9': - resolution: {integrity: sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==} + '@rollup/rollup-linux-x64-gnu@4.36.0': + resolution: {integrity: sha512-5KtoW8UWmwFKQ96aQL3LlRXX16IMwyzMq/jSSVIIyAANiE1doaQsx/KRyhAvpHlPjPiSU/AYX/8m+lQ9VToxFQ==} cpu: [x64] os: [linux] - '@rollup/rollup-linux-x64-musl@4.34.9': - resolution: {integrity: sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==} + '@rollup/rollup-linux-x64-musl@4.36.0': + resolution: {integrity: sha512-sycrYZPrv2ag4OCvaN5js+f01eoZ2U+RmT5as8vhxiFz+kxwlHrsxOwKPSA8WyS+Wc6Epid9QeI/IkQ9NkgYyQ==} cpu: [x64] os: [linux] - '@rollup/rollup-win32-arm64-msvc@4.34.9': - resolution: {integrity: sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==} + '@rollup/rollup-win32-arm64-msvc@4.36.0': + resolution: {integrity: sha512-qbqt4N7tokFwwSVlWDsjfoHgviS3n/vZ8LK0h1uLG9TYIRuUTJC88E1xb3LM2iqZ/WTqNQjYrtmtGmrmmawB6A==} cpu: [arm64] os: [win32] - '@rollup/rollup-win32-ia32-msvc@4.34.9': - resolution: {integrity: sha512-KB48mPtaoHy1AwDNkAJfHXvHp24H0ryZog28spEs0V48l3H1fr4i37tiyHsgKZJnCmvxsbATdZGBpbmxTE3a9w==} + '@rollup/rollup-win32-ia32-msvc@4.36.0': + resolution: {integrity: sha512-t+RY0JuRamIocMuQcfwYSOkmdX9dtkr1PbhKW42AMvaDQa+jOdpUYysroTF/nuPpAaQMWp7ye+ndlmmthieJrQ==} cpu: [ia32] os: [win32] - '@rollup/rollup-win32-x64-msvc@4.34.9': - resolution: {integrity: sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==} + '@rollup/rollup-win32-x64-msvc@4.36.0': + resolution: {integrity: sha512-aRXd7tRZkWLqGbChgcMMDEHjOKudo1kChb1Jt1IfR8cY/KIpgNviLeJy5FUb9IpSuQj8dU2fAYNMPW/hLKOSTw==} cpu: [x64] os: [win32] @@ -3835,8 +3844,8 @@ packages: '@types/node': optional: true - '@rushstack/node-core-library@5.11.0': - resolution: {integrity: sha512-I8+VzG9A0F3nH2rLpPd7hF8F7l5Xb7D+ldrWVZYegXM6CsKkvWc670RlgK3WX8/AseZfXA/vVrh0bpXe2Y2UDQ==} + '@rushstack/node-core-library@5.12.0': + resolution: {integrity: sha512-QSwwzgzWoil1SCQse+yCHwlhRxNv2dX9siPnAb9zR/UmMhac4mjMrlMZpk64BlCeOFi1kJKgXRkihSwRMbboAQ==} peerDependencies: '@types/node': '*' peerDependenciesMeta: @@ -3857,8 +3866,8 @@ packages: '@types/node': optional: true - '@rushstack/terminal@0.15.0': - resolution: {integrity: sha512-vXQPRQ+vJJn4GVqxkwRe+UGgzNxdV8xuJZY2zem46Y0p3tlahucH9/hPmLGj2i9dQnUBFiRnoM9/KW7PYw8F4Q==} + '@rushstack/terminal@0.15.1': + resolution: {integrity: sha512-3vgJYwumcjoDOXU3IxZfd616lqOdmr8Ezj4OWgJZfhmiBK4Nh7eWcv8sU8N/HdzXcuHDXCRGn/6O2Q75QvaZMA==} peerDependencies: '@types/node': '*' peerDependenciesMeta: @@ -3868,27 +3877,45 @@ packages: '@rushstack/ts-command-line@4.19.1': resolution: {integrity: sha512-J7H768dgcpG60d7skZ5uSSwyCZs/S2HrWP1Ds8d1qYAyaaeJmpmmLr9BVw97RjFzmQPOYnoXcKA4GkqDCkduQg==} - '@rushstack/ts-command-line@4.23.5': - resolution: {integrity: sha512-jg70HfoK44KfSP3MTiL5rxsZH7X1ktX3cZs9Sl8eDu1/LxJSbPsh0MOFRC710lIuYYSgxWjI5AjbCBAl7u3RxA==} + '@rushstack/ts-command-line@4.23.6': + resolution: {integrity: sha512-7WepygaF3YPEoToh4MAL/mmHkiIImQq3/uAkQX46kVoKTNOOlCtFGyNnze6OYuWw2o9rxsyrHVfIBKxq/am2RA==} '@shikijs/core@1.29.2': resolution: {integrity: sha512-vju0lY9r27jJfOY4Z7+Rt/nIOjzJpZ3y+nYpqtUZInVoXQ/TJZcfGnNOGnKjFdVZb8qexiCuSlZRKcGfhhTTZQ==} + '@shikijs/core@3.2.1': + resolution: {integrity: sha512-FhsdxMWYu/C11sFisEp7FMGBtX/OSSbnXZDMBhGuUDBNTdsoZlMSgQv5f90rwvzWAdWIW6VobD+G3IrazxA6dQ==} + '@shikijs/engine-javascript@1.29.2': resolution: {integrity: sha512-iNEZv4IrLYPv64Q6k7EPpOCE/nuvGiKl7zxdq0WFuRPF5PAE9PRo2JGq/d8crLusM59BRemJ4eOqrFrC4wiQ+A==} + '@shikijs/engine-javascript@3.2.1': + resolution: {integrity: sha512-eMdcUzN3FMQYxOmRf2rmU8frikzoSHbQDFH2hIuXsrMO+IBOCI9BeeRkCiBkcLDHeRKbOCtYMJK3D6U32ooU9Q==} + '@shikijs/engine-oniguruma@1.29.2': resolution: {integrity: sha512-7iiOx3SG8+g1MnlzZVDYiaeHe7Ez2Kf2HrJzdmGwkRisT7r4rak0e655AcM/tF9JG/kg5fMNYlLLKglbN7gBqA==} + '@shikijs/engine-oniguruma@3.2.1': + resolution: {integrity: sha512-wZZAkayEn6qu2+YjenEoFqj0OyQI64EWsNR6/71d1EkG4sxEOFooowKivsWPpaWNBu3sxAG+zPz5kzBL/SsreQ==} + '@shikijs/langs@1.29.2': resolution: {integrity: sha512-FIBA7N3LZ+223U7cJDUYd5shmciFQlYkFXlkKVaHsCPgfVLiO+e12FmQE6Tf9vuyEsFe3dIl8qGWKXgEHL9wmQ==} + '@shikijs/langs@3.2.1': + resolution: {integrity: sha512-If0iDHYRSGbihiA8+7uRsgb1er1Yj11pwpX1c6HLYnizDsKAw5iaT3JXj5ZpaimXSWky/IhxTm7C6nkiYVym+A==} + '@shikijs/themes@1.29.2': resolution: {integrity: sha512-i9TNZlsq4uoyqSbluIcZkmPL9Bfi3djVxRnofUHwvx/h6SRW3cwgBC5SML7vsDcWyukY0eCzVN980rqP6qNl9g==} + '@shikijs/themes@3.2.1': + resolution: {integrity: sha512-k5DKJUT8IldBvAm8WcrDT5+7GA7se6lLksR+2E3SvyqGTyFMzU2F9Gb7rmD+t+Pga1MKrYFxDIeyWjMZWM6uBQ==} + '@shikijs/types@1.29.2': resolution: {integrity: sha512-VJjK0eIijTZf0QSTODEXCqinjBn0joAHQ+aPSBzrv4O2d/QSbsMw+ZeSRx03kV34Hy7NzUvV/7NqfYGRLrASmw==} + '@shikijs/types@3.2.1': + resolution: {integrity: sha512-/NTWAk4KE2M8uac0RhOsIhYQf4pdU0OywQuYDGIGAJ6Mjunxl2cGiuLkvu4HLCMn+OTTLRWkjZITp+aYJv60yA==} + '@shikijs/vscode-textmate@10.0.2': resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==} @@ -3969,68 +3996,68 @@ packages: peerDependencies: '@svgr/core': '*' - '@swc/core-darwin-arm64@1.11.7': - resolution: {integrity: sha512-3+LhCP2H50CLI6yv/lhOtoZ5B/hi7Q/23dye1KhbSDeDprLTm/KfLJh/iQqwaHUponf5m8C2U0y6DD+HGLz8Yw==} + '@swc/core-darwin-arm64@1.11.11': + resolution: {integrity: sha512-vJcjGVDB8cZH7zyOkC0AfpFYI/7GHKG0NSsH3tpuKrmoAXJyCYspKPGid7FT53EAlWreN7+Pew+bukYf5j+Fmg==} engines: {node: '>=10'} cpu: [arm64] os: [darwin] - '@swc/core-darwin-x64@1.11.7': - resolution: {integrity: sha512-1diWpJqwX1XmOghf9ENFaeRaTtqLiqlZIW56RfOqmeZ7tPp3qS7VygWb9akptBsO5pEA5ZwNgSerD6AJlQcjAw==} + '@swc/core-darwin-x64@1.11.11': + resolution: {integrity: sha512-/N4dGdqEYvD48mCF3QBSycAbbQd3yoZ2YHSzYesQf8usNc2YpIhYqEH3sql02UsxTjEFOJSf1bxZABDdhbSl6A==} engines: {node: '>=10'} cpu: [x64] os: [darwin] - '@swc/core-linux-arm-gnueabihf@1.11.7': - resolution: {integrity: sha512-MV8+hLREf0NN23NuSKemsjFaWjl/HnqdOkE7uhXTnHzg8WTwp6ddVtU5Yriv15+d/ktfLWPVAOhLHQ4gzaoa8A==} + '@swc/core-linux-arm-gnueabihf@1.11.11': + resolution: {integrity: sha512-hsBhKK+wVXdN3x9MrL5GW0yT8o9GxteE5zHAI2HJjRQel3HtW7m5Nvwaq+q8rwMf4YQRd8ydbvwl4iUOZx7i2Q==} engines: {node: '>=10'} cpu: [arm] os: [linux] - '@swc/core-linux-arm64-gnu@1.11.7': - resolution: {integrity: sha512-5GNs8ZjHQy/UTSnzzn+gm1RCUpCYo43lsxYOl8mpcnZSfxkNFVpjfylBv0QuJ5qhdfZ2iU55+v4iJCwCMtw0nA==} + '@swc/core-linux-arm64-gnu@1.11.11': + resolution: {integrity: sha512-YOCdxsqbnn/HMPCNM6nrXUpSndLXMUssGTtzT7ffXqr7WuzRg2e170FVDVQFIkb08E7Ku5uOnnUVAChAJQbMOQ==} engines: {node: '>=10'} cpu: [arm64] os: [linux] - '@swc/core-linux-arm64-musl@1.11.7': - resolution: {integrity: sha512-cTydaYBwDbVV5CspwVcCp9IevYWpGD1cF5B5KlBdjmBzxxeWyTAJRtKzn8w5/UJe/MfdAptarpqMPIs2f33YEQ==} + '@swc/core-linux-arm64-musl@1.11.11': + resolution: {integrity: sha512-nR2tfdQRRzwqR2XYw9NnBk9Fdvff/b8IiJzDL28gRR2QiJWLaE8LsRovtWrzCOYq6o5Uu9cJ3WbabWthLo4jLw==} engines: {node: '>=10'} cpu: [arm64] os: [linux] - '@swc/core-linux-x64-gnu@1.11.7': - resolution: {integrity: sha512-YAX2KfYPlbDsnZiVMI4ZwotF3VeURUrzD+emJgFf1g26F4eEmslldgnDrKybW7V+bObsH22cDqoy6jmQZgpuPQ==} + '@swc/core-linux-x64-gnu@1.11.11': + resolution: {integrity: sha512-b4gBp5HA9xNWNC5gsYbdzGBJWx4vKSGybGMGOVWWuF+ynx10+0sA/o4XJGuNHm8TEDuNh9YLKf6QkIO8+GPJ1g==} engines: {node: '>=10'} cpu: [x64] os: [linux] - '@swc/core-linux-x64-musl@1.11.7': - resolution: {integrity: sha512-mYT6FTDZyYx5pailc8xt6ClS2yjKmP8jNHxA9Ce3K21n5qkKilI5M2N7NShwXkd3Ksw3F29wKrg+wvEMXTRY/A==} + '@swc/core-linux-x64-musl@1.11.11': + resolution: {integrity: sha512-dEvqmQVswjNvMBwXNb8q5uSvhWrJLdttBSef3s6UC5oDSwOr00t3RQPzyS3n5qmGJ8UMTdPRmsopxmqaODISdg==} engines: {node: '>=10'} cpu: [x64] os: [linux] - '@swc/core-win32-arm64-msvc@1.11.7': - resolution: {integrity: sha512-uLDQEcv0BHcepypstyxKkNsW6KfLyI5jVxTbcxka+B2UnMcFpvoR87nGt2JYW0grO2SNZPoFz+UnoKL9c6JxpA==} + '@swc/core-win32-arm64-msvc@1.11.11': + resolution: {integrity: sha512-aZNZznem9WRnw2FbTqVpnclvl8Q2apOBW2B316gZK+qxbe+ktjOUnYaMhdCG3+BYggyIBDOnaJeQrXbKIMmNdw==} engines: {node: '>=10'} cpu: [arm64] os: [win32] - '@swc/core-win32-ia32-msvc@1.11.7': - resolution: {integrity: sha512-wiq5G3fRizdxAJVFcon7zpyfbfrb+YShuTy+TqJ4Nf5PC0ueMOXmsmeuyQGApn6dVWtGCyymYQYt77wHeQajdA==} + '@swc/core-win32-ia32-msvc@1.11.11': + resolution: {integrity: sha512-DjeJn/IfjgOddmJ8IBbWuDK53Fqw7UvOz7kyI/728CSdDYC3LXigzj3ZYs4VvyeOt+ZcQZUB2HA27edOifomGw==} engines: {node: '>=10'} cpu: [ia32] os: [win32] - '@swc/core-win32-x64-msvc@1.11.7': - resolution: {integrity: sha512-/zQdqY4fHkSORxEJ2cKtRBOwglvf/8gs6Tl4Q6VMx2zFtFpIOwFQstfY5u8wBNN2Z+PkAzyUCPoi8/cQFK8HLQ==} + '@swc/core-win32-x64-msvc@1.11.11': + resolution: {integrity: sha512-Gp/SLoeMtsU4n0uRoKDOlGrRC6wCfifq7bqLwSlAG8u8MyJYJCcwjg7ggm0rhLdC2vbiZ+lLVl3kkETp+JUvKg==} engines: {node: '>=10'} cpu: [x64] os: [win32] - '@swc/core@1.11.7': - resolution: {integrity: sha512-ICuzjyfz8Hh3U16Mb21uCRJeJd/lUgV999GjgvPhJSISM1L8GDSB5/AMNcwuGs7gFywTKI4vAeeXWyCETUXHAg==} + '@swc/core@1.11.11': + resolution: {integrity: sha512-pCVY2Wn6dV/labNvssk9b3Owi4WOYsapcbWm90XkIj4xH/56Z6gzja9fsU+4MdPuEfC2Smw835nZHcdCFGyX6A==} engines: {node: '>=10'} peerDependencies: '@swc/helpers': '*' @@ -4102,6 +4129,9 @@ packages: '@tokens-studio/types@0.5.2': resolution: {integrity: sha512-rzMcZP0bj2E5jaa7Fj0LGgYHysoCrbrxILVbT0ohsCUH5uCHY/u6J7Qw/TE0n6gR9Js/c9ZO9T8mOoz0HdLMbA==} + '@tybys/wasm-util@0.9.0': + resolution: {integrity: sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==} + '@types/acorn@4.0.6': resolution: {integrity: sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==} @@ -4237,11 +4267,11 @@ packages: '@types/node@17.0.45': resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==} - '@types/node@20.17.23': - resolution: {integrity: sha512-8PCGZ1ZJbEZuYNTMqywO+Sj4vSKjSjT6Ua+6RFOYlEvIvKQABPtrNkoVSLSKDb4obYcMhspVKmsw8Cm10NFRUg==} + '@types/node@20.17.24': + resolution: {integrity: sha512-d7fGCyB96w9BnWQrOsJtpyiSaBcAYYr75bnK6ZRjDbql2cGLj/3GsL5OYmLPNq76l7Gf2q4Rv9J2o6h5CrD9sA==} - '@types/node@22.13.9': - resolution: {integrity: sha512-acBjXdRJ3A6Pb3tqnw9HZmyR3Fiol3aGxRCK1x3d+6CDAMjl7I649wpSd+yNURCjbOUGu9tqtLKnTGxmK6CyGw==} + '@types/node@22.13.10': + resolution: {integrity: sha512-I6LPUvlRH+O6VRUqYOcMudhaIdUVWfsjnZavnsraHvpBwaEyMN29ry+0UVJhImYL16xsscu0aske3yA+uPOWfw==} '@types/pluralize@0.0.33': resolution: {integrity: sha512-JOqsl+ZoCpP4e8TDke9W79FDcSgPAR0l6pixx2JHkhnRjvShyYiAYw2LVsnA7K08Y6DeOnaU6ujmENO4os/cYg==} @@ -4334,8 +4364,8 @@ packages: typescript: optional: true - '@typescript-eslint/eslint-plugin@8.26.0': - resolution: {integrity: sha512-cLr1J6pe56zjKYajK6SSSre6nl1Gj6xDp1TY0trpgPzjVbgDwd09v2Ws37LABxzkicmUjhEeg/fAUjPJJB1v5Q==} + '@typescript-eslint/eslint-plugin@8.26.1': + resolution: {integrity: sha512-2X3mwqsj9Bd3Ciz508ZUtoQQYpOhU/kWoUqIf49H8Z0+Vbh6UF/y0OEYp0Q0axOGzaBGs7QxRwq0knSQ8khQNA==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} peerDependencies: '@typescript-eslint/parser': ^8.0.0 || ^8.0.0-alpha.0 @@ -4352,8 +4382,8 @@ packages: typescript: optional: true - '@typescript-eslint/parser@8.26.0': - resolution: {integrity: sha512-mNtXP9LTVBy14ZF3o7JG69gRPBK/2QWtQd0j0oH26HcY/foyJJau6pNUez7QrM5UHnSvwlQcJXKsk0I99B9pOA==} + '@typescript-eslint/parser@8.26.1': + resolution: {integrity: sha512-w6HZUV4NWxqd8BdeFf81t07d7/YV9s7TCWrQQbG5uhuvGUAW+fq1usZ1Hmz9UPNLniFnD8GLSsDpjP0hm1S4lQ==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} peerDependencies: eslint: ^8.57.0 || ^9.0.0 @@ -4363,8 +4393,8 @@ packages: resolution: {integrity: sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==} engines: {node: ^16.0.0 || >=18.0.0} - '@typescript-eslint/scope-manager@8.26.0': - resolution: {integrity: sha512-E0ntLvsfPqnPwng8b8y4OGuzh/iIOm2z8U3S9zic2TeMLW61u5IH2Q1wu0oSTkfrSzwbDJIB/Lm8O3//8BWMPA==} + '@typescript-eslint/scope-manager@8.26.1': + resolution: {integrity: sha512-6EIvbE5cNER8sqBu6V7+KeMZIC1664d2Yjt+B9EWUXrsyWpxx4lEZrmvxgSKRC6gX+efDL/UY9OpPZ267io3mg==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} '@typescript-eslint/type-utils@6.21.0': @@ -4377,8 +4407,8 @@ packages: typescript: optional: true - '@typescript-eslint/type-utils@8.26.0': - resolution: {integrity: sha512-ruk0RNChLKz3zKGn2LwXuVoeBcUMh+jaqzN461uMMdxy5H9epZqIBtYj7UiPXRuOpaALXGbmRuZQhmwHhaS04Q==} + '@typescript-eslint/type-utils@8.26.1': + resolution: {integrity: sha512-Kcj/TagJLwoY/5w9JGEFV0dclQdyqw9+VMndxOJKtoFSjfZhLXhYjzsQEeyza03rwHx2vFEGvrJWJBXKleRvZg==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} peerDependencies: eslint: ^8.57.0 || ^9.0.0 @@ -4388,8 +4418,8 @@ packages: resolution: {integrity: sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==} engines: {node: ^16.0.0 || >=18.0.0} - '@typescript-eslint/types@8.26.0': - resolution: {integrity: sha512-89B1eP3tnpr9A8L6PZlSjBvnJhWXtYfZhECqlBl1D9Lme9mHO6iWlsprBtVenQvY1HMhax1mWOjhtL3fh/u+pA==} + '@typescript-eslint/types@8.26.1': + resolution: {integrity: sha512-n4THUQW27VmQMx+3P+B0Yptl7ydfceUj4ON/AQILAASwgYdZ/2dhfymRMh5egRUrvK5lSmaOm77Ry+lmXPOgBQ==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} '@typescript-eslint/typescript-estree@6.21.0': @@ -4401,8 +4431,8 @@ packages: typescript: optional: true - '@typescript-eslint/typescript-estree@8.26.0': - resolution: {integrity: sha512-tiJ1Hvy/V/oMVRTbEOIeemA2XoylimlDQ03CgPPNaHYZbpsc78Hmngnt+WXZfJX1pjQ711V7g0H7cSJThGYfPQ==} + '@typescript-eslint/typescript-estree@8.26.1': + resolution: {integrity: sha512-yUwPpUHDgdrv1QJ7YQal3cMVBGWfnuCdKbXw1yyjArax3353rEJP1ZA+4F8nOlQ3RfS2hUN/wze3nlY+ZOhvoA==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} peerDependencies: typescript: '>=4.8.4 <5.9.0' @@ -4413,8 +4443,8 @@ packages: peerDependencies: eslint: ^7.0.0 || ^8.0.0 - '@typescript-eslint/utils@8.26.0': - resolution: {integrity: sha512-2L2tU3FVwhvU14LndnQCA2frYC8JnPDVKyQtWFPf8IYFMt/ykEN1bPolNhNbCVgOmdzTlWdusCTKA/9nKrf8Ig==} + '@typescript-eslint/utils@8.26.1': + resolution: {integrity: sha512-V4Urxa/XtSUroUrnI7q6yUTD3hDtfJ2jzVfeT3VK0ciizfK2q/zGC0iDh1lFMUZR8cImRrep6/q0xd/1ZGPQpg==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} peerDependencies: eslint: ^8.57.0 || ^9.0.0 @@ -4424,8 +4454,8 @@ packages: resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==} engines: {node: ^16.0.0 || >=18.0.0} - '@typescript-eslint/visitor-keys@8.26.0': - resolution: {integrity: sha512-2z8JQJWAzPdDd51dRQ/oqIJxe99/hoLIqmf8RMCAJQtYDc535W/Jt2+RTP4bP0aKeBG1F65yjIZuczOXCmbWwg==} + '@typescript-eslint/visitor-keys@8.26.1': + resolution: {integrity: sha512-AjOC3zfnxd6S4Eiy3jwktJPclqhFHNyd8L6Gycf9WUPoKZpgM5PjkxY1X7uSy61xVpiJDhhk7XT2NVsN3ALTWg==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} '@uiw/copy-to-clipboard@1.0.17': @@ -4440,6 +4470,61 @@ packages: '@ungap/structured-clone@1.3.0': resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==} + '@unrs/rspack-resolver-binding-darwin-arm64@1.2.2': + resolution: {integrity: sha512-i7z0B+C0P8Q63O/5PXJAzeFtA1ttY3OR2VSJgGv18S+PFNwD98xHgAgPOT1H5HIV6jlQP8Avzbp09qxJUdpPNw==} + cpu: [arm64] + os: [darwin] + + '@unrs/rspack-resolver-binding-darwin-x64@1.2.2': + resolution: {integrity: sha512-YEdFzPjIbDUCfmehC6eS+AdJYtFWY35YYgWUnqqTM2oe/N58GhNy5yRllxYhxwJ9GcfHoNc6Ubze1yjkNv+9Qg==} + cpu: [x64] + os: [darwin] + + '@unrs/rspack-resolver-binding-freebsd-x64@1.2.2': + resolution: {integrity: sha512-TU4ntNXDgPN2giQyyzSnGWf/dVCem5lvwxg0XYvsvz35h5H19WrhTmHgbrULMuypCB3aHe1enYUC9rPLDw45mA==} + cpu: [x64] + os: [freebsd] + + '@unrs/rspack-resolver-binding-linux-arm-gnueabihf@1.2.2': + resolution: {integrity: sha512-ik3w4/rU6RujBvNWiDnKdXi1smBhqxEDhccNi/j2rHaMjm0Fk49KkJ6XKsoUnD2kZ5xaMJf9JjailW/okfUPIw==} + cpu: [arm] + os: [linux] + + '@unrs/rspack-resolver-binding-linux-arm64-gnu@1.2.2': + resolution: {integrity: sha512-fp4Azi8kHz6TX8SFmKfyScZrMLfp++uRm2srpqRjsRZIIBzH74NtSkdEUHImR4G7f7XJ+sVZjCc6KDDK04YEpQ==} + cpu: [arm64] + os: [linux] + + '@unrs/rspack-resolver-binding-linux-arm64-musl@1.2.2': + resolution: {integrity: sha512-gMiG3DCFioJxdGBzhlL86KcFgt9HGz0iDhw0YVYPsShItpN5pqIkNrI+L/Q/0gfDiGrfcE0X3VANSYIPmqEAlQ==} + cpu: [arm64] + os: [linux] + + '@unrs/rspack-resolver-binding-linux-x64-gnu@1.2.2': + resolution: {integrity: sha512-n/4n2CxaUF9tcaJxEaZm+lqvaw2gflfWQ1R9I7WQgYkKEKbRKbpG/R3hopYdUmLSRI4xaW1Cy0Bz40eS2Yi4Sw==} + cpu: [x64] + os: [linux] + + '@unrs/rspack-resolver-binding-linux-x64-musl@1.2.2': + resolution: {integrity: sha512-cHyhAr6rlYYbon1L2Ag449YCj3p6XMfcYTP0AQX+KkQo025d1y/VFtPWvjMhuEsE2lLvtHm7GdJozj6BOMtzVg==} + cpu: [x64] + os: [linux] + + '@unrs/rspack-resolver-binding-wasm32-wasi@1.2.2': + resolution: {integrity: sha512-eogDKuICghDLGc32FtP+WniG38IB1RcGOGz0G3z8406dUdjJvxfHGuGs/dSlM9YEp/v0lEqhJ4mBu6X2nL9pog==} + engines: {node: '>=14.0.0'} + cpu: [wasm32] + + '@unrs/rspack-resolver-binding-win32-arm64-msvc@1.2.2': + resolution: {integrity: sha512-7sWRJumhpXSi2lccX8aQpfFXHsSVASdWndLv8AmD8nDRA/5PBi8IplQVZNx2mYRx6+Bp91Z00kuVqpXO9NfCTg==} + cpu: [arm64] + os: [win32] + + '@unrs/rspack-resolver-binding-win32-x64-msvc@1.2.2': + resolution: {integrity: sha512-hewo/UMGP1a7O6FG/ThcPzSJdm/WwrYDNkdGgWl6M18H6K6MSitklomWpT9MUtT5KGj++QJb06va/14QBC4pvw==} + cpu: [x64] + os: [win32] + '@vitejs/plugin-react-swc@3.8.0': resolution: {integrity: sha512-T4sHPvS+DIqDP51ifPqa9XIRAz/kIvIi8oXcnOZZgHmMotgmmdxe/DD5tMFlt5nuIRzT0/QuiwmKlH0503Aapw==} peerDependencies: @@ -4451,21 +4536,21 @@ packages: peerDependencies: vite: ^4.2.0 || ^5.0.0 || ^6.0.0 - '@vitest/coverage-istanbul@2.1.8': - resolution: {integrity: sha512-cSaCd8KcWWvgDwEJSXm0NEWZ1YTiJzjicKHy+zOEbUm0gjbbkz+qJf1p8q71uBzSlS7vdnZA8wRLeiwVE3fFTA==} + '@vitest/coverage-istanbul@2.1.9': + resolution: {integrity: sha512-vdYE4FkC/y2lxcN3Dcj54Bw+ericmDwiex0B8LV5F/YNYEYP1mgVwhPnHwWGAXu38qizkjOuyczKbFTALfzFKw==} peerDependencies: - vitest: 2.1.8 + vitest: 2.1.9 - '@vitest/coverage-istanbul@3.0.6': - resolution: {integrity: sha512-e+8HkmVlPpqOZXIWGE8opxex3trTMCeCMHax7yG0JbWOtGRVKBjuNS/GGA/eta89LuXUrCIcQrRfJHLUrWl7Wg==} + '@vitest/coverage-istanbul@3.0.9': + resolution: {integrity: sha512-/TXh2qmOhclmVPjOnPTpIO4Xr6l2P5EwyXQygenwq4/ZQ/vPsrz+GCRZF9kBeQi6xrGcHv368Si9PGImWQawVg==} peerDependencies: - vitest: 3.0.6 + vitest: 3.0.9 '@vitest/expect@2.1.9': resolution: {integrity: sha512-UJCIkTBenHeKT1TTlKMJWy1laZewsRIzYighyYiJKZreqtdxSos/S1t+ktRMQWu2CKqaarrkeszJx1cgC5tGZw==} - '@vitest/expect@3.0.7': - resolution: {integrity: sha512-QP25f+YJhzPfHrHfYHtvRn+uvkCFCqFtW9CktfBxmB+25QqWsx7VB2As6f4GmwllHLDhXNHvqedwhvMmSnNmjw==} + '@vitest/expect@3.0.9': + resolution: {integrity: sha512-5eCqRItYgIML7NNVgJj6TVCmdzE7ZVgJhruW0ziSQV4V7PvLkDL1bBkBdcTs/VuIz0IxPb5da1IDSqc1TR9eig==} '@vitest/mocker@2.1.9': resolution: {integrity: sha512-tVL6uJgoUdi6icpxmdrn5YNo3g3Dxv+IHJBr0GXHaEdTcw3F+cPKnsXFhli6nO+f/6SDKPHEK1UN+k+TQv0Ehg==} @@ -4478,8 +4563,8 @@ packages: vite: optional: true - '@vitest/mocker@3.0.7': - resolution: {integrity: sha512-qui+3BLz9Eonx4EAuR/i+QlCX6AUZ35taDQgwGkK/Tw6/WgwodSrjN1X2xf69IA/643ZX5zNKIn2svvtZDrs4w==} + '@vitest/mocker@3.0.9': + resolution: {integrity: sha512-ryERPIBOnvevAkTq+L1lD+DTFBRcjueL9lOUfXsLfwP92h4e+Heb+PjiqS3/OURWPtywfafK0kj++yDFjWUmrA==} peerDependencies: msw: ^2.4.9 vite: ^5.0.0 || ^6.0.0 @@ -4492,66 +4577,66 @@ packages: '@vitest/pretty-format@2.1.9': resolution: {integrity: sha512-KhRIdGV2U9HOUzxfiHmY8IFHTdqtOhIzCpd8WRdJiE7D/HUcZVD0EgQCVjm+Q9gkUXWgBvMmTtZgIG48wq7sOQ==} - '@vitest/pretty-format@3.0.7': - resolution: {integrity: sha512-CiRY0BViD/V8uwuEzz9Yapyao+M9M008/9oMOSQydwbwb+CMokEq3XVaF3XK/VWaOK0Jm9z7ENhybg70Gtxsmg==} + '@vitest/pretty-format@3.0.9': + resolution: {integrity: sha512-OW9F8t2J3AwFEwENg3yMyKWweF7oRJlMyHOMIhO5F3n0+cgQAJZBjNgrF8dLwFTEXl5jUqBLXd9QyyKv8zEcmA==} '@vitest/runner@2.1.9': resolution: {integrity: sha512-ZXSSqTFIrzduD63btIfEyOmNcBmQvgOVsPNPe0jYtESiXkhd8u2erDLnMxmGrDCwHCCHE7hxwRDCT3pt0esT4g==} - '@vitest/runner@3.0.7': - resolution: {integrity: sha512-WeEl38Z0S2ZcuRTeyYqaZtm4e26tq6ZFqh5y8YD9YxfWuu0OFiGFUbnxNynwLjNRHPsXyee2M9tV7YxOTPZl2g==} + '@vitest/runner@3.0.9': + resolution: {integrity: sha512-NX9oUXgF9HPfJSwl8tUZCMP1oGx2+Sf+ru6d05QjzQz4OwWg0psEzwY6VexP2tTHWdOkhKHUIZH+fS6nA7jfOw==} '@vitest/snapshot@2.1.9': resolution: {integrity: sha512-oBO82rEjsxLNJincVhLhaxxZdEtV0EFHMK5Kmx5sJ6H9L183dHECjiefOAdnqpIgT5eZwT04PoggUnW88vOBNQ==} - '@vitest/snapshot@3.0.7': - resolution: {integrity: sha512-eqTUryJWQN0Rtf5yqCGTQWsCFOQe4eNz5Twsu21xYEcnFJtMU5XvmG0vgebhdLlrHQTSq5p8vWHJIeJQV8ovsA==} + '@vitest/snapshot@3.0.9': + resolution: {integrity: sha512-AiLUiuZ0FuA+/8i19mTYd+re5jqjEc2jZbgJ2up0VY0Ddyyxg/uUtBDpIFAy4uzKaQxOW8gMgBdAJJ2ydhu39A==} '@vitest/spy@2.1.9': resolution: {integrity: sha512-E1B35FwzXXTs9FHNK6bDszs7mtydNi5MIfUWpceJ8Xbfb1gBMscAnwLbEu+B44ed6W3XjL9/ehLPHR1fkf1KLQ==} - '@vitest/spy@3.0.7': - resolution: {integrity: sha512-4T4WcsibB0B6hrKdAZTM37ekuyFZt2cGbEGd2+L0P8ov15J1/HUsUaqkXEQPNAWr4BtPPe1gI+FYfMHhEKfR8w==} + '@vitest/spy@3.0.9': + resolution: {integrity: sha512-/CcK2UDl0aQ2wtkp3YVWldrpLRNCfVcIOFGlVGKO4R5eajsH393Z1yiXLVQ7vWsj26JOEjeZI0x5sm5P4OGUNQ==} - '@vitest/ui@3.0.7': - resolution: {integrity: sha512-bogkkSaVdSTRj02TfypjrqrLCeEc/tA5V4gAVM843Rp5JtIub3xaij+qjsSnS6CseLQJUSdDCFaFqPMmymRJKQ==} + '@vitest/ui@3.0.9': + resolution: {integrity: sha512-FpZD4aIv/qNpwkV3XbLV6xldWFHMgoNWAJEgg5GmpObmAOLAErpYjew9dDwXdYdKOS3iZRKdwI+P3JOJcYeUBg==} peerDependencies: - vitest: 3.0.7 + vitest: 3.0.9 '@vitest/utils@2.1.9': resolution: {integrity: sha512-v0psaMSkNJ3A2NMrUEHFRzJtDPFn+/VWZ5WxImB21T9fjucJRmS7xCS3ppEnARb9y11OAzaD+P2Ps+b+BGX5iQ==} - '@vitest/utils@3.0.7': - resolution: {integrity: sha512-xePVpCRfooFX3rANQjwoditoXgWb1MaFbzmGuPP59MK6i13mrnDw/yEIyJudLeW6/38mCNcwCiJIGmpDPibAIg==} + '@vitest/utils@3.0.9': + resolution: {integrity: sha512-ilHM5fHhZ89MCp5aAaM9uhfl1c2JdxVxl3McqsdVyVNN6JffnEen8UMCdRTzOhGXNQGo5GNL9QugHrz727Wnng==} - '@volar/kit@2.4.11': - resolution: {integrity: sha512-ups5RKbMzMCr6RKafcCqDRnJhJDNWqo2vfekwOAj6psZ15v5TlcQFQAyokQJ3wZxVkzxrQM+TqTRDENfQEXpmA==} + '@volar/kit@2.4.12': + resolution: {integrity: sha512-f9JE8oy9C2rBcCWxUYKUF23hOXz4mwgVXFjk7nHhxzplaoVjEOsKpBm8NI2nBH7Cwu8DRxDwBsbIxMl/8wlLxw==} peerDependencies: typescript: '*' '@volar/language-core@1.11.1': resolution: {integrity: sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==} - '@volar/language-core@2.4.11': - resolution: {integrity: sha512-lN2C1+ByfW9/JRPpqScuZt/4OrUUse57GLI6TbLgTIqBVemdl1wNcZ1qYGEo2+Gw8coYLgCy7SuKqn6IrQcQgg==} + '@volar/language-core@2.4.12': + resolution: {integrity: sha512-RLrFdXEaQBWfSnYGVxvR2WrO6Bub0unkdHYIdC31HzIEqATIuuhRRzYu76iGPZ6OtA4Au1SnW0ZwIqPP217YhA==} - '@volar/language-server@2.4.11': - resolution: {integrity: sha512-W9P8glH1M8LGREJ7yHRCANI5vOvTrRO15EMLdmh5WNF9sZYSEbQxiHKckZhvGIkbeR1WAlTl3ORTrJXUghjk7g==} + '@volar/language-server@2.4.12': + resolution: {integrity: sha512-KC0YqTXCZMaImMWyAKC+dLB2BXjfz80kqesJkV6oXxJsGEQPfmdqug299idwtrT6FVSmZ7q5UrPfvgKwA0S3JA==} - '@volar/language-service@2.4.11': - resolution: {integrity: sha512-KIb6g8gjUkS2LzAJ9bJCLIjfsJjeRtmXlu7b2pDFGD3fNqdbC53cCAKzgWDs64xtQVKYBU13DLWbtSNFtGuMLQ==} + '@volar/language-service@2.4.12': + resolution: {integrity: sha512-nifOPGYYPnCmxja6/ML/Gl2EgFkUdw4gLbYqbh8FjqX3gSpXSZl/0ebqORjKo1KW56YWHWRZd1jFutEtCiRYhA==} '@volar/source-map@1.11.1': resolution: {integrity: sha512-hJnOnwZ4+WT5iupLRnuzbULZ42L7BWWPMmruzwtLhJfpDVoZLjNBxHDi2sY2bgZXCKlpU5XcsMFoYrsQmPhfZg==} - '@volar/source-map@2.4.11': - resolution: {integrity: sha512-ZQpmafIGvaZMn/8iuvCFGrW3smeqkq/IIh9F1SdSx9aUl0J4Iurzd6/FhmjNO5g2ejF3rT45dKskgXWiofqlZQ==} + '@volar/source-map@2.4.12': + resolution: {integrity: sha512-bUFIKvn2U0AWojOaqf63ER0N/iHIBYZPpNGogfLPQ68F5Eet6FnLlyho7BS0y2HJ1jFhSif7AcuTx1TqsCzRzw==} '@volar/typescript@1.11.1': resolution: {integrity: sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==} - '@volar/typescript@2.4.11': - resolution: {integrity: sha512-2DT+Tdh88Spp5PyPbqhyoYavYCPDsqbHLFwcUI9K1NlY1YgUJvujGdrqUp0zWxnW7KWNTr3xSpMuv2WnaTKDAw==} + '@volar/typescript@2.4.12': + resolution: {integrity: sha512-HJB73OTJDgPc80K30wxi3if4fSsZZAOScbj2fcicMuOPoOkcf9NNAINb33o+DzhBdF9xTKC1gnPmIRDous5S0g==} '@vscode/emmet-helper@2.11.0': resolution: {integrity: sha512-QLxjQR3imPZPQltfbWRnHU6JecWTF1QSWhx3GAKQpslx7y3Dp6sIIXhKjiUJ/BR9FX8PVthjr9PD6pNwOJfAzw==} @@ -4846,8 +4931,8 @@ packages: resolution: {integrity: sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==} engines: {node: '>= 0.4'} - array.prototype.findlastindex@1.2.5: - resolution: {integrity: sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==} + array.prototype.findlastindex@1.2.6: + resolution: {integrity: sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==} engines: {node: '>= 0.4'} array.prototype.flat@1.3.3: @@ -4885,8 +4970,8 @@ packages: peerDependencies: astro: ^4.0.0-beta || ^5.0.0-beta || ^3.3.0 - astro@5.4.2: - resolution: {integrity: sha512-9Z3fAniIRJaK/o43OroZA1wHUIU+qHiOR9ovlVT/2XQaN25QRXScIsKWlFp0G/zrx5OuuoJ+QnaoHHW061u26A==} + astro@5.5.3: + resolution: {integrity: sha512-FvqIo5jkunP5R6FkY5vuFYElTOqjnazuiN0x/yf1F+nvedsGDemm5K7mS6RTmFVB291mE9WWn1AbuJsFWEcHgg==} engines: {node: ^18.17.1 || ^20.3.0 || >=22.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0'} hasBin: true @@ -4904,8 +4989,8 @@ packages: resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==} engines: {node: '>= 4.0.0'} - autoprefixer@10.4.20: - resolution: {integrity: sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==} + autoprefixer@10.4.21: + resolution: {integrity: sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==} engines: {node: ^10 || ^12 || >=14} hasBin: true peerDependencies: @@ -5029,8 +5114,8 @@ packages: resolution: {integrity: sha512-ilQs4fm/l9eMfWY2dY0WCIUplSUp7U0CT1vrqMg1MUdeZl4fypu5UP0XcDBK5WBQPJAKP1b7XEodISmekH/CEg==} engines: {bare: '>=1.7.0'} - bare-os@3.5.1: - resolution: {integrity: sha512-LvfVNDcWLw2AnIw5f2mWUgumW3I3N/WYGiWeimhQC1Ybt71n2FjlS9GJKeCnFeg1MKZHxzIFmpFnBXDI+sBeFg==} + bare-os@3.6.0: + resolution: {integrity: sha512-BUrFS5TqSBdA0LwHop4OjPJwisqxGy6JsWVqV6qaFoe965qqtaKfDzHY5T2YA1gUL0ZeeQeA+4BBc1FJTcHiPw==} engines: {bare: '>=1.14.0'} bare-path@3.0.0: @@ -5185,8 +5270,8 @@ packages: resolution: {integrity: sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==} engines: {node: '>=16'} - caniuse-lite@1.0.30001702: - resolution: {integrity: sha512-LoPe/D7zioC0REI5W73PeR1e1MLCipRGq/VkovJnd6Df+QVqT+vT33OXCp8QUd7kA7RZrHWxb1B36OQKI/0gOA==} + caniuse-lite@1.0.30001706: + resolution: {integrity: sha512-3ZczoTApMAZwPKYWmwVbQMFpXBDds3/0VciVoUwPUbldlYyVLmRVuRs/PcUZtHpbLRpzzDvrvnFuREsGt6lUug==} caret-xy@2.0.3: resolution: {integrity: sha512-iZySCshCBnQcwdYCFbfCvAorpMe/ghXqEOyDdCpOcYR6OtJu6bdnm3OTyCxlWtA7IAss4TQqcc0XO6EksKKJUw==} @@ -5267,8 +5352,8 @@ packages: resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==} engines: {node: '>=8'} - ci-info@4.1.0: - resolution: {integrity: sha512-HutrvTNsF48wnxkzERIXOe5/mlcfFcbfCmwcg6CJnizbSue78AbDt+1cgl26zwn61WFxhcPykPfZrbqjGmBb4A==} + ci-info@4.2.0: + resolution: {integrity: sha512-cYY9mypksY8NRqgDB1XD1RiJL338v/551niynFTGkZOO2LHuB2OmOYxDIe/ttN9AHwrqdum1360G3ald0W9kCg==} engines: {node: '>=8'} cjs-module-lexer@1.4.3: @@ -5318,8 +5403,8 @@ packages: resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} engines: {node: '>=6'} - cmdk@1.0.4: - resolution: {integrity: sha512-AnsjfHyHpQ/EFeAnG216WY7A5LiYCoZzCSygiLvfXC3H3LFGCprErteUcszaVluGOhuOTbJS3jWHrSDYPBBygg==} + cmdk@1.1.1: + resolution: {integrity: sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==} peerDependencies: react: 17.0.2 react-dom: 17.0.2 @@ -5522,8 +5607,8 @@ packages: css-select@5.1.0: resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==} - css-selector-parser@3.0.5: - resolution: {integrity: sha512-3itoDFbKUNx1eKmVpYMFyqKX04Ww9osZ+dLgrk6GEv6KMVeXUhUnp4I5X+evw+u3ZxVU6RFXSSRxlTeMh8bA+g==} + css-selector-parser@3.1.1: + resolution: {integrity: sha512-Y+DuvJ7JAjpL1f4DeILe5sXCC3kRXMl0DxM4lAWbS8/jEZ29o3V0L5TL6zIifj4Csmj6c+jiF2ENjida2OVOGA==} css-what@6.1.0: resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==} @@ -5537,8 +5622,8 @@ packages: engines: {node: '>=4'} hasBin: true - cssstyle@4.2.1: - resolution: {integrity: sha512-9+vem03dMXG7gDmZ62uqmRiMRNtinIZ9ZyuF6BdxzfOD+FdN5hretzynkn0ReS2DO2GSw76RWHs0UmJPI2zUjw==} + cssstyle@4.3.0: + resolution: {integrity: sha512-6r0NiY0xizYqfBvWp1G7WXJ06/bZyrk7Dc6PHql82C/pKGUTKu4yAX4Y8JPamb1ob9nBKuxWzCGTRuGwU3yxJQ==} engines: {node: '>=18'} csstype@3.1.3: @@ -5597,8 +5682,8 @@ packages: decimal.js@10.5.0: resolution: {integrity: sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw==} - decode-named-character-reference@1.0.2: - resolution: {integrity: sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==} + decode-named-character-reference@1.1.0: + resolution: {integrity: sha512-Wy+JTSbFThEOXQIR2L6mxJvEs+veIzpmqD7ynWxMXGpnk3smkHQOp6forLdHsKpAMW9iJpaBBIxz285t1n1C3w==} decompress-response@6.0.0: resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==} @@ -5806,8 +5891,8 @@ packages: engines: {node: '>=0.10.0'} hasBin: true - electron-to-chromium@1.5.112: - resolution: {integrity: sha512-oen93kVyqSb3l+ziUgzIOlWt/oOuy4zRmpwestMn4rhFWAoFJeFuCVte9F2fASjeZZo7l/Cif9TiyrdW4CwEMA==} + electron-to-chromium@1.5.120: + resolution: {integrity: sha512-oTUp3gfX1gZI+xfD2djr2rzQdHCwHzPQrrK0CD7WpTdF0nPdQ/INcRVjWgLdCT4a9W3jFObR9DAfsuyFQnI8CQ==} embla-carousel-react@8.5.2: resolution: {integrity: sha512-Tmx+uY3MqseIGdwp0ScyUuxpBgx5jX1f7od4Cm5mDwg/dptEiTKf9xp6tw0lZN2VA9JbnVMl/aikmbc53c6QFA==} @@ -5946,8 +6031,8 @@ packages: engines: {node: '>=12'} hasBin: true - esbuild@0.25.0: - resolution: {integrity: sha512-BXq5mqc8ltbaN34cDqWuYKyNhX8D/Z0J1xdtdQ8UcIIIyJyz+ZMKUt58tF3SrZ85jcfN/PZYhjR5uDQAYNVbuw==} + esbuild@0.25.1: + resolution: {integrity: sha512-BGO5LtrGC7vxnqucAe/rmvKdJllfGaYWdyABvyMoXQlfYMb2bbRuReWR5tEGE//4LcNJj9XrkovTqNYRFZHAMQ==} engines: {node: '>=18'} hasBin: true @@ -5983,8 +6068,8 @@ packages: eslint-import-resolver-node@0.3.9: resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==} - eslint-import-resolver-typescript@3.8.3: - resolution: {integrity: sha512-A0bu4Ks2QqDWNpeEgTQMPTngaMhuDu4yv6xpftBMAf+1ziXnpx+eSR1WRfoPTe2BAiAjHFZ7kSNx1fvr5g5pmQ==} + eslint-import-resolver-typescript@3.9.1: + resolution: {integrity: sha512-euxa5rTGqHeqVxmOHT25hpk58PxkQ4mNoX6Yun4ooGaCHAxOCojJYNvjmyeOQxj/LyW+3fulH0+xtk+p2kPPTw==} engines: {node: ^14.18.0 || >=16.0.0} peerDependencies: eslint: '*' @@ -6209,8 +6294,8 @@ packages: expressive-code@0.40.2: resolution: {integrity: sha512-1zIda2rB0qiDZACawzw2rbdBQiWHBT56uBctS+ezFe5XMAaFaHLnnSYND/Kd+dVzO9HfCXRDpzH3d+3fvOWRcw==} - exsolve@1.0.1: - resolution: {integrity: sha512-Smf0iQtkQVJLaph8r/qS8C8SWfQkaq9Q/dFcD44MLbJj6DNhlWefVuaS21SjfqOsBbjVlKtbCj6L9ekXK6EZUg==} + exsolve@1.0.4: + resolution: {integrity: sha512-xsZH6PXaER4XoV+NiT7JHp1bJodJVT+cxeSH1G0f0tlT0lJqYuHUP3bUx2HtfTDvOagMINYp8rsqusxud3RXhw==} extend@3.0.2: resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==} @@ -6292,10 +6377,6 @@ packages: resolution: {integrity: sha512-9ZonPT4ZAK4a+1pUPVPZJapbi7O5qbbJPdYw/NOQWZZbVLdDTYM3A4R9z/DpAM08IDaFGsvPgiGZ82WEwUDWjg==} engines: {node: '>=14.16'} - find-up-simple@1.0.1: - resolution: {integrity: sha512-afd4O7zpqHeRyg4PfDQsXmlDe2PfdHtJt6Akt8jOWaApLOZk5JXs6VMR29lz03pRe9mpykrRCYIYxaJYcfpncQ==} - engines: {node: '>=18'} - find-up@4.1.0: resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==} engines: {node: '>=8'} @@ -6308,9 +6389,6 @@ packages: resolution: {integrity: sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} - find-yarn-workspace-root2@1.2.16: - resolution: {integrity: sha512-hr6hb1w8ePMpPVUK39S4RlwJzi+xPLuVuG8XlwXU3KD5Yn3qgBWVfy3AzNlDhWvE1EORCE65/Qm26rFQt3VLVA==} - find-yarn-workspace-root@2.0.0: resolution: {integrity: sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==} @@ -6786,8 +6864,8 @@ packages: i18next@23.16.8: resolution: {integrity: sha512-06r/TitrM88Mg5FdUXAKL96dJMzgqLE5dv3ryBAra4KCwD9mJ4ndOTS95ZuymIGoE+2hzfdaMak2X11/es7ZWg==} - i18next@24.2.2: - resolution: {integrity: sha512-NE6i86lBCKRYZa5TaUDkU5S4HFgLIEJRLr3Whf2psgaxBleQ2LC1YW1Vc+SCgkAW7VEzndT6al6+CzegSUHcTQ==} + i18next@24.2.3: + resolution: {integrity: sha512-lfbf80OzkocvX7nmZtu7nSTNbrTYR52sLWxPtlXX1zAhVw8WEnFk4puUkCR4B1dNQwbSpEHHHemcZu//7EcB7A==} peerDependencies: typescript: ^5 peerDependenciesMeta: @@ -7312,8 +7390,8 @@ packages: jju@1.4.0: resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==} - jotai@2.12.1: - resolution: {integrity: sha512-VUW0nMPYIru5g89tdxwr9ftiVdc/nGV9jvHISN8Ucx+m1vI9dBeHemfqYzEuw5XSkmYjD/MEyApN9k6yrATsZQ==} + jotai@2.12.2: + resolution: {integrity: sha512-oN8715y7MkjXlSrpyjlR887TOuc/NLZMs9gvgtfWH/JP47ChwO0lR2ijSwBvPMYyXRAPT+liIAhuBavluKGgtA==} engines: {node: '>=12.20.0'} peerDependencies: '@types/react': ^17.0.3 @@ -7467,8 +7545,8 @@ packages: lines-and-columns@1.2.4: resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==} - lint-staged@15.4.3: - resolution: {integrity: sha512-FoH1vOeouNh1pw+90S+cnuoFwRfUD9ijY2GKy5h7HS3OR7JVir2N2xrsa0+Twc1B7cW72L+88geG5cW4wIhn7g==} + lint-staged@15.5.0: + resolution: {integrity: sha512-WyCzSbfYGhK7cU+UuDDkzUiytbfbi0ZdPy2orwtM75P3WTtQBzmG40cCxIa8Ii2+XjfxzLH6Be46tUfWS85Xfg==} engines: {node: '>=18.12.0'} hasBin: true @@ -7480,10 +7558,6 @@ packages: resolution: {integrity: sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==} engines: {node: '>=4'} - load-yaml-file@0.2.0: - resolution: {integrity: sha512-OfCBkGEw4nN6JLtgRidPX6QxjBQGQf72q3si2uvqyFEMbycSFFHwAZeXx6cJgFM9wmLrf9zBwCP3Ivqa+LLZPw==} - engines: {node: '>=6'} - loader-runner@4.3.0: resolution: {integrity: sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==} engines: {node: '>=6.11.5'} @@ -7814,8 +7888,8 @@ packages: resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==} engines: {node: '>= 0.6'} - mime-db@1.53.0: - resolution: {integrity: sha512-oHlN/w+3MQ3rba9rqFr6V/ypF10LSkdwUysQL7GkXoTgIWeV+tcXGA852TBxH+gsh8UWoyhR1hKcoMJTuWflpg==} + mime-db@1.54.0: + resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==} engines: {node: '>= 0.6'} mime-types@2.1.35: @@ -7950,8 +8024,8 @@ packages: mz@2.7.0: resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==} - nanoid@3.3.8: - resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==} + nanoid@3.3.11: + resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==} engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true @@ -8049,8 +8123,8 @@ packages: nth-check@2.1.1: resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==} - nwsapi@2.2.18: - resolution: {integrity: sha512-p1TRH/edngVEHVbwqWnxUViEmq5znDvyB+Sik5cmuLpGOIfDf/39zLiq3swPF8Vakqn+gvNiOQAZu8djYlQILA==} + nwsapi@2.2.19: + resolution: {integrity: sha512-94bcyI3RsqiZufXjkr3ltkI86iEl+I7uiHVDtcq9wJUTwYQJ5odHDeSzkkrRzi80jJ8MaeZgqKjH1bAWAFw9bA==} object-assign@4.1.1: resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} @@ -8076,8 +8150,8 @@ packages: resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==} engines: {node: '>= 0.4'} - object.entries@1.1.8: - resolution: {integrity: sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==} + object.entries@1.1.9: + resolution: {integrity: sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==} engines: {node: '>= 0.4'} object.fromentries@2.0.8: @@ -8121,9 +8195,15 @@ packages: resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==} engines: {node: '>=18'} + oniguruma-parser@0.5.4: + resolution: {integrity: sha512-yNxcQ8sKvURiTwP0mV6bLQCYE7NKfKRRWunhbZnXgxSmB1OXa1lHrN3o4DZd+0Si0kU5blidK7BcROO8qv5TZA==} + oniguruma-to-es@2.3.0: resolution: {integrity: sha512-bwALDxriqfKGfUufKGGepCzu9x7nJQuoRoAFp4AnwehhC2crqrDIAP/uN2qdlsAvSMpeRC3+Yzhqc7hLmle5+g==} + oniguruma-to-es@4.1.0: + resolution: {integrity: sha512-SNwG909cSLo4vPyyPbU/VJkEc9WOXqu2ycBlfd1UCXLqk1IijcQktSBb2yRQ2UFPsDhpkaf+C1dtT3PkLK/yWA==} + open@10.1.0: resolution: {integrity: sha512-mnkeQ1qP5Ue2wd+aivTD3NHd/lZ96Lu0jgf0pwktLPtx6cTZiH7tyeGRRHs0zX0rbrahXPnXlUnbeXyaBBuIaw==} engines: {node: '>=18'} @@ -8194,6 +8274,9 @@ packages: package-json-from-dist@1.0.1: resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==} + package-manager-detector@1.1.0: + resolution: {integrity: sha512-Y8f9qUlBzW8qauJjd/eu6jlpJZsuPJm2ZAV0cDVd420o4EdpH5RPdoCv+60/TdJflGatr4sDfpAL6ArWZbM5tA==} + pagefind@1.3.0: resolution: {integrity: sha512-8KPLGT5g9s+olKMRTU9LFekLizkVIu9tes90O1/aigJ0T5LmyPqTzGJrETnSw3meSYg58YH7JTzhTTW/3z6VAw==} hasBin: true @@ -8340,10 +8423,6 @@ packages: resolution: {integrity: sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==} engines: {node: '>=4'} - pify@4.0.1: - resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==} - engines: {node: '>=6'} - pirates@4.0.6: resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==} engines: {node: '>= 6'} @@ -8468,10 +8547,6 @@ packages: engines: {node: '>=10'} hasBin: true - preferred-pm@4.1.1: - resolution: {integrity: sha512-rU+ZAv1Ur9jAUZtGPebQVQPzdGhNzaEiQ7VL9+cjsAWPHFYOccNXPNiev1CCDSOg/2j7UujM7ojNhpkuILEVNQ==} - engines: {node: '>=18.12'} - prelude-ls@1.2.1: resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==} engines: {node: '>= 0.8.0'} @@ -8570,8 +8645,8 @@ packages: peerDependencies: react: 17.0.2 - prismjs@1.29.0: - resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==} + prismjs@1.30.0: + resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==} engines: {node: '>=6'} process-nextick-args@2.0.1: @@ -8622,6 +8697,10 @@ packages: resolution: {integrity: sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==} engines: {node: '>=0.6'} + qs@6.14.0: + resolution: {integrity: sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==} + engines: {node: '>=0.6'} + quansync@0.2.8: resolution: {integrity: sha512-4+saucphJMazjt7iOM27mbFCk+D9dd/zmgMDCzRZ8MEoBfYp7lAvoN38et/phRQF6wOPMy/OROBGgoWeSKyluA==} @@ -8685,8 +8764,8 @@ packages: react-native: optional: true - react-intersection-observer@9.15.1: - resolution: {integrity: sha512-vGrqYEVWXfH+AGu241uzfUpNK4HAdhCkSAyFdkMb9VWWXs6mxzBLpWCxEy9YcnDNY2g9eO6z7qUtTBdA9hc8pA==} + react-intersection-observer@9.16.0: + resolution: {integrity: sha512-w9nJSEp+DrW9KmQmeWHQyfaP6b03v+TdXynaoA964Wxt7mdR3An11z4NNCQgL4gKSK7y1ver2Fq+JKH6CWEzUA==} peerDependencies: react: 17.0.2 react-dom: 17.0.2 @@ -8830,8 +8909,8 @@ packages: resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==} engines: {node: '>= 0.4'} - refractor@4.8.1: - resolution: {integrity: sha512-/fk5sI0iTgFYlmVGYVew90AoYnNMP6pooClx/XKqyeeCQXrL0Kvgn8V0VEht5ccdljbzzF1i3Q213gcntkRExg==} + refractor@4.9.0: + resolution: {integrity: sha512-nEG1SPXFoGGx+dcjftjv8cAjEusIh6ED1xhf5DG3C0x/k+rmZ2duKnc3QLpt6qeHv5fPb8uwN3VWN2BT7fr3Og==} regenerate-unicode-properties@10.2.0: resolution: {integrity: sha512-DqHn3DwbmmPVzeKj9woBadqmXxLvQoQIwu7nopMc72ztvxVmVk2SBhSnx67zuye5TP+lJsb/TBQsjLKhnDf3MA==} @@ -8852,12 +8931,18 @@ packages: regex-recursion@5.1.1: resolution: {integrity: sha512-ae7SBCbzVNrIjgSbh7wMznPcQel1DNlDtzensnFxpiNpXt1U2ju/bHugH422r+4LAVS1FpW1YCwilmnNsjum9w==} + regex-recursion@6.0.2: + resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==} + regex-utilities@2.3.0: resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==} regex@5.1.1: resolution: {integrity: sha512-dN5I359AVGPnwzJm2jN1k0W9LPZ+ePvoOeVMMfqIMFz53sSwXkxaJoxr50ptnsC771lK95BnTrVSZxq0b9yCGw==} + regex@6.0.1: + resolution: {integrity: sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==} + regexp.prototype.flags@1.5.4: resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==} engines: {node: '>= 0.4'} @@ -9071,8 +9156,8 @@ packages: engines: {node: '>=14.18.0', npm: '>=8.0.0'} hasBin: true - rollup@4.34.9: - resolution: {integrity: sha512-nF5XYqWWp9hx/LrpC8sZvvvmq0TeTjQgaZHYmAgwysT9nh8sWnZhBnM8ZyVbbJFIQBLwHDNoMqsBZBbUo4U8sQ==} + rollup@4.36.0: + resolution: {integrity: sha512-zwATAXNQxUcd40zgtQG0ZafcRK4g004WtEl7kbuhTWPvf07PsfohXl39jVUvPF7jvNAIkKPQ2XrsDlWuxBd++Q==} engines: {node: '>=18.0.0', npm: '>=8.0.0'} hasBin: true @@ -9082,6 +9167,9 @@ packages: rrweb-cssom@0.8.0: resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==} + rspack-resolver@1.2.2: + resolution: {integrity: sha512-Fwc19jMBA3g+fxDJH2B4WxwZjE0VaaOL7OX/A4Wn5Zv7bOD/vyPZhzXfaO73Xc2GAlfi96g5fGUa378WbIGfFw==} + rsvp@3.2.1: resolution: {integrity: sha512-Rf4YVNYpKjZ6ASAmibcwTNciQ5Co5Ztq6iZPEykHpkoflnD/K5ryE/rHehFsTm4NJj8nKDhbi3eKBWGogmNnkg==} @@ -9255,6 +9343,9 @@ packages: shiki@1.29.2: resolution: {integrity: sha512-njXuliz/cP+67jU2hukkxCNuH1yUi4QfdZZY+sMr5PPrIyXSu5iTb/qYC4BiWWB0vZ+7TbdvYUCeL23zpwCfbg==} + shiki@3.2.1: + resolution: {integrity: sha512-VML/2o1/KGYkEf/stJJ+s9Ypn7jUKQPomGLGYso4JJFMFxVDyPNsjsI3MB3KLjlMOeH44gyaPdXC6rik2WXvUQ==} + side-channel-list@1.0.0: resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==} engines: {node: '>= 0.4'} @@ -9384,8 +9475,8 @@ packages: sprintf-js@1.1.3: resolution: {integrity: sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==} - stable-hash@0.0.4: - resolution: {integrity: sha512-LjdcbuBeLcdETCrPn9i8AYAZ1eCtu4ECAWtP7UleOiZ9LzVxRzzUZEoZ8zB24nhkQnDWyET0I+3sWokSDS3E7g==} + stable-hash@0.0.5: + resolution: {integrity: sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==} stack-utils@2.0.6: resolution: {integrity: sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==} @@ -9620,8 +9711,8 @@ packages: teex@1.0.1: resolution: {integrity: sha512-eYE6iEI62Ni1H8oIa7KlDU6uQBtqr4Eajni3wX7rpfXD8ysFx8z0+dri+KWEPWpBsxXfxu58x/0jvTVT1ekOSg==} - terser-webpack-plugin@5.3.11: - resolution: {integrity: sha512-RVCsMfuD0+cTt3EwX8hSl2Ks56EbFHWmhluwcqoPKtBnfjiT6olaq7PRIRfhyU8nnC2MrnDrBLfrD/RGE+cVXQ==} + terser-webpack-plugin@5.3.14: + resolution: {integrity: sha512-vkZjpUjb6OMS7dhV+tILUW6BhpDR7P2L/aQSAv+Uwk+m8KATX9EccViHTJR2qDtACKPIYndLGCyl3FMo+r2LMw==} engines: {node: '>= 10.13.0'} peerDependencies: '@swc/core': '*' @@ -9706,11 +9797,11 @@ packages: resolution: {integrity: sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==} engines: {node: '>=14.0.0'} - tldts-core@6.1.82: - resolution: {integrity: sha512-Jabl32m21tt/d/PbDO88R43F8aY98Piiz6BVH9ShUlOAiiAELhEqwrAmBocjAqnCfoUeIsRU+h3IEzZd318F3w==} + tldts-core@6.1.84: + resolution: {integrity: sha512-NaQa1W76W2aCGjXybvnMYzGSM4x8fvG2AN/pla7qxcg0ZHbooOPhA8kctmOZUDfZyhDL27OGNbwAeig8P4p1vg==} - tldts@6.1.82: - resolution: {integrity: sha512-KCTjNL9F7j8MzxgfTgjT+v21oYH38OidFty7dH00maWANAI2IsLw2AnThtTJi9HKALHZKQQWnNebYheadacD+g==} + tldts@6.1.84: + resolution: {integrity: sha512-aRGIbCIF3teodtUFAYSdQONVmDRy21REM3o6JnqWn5ZkQBJJ4gHxhw6OfwQ+WkSAi3ASamrS4N4nyazWx6uTYg==} hasBin: true tmp@0.0.33: @@ -9751,8 +9842,8 @@ packages: resolution: {integrity: sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==} engines: {node: '>=16'} - tr46@5.0.0: - resolution: {integrity: sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==} + tr46@5.1.0: + resolution: {integrity: sha512-IUWnUK7ADYR5Sl1fZlO1INDUhVhatWl7BtJWsIhwJ0UAK7ilzzIa8uIqOO/aYVWHZPJkKbEL+362wrzoeRF7bw==} engines: {node: '>=18'} tree-dump@1.0.2: @@ -9878,8 +9969,8 @@ packages: typescript-auto-import-cache@0.3.5: resolution: {integrity: sha512-fAIveQKsoYj55CozUiBoj4b/7WpN0i4o74wiGY5JVUEoD0XiqDk1tJqTEjgzL2/AizKQrXxyRosSebyDzBZKjw==} - typescript-eslint@8.26.0: - resolution: {integrity: sha512-PtVz9nAnuNJuAVeUFvwztjuUgSnJInODAUx47VDwWPXzd5vismPOtPtt83tzNXyOjVQbPRp786D6WFW/M2koIA==} + typescript-eslint@8.26.1: + resolution: {integrity: sha512-t/oIs9mYyrwZGRpDv3g+3K6nZ5uhKEMt2oNmAPwaY4/ye0+EH4nXIPYNtkYFS6QHm+1DFg34DbglYBz5P9Xysg==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} peerDependencies: eslint: ^8.57.0 || ^9.0.0 @@ -9900,11 +9991,6 @@ packages: engines: {node: '>=14.17'} hasBin: true - typescript@5.7.3: - resolution: {integrity: sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==} - engines: {node: '>=14.17'} - hasBin: true - typescript@5.8.2: resolution: {integrity: sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==} engines: {node: '>=14.17'} @@ -9932,8 +10018,8 @@ packages: undici-types@6.20.0: resolution: {integrity: sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==} - undici@6.21.1: - resolution: {integrity: sha512-q/1rj5D0/zayJB2FraXdaWxbhWiNKDvu8naDT2dl1yTlvJp4BLtOcp2a5BvgGNQpYYJzau7tf1WgKv3b+7mqpQ==} + undici@6.21.2: + resolution: {integrity: sha512-uROZWze0R0itiAKVPsYhFov9LxrPMHLMEQFszeI2gCN6bnIIZ8twzBCJcN2LJrBBLfrP0t1FW0g+JmKVl8Vk1g==} engines: {node: '>=18.17'} unicode-canonical-property-names-ecmascript@2.0.1: @@ -10182,8 +10268,8 @@ packages: resolution: {integrity: sha512-rC2VRfAVVCGEgjnxHUnpIVh3AGuk62rP3tqVrn+yab0YH7UULisC085+NYH+mnqf3Wx4SpSi1RQMwudL89N03g==} engines: {node: '>=10.13.0'} - vite-bundle-analyzer@0.17.1: - resolution: {integrity: sha512-ubjLhkuRgOSBNck+6xBbQmjmh8SeLTG4alEM5PX2TNzyGhKLwWlyCz1YG0an3RQnscbhVzSb6kYteoHXhP///A==} + vite-bundle-analyzer@0.17.3: + resolution: {integrity: sha512-auy3vYMXErXYf78e12cAaaD7JmGaTa0DOipKRKx83KSR4kEttJ416HH/OmmzjWa0XI2AH5f21ax+WkVFPsB0fw==} hasBin: true vite-node@2.1.9: @@ -10191,8 +10277,8 @@ packages: engines: {node: ^18.0.0 || >=20.0.0} hasBin: true - vite-node@3.0.7: - resolution: {integrity: sha512-2fX0QwX4GkkkpULXdT1Pf4q0tC1i1lFOyseKoonavXUNlQ77KpW2XqBGGNIm/J4Ows4KxgGJzDguYVPKwG/n5A==} + vite-node@3.0.9: + resolution: {integrity: sha512-w3Gdx7jDcuT9cNn9jExXgOyKmf5UOTb6WMHz8LGAm54eS1Elf5OuBhCxl6zJxGhEeIkgsE1WbHuoL0mj/UXqXg==} engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0} hasBin: true @@ -10292,8 +10378,8 @@ packages: terser: optional: true - vite@6.2.0: - resolution: {integrity: sha512-7dPxoo+WsT/64rDcwoOjk76XHj+TqNTIvHKcuMQ1k4/SeHDaQt5GFAeLYzrimZrMpn/O6DtdI03WUjdxuPM0oQ==} + vite@6.2.2: + resolution: {integrity: sha512-yW7PeMM+LkDzc7CgJuRLMW2Jz0FxMOsVJ8Lv3gpgW9WLcb9cTW+121UEr1hvmfR7w3SegR5ItvYyzVz1vxNJgQ==} engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0} hasBin: true peerDependencies: @@ -10365,16 +10451,16 @@ packages: jsdom: optional: true - vitest@3.0.7: - resolution: {integrity: sha512-IP7gPK3LS3Fvn44x30X1dM9vtawm0aesAa2yBIZ9vQf+qB69NXC5776+Qmcr7ohUXIQuLhk7xQR0aSUIDPqavg==} + vitest@3.0.9: + resolution: {integrity: sha512-BbcFDqNyBlfSpATmTtXOAOj71RNKDDvjBM/uPfnxxVGrG+FSH2RQIwgeEngTaTkuU/h0ScFvf+tRcKfYXzBybQ==} engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0} hasBin: true peerDependencies: '@edge-runtime/vm': '*' '@types/debug': ^4.1.12 '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0 - '@vitest/browser': 3.0.7 - '@vitest/ui': 3.0.7 + '@vitest/browser': 3.0.9 + '@vitest/ui': 3.0.9 happy-dom: '*' jsdom: '*' peerDependenciesMeta: @@ -10615,8 +10701,8 @@ packages: resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==} engines: {node: '>=18'} - whatwg-url@14.1.1: - resolution: {integrity: sha512-mDGf9diDad/giZ/Sm9Xi2YcyzaFpbdLpJPr+E9fSkyQ7KpQD4SdFcugkRQYzhmfI4KeV4Qpnn2sKPdo+kmsgRQ==} + whatwg-url@14.2.0: + resolution: {integrity: sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==} engines: {node: '>=18'} which-boxed-primitive@1.1.1: @@ -10635,12 +10721,8 @@ packages: resolution: {integrity: sha512-n1brCuqClxfFfq/Rb0ICg9giSZqCS+pLtccdag6C2HyufBrh3fBOiy9nb6ggRMvWOVH5GrdJskj5iGTZNxd7SA==} engines: {node: '>=4'} - which-pm@3.0.1: - resolution: {integrity: sha512-v2JrMq0waAI4ju1xU5x3blsxBBMgdgZve580iYMN5frDaLGjbA24fok7wKCsya8KLVO19Ju4XDc5+zTZCJkQfg==} - engines: {node: '>=18.12'} - - which-typed-array@1.1.18: - resolution: {integrity: sha512-qEcY+KJYlWyLH9vNbsr6/5j59AXk5ni5aakf8ldzBvGde6Iz4sxZGkJyWSAueTG7QhOvNRYb1lDdFmL5Td0QKA==} + which-typed-array@1.1.19: + resolution: {integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==} engines: {node: '>= 0.4'} which@1.3.1: @@ -10752,8 +10834,8 @@ packages: resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} engines: {node: '>=10'} - yocto-queue@1.1.1: - resolution: {integrity: sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g==} + yocto-queue@1.2.0: + resolution: {integrity: sha512-KHBC7z61OJeaMGnF3wqNZj+GGNXOyypZviiKpQeiHirG5Ib1ImwcLBH70rbMSkKfSmUNBsdf2PwaEJtKvgmkNw==} engines: {node: '>=12.20'} yocto-spinner@0.2.1: @@ -10773,8 +10855,8 @@ packages: engines: {node: '>=8.0.0'} hasBin: true - zod-to-json-schema@3.24.3: - resolution: {integrity: sha512-HIAfWdYIt1sssHfYZFCXp4rU1w2r8hVVXYIlmoa0r0gABLs5di3RCqPU5DDROogVz1pAdYBaz7HK5n9pSUNs3A==} + zod-to-json-schema@3.24.4: + resolution: {integrity: sha512-0uNlcvgabyrni9Ag8Vghj21drk7+7tp7VTwwR7KxxXXc/3pbXz2PHlDgj3cICahgF1kHm4dExBFj7BXrZJXzig==} peerDependencies: zod: ^3.24.1 @@ -10816,7 +10898,7 @@ snapshots: '@jridgewell/gen-mapping': 0.3.8 '@jridgewell/trace-mapping': 0.3.25 - '@asamuzakjp/css-color@2.8.3': + '@asamuzakjp/css-color@3.1.1': dependencies: '@csstools/css-calc': 2.1.2(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3) '@csstools/css-color-parser': 3.0.8(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3) @@ -10835,28 +10917,28 @@ snapshots: - prettier - prettier-plugin-astro - '@astrojs/compiler@2.10.4': {} + '@astrojs/compiler@2.11.0': {} - '@astrojs/internal-helpers@0.6.0': {} + '@astrojs/internal-helpers@0.6.1': {} '@astrojs/language-server@2.15.4(prettier-plugin-astro@0.14.1)(prettier@3.5.3)(typescript@5.8.2)': dependencies: - '@astrojs/compiler': 2.10.4 + '@astrojs/compiler': 2.11.0 '@astrojs/yaml2ts': 0.2.2 '@jridgewell/sourcemap-codec': 1.5.0 - '@volar/kit': 2.4.11(typescript@5.8.2) - '@volar/language-core': 2.4.11 - '@volar/language-server': 2.4.11 - '@volar/language-service': 2.4.11 + '@volar/kit': 2.4.12(typescript@5.8.2) + '@volar/language-core': 2.4.12 + '@volar/language-server': 2.4.12 + '@volar/language-service': 2.4.12 fast-glob: 3.3.3 muggle-string: 0.4.1 - volar-service-css: 0.0.62(@volar/language-service@2.4.11) - volar-service-emmet: 0.0.62(@volar/language-service@2.4.11) - volar-service-html: 0.0.62(@volar/language-service@2.4.11) - volar-service-prettier: 0.0.62(@volar/language-service@2.4.11)(prettier@3.5.3) - volar-service-typescript: 0.0.62(@volar/language-service@2.4.11) - volar-service-typescript-twoslash-queries: 0.0.62(@volar/language-service@2.4.11) - volar-service-yaml: 0.0.62(@volar/language-service@2.4.11) + volar-service-css: 0.0.62(@volar/language-service@2.4.12) + volar-service-emmet: 0.0.62(@volar/language-service@2.4.12) + volar-service-html: 0.0.62(@volar/language-service@2.4.12) + volar-service-prettier: 0.0.62(@volar/language-service@2.4.12)(prettier@3.5.3) + volar-service-typescript: 0.0.62(@volar/language-service@2.4.12) + volar-service-typescript-twoslash-queries: 0.0.62(@volar/language-service@2.4.12) + volar-service-yaml: 0.0.62(@volar/language-service@2.4.12) vscode-html-languageservice: 5.3.1 vscode-uri: 3.1.0 optionalDependencies: @@ -10865,9 +10947,9 @@ snapshots: transitivePeerDependencies: - typescript - '@astrojs/markdown-remark@6.2.0': + '@astrojs/markdown-remark@6.3.1': dependencies: - '@astrojs/internal-helpers': 0.6.0 + '@astrojs/internal-helpers': 0.6.1 '@astrojs/prism': 3.2.0 github-slugger: 2.0.0 hast-util-from-html: 2.0.3 @@ -10881,7 +10963,7 @@ snapshots: remark-parse: 11.0.0 remark-rehype: 11.1.1 remark-smartypants: 3.0.2 - shiki: 1.29.2 + shiki: 3.2.1 smol-toml: 1.3.1 unified: 11.0.5 unist-util-remove-position: 5.0.0 @@ -10891,12 +10973,12 @@ snapshots: transitivePeerDependencies: - supports-color - '@astrojs/mdx@4.1.0(astro@5.4.2(@types/node@22.13.9)(jiti@1.21.7)(rollup@4.34.9)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0))': + '@astrojs/mdx@4.2.1(astro@5.5.3(@types/node@22.13.10)(jiti@1.21.7)(rollup@4.36.0)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0))': dependencies: - '@astrojs/markdown-remark': 6.2.0 + '@astrojs/markdown-remark': 6.3.1 '@mdx-js/mdx': 3.1.0(acorn@8.14.1) acorn: 8.14.1 - astro: 5.4.2(@types/node@22.13.9)(jiti@1.21.7)(rollup@4.34.9)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0) + astro: 5.5.3(@types/node@22.13.10)(jiti@1.21.7)(rollup@4.36.0)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0) es-module-lexer: 1.6.0 estree-util-visit: 2.0.0 hast-util-to-html: 9.0.5 @@ -10912,17 +10994,17 @@ snapshots: '@astrojs/prism@3.2.0': dependencies: - prismjs: 1.29.0 + prismjs: 1.30.0 - '@astrojs/react@4.2.1(@types/node@22.13.9)(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(jiti@1.21.7)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)(terser@5.39.0)(yaml@2.7.0)': + '@astrojs/react@4.2.1(@types/node@22.13.10)(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(jiti@1.21.7)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)(terser@5.39.0)(yaml@2.7.0)': dependencies: '@types/react': 17.0.83 '@types/react-dom': 17.0.26(@types/react@17.0.83) - '@vitejs/plugin-react': 4.3.4(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) + '@vitejs/plugin-react': 4.3.4(vite@6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) react: 17.0.2 react-dom: 17.0.2(react@17.0.2) ultrahtml: 1.5.3 - vite: 6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + vite: 6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) transitivePeerDependencies: - '@types/node' - jiti @@ -10937,28 +11019,28 @@ snapshots: - tsx - yaml - '@astrojs/sitemap@3.2.1': + '@astrojs/sitemap@3.3.0': dependencies: sitemap: 8.0.0 stream-replace-string: 2.0.0 zod: 3.24.2 - '@astrojs/starlight-tailwind@3.0.0(@astrojs/starlight@0.31.1(astro@5.4.2(@types/node@22.13.9)(jiti@1.21.7)(rollup@4.34.9)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0)))(@astrojs/tailwind@6.0.0(astro@5.4.2(@types/node@22.13.9)(jiti@1.21.7)(rollup@4.34.9)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0))(tailwindcss@3.4.17))(tailwindcss@3.4.17)': + '@astrojs/starlight-tailwind@3.0.0(@astrojs/starlight@0.31.1(astro@5.5.3(@types/node@22.13.10)(jiti@1.21.7)(rollup@4.36.0)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0)))(@astrojs/tailwind@6.0.0(astro@5.5.3(@types/node@22.13.10)(jiti@1.21.7)(rollup@4.36.0)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0))(tailwindcss@3.4.17))(tailwindcss@3.4.17)': dependencies: - '@astrojs/starlight': 0.31.1(astro@5.4.2(@types/node@22.13.9)(jiti@1.21.7)(rollup@4.34.9)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0)) - '@astrojs/tailwind': 6.0.0(astro@5.4.2(@types/node@22.13.9)(jiti@1.21.7)(rollup@4.34.9)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0))(tailwindcss@3.4.17) + '@astrojs/starlight': 0.31.1(astro@5.5.3(@types/node@22.13.10)(jiti@1.21.7)(rollup@4.36.0)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0)) + '@astrojs/tailwind': 6.0.0(astro@5.5.3(@types/node@22.13.10)(jiti@1.21.7)(rollup@4.36.0)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0))(tailwindcss@3.4.17) tailwindcss: 3.4.17 - '@astrojs/starlight@0.31.1(astro@5.4.2(@types/node@22.13.9)(jiti@1.21.7)(rollup@4.34.9)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0))': + '@astrojs/starlight@0.31.1(astro@5.5.3(@types/node@22.13.10)(jiti@1.21.7)(rollup@4.36.0)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0))': dependencies: - '@astrojs/mdx': 4.1.0(astro@5.4.2(@types/node@22.13.9)(jiti@1.21.7)(rollup@4.34.9)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0)) - '@astrojs/sitemap': 3.2.1 + '@astrojs/mdx': 4.2.1(astro@5.5.3(@types/node@22.13.10)(jiti@1.21.7)(rollup@4.36.0)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0)) + '@astrojs/sitemap': 3.3.0 '@pagefind/default-ui': 1.3.0 '@types/hast': 3.0.4 '@types/js-yaml': 4.0.9 '@types/mdast': 4.0.4 - astro: 5.4.2(@types/node@22.13.9)(jiti@1.21.7)(rollup@4.34.9)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0) - astro-expressive-code: 0.40.2(astro@5.4.2(@types/node@22.13.9)(jiti@1.21.7)(rollup@4.34.9)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0)) + astro: 5.5.3(@types/node@22.13.10)(jiti@1.21.7)(rollup@4.36.0)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0) + astro-expressive-code: 0.40.2(astro@5.5.3(@types/node@22.13.10)(jiti@1.21.7)(rollup@4.36.0)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0)) bcp-47: 2.1.0 hast-util-from-html: 2.0.3 hast-util-select: 6.0.4 @@ -10979,10 +11061,10 @@ snapshots: transitivePeerDependencies: - supports-color - '@astrojs/tailwind@6.0.0(astro@5.4.2(@types/node@22.13.9)(jiti@1.21.7)(rollup@4.34.9)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0))(tailwindcss@3.4.17)': + '@astrojs/tailwind@6.0.0(astro@5.5.3(@types/node@22.13.10)(jiti@1.21.7)(rollup@4.36.0)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0))(tailwindcss@3.4.17)': dependencies: - astro: 5.4.2(@types/node@22.13.9)(jiti@1.21.7)(rollup@4.34.9)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0) - autoprefixer: 10.4.20(postcss@8.5.3) + astro: 5.5.3(@types/node@22.13.10)(jiti@1.21.7)(rollup@4.36.0)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0) + autoprefixer: 10.4.21(postcss@8.5.3) postcss: 8.5.3 postcss-load-config: 4.0.2(postcss@8.5.3) tailwindcss: 3.4.17 @@ -10991,7 +11073,7 @@ snapshots: '@astrojs/telemetry@3.2.0': dependencies: - ci-info: 4.1.0 + ci-info: 4.2.0 debug: 4.4.0 dlv: 1.1.3 dset: 3.1.4 @@ -11013,18 +11095,18 @@ snapshots: '@babel/compat-data@7.26.8': {} - '@babel/core@7.26.9': + '@babel/core@7.26.10': dependencies: '@ampproject/remapping': 2.3.0 '@babel/code-frame': 7.26.2 - '@babel/generator': 7.26.9 + '@babel/generator': 7.26.10 '@babel/helper-compilation-targets': 7.26.5 - '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.9) - '@babel/helpers': 7.26.9 - '@babel/parser': 7.26.9 + '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.10) + '@babel/helpers': 7.26.10 + '@babel/parser': 7.26.10 '@babel/template': 7.26.9 - '@babel/traverse': 7.26.9 - '@babel/types': 7.26.9 + '@babel/traverse': 7.26.10 + '@babel/types': 7.26.10 convert-source-map: 2.0.0 debug: 4.4.0 gensync: 1.0.0-beta.2 @@ -11033,17 +11115,17 @@ snapshots: transitivePeerDependencies: - supports-color - '@babel/generator@7.26.9': + '@babel/generator@7.26.10': dependencies: - '@babel/parser': 7.26.9 - '@babel/types': 7.26.9 + '@babel/parser': 7.26.10 + '@babel/types': 7.26.10 '@jridgewell/gen-mapping': 0.3.8 '@jridgewell/trace-mapping': 0.3.25 jsesc: 3.1.0 '@babel/helper-annotate-as-pure@7.25.9': dependencies: - '@babel/types': 7.26.9 + '@babel/types': 7.26.10 '@babel/helper-compilation-targets@7.26.5': dependencies: @@ -11053,29 +11135,29 @@ snapshots: lru-cache: 5.1.1 semver: 6.3.1 - '@babel/helper-create-class-features-plugin@7.26.9(@babel/core@7.26.9)': + '@babel/helper-create-class-features-plugin@7.26.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-annotate-as-pure': 7.25.9 '@babel/helper-member-expression-to-functions': 7.25.9 '@babel/helper-optimise-call-expression': 7.25.9 - '@babel/helper-replace-supers': 7.26.5(@babel/core@7.26.9) + '@babel/helper-replace-supers': 7.26.5(@babel/core@7.26.10) '@babel/helper-skip-transparent-expression-wrappers': 7.25.9 - '@babel/traverse': 7.26.9 + '@babel/traverse': 7.26.10 semver: 6.3.1 transitivePeerDependencies: - supports-color - '@babel/helper-create-regexp-features-plugin@7.26.3(@babel/core@7.26.9)': + '@babel/helper-create-regexp-features-plugin@7.26.3(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-annotate-as-pure': 7.25.9 regexpu-core: 6.2.0 semver: 6.3.1 - '@babel/helper-define-polyfill-provider@0.6.3(@babel/core@7.26.9)': + '@babel/helper-define-polyfill-provider@0.6.3(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-compilation-targets': 7.26.5 '@babel/helper-plugin-utils': 7.26.5 debug: 4.4.0 @@ -11086,55 +11168,55 @@ snapshots: '@babel/helper-member-expression-to-functions@7.25.9': dependencies: - '@babel/traverse': 7.26.9 - '@babel/types': 7.26.9 + '@babel/traverse': 7.26.10 + '@babel/types': 7.26.10 transitivePeerDependencies: - supports-color '@babel/helper-module-imports@7.25.9': dependencies: - '@babel/traverse': 7.26.9 - '@babel/types': 7.26.9 + '@babel/traverse': 7.26.10 + '@babel/types': 7.26.10 transitivePeerDependencies: - supports-color - '@babel/helper-module-transforms@7.26.0(@babel/core@7.26.9)': + '@babel/helper-module-transforms@7.26.0(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-module-imports': 7.25.9 '@babel/helper-validator-identifier': 7.25.9 - '@babel/traverse': 7.26.9 + '@babel/traverse': 7.26.10 transitivePeerDependencies: - supports-color '@babel/helper-optimise-call-expression@7.25.9': dependencies: - '@babel/types': 7.26.9 + '@babel/types': 7.26.10 '@babel/helper-plugin-utils@7.26.5': {} - '@babel/helper-remap-async-to-generator@7.25.9(@babel/core@7.26.9)': + '@babel/helper-remap-async-to-generator@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-annotate-as-pure': 7.25.9 '@babel/helper-wrap-function': 7.25.9 - '@babel/traverse': 7.26.9 + '@babel/traverse': 7.26.10 transitivePeerDependencies: - supports-color - '@babel/helper-replace-supers@7.26.5(@babel/core@7.26.9)': + '@babel/helper-replace-supers@7.26.5(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-member-expression-to-functions': 7.25.9 '@babel/helper-optimise-call-expression': 7.25.9 - '@babel/traverse': 7.26.9 + '@babel/traverse': 7.26.10 transitivePeerDependencies: - supports-color '@babel/helper-skip-transparent-expression-wrappers@7.25.9': dependencies: - '@babel/traverse': 7.26.9 - '@babel/types': 7.26.9 + '@babel/traverse': 7.26.10 + '@babel/types': 7.26.10 transitivePeerDependencies: - supports-color @@ -11147,652 +11229,652 @@ snapshots: '@babel/helper-wrap-function@7.25.9': dependencies: '@babel/template': 7.26.9 - '@babel/traverse': 7.26.9 - '@babel/types': 7.26.9 + '@babel/traverse': 7.26.10 + '@babel/types': 7.26.10 transitivePeerDependencies: - supports-color - '@babel/helpers@7.26.9': + '@babel/helpers@7.26.10': dependencies: '@babel/template': 7.26.9 - '@babel/types': 7.26.9 + '@babel/types': 7.26.10 - '@babel/parser@7.26.9': + '@babel/parser@7.26.10': dependencies: - '@babel/types': 7.26.9 + '@babel/types': 7.26.10 - '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/traverse': 7.26.9 + '@babel/traverse': 7.26.10 transitivePeerDependencies: - supports-color - '@babel/plugin-bugfix-safari-class-field-initializer-scope@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-bugfix-safari-class-field-initializer-scope@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 '@babel/helper-skip-transparent-expression-wrappers': 7.25.9 - '@babel/plugin-transform-optional-chaining': 7.25.9(@babel/core@7.26.9) + '@babel/plugin-transform-optional-chaining': 7.25.9(@babel/core@7.26.10) transitivePeerDependencies: - supports-color - '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/traverse': 7.26.9 + '@babel/traverse': 7.26.10 transitivePeerDependencies: - supports-color - '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.26.9)': + '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 - '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.26.9)': + '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.26.9)': + '@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.26.9)': + '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.26.9)': + '@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-syntax-import-assertions@7.26.0(@babel/core@7.26.9)': + '@babel/plugin-syntax-import-assertions@7.26.0(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-syntax-import-attributes@7.26.0(@babel/core@7.26.9)': + '@babel/plugin-syntax-import-attributes@7.26.0(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.26.9)': + '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.26.9)': + '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-syntax-jsx@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-syntax-jsx@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.26.9)': + '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.26.9)': + '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.26.9)': + '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.26.9)': + '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.26.9)': + '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.26.9)': + '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.26.9)': + '@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.26.9)': + '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-syntax-typescript@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-syntax-typescript@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.26.9)': + '@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 - '@babel/helper-create-regexp-features-plugin': 7.26.3(@babel/core@7.26.9) + '@babel/core': 7.26.10 + '@babel/helper-create-regexp-features-plugin': 7.26.3(@babel/core@7.26.10) '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-arrow-functions@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-arrow-functions@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-async-generator-functions@7.26.8(@babel/core@7.26.9)': + '@babel/plugin-transform-async-generator-functions@7.26.8(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/helper-remap-async-to-generator': 7.25.9(@babel/core@7.26.9) - '@babel/traverse': 7.26.9 + '@babel/helper-remap-async-to-generator': 7.25.9(@babel/core@7.26.10) + '@babel/traverse': 7.26.10 transitivePeerDependencies: - supports-color - '@babel/plugin-transform-async-to-generator@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-async-to-generator@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-module-imports': 7.25.9 '@babel/helper-plugin-utils': 7.26.5 - '@babel/helper-remap-async-to-generator': 7.25.9(@babel/core@7.26.9) + '@babel/helper-remap-async-to-generator': 7.25.9(@babel/core@7.26.10) transitivePeerDependencies: - supports-color - '@babel/plugin-transform-block-scoped-functions@7.26.5(@babel/core@7.26.9)': + '@babel/plugin-transform-block-scoped-functions@7.26.5(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-block-scoping@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-block-scoping@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-class-properties@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-class-properties@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 - '@babel/helper-create-class-features-plugin': 7.26.9(@babel/core@7.26.9) + '@babel/core': 7.26.10 + '@babel/helper-create-class-features-plugin': 7.26.9(@babel/core@7.26.10) '@babel/helper-plugin-utils': 7.26.5 transitivePeerDependencies: - supports-color - '@babel/plugin-transform-class-static-block@7.26.0(@babel/core@7.26.9)': + '@babel/plugin-transform-class-static-block@7.26.0(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 - '@babel/helper-create-class-features-plugin': 7.26.9(@babel/core@7.26.9) + '@babel/core': 7.26.10 + '@babel/helper-create-class-features-plugin': 7.26.9(@babel/core@7.26.10) '@babel/helper-plugin-utils': 7.26.5 transitivePeerDependencies: - supports-color - '@babel/plugin-transform-classes@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-classes@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-annotate-as-pure': 7.25.9 '@babel/helper-compilation-targets': 7.26.5 '@babel/helper-plugin-utils': 7.26.5 - '@babel/helper-replace-supers': 7.26.5(@babel/core@7.26.9) - '@babel/traverse': 7.26.9 + '@babel/helper-replace-supers': 7.26.5(@babel/core@7.26.10) + '@babel/traverse': 7.26.10 globals: 11.12.0 transitivePeerDependencies: - supports-color - '@babel/plugin-transform-computed-properties@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-computed-properties@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 '@babel/template': 7.26.9 - '@babel/plugin-transform-destructuring@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-destructuring@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-dotall-regex@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-dotall-regex@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 - '@babel/helper-create-regexp-features-plugin': 7.26.3(@babel/core@7.26.9) + '@babel/core': 7.26.10 + '@babel/helper-create-regexp-features-plugin': 7.26.3(@babel/core@7.26.10) '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-duplicate-keys@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-duplicate-keys@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-duplicate-named-capturing-groups-regex@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-duplicate-named-capturing-groups-regex@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 - '@babel/helper-create-regexp-features-plugin': 7.26.3(@babel/core@7.26.9) + '@babel/core': 7.26.10 + '@babel/helper-create-regexp-features-plugin': 7.26.3(@babel/core@7.26.10) '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-dynamic-import@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-dynamic-import@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-exponentiation-operator@7.26.3(@babel/core@7.26.9)': + '@babel/plugin-transform-exponentiation-operator@7.26.3(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-export-namespace-from@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-export-namespace-from@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-for-of@7.26.9(@babel/core@7.26.9)': + '@babel/plugin-transform-for-of@7.26.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 '@babel/helper-skip-transparent-expression-wrappers': 7.25.9 transitivePeerDependencies: - supports-color - '@babel/plugin-transform-function-name@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-function-name@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-compilation-targets': 7.26.5 '@babel/helper-plugin-utils': 7.26.5 - '@babel/traverse': 7.26.9 + '@babel/traverse': 7.26.10 transitivePeerDependencies: - supports-color - '@babel/plugin-transform-json-strings@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-json-strings@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-literals@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-literals@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-logical-assignment-operators@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-logical-assignment-operators@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-member-expression-literals@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-member-expression-literals@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-modules-amd@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-modules-amd@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 - '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.9) + '@babel/core': 7.26.10 + '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.10) '@babel/helper-plugin-utils': 7.26.5 transitivePeerDependencies: - supports-color - '@babel/plugin-transform-modules-commonjs@7.26.3(@babel/core@7.26.9)': + '@babel/plugin-transform-modules-commonjs@7.26.3(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 - '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.9) + '@babel/core': 7.26.10 + '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.10) '@babel/helper-plugin-utils': 7.26.5 transitivePeerDependencies: - supports-color - '@babel/plugin-transform-modules-systemjs@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-modules-systemjs@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 - '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.9) + '@babel/core': 7.26.10 + '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.10) '@babel/helper-plugin-utils': 7.26.5 '@babel/helper-validator-identifier': 7.25.9 - '@babel/traverse': 7.26.9 + '@babel/traverse': 7.26.10 transitivePeerDependencies: - supports-color - '@babel/plugin-transform-modules-umd@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-modules-umd@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 - '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.9) + '@babel/core': 7.26.10 + '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.10) '@babel/helper-plugin-utils': 7.26.5 transitivePeerDependencies: - supports-color - '@babel/plugin-transform-named-capturing-groups-regex@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-named-capturing-groups-regex@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 - '@babel/helper-create-regexp-features-plugin': 7.26.3(@babel/core@7.26.9) + '@babel/core': 7.26.10 + '@babel/helper-create-regexp-features-plugin': 7.26.3(@babel/core@7.26.10) '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-new-target@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-new-target@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-nullish-coalescing-operator@7.26.6(@babel/core@7.26.9)': + '@babel/plugin-transform-nullish-coalescing-operator@7.26.6(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-numeric-separator@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-numeric-separator@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-object-rest-spread@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-object-rest-spread@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-compilation-targets': 7.26.5 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-parameters': 7.25.9(@babel/core@7.26.9) + '@babel/plugin-transform-parameters': 7.25.9(@babel/core@7.26.10) - '@babel/plugin-transform-object-super@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-object-super@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/helper-replace-supers': 7.26.5(@babel/core@7.26.9) + '@babel/helper-replace-supers': 7.26.5(@babel/core@7.26.10) transitivePeerDependencies: - supports-color - '@babel/plugin-transform-optional-catch-binding@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-optional-catch-binding@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-optional-chaining@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-optional-chaining@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 '@babel/helper-skip-transparent-expression-wrappers': 7.25.9 transitivePeerDependencies: - supports-color - '@babel/plugin-transform-parameters@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-parameters@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-private-methods@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-private-methods@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 - '@babel/helper-create-class-features-plugin': 7.26.9(@babel/core@7.26.9) + '@babel/core': 7.26.10 + '@babel/helper-create-class-features-plugin': 7.26.9(@babel/core@7.26.10) '@babel/helper-plugin-utils': 7.26.5 transitivePeerDependencies: - supports-color - '@babel/plugin-transform-private-property-in-object@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-private-property-in-object@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-annotate-as-pure': 7.25.9 - '@babel/helper-create-class-features-plugin': 7.26.9(@babel/core@7.26.9) + '@babel/helper-create-class-features-plugin': 7.26.9(@babel/core@7.26.10) '@babel/helper-plugin-utils': 7.26.5 transitivePeerDependencies: - supports-color - '@babel/plugin-transform-property-literals@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-property-literals@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-react-display-name@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-react-display-name@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-react-jsx-development@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-react-jsx-development@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 - '@babel/plugin-transform-react-jsx': 7.25.9(@babel/core@7.26.9) + '@babel/core': 7.26.10 + '@babel/plugin-transform-react-jsx': 7.25.9(@babel/core@7.26.10) transitivePeerDependencies: - supports-color - '@babel/plugin-transform-react-jsx-self@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-react-jsx-self@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-react-jsx-source@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-react-jsx-source@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-react-jsx@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-react-jsx@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-annotate-as-pure': 7.25.9 '@babel/helper-module-imports': 7.25.9 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.9) - '@babel/types': 7.26.9 + '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.10) + '@babel/types': 7.26.10 transitivePeerDependencies: - supports-color - '@babel/plugin-transform-react-pure-annotations@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-react-pure-annotations@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-annotate-as-pure': 7.25.9 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-regenerator@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-regenerator@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 regenerator-transform: 0.15.2 - '@babel/plugin-transform-regexp-modifiers@7.26.0(@babel/core@7.26.9)': + '@babel/plugin-transform-regexp-modifiers@7.26.0(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 - '@babel/helper-create-regexp-features-plugin': 7.26.3(@babel/core@7.26.9) + '@babel/core': 7.26.10 + '@babel/helper-create-regexp-features-plugin': 7.26.3(@babel/core@7.26.10) '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-reserved-words@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-reserved-words@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-shorthand-properties@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-shorthand-properties@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-spread@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-spread@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 '@babel/helper-skip-transparent-expression-wrappers': 7.25.9 transitivePeerDependencies: - supports-color - '@babel/plugin-transform-sticky-regex@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-sticky-regex@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-template-literals@7.26.8(@babel/core@7.26.9)': + '@babel/plugin-transform-template-literals@7.26.8(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-typeof-symbol@7.26.7(@babel/core@7.26.9)': + '@babel/plugin-transform-typeof-symbol@7.26.7(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-typescript@7.26.8(@babel/core@7.26.9)': + '@babel/plugin-transform-typescript@7.26.8(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-annotate-as-pure': 7.25.9 - '@babel/helper-create-class-features-plugin': 7.26.9(@babel/core@7.26.9) + '@babel/helper-create-class-features-plugin': 7.26.9(@babel/core@7.26.10) '@babel/helper-plugin-utils': 7.26.5 '@babel/helper-skip-transparent-expression-wrappers': 7.25.9 - '@babel/plugin-syntax-typescript': 7.25.9(@babel/core@7.26.9) + '@babel/plugin-syntax-typescript': 7.25.9(@babel/core@7.26.10) transitivePeerDependencies: - supports-color - '@babel/plugin-transform-unicode-escapes@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-unicode-escapes@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-unicode-property-regex@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-unicode-property-regex@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 - '@babel/helper-create-regexp-features-plugin': 7.26.3(@babel/core@7.26.9) + '@babel/core': 7.26.10 + '@babel/helper-create-regexp-features-plugin': 7.26.3(@babel/core@7.26.10) '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-unicode-regex@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-unicode-regex@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 - '@babel/helper-create-regexp-features-plugin': 7.26.3(@babel/core@7.26.9) + '@babel/core': 7.26.10 + '@babel/helper-create-regexp-features-plugin': 7.26.3(@babel/core@7.26.10) '@babel/helper-plugin-utils': 7.26.5 - '@babel/plugin-transform-unicode-sets-regex@7.25.9(@babel/core@7.26.9)': + '@babel/plugin-transform-unicode-sets-regex@7.25.9(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 - '@babel/helper-create-regexp-features-plugin': 7.26.3(@babel/core@7.26.9) + '@babel/core': 7.26.10 + '@babel/helper-create-regexp-features-plugin': 7.26.3(@babel/core@7.26.10) '@babel/helper-plugin-utils': 7.26.5 - '@babel/preset-env@7.26.9(@babel/core@7.26.9)': + '@babel/preset-env@7.26.9(@babel/core@7.26.10)': dependencies: '@babel/compat-data': 7.26.8 - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-compilation-targets': 7.26.5 '@babel/helper-plugin-utils': 7.26.5 '@babel/helper-validator-option': 7.25.9 - '@babel/plugin-bugfix-firefox-class-in-computed-class-key': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-bugfix-safari-class-field-initializer-scope': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.26.9) - '@babel/plugin-syntax-import-assertions': 7.26.0(@babel/core@7.26.9) - '@babel/plugin-syntax-import-attributes': 7.26.0(@babel/core@7.26.9) - '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.26.9) - '@babel/plugin-transform-arrow-functions': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-async-generator-functions': 7.26.8(@babel/core@7.26.9) - '@babel/plugin-transform-async-to-generator': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-block-scoped-functions': 7.26.5(@babel/core@7.26.9) - '@babel/plugin-transform-block-scoping': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-class-properties': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-class-static-block': 7.26.0(@babel/core@7.26.9) - '@babel/plugin-transform-classes': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-computed-properties': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-destructuring': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-dotall-regex': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-duplicate-keys': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-duplicate-named-capturing-groups-regex': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-dynamic-import': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-exponentiation-operator': 7.26.3(@babel/core@7.26.9) - '@babel/plugin-transform-export-namespace-from': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-for-of': 7.26.9(@babel/core@7.26.9) - '@babel/plugin-transform-function-name': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-json-strings': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-literals': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-logical-assignment-operators': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-member-expression-literals': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-modules-amd': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-modules-commonjs': 7.26.3(@babel/core@7.26.9) - '@babel/plugin-transform-modules-systemjs': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-modules-umd': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-named-capturing-groups-regex': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-new-target': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-nullish-coalescing-operator': 7.26.6(@babel/core@7.26.9) - '@babel/plugin-transform-numeric-separator': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-object-rest-spread': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-object-super': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-optional-catch-binding': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-optional-chaining': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-parameters': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-private-methods': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-private-property-in-object': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-property-literals': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-regenerator': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-regexp-modifiers': 7.26.0(@babel/core@7.26.9) - '@babel/plugin-transform-reserved-words': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-shorthand-properties': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-spread': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-sticky-regex': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-template-literals': 7.26.8(@babel/core@7.26.9) - '@babel/plugin-transform-typeof-symbol': 7.26.7(@babel/core@7.26.9) - '@babel/plugin-transform-unicode-escapes': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-unicode-property-regex': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-unicode-regex': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-unicode-sets-regex': 7.25.9(@babel/core@7.26.9) - '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.26.9) - babel-plugin-polyfill-corejs2: 0.4.12(@babel/core@7.26.9) - babel-plugin-polyfill-corejs3: 0.11.1(@babel/core@7.26.9) - babel-plugin-polyfill-regenerator: 0.6.3(@babel/core@7.26.9) + '@babel/plugin-bugfix-firefox-class-in-computed-class-key': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-bugfix-safari-class-field-initializer-scope': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.26.10) + '@babel/plugin-syntax-import-assertions': 7.26.0(@babel/core@7.26.10) + '@babel/plugin-syntax-import-attributes': 7.26.0(@babel/core@7.26.10) + '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.26.10) + '@babel/plugin-transform-arrow-functions': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-async-generator-functions': 7.26.8(@babel/core@7.26.10) + '@babel/plugin-transform-async-to-generator': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-block-scoped-functions': 7.26.5(@babel/core@7.26.10) + '@babel/plugin-transform-block-scoping': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-class-properties': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-class-static-block': 7.26.0(@babel/core@7.26.10) + '@babel/plugin-transform-classes': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-computed-properties': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-destructuring': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-dotall-regex': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-duplicate-keys': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-duplicate-named-capturing-groups-regex': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-dynamic-import': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-exponentiation-operator': 7.26.3(@babel/core@7.26.10) + '@babel/plugin-transform-export-namespace-from': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-for-of': 7.26.9(@babel/core@7.26.10) + '@babel/plugin-transform-function-name': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-json-strings': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-literals': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-logical-assignment-operators': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-member-expression-literals': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-modules-amd': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-modules-commonjs': 7.26.3(@babel/core@7.26.10) + '@babel/plugin-transform-modules-systemjs': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-modules-umd': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-named-capturing-groups-regex': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-new-target': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-nullish-coalescing-operator': 7.26.6(@babel/core@7.26.10) + '@babel/plugin-transform-numeric-separator': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-object-rest-spread': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-object-super': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-optional-catch-binding': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-optional-chaining': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-parameters': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-private-methods': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-private-property-in-object': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-property-literals': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-regenerator': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-regexp-modifiers': 7.26.0(@babel/core@7.26.10) + '@babel/plugin-transform-reserved-words': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-shorthand-properties': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-spread': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-sticky-regex': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-template-literals': 7.26.8(@babel/core@7.26.10) + '@babel/plugin-transform-typeof-symbol': 7.26.7(@babel/core@7.26.10) + '@babel/plugin-transform-unicode-escapes': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-unicode-property-regex': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-unicode-regex': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-unicode-sets-regex': 7.25.9(@babel/core@7.26.10) + '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.26.10) + babel-plugin-polyfill-corejs2: 0.4.12(@babel/core@7.26.10) + babel-plugin-polyfill-corejs3: 0.11.1(@babel/core@7.26.10) + babel-plugin-polyfill-regenerator: 0.6.3(@babel/core@7.26.10) core-js-compat: 3.41.0 semver: 6.3.1 transitivePeerDependencies: - supports-color - '@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.26.9)': + '@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 - '@babel/types': 7.26.9 + '@babel/types': 7.26.10 esutils: 2.0.3 - '@babel/preset-react@7.26.3(@babel/core@7.26.9)': + '@babel/preset-react@7.26.3(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 '@babel/helper-validator-option': 7.25.9 - '@babel/plugin-transform-react-display-name': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-react-jsx': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-react-jsx-development': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-react-pure-annotations': 7.25.9(@babel/core@7.26.9) + '@babel/plugin-transform-react-display-name': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-react-jsx': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-react-jsx-development': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-react-pure-annotations': 7.25.9(@babel/core@7.26.10) transitivePeerDependencies: - supports-color - '@babel/preset-typescript@7.26.0(@babel/core@7.26.9)': + '@babel/preset-typescript@7.26.0(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@babel/helper-plugin-utils': 7.26.5 '@babel/helper-validator-option': 7.25.9 - '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-modules-commonjs': 7.26.3(@babel/core@7.26.9) - '@babel/plugin-transform-typescript': 7.26.8(@babel/core@7.26.9) + '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-modules-commonjs': 7.26.3(@babel/core@7.26.10) + '@babel/plugin-transform-typescript': 7.26.8(@babel/core@7.26.10) transitivePeerDependencies: - supports-color - '@babel/runtime@7.26.9': + '@babel/runtime@7.26.10': dependencies: regenerator-runtime: 0.14.1 '@babel/template@7.26.9': dependencies: '@babel/code-frame': 7.26.2 - '@babel/parser': 7.26.9 - '@babel/types': 7.26.9 + '@babel/parser': 7.26.10 + '@babel/types': 7.26.10 - '@babel/traverse@7.26.9': + '@babel/traverse@7.26.10': dependencies: '@babel/code-frame': 7.26.2 - '@babel/generator': 7.26.9 - '@babel/parser': 7.26.9 + '@babel/generator': 7.26.10 + '@babel/parser': 7.26.10 '@babel/template': 7.26.9 - '@babel/types': 7.26.9 + '@babel/types': 7.26.10 debug: 4.4.0 globals: 11.12.0 transitivePeerDependencies: - supports-color - '@babel/types@7.26.9': + '@babel/types@7.26.10': dependencies: '@babel/helper-string-parser': 7.25.9 '@babel/helper-validator-identifier': 7.25.9 @@ -11900,15 +11982,26 @@ snapshots: '@emmetio/stream-reader@2.2.0': {} + '@emnapi/core@1.3.1': + dependencies: + '@emnapi/wasi-threads': 1.0.1 + tslib: 2.8.1 + optional: true + '@emnapi/runtime@1.3.1': dependencies: tslib: 2.8.1 optional: true + '@emnapi/wasi-threads@1.0.1': + dependencies: + tslib: 2.8.1 + optional: true + '@esbuild/aix-ppc64@0.21.5': optional: true - '@esbuild/aix-ppc64@0.25.0': + '@esbuild/aix-ppc64@0.25.1': optional: true '@esbuild/android-arm64@0.18.20': @@ -11917,7 +12010,7 @@ snapshots: '@esbuild/android-arm64@0.21.5': optional: true - '@esbuild/android-arm64@0.25.0': + '@esbuild/android-arm64@0.25.1': optional: true '@esbuild/android-arm@0.18.20': @@ -11926,7 +12019,7 @@ snapshots: '@esbuild/android-arm@0.21.5': optional: true - '@esbuild/android-arm@0.25.0': + '@esbuild/android-arm@0.25.1': optional: true '@esbuild/android-x64@0.18.20': @@ -11935,7 +12028,7 @@ snapshots: '@esbuild/android-x64@0.21.5': optional: true - '@esbuild/android-x64@0.25.0': + '@esbuild/android-x64@0.25.1': optional: true '@esbuild/darwin-arm64@0.18.20': @@ -11944,7 +12037,7 @@ snapshots: '@esbuild/darwin-arm64@0.21.5': optional: true - '@esbuild/darwin-arm64@0.25.0': + '@esbuild/darwin-arm64@0.25.1': optional: true '@esbuild/darwin-x64@0.18.20': @@ -11953,7 +12046,7 @@ snapshots: '@esbuild/darwin-x64@0.21.5': optional: true - '@esbuild/darwin-x64@0.25.0': + '@esbuild/darwin-x64@0.25.1': optional: true '@esbuild/freebsd-arm64@0.18.20': @@ -11962,7 +12055,7 @@ snapshots: '@esbuild/freebsd-arm64@0.21.5': optional: true - '@esbuild/freebsd-arm64@0.25.0': + '@esbuild/freebsd-arm64@0.25.1': optional: true '@esbuild/freebsd-x64@0.18.20': @@ -11971,7 +12064,7 @@ snapshots: '@esbuild/freebsd-x64@0.21.5': optional: true - '@esbuild/freebsd-x64@0.25.0': + '@esbuild/freebsd-x64@0.25.1': optional: true '@esbuild/linux-arm64@0.18.20': @@ -11980,7 +12073,7 @@ snapshots: '@esbuild/linux-arm64@0.21.5': optional: true - '@esbuild/linux-arm64@0.25.0': + '@esbuild/linux-arm64@0.25.1': optional: true '@esbuild/linux-arm@0.18.20': @@ -11989,7 +12082,7 @@ snapshots: '@esbuild/linux-arm@0.21.5': optional: true - '@esbuild/linux-arm@0.25.0': + '@esbuild/linux-arm@0.25.1': optional: true '@esbuild/linux-ia32@0.18.20': @@ -11998,7 +12091,7 @@ snapshots: '@esbuild/linux-ia32@0.21.5': optional: true - '@esbuild/linux-ia32@0.25.0': + '@esbuild/linux-ia32@0.25.1': optional: true '@esbuild/linux-loong64@0.18.20': @@ -12007,7 +12100,7 @@ snapshots: '@esbuild/linux-loong64@0.21.5': optional: true - '@esbuild/linux-loong64@0.25.0': + '@esbuild/linux-loong64@0.25.1': optional: true '@esbuild/linux-mips64el@0.18.20': @@ -12016,7 +12109,7 @@ snapshots: '@esbuild/linux-mips64el@0.21.5': optional: true - '@esbuild/linux-mips64el@0.25.0': + '@esbuild/linux-mips64el@0.25.1': optional: true '@esbuild/linux-ppc64@0.18.20': @@ -12025,7 +12118,7 @@ snapshots: '@esbuild/linux-ppc64@0.21.5': optional: true - '@esbuild/linux-ppc64@0.25.0': + '@esbuild/linux-ppc64@0.25.1': optional: true '@esbuild/linux-riscv64@0.18.20': @@ -12034,7 +12127,7 @@ snapshots: '@esbuild/linux-riscv64@0.21.5': optional: true - '@esbuild/linux-riscv64@0.25.0': + '@esbuild/linux-riscv64@0.25.1': optional: true '@esbuild/linux-s390x@0.18.20': @@ -12043,7 +12136,7 @@ snapshots: '@esbuild/linux-s390x@0.21.5': optional: true - '@esbuild/linux-s390x@0.25.0': + '@esbuild/linux-s390x@0.25.1': optional: true '@esbuild/linux-x64@0.18.20': @@ -12052,10 +12145,10 @@ snapshots: '@esbuild/linux-x64@0.21.5': optional: true - '@esbuild/linux-x64@0.25.0': + '@esbuild/linux-x64@0.25.1': optional: true - '@esbuild/netbsd-arm64@0.25.0': + '@esbuild/netbsd-arm64@0.25.1': optional: true '@esbuild/netbsd-x64@0.18.20': @@ -12064,10 +12157,10 @@ snapshots: '@esbuild/netbsd-x64@0.21.5': optional: true - '@esbuild/netbsd-x64@0.25.0': + '@esbuild/netbsd-x64@0.25.1': optional: true - '@esbuild/openbsd-arm64@0.25.0': + '@esbuild/openbsd-arm64@0.25.1': optional: true '@esbuild/openbsd-x64@0.18.20': @@ -12076,7 +12169,7 @@ snapshots: '@esbuild/openbsd-x64@0.21.5': optional: true - '@esbuild/openbsd-x64@0.25.0': + '@esbuild/openbsd-x64@0.25.1': optional: true '@esbuild/sunos-x64@0.18.20': @@ -12085,7 +12178,7 @@ snapshots: '@esbuild/sunos-x64@0.21.5': optional: true - '@esbuild/sunos-x64@0.25.0': + '@esbuild/sunos-x64@0.25.1': optional: true '@esbuild/win32-arm64@0.18.20': @@ -12094,7 +12187,7 @@ snapshots: '@esbuild/win32-arm64@0.21.5': optional: true - '@esbuild/win32-arm64@0.25.0': + '@esbuild/win32-arm64@0.25.1': optional: true '@esbuild/win32-ia32@0.18.20': @@ -12103,7 +12196,7 @@ snapshots: '@esbuild/win32-ia32@0.21.5': optional: true - '@esbuild/win32-ia32@0.25.0': + '@esbuild/win32-ia32@0.25.1': optional: true '@esbuild/win32-x64@0.18.20': @@ -12112,10 +12205,10 @@ snapshots: '@esbuild/win32-x64@0.21.5': optional: true - '@esbuild/win32-x64@0.25.0': + '@esbuild/win32-x64@0.25.1': optional: true - '@eslint-community/eslint-utils@4.4.1(eslint@8.57.1)': + '@eslint-community/eslint-utils@4.5.1(eslint@8.57.1)': dependencies: eslint: 8.57.1 eslint-visitor-keys: 3.4.3 @@ -12138,7 +12231,7 @@ snapshots: '@eslint/js@8.57.1': {} - '@eslint/js@9.21.0': {} + '@eslint/js@9.22.0': {} '@expressive-code/core@0.40.2': dependencies: @@ -12262,10 +12355,10 @@ snapshots: '@ianvs/prettier-plugin-sort-imports@4.4.1(prettier@3.5.3)': dependencies: - '@babel/generator': 7.26.9 - '@babel/parser': 7.26.9 - '@babel/traverse': 7.26.9 - '@babel/types': 7.26.9 + '@babel/generator': 7.26.10 + '@babel/parser': 7.26.10 + '@babel/traverse': 7.26.10 + '@babel/types': 7.26.10 prettier: 3.5.3 semver: 7.7.1 transitivePeerDependencies: @@ -12368,7 +12461,7 @@ snapshots: '@jest/console@29.7.0': dependencies: '@jest/types': 29.6.3 - '@types/node': 22.13.9 + '@types/node': 22.13.10 chalk: 4.1.2 jest-message-util: 29.7.0 jest-util: 29.7.0 @@ -12381,14 +12474,14 @@ snapshots: '@jest/test-result': 29.7.0 '@jest/transform': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 22.13.9 + '@types/node': 22.13.10 ansi-escapes: 4.3.2 chalk: 4.1.2 ci-info: 3.9.0 exit: 0.1.2 graceful-fs: 4.2.11 jest-changed-files: 29.7.0 - jest-config: 29.7.0(@types/node@22.13.9) + jest-config: 29.7.0(@types/node@22.13.10) jest-haste-map: 29.7.0 jest-message-util: 29.7.0 jest-regex-util: 29.6.3 @@ -12413,7 +12506,7 @@ snapshots: dependencies: '@jest/fake-timers': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 22.13.9 + '@types/node': 22.13.10 jest-mock: 29.7.0 '@jest/expect-utils@29.7.0': @@ -12431,7 +12524,7 @@ snapshots: dependencies: '@jest/types': 29.6.3 '@sinonjs/fake-timers': 10.3.0 - '@types/node': 22.13.9 + '@types/node': 22.13.10 jest-message-util: 29.7.0 jest-mock: 29.7.0 jest-util: 29.7.0 @@ -12453,7 +12546,7 @@ snapshots: '@jest/transform': 29.7.0 '@jest/types': 29.6.3 '@jridgewell/trace-mapping': 0.3.25 - '@types/node': 22.13.9 + '@types/node': 22.13.10 chalk: 4.1.2 collect-v8-coverage: 1.0.2 exit: 0.1.2 @@ -12500,7 +12593,7 @@ snapshots: '@jest/transform@29.7.0': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@jest/types': 29.6.3 '@jridgewell/trace-mapping': 0.3.25 babel-plugin-istanbul: 6.1.1 @@ -12523,7 +12616,7 @@ snapshots: '@jest/schemas': 29.6.3 '@types/istanbul-lib-coverage': 2.0.6 '@types/istanbul-reports': 3.0.4 - '@types/node': 22.13.9 + '@types/node': 22.13.10 '@types/yargs': 17.0.33 chalk: 4.1.2 @@ -12553,7 +12646,7 @@ snapshots: dependencies: tslib: 2.8.1 - '@jsonjoy.com/json-pack@1.1.1(tslib@2.8.1)': + '@jsonjoy.com/json-pack@1.2.0(tslib@2.8.1)': dependencies: '@jsonjoy.com/base64': 1.1.2(tslib@2.8.1) '@jsonjoy.com/util': 1.5.0(tslib@2.8.1) @@ -12605,27 +12698,27 @@ snapshots: transitivePeerDependencies: - '@types/node' - '@microsoft/api-extractor-model@7.30.3(@types/node@16.18.126)': + '@microsoft/api-extractor-model@7.30.4(@types/node@16.18.126)': dependencies: '@microsoft/tsdoc': 0.15.1 '@microsoft/tsdoc-config': 0.17.1 - '@rushstack/node-core-library': 5.11.0(@types/node@16.18.126) + '@rushstack/node-core-library': 5.12.0(@types/node@16.18.126) transitivePeerDependencies: - '@types/node' - '@microsoft/api-extractor-model@7.30.3(@types/node@20.17.23)': + '@microsoft/api-extractor-model@7.30.4(@types/node@20.17.24)': dependencies: '@microsoft/tsdoc': 0.15.1 '@microsoft/tsdoc-config': 0.17.1 - '@rushstack/node-core-library': 5.11.0(@types/node@20.17.23) + '@rushstack/node-core-library': 5.12.0(@types/node@20.17.24) transitivePeerDependencies: - '@types/node' - '@microsoft/api-extractor-model@7.30.3(@types/node@22.13.9)': + '@microsoft/api-extractor-model@7.30.4(@types/node@22.13.10)': dependencies: '@microsoft/tsdoc': 0.15.1 '@microsoft/tsdoc-config': 0.17.1 - '@rushstack/node-core-library': 5.11.0(@types/node@22.13.9) + '@rushstack/node-core-library': 5.12.0(@types/node@22.13.10) transitivePeerDependencies: - '@types/node' @@ -12647,57 +12740,57 @@ snapshots: transitivePeerDependencies: - '@types/node' - '@microsoft/api-extractor@7.51.1(@types/node@16.18.126)': + '@microsoft/api-extractor@7.52.1(@types/node@16.18.126)': dependencies: - '@microsoft/api-extractor-model': 7.30.3(@types/node@16.18.126) + '@microsoft/api-extractor-model': 7.30.4(@types/node@16.18.126) '@microsoft/tsdoc': 0.15.1 '@microsoft/tsdoc-config': 0.17.1 - '@rushstack/node-core-library': 5.11.0(@types/node@16.18.126) + '@rushstack/node-core-library': 5.12.0(@types/node@16.18.126) '@rushstack/rig-package': 0.5.3 - '@rushstack/terminal': 0.15.0(@types/node@16.18.126) - '@rushstack/ts-command-line': 4.23.5(@types/node@16.18.126) + '@rushstack/terminal': 0.15.1(@types/node@16.18.126) + '@rushstack/ts-command-line': 4.23.6(@types/node@16.18.126) lodash: 4.17.21 minimatch: 3.0.8 resolve: 1.22.10 semver: 7.5.4 source-map: 0.6.1 - typescript: 5.7.3 + typescript: 5.8.2 transitivePeerDependencies: - '@types/node' - '@microsoft/api-extractor@7.51.1(@types/node@20.17.23)': + '@microsoft/api-extractor@7.52.1(@types/node@20.17.24)': dependencies: - '@microsoft/api-extractor-model': 7.30.3(@types/node@20.17.23) + '@microsoft/api-extractor-model': 7.30.4(@types/node@20.17.24) '@microsoft/tsdoc': 0.15.1 '@microsoft/tsdoc-config': 0.17.1 - '@rushstack/node-core-library': 5.11.0(@types/node@20.17.23) + '@rushstack/node-core-library': 5.12.0(@types/node@20.17.24) '@rushstack/rig-package': 0.5.3 - '@rushstack/terminal': 0.15.0(@types/node@20.17.23) - '@rushstack/ts-command-line': 4.23.5(@types/node@20.17.23) + '@rushstack/terminal': 0.15.1(@types/node@20.17.24) + '@rushstack/ts-command-line': 4.23.6(@types/node@20.17.24) lodash: 4.17.21 minimatch: 3.0.8 resolve: 1.22.10 semver: 7.5.4 source-map: 0.6.1 - typescript: 5.7.3 + typescript: 5.8.2 transitivePeerDependencies: - '@types/node' - '@microsoft/api-extractor@7.51.1(@types/node@22.13.9)': + '@microsoft/api-extractor@7.52.1(@types/node@22.13.10)': dependencies: - '@microsoft/api-extractor-model': 7.30.3(@types/node@22.13.9) + '@microsoft/api-extractor-model': 7.30.4(@types/node@22.13.10) '@microsoft/tsdoc': 0.15.1 '@microsoft/tsdoc-config': 0.17.1 - '@rushstack/node-core-library': 5.11.0(@types/node@22.13.9) + '@rushstack/node-core-library': 5.12.0(@types/node@22.13.10) '@rushstack/rig-package': 0.5.3 - '@rushstack/terminal': 0.15.0(@types/node@22.13.9) - '@rushstack/ts-command-line': 4.23.5(@types/node@22.13.9) + '@rushstack/terminal': 0.15.1(@types/node@22.13.10) + '@rushstack/ts-command-line': 4.23.6(@types/node@22.13.10) lodash: 4.17.21 minimatch: 3.0.8 resolve: 1.22.10 semver: 7.5.4 source-map: 0.6.1 - typescript: 5.7.3 + typescript: 5.8.2 transitivePeerDependencies: - '@types/node' @@ -12730,6 +12823,13 @@ snapshots: react: 17.0.2 react-dom: 17.0.2(react@17.0.2) + '@napi-rs/wasm-runtime@0.2.7': + dependencies: + '@emnapi/core': 1.3.1 + '@emnapi/runtime': 1.3.1 + '@tybys/wasm-util': 0.9.0 + optional: true + '@nodelib/fs.scandir@2.1.5': dependencies: '@nodelib/fs.stat': 2.0.5 @@ -13433,77 +13533,77 @@ snapshots: '@remix-run/router@1.23.0': {} - '@rollup/plugin-yaml@4.1.2(rollup@4.34.9)': + '@rollup/plugin-yaml@4.1.2(rollup@4.36.0)': dependencies: - '@rollup/pluginutils': 5.1.4(rollup@4.34.9) + '@rollup/pluginutils': 5.1.4(rollup@4.36.0) js-yaml: 4.1.0 tosource: 2.0.0-alpha.3 optionalDependencies: - rollup: 4.34.9 + rollup: 4.36.0 - '@rollup/pluginutils@5.1.4(rollup@4.34.9)': + '@rollup/pluginutils@5.1.4(rollup@4.36.0)': dependencies: '@types/estree': 1.0.6 estree-walker: 2.0.2 picomatch: 4.0.2 optionalDependencies: - rollup: 4.34.9 + rollup: 4.36.0 - '@rollup/rollup-android-arm-eabi@4.34.9': + '@rollup/rollup-android-arm-eabi@4.36.0': optional: true - '@rollup/rollup-android-arm64@4.34.9': + '@rollup/rollup-android-arm64@4.36.0': optional: true - '@rollup/rollup-darwin-arm64@4.34.9': + '@rollup/rollup-darwin-arm64@4.36.0': optional: true - '@rollup/rollup-darwin-x64@4.34.9': + '@rollup/rollup-darwin-x64@4.36.0': optional: true - '@rollup/rollup-freebsd-arm64@4.34.9': + '@rollup/rollup-freebsd-arm64@4.36.0': optional: true - '@rollup/rollup-freebsd-x64@4.34.9': + '@rollup/rollup-freebsd-x64@4.36.0': optional: true - '@rollup/rollup-linux-arm-gnueabihf@4.34.9': + '@rollup/rollup-linux-arm-gnueabihf@4.36.0': optional: true - '@rollup/rollup-linux-arm-musleabihf@4.34.9': + '@rollup/rollup-linux-arm-musleabihf@4.36.0': optional: true - '@rollup/rollup-linux-arm64-gnu@4.34.9': + '@rollup/rollup-linux-arm64-gnu@4.36.0': optional: true - '@rollup/rollup-linux-arm64-musl@4.34.9': + '@rollup/rollup-linux-arm64-musl@4.36.0': optional: true - '@rollup/rollup-linux-loongarch64-gnu@4.34.9': + '@rollup/rollup-linux-loongarch64-gnu@4.36.0': optional: true - '@rollup/rollup-linux-powerpc64le-gnu@4.34.9': + '@rollup/rollup-linux-powerpc64le-gnu@4.36.0': optional: true - '@rollup/rollup-linux-riscv64-gnu@4.34.9': + '@rollup/rollup-linux-riscv64-gnu@4.36.0': optional: true - '@rollup/rollup-linux-s390x-gnu@4.34.9': + '@rollup/rollup-linux-s390x-gnu@4.36.0': optional: true - '@rollup/rollup-linux-x64-gnu@4.34.9': + '@rollup/rollup-linux-x64-gnu@4.36.0': optional: true - '@rollup/rollup-linux-x64-musl@4.34.9': + '@rollup/rollup-linux-x64-musl@4.36.0': optional: true - '@rollup/rollup-win32-arm64-msvc@4.34.9': + '@rollup/rollup-win32-arm64-msvc@4.36.0': optional: true - '@rollup/rollup-win32-ia32-msvc@4.34.9': + '@rollup/rollup-win32-ia32-msvc@4.36.0': optional: true - '@rollup/rollup-win32-x64-msvc@4.34.9': + '@rollup/rollup-win32-x64-msvc@4.36.0': optional: true '@rtsao/scc@1.1.0': {} @@ -13519,7 +13619,7 @@ snapshots: optionalDependencies: '@types/node': 16.18.126 - '@rushstack/node-core-library@5.11.0(@types/node@16.18.126)': + '@rushstack/node-core-library@5.12.0(@types/node@16.18.126)': dependencies: ajv: 8.13.0 ajv-draft-04: 1.0.0(ajv@8.13.0) @@ -13532,7 +13632,7 @@ snapshots: optionalDependencies: '@types/node': 16.18.126 - '@rushstack/node-core-library@5.11.0(@types/node@20.17.23)': + '@rushstack/node-core-library@5.12.0(@types/node@20.17.24)': dependencies: ajv: 8.13.0 ajv-draft-04: 1.0.0(ajv@8.13.0) @@ -13543,9 +13643,9 @@ snapshots: resolve: 1.22.10 semver: 7.5.4 optionalDependencies: - '@types/node': 20.17.23 + '@types/node': 20.17.24 - '@rushstack/node-core-library@5.11.0(@types/node@22.13.9)': + '@rushstack/node-core-library@5.12.0(@types/node@22.13.10)': dependencies: ajv: 8.13.0 ajv-draft-04: 1.0.0(ajv@8.13.0) @@ -13556,7 +13656,7 @@ snapshots: resolve: 1.22.10 semver: 7.5.4 optionalDependencies: - '@types/node': 22.13.9 + '@types/node': 22.13.10 '@rushstack/rig-package@0.5.2': dependencies: @@ -13575,26 +13675,26 @@ snapshots: optionalDependencies: '@types/node': 16.18.126 - '@rushstack/terminal@0.15.0(@types/node@16.18.126)': + '@rushstack/terminal@0.15.1(@types/node@16.18.126)': dependencies: - '@rushstack/node-core-library': 5.11.0(@types/node@16.18.126) + '@rushstack/node-core-library': 5.12.0(@types/node@16.18.126) supports-color: 8.1.1 optionalDependencies: '@types/node': 16.18.126 - '@rushstack/terminal@0.15.0(@types/node@20.17.23)': + '@rushstack/terminal@0.15.1(@types/node@20.17.24)': dependencies: - '@rushstack/node-core-library': 5.11.0(@types/node@20.17.23) + '@rushstack/node-core-library': 5.12.0(@types/node@20.17.24) supports-color: 8.1.1 optionalDependencies: - '@types/node': 20.17.23 + '@types/node': 20.17.24 - '@rushstack/terminal@0.15.0(@types/node@22.13.9)': + '@rushstack/terminal@0.15.1(@types/node@22.13.10)': dependencies: - '@rushstack/node-core-library': 5.11.0(@types/node@22.13.9) + '@rushstack/node-core-library': 5.12.0(@types/node@22.13.10) supports-color: 8.1.1 optionalDependencies: - '@types/node': 22.13.9 + '@types/node': 22.13.10 '@rushstack/ts-command-line@4.19.1(@types/node@16.18.126)': dependencies: @@ -13605,27 +13705,27 @@ snapshots: transitivePeerDependencies: - '@types/node' - '@rushstack/ts-command-line@4.23.5(@types/node@16.18.126)': + '@rushstack/ts-command-line@4.23.6(@types/node@16.18.126)': dependencies: - '@rushstack/terminal': 0.15.0(@types/node@16.18.126) + '@rushstack/terminal': 0.15.1(@types/node@16.18.126) '@types/argparse': 1.0.38 argparse: 1.0.10 string-argv: 0.3.2 transitivePeerDependencies: - '@types/node' - '@rushstack/ts-command-line@4.23.5(@types/node@20.17.23)': + '@rushstack/ts-command-line@4.23.6(@types/node@20.17.24)': dependencies: - '@rushstack/terminal': 0.15.0(@types/node@20.17.23) + '@rushstack/terminal': 0.15.1(@types/node@20.17.24) '@types/argparse': 1.0.38 argparse: 1.0.10 string-argv: 0.3.2 transitivePeerDependencies: - '@types/node' - '@rushstack/ts-command-line@4.23.5(@types/node@22.13.9)': + '@rushstack/ts-command-line@4.23.6(@types/node@22.13.10)': dependencies: - '@rushstack/terminal': 0.15.0(@types/node@22.13.9) + '@rushstack/terminal': 0.15.1(@types/node@22.13.10) '@types/argparse': 1.0.38 argparse: 1.0.10 string-argv: 0.3.2 @@ -13641,30 +13741,61 @@ snapshots: '@types/hast': 3.0.4 hast-util-to-html: 9.0.5 + '@shikijs/core@3.2.1': + dependencies: + '@shikijs/types': 3.2.1 + '@shikijs/vscode-textmate': 10.0.2 + '@types/hast': 3.0.4 + hast-util-to-html: 9.0.5 + '@shikijs/engine-javascript@1.29.2': dependencies: '@shikijs/types': 1.29.2 '@shikijs/vscode-textmate': 10.0.2 oniguruma-to-es: 2.3.0 + '@shikijs/engine-javascript@3.2.1': + dependencies: + '@shikijs/types': 3.2.1 + '@shikijs/vscode-textmate': 10.0.2 + oniguruma-to-es: 4.1.0 + '@shikijs/engine-oniguruma@1.29.2': dependencies: '@shikijs/types': 1.29.2 '@shikijs/vscode-textmate': 10.0.2 + '@shikijs/engine-oniguruma@3.2.1': + dependencies: + '@shikijs/types': 3.2.1 + '@shikijs/vscode-textmate': 10.0.2 + '@shikijs/langs@1.29.2': dependencies: '@shikijs/types': 1.29.2 + '@shikijs/langs@3.2.1': + dependencies: + '@shikijs/types': 3.2.1 + '@shikijs/themes@1.29.2': dependencies: '@shikijs/types': 1.29.2 + '@shikijs/themes@3.2.1': + dependencies: + '@shikijs/types': 3.2.1 + '@shikijs/types@1.29.2': dependencies: '@shikijs/vscode-textmate': 10.0.2 '@types/hast': 3.0.4 + '@shikijs/types@3.2.1': + dependencies: + '@shikijs/vscode-textmate': 10.0.2 + '@types/hast': 3.0.4 + '@shikijs/vscode-textmate@10.0.2': {} '@sinclair/typebox@0.27.8': {} @@ -13677,54 +13808,54 @@ snapshots: dependencies: '@sinonjs/commons': 3.0.1 - '@svgr/babel-plugin-add-jsx-attribute@8.0.0(@babel/core@7.26.9)': + '@svgr/babel-plugin-add-jsx-attribute@8.0.0(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 - '@svgr/babel-plugin-remove-jsx-attribute@8.0.0(@babel/core@7.26.9)': + '@svgr/babel-plugin-remove-jsx-attribute@8.0.0(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 - '@svgr/babel-plugin-remove-jsx-empty-expression@8.0.0(@babel/core@7.26.9)': + '@svgr/babel-plugin-remove-jsx-empty-expression@8.0.0(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 - '@svgr/babel-plugin-replace-jsx-attribute-value@8.0.0(@babel/core@7.26.9)': + '@svgr/babel-plugin-replace-jsx-attribute-value@8.0.0(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 - '@svgr/babel-plugin-svg-dynamic-title@8.0.0(@babel/core@7.26.9)': + '@svgr/babel-plugin-svg-dynamic-title@8.0.0(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 - '@svgr/babel-plugin-svg-em-dimensions@8.0.0(@babel/core@7.26.9)': + '@svgr/babel-plugin-svg-em-dimensions@8.0.0(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 - '@svgr/babel-plugin-transform-react-native-svg@8.1.0(@babel/core@7.26.9)': + '@svgr/babel-plugin-transform-react-native-svg@8.1.0(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 - '@svgr/babel-plugin-transform-svg-component@8.0.0(@babel/core@7.26.9)': + '@svgr/babel-plugin-transform-svg-component@8.0.0(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 - '@svgr/babel-preset@8.1.0(@babel/core@7.26.9)': + '@svgr/babel-preset@8.1.0(@babel/core@7.26.10)': dependencies: - '@babel/core': 7.26.9 - '@svgr/babel-plugin-add-jsx-attribute': 8.0.0(@babel/core@7.26.9) - '@svgr/babel-plugin-remove-jsx-attribute': 8.0.0(@babel/core@7.26.9) - '@svgr/babel-plugin-remove-jsx-empty-expression': 8.0.0(@babel/core@7.26.9) - '@svgr/babel-plugin-replace-jsx-attribute-value': 8.0.0(@babel/core@7.26.9) - '@svgr/babel-plugin-svg-dynamic-title': 8.0.0(@babel/core@7.26.9) - '@svgr/babel-plugin-svg-em-dimensions': 8.0.0(@babel/core@7.26.9) - '@svgr/babel-plugin-transform-react-native-svg': 8.1.0(@babel/core@7.26.9) - '@svgr/babel-plugin-transform-svg-component': 8.0.0(@babel/core@7.26.9) + '@babel/core': 7.26.10 + '@svgr/babel-plugin-add-jsx-attribute': 8.0.0(@babel/core@7.26.10) + '@svgr/babel-plugin-remove-jsx-attribute': 8.0.0(@babel/core@7.26.10) + '@svgr/babel-plugin-remove-jsx-empty-expression': 8.0.0(@babel/core@7.26.10) + '@svgr/babel-plugin-replace-jsx-attribute-value': 8.0.0(@babel/core@7.26.10) + '@svgr/babel-plugin-svg-dynamic-title': 8.0.0(@babel/core@7.26.10) + '@svgr/babel-plugin-svg-em-dimensions': 8.0.0(@babel/core@7.26.10) + '@svgr/babel-plugin-transform-react-native-svg': 8.1.0(@babel/core@7.26.10) + '@svgr/babel-plugin-transform-svg-component': 8.0.0(@babel/core@7.26.10) '@svgr/core@8.1.0(typescript@5.6.3)': dependencies: - '@babel/core': 7.26.9 - '@svgr/babel-preset': 8.1.0(@babel/core@7.26.9) + '@babel/core': 7.26.10 + '@svgr/babel-preset': 8.1.0(@babel/core@7.26.10) camelcase: 6.3.0 cosmiconfig: 8.3.6(typescript@5.6.3) snake-case: 3.0.4 @@ -13734,8 +13865,8 @@ snapshots: '@svgr/core@8.1.0(typescript@5.8.2)': dependencies: - '@babel/core': 7.26.9 - '@svgr/babel-preset': 8.1.0(@babel/core@7.26.9) + '@babel/core': 7.26.10 + '@svgr/babel-preset': 8.1.0(@babel/core@7.26.10) camelcase: 6.3.0 cosmiconfig: 8.3.6(typescript@5.8.2) snake-case: 3.0.4 @@ -13745,13 +13876,13 @@ snapshots: '@svgr/hast-util-to-babel-ast@8.0.0': dependencies: - '@babel/types': 7.26.9 + '@babel/types': 7.26.10 entities: 4.5.0 '@svgr/plugin-jsx@8.1.0(@svgr/core@8.1.0(typescript@5.6.3))': dependencies: - '@babel/core': 7.26.9 - '@svgr/babel-preset': 8.1.0(@babel/core@7.26.9) + '@babel/core': 7.26.10 + '@svgr/babel-preset': 8.1.0(@babel/core@7.26.10) '@svgr/core': 8.1.0(typescript@5.6.3) '@svgr/hast-util-to-babel-ast': 8.0.0 svg-parser: 2.0.4 @@ -13760,59 +13891,59 @@ snapshots: '@svgr/plugin-jsx@8.1.0(@svgr/core@8.1.0(typescript@5.8.2))': dependencies: - '@babel/core': 7.26.9 - '@svgr/babel-preset': 8.1.0(@babel/core@7.26.9) + '@babel/core': 7.26.10 + '@svgr/babel-preset': 8.1.0(@babel/core@7.26.10) '@svgr/core': 8.1.0(typescript@5.8.2) '@svgr/hast-util-to-babel-ast': 8.0.0 svg-parser: 2.0.4 transitivePeerDependencies: - supports-color - '@swc/core-darwin-arm64@1.11.7': + '@swc/core-darwin-arm64@1.11.11': optional: true - '@swc/core-darwin-x64@1.11.7': + '@swc/core-darwin-x64@1.11.11': optional: true - '@swc/core-linux-arm-gnueabihf@1.11.7': + '@swc/core-linux-arm-gnueabihf@1.11.11': optional: true - '@swc/core-linux-arm64-gnu@1.11.7': + '@swc/core-linux-arm64-gnu@1.11.11': optional: true - '@swc/core-linux-arm64-musl@1.11.7': + '@swc/core-linux-arm64-musl@1.11.11': optional: true - '@swc/core-linux-x64-gnu@1.11.7': + '@swc/core-linux-x64-gnu@1.11.11': optional: true - '@swc/core-linux-x64-musl@1.11.7': + '@swc/core-linux-x64-musl@1.11.11': optional: true - '@swc/core-win32-arm64-msvc@1.11.7': + '@swc/core-win32-arm64-msvc@1.11.11': optional: true - '@swc/core-win32-ia32-msvc@1.11.7': + '@swc/core-win32-ia32-msvc@1.11.11': optional: true - '@swc/core-win32-x64-msvc@1.11.7': + '@swc/core-win32-x64-msvc@1.11.11': optional: true - '@swc/core@1.11.7': + '@swc/core@1.11.11': dependencies: '@swc/counter': 0.1.3 '@swc/types': 0.1.19 optionalDependencies: - '@swc/core-darwin-arm64': 1.11.7 - '@swc/core-darwin-x64': 1.11.7 - '@swc/core-linux-arm-gnueabihf': 1.11.7 - '@swc/core-linux-arm64-gnu': 1.11.7 - '@swc/core-linux-arm64-musl': 1.11.7 - '@swc/core-linux-x64-gnu': 1.11.7 - '@swc/core-linux-x64-musl': 1.11.7 - '@swc/core-win32-arm64-msvc': 1.11.7 - '@swc/core-win32-ia32-msvc': 1.11.7 - '@swc/core-win32-x64-msvc': 1.11.7 + '@swc/core-darwin-arm64': 1.11.11 + '@swc/core-darwin-x64': 1.11.11 + '@swc/core-linux-arm-gnueabihf': 1.11.11 + '@swc/core-linux-arm64-gnu': 1.11.11 + '@swc/core-linux-arm64-musl': 1.11.11 + '@swc/core-linux-x64-gnu': 1.11.11 + '@swc/core-linux-x64-musl': 1.11.11 + '@swc/core-win32-arm64-msvc': 1.11.11 + '@swc/core-win32-ia32-msvc': 1.11.11 + '@swc/core-win32-x64-msvc': 1.11.11 '@swc/counter@0.1.3': {} @@ -13841,7 +13972,7 @@ snapshots: '@testing-library/dom@10.4.0': dependencies: '@babel/code-frame': 7.26.2 - '@babel/runtime': 7.26.9 + '@babel/runtime': 7.26.10 '@types/aria-query': 5.0.4 aria-query: 5.3.0 chalk: 4.1.2 @@ -13852,7 +13983,7 @@ snapshots: '@testing-library/dom@8.20.1': dependencies: '@babel/code-frame': 7.26.2 - '@babel/runtime': 7.26.9 + '@babel/runtime': 7.26.10 '@types/aria-query': 5.0.4 aria-query: 5.1.3 chalk: 4.1.2 @@ -13863,7 +13994,7 @@ snapshots: '@testing-library/jest-dom@5.17.0': dependencies: '@adobe/css-tools': 4.4.2 - '@babel/runtime': 7.26.9 + '@babel/runtime': 7.26.10 '@types/testing-library__jest-dom': 5.14.9 aria-query: 5.3.2 chalk: 3.0.0 @@ -13884,7 +14015,7 @@ snapshots: '@testing-library/react@12.1.5(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)': dependencies: - '@babel/runtime': 7.26.9 + '@babel/runtime': 7.26.10 '@testing-library/dom': 8.20.1 '@types/react-dom': 17.0.26(@types/react@17.0.83) react: 17.0.2 @@ -13894,7 +14025,7 @@ snapshots: '@testing-library/user-event@13.5.0(@testing-library/dom@10.4.0)': dependencies: - '@babel/runtime': 7.26.9 + '@babel/runtime': 7.26.10 '@testing-library/dom': 10.4.0 '@tokens-studio/sd-transforms@1.2.12(style-dictionary@4.3.3)': @@ -13909,6 +14040,11 @@ snapshots: '@tokens-studio/types@0.5.2': {} + '@tybys/wasm-util@0.9.0': + dependencies: + tslib: 2.8.1 + optional: true + '@types/acorn@4.0.6': dependencies: '@types/estree': 1.0.6 @@ -13919,42 +14055,42 @@ snapshots: '@types/babel__core@7.20.5': dependencies: - '@babel/parser': 7.26.9 - '@babel/types': 7.26.9 + '@babel/parser': 7.26.10 + '@babel/types': 7.26.10 '@types/babel__generator': 7.6.8 '@types/babel__template': 7.4.4 '@types/babel__traverse': 7.20.6 '@types/babel__generator@7.6.8': dependencies: - '@babel/types': 7.26.9 + '@babel/types': 7.26.10 '@types/babel__template@7.4.4': dependencies: - '@babel/parser': 7.26.9 - '@babel/types': 7.26.9 + '@babel/parser': 7.26.10 + '@babel/types': 7.26.10 '@types/babel__traverse@7.20.6': dependencies: - '@babel/types': 7.26.9 + '@babel/types': 7.26.10 '@types/body-parser@1.19.5': dependencies: '@types/connect': 3.4.38 - '@types/node': 22.13.9 + '@types/node': 22.13.10 '@types/bonjour@3.5.13': dependencies: - '@types/node': 22.13.9 + '@types/node': 22.13.10 '@types/connect-history-api-fallback@1.5.4': dependencies: '@types/express-serve-static-core': 5.0.6 - '@types/node': 22.13.9 + '@types/node': 22.13.10 '@types/connect@3.4.38': dependencies: - '@types/node': 22.13.9 + '@types/node': 22.13.10 '@types/cookie@0.6.0': {} @@ -13982,14 +14118,14 @@ snapshots: '@types/express-serve-static-core@4.19.6': dependencies: - '@types/node': 22.13.9 + '@types/node': 22.13.10 '@types/qs': 6.9.18 '@types/range-parser': 1.2.7 '@types/send': 0.17.4 '@types/express-serve-static-core@5.0.6': dependencies: - '@types/node': 22.13.9 + '@types/node': 22.13.10 '@types/qs': 6.9.18 '@types/range-parser': 1.2.7 '@types/send': 0.17.4 @@ -14003,7 +14139,7 @@ snapshots: '@types/graceful-fs@4.1.9': dependencies: - '@types/node': 22.13.9 + '@types/node': 22.13.10 '@types/hast@2.3.10': dependencies: @@ -14019,7 +14155,7 @@ snapshots: '@types/http-proxy@1.17.16': dependencies: - '@types/node': 22.13.9 + '@types/node': 22.13.10 '@types/istanbul-lib-coverage@2.0.6': {} @@ -14066,17 +14202,17 @@ snapshots: '@types/node-forge@1.3.11': dependencies: - '@types/node': 22.13.9 + '@types/node': 22.13.10 '@types/node@16.18.126': {} '@types/node@17.0.45': {} - '@types/node@20.17.23': + '@types/node@20.17.24': dependencies: undici-types: 6.19.8 - '@types/node@22.13.9': + '@types/node@22.13.10': dependencies: undici-types: 6.20.0 @@ -14104,7 +14240,7 @@ snapshots: '@types/sax@1.2.7': dependencies: - '@types/node': 22.13.9 + '@types/node': 22.13.10 '@types/scheduler@0.16.8': {} @@ -14113,7 +14249,7 @@ snapshots: '@types/send@0.17.4': dependencies: '@types/mime': 1.3.5 - '@types/node': 22.13.9 + '@types/node': 22.13.10 '@types/serve-index@1.9.4': dependencies: @@ -14122,12 +14258,12 @@ snapshots: '@types/serve-static@1.15.7': dependencies: '@types/http-errors': 2.0.4 - '@types/node': 22.13.9 + '@types/node': 22.13.10 '@types/send': 0.17.4 '@types/sockjs@0.3.36': dependencies: - '@types/node': 22.13.9 + '@types/node': 22.13.10 '@types/stack-utils@2.0.3': {} @@ -14147,7 +14283,7 @@ snapshots: '@types/ws@8.18.0': dependencies: - '@types/node': 22.13.9 + '@types/node': 22.13.10 '@types/yargs-parser@21.0.3': {} @@ -14177,14 +14313,14 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/eslint-plugin@8.26.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3)': + '@typescript-eslint/eslint-plugin@8.26.1(@typescript-eslint/parser@8.26.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3)': dependencies: '@eslint-community/regexpp': 4.12.1 - '@typescript-eslint/parser': 8.26.0(eslint@8.57.1)(typescript@5.6.3) - '@typescript-eslint/scope-manager': 8.26.0 - '@typescript-eslint/type-utils': 8.26.0(eslint@8.57.1)(typescript@5.6.3) - '@typescript-eslint/utils': 8.26.0(eslint@8.57.1)(typescript@5.6.3) - '@typescript-eslint/visitor-keys': 8.26.0 + '@typescript-eslint/parser': 8.26.1(eslint@8.57.1)(typescript@5.6.3) + '@typescript-eslint/scope-manager': 8.26.1 + '@typescript-eslint/type-utils': 8.26.1(eslint@8.57.1)(typescript@5.6.3) + '@typescript-eslint/utils': 8.26.1(eslint@8.57.1)(typescript@5.6.3) + '@typescript-eslint/visitor-keys': 8.26.1 eslint: 8.57.1 graphemer: 1.4.0 ignore: 5.3.2 @@ -14194,14 +14330,14 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/eslint-plugin@8.26.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1)(typescript@5.8.2)': + '@typescript-eslint/eslint-plugin@8.26.1(@typescript-eslint/parser@8.26.1(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1)(typescript@5.8.2)': dependencies: '@eslint-community/regexpp': 4.12.1 - '@typescript-eslint/parser': 8.26.0(eslint@8.57.1)(typescript@5.8.2) - '@typescript-eslint/scope-manager': 8.26.0 - '@typescript-eslint/type-utils': 8.26.0(eslint@8.57.1)(typescript@5.8.2) - '@typescript-eslint/utils': 8.26.0(eslint@8.57.1)(typescript@5.8.2) - '@typescript-eslint/visitor-keys': 8.26.0 + '@typescript-eslint/parser': 8.26.1(eslint@8.57.1)(typescript@5.8.2) + '@typescript-eslint/scope-manager': 8.26.1 + '@typescript-eslint/type-utils': 8.26.1(eslint@8.57.1)(typescript@5.8.2) + '@typescript-eslint/utils': 8.26.1(eslint@8.57.1)(typescript@5.8.2) + '@typescript-eslint/visitor-keys': 8.26.1 eslint: 8.57.1 graphemer: 1.4.0 ignore: 5.3.2 @@ -14224,24 +14360,24 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.6.3)': + '@typescript-eslint/parser@8.26.1(eslint@8.57.1)(typescript@5.6.3)': dependencies: - '@typescript-eslint/scope-manager': 8.26.0 - '@typescript-eslint/types': 8.26.0 - '@typescript-eslint/typescript-estree': 8.26.0(typescript@5.6.3) - '@typescript-eslint/visitor-keys': 8.26.0 + '@typescript-eslint/scope-manager': 8.26.1 + '@typescript-eslint/types': 8.26.1 + '@typescript-eslint/typescript-estree': 8.26.1(typescript@5.6.3) + '@typescript-eslint/visitor-keys': 8.26.1 debug: 4.4.0 eslint: 8.57.1 typescript: 5.6.3 transitivePeerDependencies: - supports-color - '@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2)': + '@typescript-eslint/parser@8.26.1(eslint@8.57.1)(typescript@5.8.2)': dependencies: - '@typescript-eslint/scope-manager': 8.26.0 - '@typescript-eslint/types': 8.26.0 - '@typescript-eslint/typescript-estree': 8.26.0(typescript@5.8.2) - '@typescript-eslint/visitor-keys': 8.26.0 + '@typescript-eslint/scope-manager': 8.26.1 + '@typescript-eslint/types': 8.26.1 + '@typescript-eslint/typescript-estree': 8.26.1(typescript@5.8.2) + '@typescript-eslint/visitor-keys': 8.26.1 debug: 4.4.0 eslint: 8.57.1 typescript: 5.8.2 @@ -14253,10 +14389,10 @@ snapshots: '@typescript-eslint/types': 6.21.0 '@typescript-eslint/visitor-keys': 6.21.0 - '@typescript-eslint/scope-manager@8.26.0': + '@typescript-eslint/scope-manager@8.26.1': dependencies: - '@typescript-eslint/types': 8.26.0 - '@typescript-eslint/visitor-keys': 8.26.0 + '@typescript-eslint/types': 8.26.1 + '@typescript-eslint/visitor-keys': 8.26.1 '@typescript-eslint/type-utils@6.21.0(eslint@8.57.1)(typescript@5.8.2)': dependencies: @@ -14270,10 +14406,10 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/type-utils@8.26.0(eslint@8.57.1)(typescript@5.6.3)': + '@typescript-eslint/type-utils@8.26.1(eslint@8.57.1)(typescript@5.6.3)': dependencies: - '@typescript-eslint/typescript-estree': 8.26.0(typescript@5.6.3) - '@typescript-eslint/utils': 8.26.0(eslint@8.57.1)(typescript@5.6.3) + '@typescript-eslint/typescript-estree': 8.26.1(typescript@5.6.3) + '@typescript-eslint/utils': 8.26.1(eslint@8.57.1)(typescript@5.6.3) debug: 4.4.0 eslint: 8.57.1 ts-api-utils: 2.0.1(typescript@5.6.3) @@ -14281,10 +14417,10 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/type-utils@8.26.0(eslint@8.57.1)(typescript@5.8.2)': + '@typescript-eslint/type-utils@8.26.1(eslint@8.57.1)(typescript@5.8.2)': dependencies: - '@typescript-eslint/typescript-estree': 8.26.0(typescript@5.8.2) - '@typescript-eslint/utils': 8.26.0(eslint@8.57.1)(typescript@5.8.2) + '@typescript-eslint/typescript-estree': 8.26.1(typescript@5.8.2) + '@typescript-eslint/utils': 8.26.1(eslint@8.57.1)(typescript@5.8.2) debug: 4.4.0 eslint: 8.57.1 ts-api-utils: 2.0.1(typescript@5.8.2) @@ -14294,7 +14430,7 @@ snapshots: '@typescript-eslint/types@6.21.0': {} - '@typescript-eslint/types@8.26.0': {} + '@typescript-eslint/types@8.26.1': {} '@typescript-eslint/typescript-estree@6.21.0(typescript@5.8.2)': dependencies: @@ -14311,10 +14447,10 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/typescript-estree@8.26.0(typescript@5.6.3)': + '@typescript-eslint/typescript-estree@8.26.1(typescript@5.6.3)': dependencies: - '@typescript-eslint/types': 8.26.0 - '@typescript-eslint/visitor-keys': 8.26.0 + '@typescript-eslint/types': 8.26.1 + '@typescript-eslint/visitor-keys': 8.26.1 debug: 4.4.0 fast-glob: 3.3.3 is-glob: 4.0.3 @@ -14325,10 +14461,10 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/typescript-estree@8.26.0(typescript@5.8.2)': + '@typescript-eslint/typescript-estree@8.26.1(typescript@5.8.2)': dependencies: - '@typescript-eslint/types': 8.26.0 - '@typescript-eslint/visitor-keys': 8.26.0 + '@typescript-eslint/types': 8.26.1 + '@typescript-eslint/visitor-keys': 8.26.1 debug: 4.4.0 fast-glob: 3.3.3 is-glob: 4.0.3 @@ -14341,7 +14477,7 @@ snapshots: '@typescript-eslint/utils@6.21.0(eslint@8.57.1)(typescript@5.8.2)': dependencies: - '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1) + '@eslint-community/eslint-utils': 4.5.1(eslint@8.57.1) '@types/json-schema': 7.0.15 '@types/semver': 7.5.8 '@typescript-eslint/scope-manager': 6.21.0 @@ -14353,23 +14489,23 @@ snapshots: - supports-color - typescript - '@typescript-eslint/utils@8.26.0(eslint@8.57.1)(typescript@5.6.3)': + '@typescript-eslint/utils@8.26.1(eslint@8.57.1)(typescript@5.6.3)': dependencies: - '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1) - '@typescript-eslint/scope-manager': 8.26.0 - '@typescript-eslint/types': 8.26.0 - '@typescript-eslint/typescript-estree': 8.26.0(typescript@5.6.3) + '@eslint-community/eslint-utils': 4.5.1(eslint@8.57.1) + '@typescript-eslint/scope-manager': 8.26.1 + '@typescript-eslint/types': 8.26.1 + '@typescript-eslint/typescript-estree': 8.26.1(typescript@5.6.3) eslint: 8.57.1 typescript: 5.6.3 transitivePeerDependencies: - supports-color - '@typescript-eslint/utils@8.26.0(eslint@8.57.1)(typescript@5.8.2)': + '@typescript-eslint/utils@8.26.1(eslint@8.57.1)(typescript@5.8.2)': dependencies: - '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1) - '@typescript-eslint/scope-manager': 8.26.0 - '@typescript-eslint/types': 8.26.0 - '@typescript-eslint/typescript-estree': 8.26.0(typescript@5.8.2) + '@eslint-community/eslint-utils': 4.5.1(eslint@8.57.1) + '@typescript-eslint/scope-manager': 8.26.1 + '@typescript-eslint/types': 8.26.1 + '@typescript-eslint/typescript-estree': 8.26.1(typescript@5.8.2) eslint: 8.57.1 typescript: 5.8.2 transitivePeerDependencies: @@ -14380,16 +14516,16 @@ snapshots: '@typescript-eslint/types': 6.21.0 eslint-visitor-keys: 3.4.3 - '@typescript-eslint/visitor-keys@8.26.0': + '@typescript-eslint/visitor-keys@8.26.1': dependencies: - '@typescript-eslint/types': 8.26.0 + '@typescript-eslint/types': 8.26.1 eslint-visitor-keys: 4.2.0 '@uiw/copy-to-clipboard@1.0.17': {} '@uiw/react-markdown-preview@5.1.3(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)': dependencies: - '@babel/runtime': 7.26.9 + '@babel/runtime': 7.26.10 '@uiw/copy-to-clipboard': 1.0.17 react: 17.0.2 react-dom: 17.0.2(react@17.0.2) @@ -14410,57 +14546,92 @@ snapshots: '@ungap/structured-clone@1.3.0': {} + '@unrs/rspack-resolver-binding-darwin-arm64@1.2.2': + optional: true + + '@unrs/rspack-resolver-binding-darwin-x64@1.2.2': + optional: true + + '@unrs/rspack-resolver-binding-freebsd-x64@1.2.2': + optional: true + + '@unrs/rspack-resolver-binding-linux-arm-gnueabihf@1.2.2': + optional: true + + '@unrs/rspack-resolver-binding-linux-arm64-gnu@1.2.2': + optional: true + + '@unrs/rspack-resolver-binding-linux-arm64-musl@1.2.2': + optional: true + + '@unrs/rspack-resolver-binding-linux-x64-gnu@1.2.2': + optional: true + + '@unrs/rspack-resolver-binding-linux-x64-musl@1.2.2': + optional: true + + '@unrs/rspack-resolver-binding-wasm32-wasi@1.2.2': + dependencies: + '@napi-rs/wasm-runtime': 0.2.7 + optional: true + + '@unrs/rspack-resolver-binding-win32-arm64-msvc@1.2.2': + optional: true + + '@unrs/rspack-resolver-binding-win32-x64-msvc@1.2.2': + optional: true + '@vitejs/plugin-react-swc@3.8.0(vite@4.5.9(@types/node@16.18.126)(terser@5.39.0))': dependencies: - '@swc/core': 1.11.7 + '@swc/core': 1.11.11 vite: 4.5.9(@types/node@16.18.126)(terser@5.39.0) transitivePeerDependencies: - '@swc/helpers' - '@vitejs/plugin-react-swc@3.8.0(vite@6.2.0(@types/node@16.18.126)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0))': + '@vitejs/plugin-react-swc@3.8.0(vite@6.2.2(@types/node@16.18.126)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0))': dependencies: - '@swc/core': 1.11.7 - vite: 6.2.0(@types/node@16.18.126)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + '@swc/core': 1.11.11 + vite: 6.2.2(@types/node@16.18.126)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) transitivePeerDependencies: - '@swc/helpers' - '@vitejs/plugin-react-swc@3.8.0(vite@6.2.0(@types/node@20.17.23)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0))': + '@vitejs/plugin-react-swc@3.8.0(vite@6.2.2(@types/node@20.17.24)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0))': dependencies: - '@swc/core': 1.11.7 - vite: 6.2.0(@types/node@20.17.23)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + '@swc/core': 1.11.11 + vite: 6.2.2(@types/node@20.17.24)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) transitivePeerDependencies: - '@swc/helpers' - '@vitejs/plugin-react-swc@3.8.0(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0))': + '@vitejs/plugin-react-swc@3.8.0(vite@6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0))': dependencies: - '@swc/core': 1.11.7 - vite: 6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + '@swc/core': 1.11.11 + vite: 6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) transitivePeerDependencies: - '@swc/helpers' '@vitejs/plugin-react@4.3.4(vite@4.5.9(@types/node@16.18.126)(terser@5.39.0))': dependencies: - '@babel/core': 7.26.9 - '@babel/plugin-transform-react-jsx-self': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.26.9) + '@babel/core': 7.26.10 + '@babel/plugin-transform-react-jsx-self': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.26.10) '@types/babel__core': 7.20.5 react-refresh: 0.14.2 vite: 4.5.9(@types/node@16.18.126)(terser@5.39.0) transitivePeerDependencies: - supports-color - '@vitejs/plugin-react@4.3.4(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0))': + '@vitejs/plugin-react@4.3.4(vite@6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0))': dependencies: - '@babel/core': 7.26.9 - '@babel/plugin-transform-react-jsx-self': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.26.9) + '@babel/core': 7.26.10 + '@babel/plugin-transform-react-jsx-self': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.26.10) '@types/babel__core': 7.20.5 react-refresh: 0.14.2 - vite: 6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + vite: 6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) transitivePeerDependencies: - supports-color - '@vitest/coverage-istanbul@2.1.8(vitest@2.1.9(@types/node@22.13.9)(jsdom@25.0.1)(terser@5.39.0))': + '@vitest/coverage-istanbul@2.1.9(vitest@2.1.9(@types/node@22.13.10)(jsdom@25.0.1)(terser@5.39.0))': dependencies: '@istanbuljs/schema': 0.1.3 debug: 4.4.0 @@ -14472,11 +14643,11 @@ snapshots: magicast: 0.3.5 test-exclude: 7.0.1 tinyrainbow: 1.2.0 - vitest: 2.1.9(@types/node@22.13.9)(jsdom@25.0.1)(terser@5.39.0) + vitest: 2.1.9(@types/node@22.13.10)(jsdom@25.0.1)(terser@5.39.0) transitivePeerDependencies: - supports-color - '@vitest/coverage-istanbul@3.0.6(vitest@3.0.7(@types/debug@4.1.12)(@types/node@22.13.9)(@vitest/ui@3.0.7)(jiti@1.21.7)(jsdom@25.0.1)(terser@5.39.0)(yaml@2.7.0))': + '@vitest/coverage-istanbul@3.0.9(vitest@3.0.9(@types/debug@4.1.12)(@types/node@22.13.10)(@vitest/ui@3.0.9)(jiti@1.21.7)(jsdom@25.0.1)(terser@5.39.0)(yaml@2.7.0))': dependencies: '@istanbuljs/schema': 0.1.3 debug: 4.4.0 @@ -14488,7 +14659,7 @@ snapshots: magicast: 0.3.5 test-exclude: 7.0.1 tinyrainbow: 2.0.0 - vitest: 3.0.7(@types/debug@4.1.12)(@types/node@22.13.9)(@vitest/ui@3.0.7)(jiti@1.21.7)(jsdom@25.0.1)(terser@5.39.0)(yaml@2.7.0) + vitest: 3.0.9(@types/debug@4.1.12)(@types/node@22.13.10)(@vitest/ui@3.0.9)(jiti@1.21.7)(jsdom@25.0.1)(terser@5.39.0)(yaml@2.7.0) transitivePeerDependencies: - supports-color @@ -14499,34 +14670,34 @@ snapshots: chai: 5.2.0 tinyrainbow: 1.2.0 - '@vitest/expect@3.0.7': + '@vitest/expect@3.0.9': dependencies: - '@vitest/spy': 3.0.7 - '@vitest/utils': 3.0.7 + '@vitest/spy': 3.0.9 + '@vitest/utils': 3.0.9 chai: 5.2.0 tinyrainbow: 2.0.0 - '@vitest/mocker@2.1.9(vite@5.4.14(@types/node@22.13.9)(terser@5.39.0))': + '@vitest/mocker@2.1.9(vite@5.4.14(@types/node@22.13.10)(terser@5.39.0))': dependencies: '@vitest/spy': 2.1.9 estree-walker: 3.0.3 magic-string: 0.30.17 optionalDependencies: - vite: 5.4.14(@types/node@22.13.9)(terser@5.39.0) + vite: 5.4.14(@types/node@22.13.10)(terser@5.39.0) - '@vitest/mocker@3.0.7(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0))': + '@vitest/mocker@3.0.9(vite@6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0))': dependencies: - '@vitest/spy': 3.0.7 + '@vitest/spy': 3.0.9 estree-walker: 3.0.3 magic-string: 0.30.17 optionalDependencies: - vite: 6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + vite: 6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) '@vitest/pretty-format@2.1.9': dependencies: tinyrainbow: 1.2.0 - '@vitest/pretty-format@3.0.7': + '@vitest/pretty-format@3.0.9': dependencies: tinyrainbow: 2.0.0 @@ -14535,9 +14706,9 @@ snapshots: '@vitest/utils': 2.1.9 pathe: 1.1.2 - '@vitest/runner@3.0.7': + '@vitest/runner@3.0.9': dependencies: - '@vitest/utils': 3.0.7 + '@vitest/utils': 3.0.9 pathe: 2.0.3 '@vitest/snapshot@2.1.9': @@ -14546,9 +14717,9 @@ snapshots: magic-string: 0.30.17 pathe: 1.1.2 - '@vitest/snapshot@3.0.7': + '@vitest/snapshot@3.0.9': dependencies: - '@vitest/pretty-format': 3.0.7 + '@vitest/pretty-format': 3.0.9 magic-string: 0.30.17 pathe: 2.0.3 @@ -14556,20 +14727,20 @@ snapshots: dependencies: tinyspy: 3.0.2 - '@vitest/spy@3.0.7': + '@vitest/spy@3.0.9': dependencies: tinyspy: 3.0.2 - '@vitest/ui@3.0.7(vitest@3.0.7)': + '@vitest/ui@3.0.9(vitest@3.0.9)': dependencies: - '@vitest/utils': 3.0.7 + '@vitest/utils': 3.0.9 fflate: 0.8.2 flatted: 3.3.3 pathe: 2.0.3 sirv: 3.0.1 tinyglobby: 0.2.12 tinyrainbow: 2.0.0 - vitest: 3.0.7(@types/debug@4.1.12)(@types/node@22.13.9)(@vitest/ui@3.0.7)(jiti@1.21.7)(jsdom@25.0.1)(terser@5.39.0)(yaml@2.7.0) + vitest: 3.0.9(@types/debug@4.1.12)(@types/node@22.13.10)(@vitest/ui@3.0.9)(jiti@1.21.7)(jsdom@25.0.1)(terser@5.39.0)(yaml@2.7.0) '@vitest/utils@2.1.9': dependencies: @@ -14577,16 +14748,16 @@ snapshots: loupe: 3.1.3 tinyrainbow: 1.2.0 - '@vitest/utils@3.0.7': + '@vitest/utils@3.0.9': dependencies: - '@vitest/pretty-format': 3.0.7 + '@vitest/pretty-format': 3.0.9 loupe: 3.1.3 tinyrainbow: 2.0.0 - '@volar/kit@2.4.11(typescript@5.8.2)': + '@volar/kit@2.4.12(typescript@5.8.2)': dependencies: - '@volar/language-service': 2.4.11 - '@volar/typescript': 2.4.11 + '@volar/language-service': 2.4.12 + '@volar/typescript': 2.4.12 typesafe-path: 0.2.2 typescript: 5.8.2 vscode-languageserver-textdocument: 1.0.12 @@ -14596,15 +14767,15 @@ snapshots: dependencies: '@volar/source-map': 1.11.1 - '@volar/language-core@2.4.11': + '@volar/language-core@2.4.12': dependencies: - '@volar/source-map': 2.4.11 + '@volar/source-map': 2.4.12 - '@volar/language-server@2.4.11': + '@volar/language-server@2.4.12': dependencies: - '@volar/language-core': 2.4.11 - '@volar/language-service': 2.4.11 - '@volar/typescript': 2.4.11 + '@volar/language-core': 2.4.12 + '@volar/language-service': 2.4.12 + '@volar/typescript': 2.4.12 path-browserify: 1.0.1 request-light: 0.7.0 vscode-languageserver: 9.0.1 @@ -14612,9 +14783,9 @@ snapshots: vscode-languageserver-textdocument: 1.0.12 vscode-uri: 3.1.0 - '@volar/language-service@2.4.11': + '@volar/language-service@2.4.12': dependencies: - '@volar/language-core': 2.4.11 + '@volar/language-core': 2.4.12 vscode-languageserver-protocol: 3.17.5 vscode-languageserver-textdocument: 1.0.12 vscode-uri: 3.1.0 @@ -14623,16 +14794,16 @@ snapshots: dependencies: muggle-string: 0.3.1 - '@volar/source-map@2.4.11': {} + '@volar/source-map@2.4.12': {} '@volar/typescript@1.11.1': dependencies: '@volar/language-core': 1.11.1 path-browserify: 1.0.1 - '@volar/typescript@2.4.11': + '@volar/typescript@2.4.12': dependencies: - '@volar/language-core': 2.4.11 + '@volar/language-core': 2.4.12 path-browserify: 1.0.1 vscode-uri: 3.1.0 @@ -14648,7 +14819,7 @@ snapshots: '@vue/compiler-core@3.5.13': dependencies: - '@babel/parser': 7.26.9 + '@babel/parser': 7.26.10 '@vue/shared': 3.5.13 entities: 4.5.0 estree-walker: 2.0.2 @@ -14680,7 +14851,7 @@ snapshots: '@vue/language-core@2.2.0(typescript@5.6.3)': dependencies: - '@volar/language-core': 2.4.11 + '@volar/language-core': 2.4.12 '@vue/compiler-dom': 3.5.13 '@vue/compiler-vue2': 2.7.16 '@vue/shared': 3.5.13 @@ -14693,7 +14864,7 @@ snapshots: '@vue/language-core@2.2.0(typescript@5.8.2)': dependencies: - '@volar/language-core': 2.4.11 + '@volar/language-core': 2.4.12 '@vue/compiler-dom': 3.5.13 '@vue/compiler-vue2': 2.7.16 '@vue/shared': 3.5.13 @@ -14786,19 +14957,19 @@ snapshots: '@webassemblyjs/ast': 1.14.1 '@xtuc/long': 4.2.2 - '@webpack-cli/configtest@2.1.1(webpack-cli@5.1.4(webpack-dev-server@5.2.0)(webpack@5.98.0))(webpack@5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4))': + '@webpack-cli/configtest@2.1.1(webpack-cli@5.1.4(webpack-dev-server@5.2.0)(webpack@5.98.0))(webpack@5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4))': dependencies: - webpack: 5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4) + webpack: 5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4) webpack-cli: 5.1.4(webpack-dev-server@5.2.0)(webpack@5.98.0) - '@webpack-cli/info@2.0.2(webpack-cli@5.1.4(webpack-dev-server@5.2.0)(webpack@5.98.0))(webpack@5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4))': + '@webpack-cli/info@2.0.2(webpack-cli@5.1.4(webpack-dev-server@5.2.0)(webpack@5.98.0))(webpack@5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4))': dependencies: - webpack: 5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4) + webpack: 5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4) webpack-cli: 5.1.4(webpack-dev-server@5.2.0)(webpack@5.98.0) - '@webpack-cli/serve@2.0.5(webpack-cli@5.1.4(webpack-dev-server@5.2.0)(webpack@5.98.0))(webpack-dev-server@5.2.0(webpack-cli@5.1.4)(webpack@5.98.0))(webpack@5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4))': + '@webpack-cli/serve@2.0.5(webpack-cli@5.1.4(webpack-dev-server@5.2.0)(webpack@5.98.0))(webpack-dev-server@5.2.0(webpack-cli@5.1.4)(webpack@5.98.0))(webpack@5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4))': dependencies: - webpack: 5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4) + webpack: 5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4) webpack-cli: 5.1.4(webpack-dev-server@5.2.0)(webpack@5.98.0) optionalDependencies: webpack-dev-server: 5.2.0(webpack-cli@5.1.4)(webpack@5.98.0) @@ -14971,9 +15142,10 @@ snapshots: es-object-atoms: 1.1.1 es-shim-unscopables: 1.1.0 - array.prototype.findlastindex@1.2.5: + array.prototype.findlastindex@1.2.6: dependencies: call-bind: 1.0.8 + call-bound: 1.0.4 define-properties: 1.2.1 es-abstract: 1.23.9 es-errors: 1.3.0 @@ -15026,25 +15198,25 @@ snapshots: astring@1.9.0: {} - astro-expressive-code@0.40.2(astro@5.4.2(@types/node@22.13.9)(jiti@1.21.7)(rollup@4.34.9)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0)): + astro-expressive-code@0.40.2(astro@5.5.3(@types/node@22.13.10)(jiti@1.21.7)(rollup@4.36.0)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0)): dependencies: - astro: 5.4.2(@types/node@22.13.9)(jiti@1.21.7)(rollup@4.34.9)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0) + astro: 5.5.3(@types/node@22.13.10)(jiti@1.21.7)(rollup@4.36.0)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0) rehype-expressive-code: 0.40.2 - astro@5.4.2(@types/node@22.13.9)(jiti@1.21.7)(rollup@4.34.9)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0): + astro@5.5.3(@types/node@22.13.10)(jiti@1.21.7)(rollup@4.36.0)(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0): dependencies: - '@astrojs/compiler': 2.10.4 - '@astrojs/internal-helpers': 0.6.0 - '@astrojs/markdown-remark': 6.2.0 + '@astrojs/compiler': 2.11.0 + '@astrojs/internal-helpers': 0.6.1 + '@astrojs/markdown-remark': 6.3.1 '@astrojs/telemetry': 3.2.0 '@oslojs/encoding': 1.1.0 - '@rollup/pluginutils': 5.1.4(rollup@4.34.9) + '@rollup/pluginutils': 5.1.4(rollup@4.36.0) '@types/cookie': 0.6.0 acorn: 8.14.1 aria-query: 5.3.2 axobject-query: 4.1.0 boxen: 8.0.1 - ci-info: 4.1.0 + ci-info: 4.2.0 clsx: 2.1.1 common-ancestor-path: 1.0.1 cookie: 0.7.2 @@ -15056,7 +15228,7 @@ snapshots: dlv: 1.1.3 dset: 3.1.4 es-module-lexer: 1.6.0 - esbuild: 0.25.0 + esbuild: 0.25.1 estree-walker: 3.0.3 flattie: 1.1.1 github-slugger: 2.0.0 @@ -15070,12 +15242,12 @@ snapshots: neotraverse: 0.6.18 p-limit: 6.2.0 p-queue: 8.1.0 + package-manager-detector: 1.1.0 picomatch: 4.0.2 - preferred-pm: 4.1.1 prompts: 2.4.2 rehype: 13.0.2 semver: 7.7.1 - shiki: 1.29.2 + shiki: 3.2.1 tinyexec: 0.3.2 tinyglobby: 0.2.12 tsconfck: 3.1.5(typescript@5.8.2) @@ -15083,14 +15255,13 @@ snapshots: unist-util-visit: 5.0.0 unstorage: 1.15.0 vfile: 6.0.3 - vite: 6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) - vitefu: 1.0.6(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) - which-pm: 3.0.1 + vite: 6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + vitefu: 1.0.6(vite@6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) xxhash-wasm: 1.1.0 yargs-parser: 21.1.1 yocto-spinner: 0.2.1 zod: 3.24.2 - zod-to-json-schema: 3.24.3(zod@3.24.2) + zod-to-json-schema: 3.24.4(zod@3.24.2) zod-to-ts: 1.2.0(typescript@5.8.2)(zod@3.24.2) optionalDependencies: sharp: 0.33.5 @@ -15136,10 +15307,10 @@ snapshots: at-least-node@1.0.0: {} - autoprefixer@10.4.20(postcss@8.5.3): + autoprefixer@10.4.21(postcss@8.5.3): dependencies: browserslist: 4.24.4 - caniuse-lite: 1.0.30001702 + caniuse-lite: 1.0.30001706 fraction.js: 4.3.7 normalize-range: 0.1.2 picocolors: 1.1.1 @@ -15177,22 +15348,22 @@ snapshots: babel-runtime: 6.26.0 babel-types: 6.26.0 - babel-jest@29.7.0(@babel/core@7.26.9): + babel-jest@29.7.0(@babel/core@7.26.10): dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@jest/transform': 29.7.0 '@types/babel__core': 7.20.5 babel-plugin-istanbul: 6.1.1 - babel-preset-jest: 29.6.3(@babel/core@7.26.9) + babel-preset-jest: 29.6.3(@babel/core@7.26.10) chalk: 4.1.2 graceful-fs: 4.2.11 slash: 3.0.0 transitivePeerDependencies: - supports-color - babel-loader@9.2.1(@babel/core@7.26.9)(webpack@5.98.0(webpack-cli@5.1.4)): + babel-loader@9.2.1(@babel/core@7.26.10)(webpack@5.98.0(webpack-cli@5.1.4)): dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 find-cache-dir: 4.0.0 schema-utils: 4.3.0 webpack: 5.98.0(webpack-cli@5.1.4) @@ -15214,31 +15385,31 @@ snapshots: babel-plugin-jest-hoist@29.6.3: dependencies: '@babel/template': 7.26.9 - '@babel/types': 7.26.9 + '@babel/types': 7.26.10 '@types/babel__core': 7.20.5 '@types/babel__traverse': 7.20.6 - babel-plugin-polyfill-corejs2@0.4.12(@babel/core@7.26.9): + babel-plugin-polyfill-corejs2@0.4.12(@babel/core@7.26.10): dependencies: '@babel/compat-data': 7.26.8 - '@babel/core': 7.26.9 - '@babel/helper-define-polyfill-provider': 0.6.3(@babel/core@7.26.9) + '@babel/core': 7.26.10 + '@babel/helper-define-polyfill-provider': 0.6.3(@babel/core@7.26.10) semver: 6.3.1 transitivePeerDependencies: - supports-color - babel-plugin-polyfill-corejs3@0.11.1(@babel/core@7.26.9): + babel-plugin-polyfill-corejs3@0.11.1(@babel/core@7.26.10): dependencies: - '@babel/core': 7.26.9 - '@babel/helper-define-polyfill-provider': 0.6.3(@babel/core@7.26.9) + '@babel/core': 7.26.10 + '@babel/helper-define-polyfill-provider': 0.6.3(@babel/core@7.26.10) core-js-compat: 3.41.0 transitivePeerDependencies: - supports-color - babel-plugin-polyfill-regenerator@0.6.3(@babel/core@7.26.9): + babel-plugin-polyfill-regenerator@0.6.3(@babel/core@7.26.10): dependencies: - '@babel/core': 7.26.9 - '@babel/helper-define-polyfill-provider': 0.6.3(@babel/core@7.26.9) + '@babel/core': 7.26.10 + '@babel/helper-define-polyfill-provider': 0.6.3(@babel/core@7.26.10) transitivePeerDependencies: - supports-color @@ -15269,30 +15440,30 @@ snapshots: babel-runtime: 6.26.0 babel-types: 6.26.0 - babel-preset-current-node-syntax@1.1.0(@babel/core@7.26.9): - dependencies: - '@babel/core': 7.26.9 - '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.26.9) - '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.26.9) - '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.26.9) - '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.26.9) - '@babel/plugin-syntax-import-attributes': 7.26.0(@babel/core@7.26.9) - '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.26.9) - '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.26.9) - '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.26.9) - '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.26.9) - '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.26.9) - '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.26.9) - '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.26.9) - '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.26.9) - '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.26.9) - '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.26.9) - - babel-preset-jest@29.6.3(@babel/core@7.26.9): - dependencies: - '@babel/core': 7.26.9 + babel-preset-current-node-syntax@1.1.0(@babel/core@7.26.10): + dependencies: + '@babel/core': 7.26.10 + '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.26.10) + '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.26.10) + '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.26.10) + '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.26.10) + '@babel/plugin-syntax-import-attributes': 7.26.0(@babel/core@7.26.10) + '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.26.10) + '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.26.10) + '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.26.10) + '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.26.10) + '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.26.10) + '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.26.10) + '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.26.10) + '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.26.10) + '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.26.10) + '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.26.10) + + babel-preset-jest@29.6.3(@babel/core@7.26.10): + dependencies: + '@babel/core': 7.26.10 babel-plugin-jest-hoist: 29.6.3 - babel-preset-current-node-syntax: 1.1.0(@babel/core@7.26.9) + babel-preset-current-node-syntax: 1.1.0(@babel/core@7.26.10) babel-runtime@6.26.0: dependencies: @@ -15348,12 +15519,12 @@ snapshots: - bare-buffer optional: true - bare-os@3.5.1: + bare-os@3.6.0: optional: true bare-path@3.0.0: dependencies: - bare-os: 3.5.1 + bare-os: 3.6.0 optional: true bare-stream@2.6.5(bare-events@2.5.4): @@ -15467,8 +15638,8 @@ snapshots: browserslist@4.24.4: dependencies: - caniuse-lite: 1.0.30001702 - electron-to-chromium: 1.5.112 + caniuse-lite: 1.0.30001706 + electron-to-chromium: 1.5.120 node-releases: 2.0.19 update-browserslist-db: 1.1.3(browserslist@4.24.4) @@ -15534,7 +15705,7 @@ snapshots: camelcase@8.0.0: {} - caniuse-lite@1.0.30001702: {} + caniuse-lite@1.0.30001706: {} caret-xy@2.0.3: {} @@ -15608,7 +15779,7 @@ snapshots: parse5: 7.2.1 parse5-htmlparser2-tree-adapter: 7.1.0 parse5-parser-stream: 7.1.2 - undici: 6.21.1 + undici: 6.21.2 whatwg-mimetype: 4.0.0 chokidar@3.6.0: @@ -15633,7 +15804,7 @@ snapshots: ci-info@3.9.0: {} - ci-info@4.1.0: {} + ci-info@4.2.0: {} cjs-module-lexer@1.4.3: {} @@ -15678,14 +15849,14 @@ snapshots: clsx@2.1.1: {} - cmdk@1.0.4(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2): + cmdk@1.1.1(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2): dependencies: + '@radix-ui/react-compose-refs': 1.1.1(@types/react@17.0.83)(react@17.0.2) '@radix-ui/react-dialog': 1.1.6(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2) '@radix-ui/react-id': 1.1.0(@types/react@17.0.83)(react@17.0.2) '@radix-ui/react-primitive': 2.0.2(@types/react-dom@17.0.26(@types/react@17.0.83))(@types/react@17.0.83)(react-dom@17.0.2(react@17.0.2))(react@17.0.2) react: 17.0.2 react-dom: 17.0.2(react@17.0.2) - use-sync-external-store: 1.4.0(react@17.0.2) transitivePeerDependencies: - '@types/react' - '@types/react-dom' @@ -15755,7 +15926,7 @@ snapshots: compressible@2.0.18: dependencies: - mime-db: 1.53.0 + mime-db: 1.54.0 compression@1.8.0: dependencies: @@ -15845,13 +16016,13 @@ snapshots: - supports-color - ts-node - create-jest@29.7.0(@types/node@20.17.23): + create-jest@29.7.0(@types/node@20.17.24): dependencies: '@jest/types': 29.6.3 chalk: 4.1.2 exit: 0.1.2 graceful-fs: 4.2.11 - jest-config: 29.7.0(@types/node@20.17.23) + jest-config: 29.7.0(@types/node@20.17.24) jest-util: 29.7.0 prompts: 2.4.2 transitivePeerDependencies: @@ -15878,7 +16049,7 @@ snapshots: dependencies: uncrypto: 0.1.3 - css-loader@7.1.2(webpack@5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4)): + css-loader@7.1.2(webpack@5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4)): dependencies: icss-utils: 5.1.0(postcss@8.5.3) postcss: 8.5.3 @@ -15889,7 +16060,7 @@ snapshots: postcss-value-parser: 4.2.0 semver: 7.7.1 optionalDependencies: - webpack: 5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4) + webpack: 5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4) css-loader@7.1.2(webpack@5.98.0(webpack-cli@5.1.4)): dependencies: @@ -15920,7 +16091,7 @@ snapshots: domutils: 3.2.2 nth-check: 2.1.1 - css-selector-parser@3.0.5: {} + css-selector-parser@3.1.1: {} css-what@6.1.0: {} @@ -15928,9 +16099,9 @@ snapshots: cssesc@3.0.0: {} - cssstyle@4.2.1: + cssstyle@4.3.0: dependencies: - '@asamuzakjp/css-color': 2.8.3 + '@asamuzakjp/css-color': 3.1.1 rrweb-cssom: 0.8.0 csstype@3.1.3: {} @@ -15940,7 +16111,7 @@ snapshots: data-urls@5.0.0: dependencies: whatwg-mimetype: 4.0.0 - whatwg-url: 14.1.1 + whatwg-url: 14.2.0 data-view-buffer@1.0.2: dependencies: @@ -15978,7 +16149,7 @@ snapshots: decimal.js@10.5.0: {} - decode-named-character-reference@1.0.2: + decode-named-character-reference@1.1.0: dependencies: character-entities: 2.0.2 @@ -16009,7 +16180,7 @@ snapshots: side-channel: 1.1.0 which-boxed-primitive: 1.1.1 which-collection: 1.0.2 - which-typed-array: 1.1.18 + which-typed-array: 1.1.19 deep-extend@0.6.0: {} @@ -16175,7 +16346,7 @@ snapshots: dependencies: jake: 10.9.2 - electron-to-chromium@1.5.112: {} + electron-to-chromium@1.5.120: {} embla-carousel-react@8.5.2(react@17.0.2): dependencies: @@ -16294,7 +16465,7 @@ snapshots: typed-array-byte-offset: 1.0.4 typed-array-length: 1.0.7 unbox-primitive: 1.1.0 - which-typed-array: 1.1.18 + which-typed-array: 1.1.19 es-define-property@1.0.1: {} @@ -16419,33 +16590,33 @@ snapshots: '@esbuild/win32-ia32': 0.21.5 '@esbuild/win32-x64': 0.21.5 - esbuild@0.25.0: + esbuild@0.25.1: optionalDependencies: - '@esbuild/aix-ppc64': 0.25.0 - '@esbuild/android-arm': 0.25.0 - '@esbuild/android-arm64': 0.25.0 - '@esbuild/android-x64': 0.25.0 - '@esbuild/darwin-arm64': 0.25.0 - '@esbuild/darwin-x64': 0.25.0 - '@esbuild/freebsd-arm64': 0.25.0 - '@esbuild/freebsd-x64': 0.25.0 - '@esbuild/linux-arm': 0.25.0 - '@esbuild/linux-arm64': 0.25.0 - '@esbuild/linux-ia32': 0.25.0 - '@esbuild/linux-loong64': 0.25.0 - '@esbuild/linux-mips64el': 0.25.0 - '@esbuild/linux-ppc64': 0.25.0 - '@esbuild/linux-riscv64': 0.25.0 - '@esbuild/linux-s390x': 0.25.0 - '@esbuild/linux-x64': 0.25.0 - '@esbuild/netbsd-arm64': 0.25.0 - '@esbuild/netbsd-x64': 0.25.0 - '@esbuild/openbsd-arm64': 0.25.0 - '@esbuild/openbsd-x64': 0.25.0 - '@esbuild/sunos-x64': 0.25.0 - '@esbuild/win32-arm64': 0.25.0 - '@esbuild/win32-ia32': 0.25.0 - '@esbuild/win32-x64': 0.25.0 + '@esbuild/aix-ppc64': 0.25.1 + '@esbuild/android-arm': 0.25.1 + '@esbuild/android-arm64': 0.25.1 + '@esbuild/android-x64': 0.25.1 + '@esbuild/darwin-arm64': 0.25.1 + '@esbuild/darwin-x64': 0.25.1 + '@esbuild/freebsd-arm64': 0.25.1 + '@esbuild/freebsd-x64': 0.25.1 + '@esbuild/linux-arm': 0.25.1 + '@esbuild/linux-arm64': 0.25.1 + '@esbuild/linux-ia32': 0.25.1 + '@esbuild/linux-loong64': 0.25.1 + '@esbuild/linux-mips64el': 0.25.1 + '@esbuild/linux-ppc64': 0.25.1 + '@esbuild/linux-riscv64': 0.25.1 + '@esbuild/linux-s390x': 0.25.1 + '@esbuild/linux-x64': 0.25.1 + '@esbuild/netbsd-arm64': 0.25.1 + '@esbuild/netbsd-x64': 0.25.1 + '@esbuild/openbsd-arm64': 0.25.1 + '@esbuild/openbsd-x64': 0.25.1 + '@esbuild/sunos-x64': 0.25.1 + '@esbuild/win32-arm64': 0.25.1 + '@esbuild/win32-ia32': 0.25.1 + '@esbuild/win32-x64': 0.25.1 escalade@3.2.0: {} @@ -16471,29 +16642,29 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-import-resolver-typescript@3.8.3(eslint-plugin-import@2.31.0)(eslint@8.57.1): + eslint-import-resolver-typescript@3.9.1(eslint-plugin-import@2.31.0)(eslint@8.57.1): dependencies: '@nolyfill/is-core-module': 1.0.39 debug: 4.4.0 - enhanced-resolve: 5.18.1 eslint: 8.57.1 get-tsconfig: 4.10.0 is-bun-module: 1.3.0 - stable-hash: 0.0.4 + rspack-resolver: 1.2.2 + stable-hash: 0.0.5 tinyglobby: 0.2.12 optionalDependencies: - eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.8.3)(eslint@8.57.1) + eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.9.1)(eslint@8.57.1) transitivePeerDependencies: - supports-color - eslint-module-utils@2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.8.3(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1): + eslint-module-utils@2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.9.1(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1): dependencies: debug: 3.2.7 optionalDependencies: '@typescript-eslint/parser': 6.21.0(eslint@8.57.1)(typescript@5.8.2) eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.8.3(eslint-plugin-import@2.31.0)(eslint@8.57.1) + eslint-import-resolver-typescript: 3.9.1(eslint-plugin-import@2.31.0)(eslint@8.57.1) transitivePeerDependencies: - supports-color @@ -16502,18 +16673,18 @@ snapshots: lodash: 4.17.21 requireindex: 1.1.0 - eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.8.3)(eslint@8.57.1): + eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.9.1)(eslint@8.57.1): dependencies: '@rtsao/scc': 1.1.0 array-includes: 3.1.8 - array.prototype.findlastindex: 1.2.5 + array.prototype.findlastindex: 1.2.6 array.prototype.flat: 1.3.3 array.prototype.flatmap: 1.3.3 debug: 3.2.7 doctrine: 2.1.0 eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.8.3(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1) + eslint-module-utils: 2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.9.1(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1) hasown: 2.0.2 is-core-module: 2.16.1 is-glob: 4.0.3 @@ -16585,7 +16756,7 @@ snapshots: hasown: 2.0.2 jsx-ast-utils: 3.3.5 minimatch: 3.1.2 - object.entries: 1.1.8 + object.entries: 1.1.9 object.fromentries: 2.0.8 object.values: 1.2.1 prop-types: 15.8.1 @@ -16616,7 +16787,7 @@ snapshots: eslint@8.57.1: dependencies: - '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1) + '@eslint-community/eslint-utils': 4.5.1(eslint@8.57.1) '@eslint-community/regexpp': 4.12.1 '@eslint/eslintrc': 2.1.4 '@eslint/js': 8.57.1 @@ -16811,7 +16982,7 @@ snapshots: '@expressive-code/plugin-shiki': 0.40.2 '@expressive-code/plugin-text-markers': 0.40.2 - exsolve@1.0.1: {} + exsolve@1.0.4: {} extend@3.0.2: {} @@ -16892,8 +17063,6 @@ snapshots: common-path-prefix: 3.0.0 pkg-dir: 7.0.0 - find-up-simple@1.0.1: {} - find-up@4.1.0: dependencies: locate-path: 5.0.0 @@ -16909,11 +17078,6 @@ snapshots: locate-path: 7.2.0 path-exists: 5.0.0 - find-yarn-workspace-root2@1.2.16: - dependencies: - micromatch: 4.0.8 - pkg-dir: 4.2.0 - find-yarn-workspace-root@2.0.0: dependencies: micromatch: 4.0.8 @@ -17306,7 +17470,7 @@ snapshots: '@types/unist': 3.0.3 bcp-47-match: 2.0.3 comma-separated-tokens: 2.0.3 - css-selector-parser: 3.0.5 + css-selector-parser: 3.1.1 devlop: 1.1.0 direction: 2.0.1 hast-util-has-property: 3.0.0 @@ -17472,7 +17636,7 @@ snapshots: html-void-elements@3.0.0: {} - html-webpack-plugin@5.6.3(webpack@5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4)): + html-webpack-plugin@5.6.3(webpack@5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4)): dependencies: '@types/html-minifier-terser': 6.1.0 html-minifier-terser: 6.1.0 @@ -17480,7 +17644,7 @@ snapshots: pretty-error: 4.0.0 tapable: 2.2.1 optionalDependencies: - webpack: 5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4) + webpack: 5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4) html-webpack-plugin@5.6.3(webpack@5.98.0(webpack-cli@5.1.4)): dependencies: @@ -17573,20 +17737,20 @@ snapshots: i18next-browser-languagedetector@8.0.4: dependencies: - '@babel/runtime': 7.26.9 + '@babel/runtime': 7.26.10 i18next-parser@9.3.0: dependencies: - '@babel/runtime': 7.26.9 + '@babel/runtime': 7.26.10 broccoli-plugin: 4.0.7 cheerio: 1.0.0 colors: 1.4.0 commander: 12.1.0 eol: 0.9.1 - esbuild: 0.25.0 + esbuild: 0.25.1 fs-extra: 11.3.0 gulp-sort: 2.0.0 - i18next: 24.2.2(typescript@5.6.3) + i18next: 24.2.3(typescript@5.6.3) js-yaml: 4.1.0 lilconfig: 3.1.3 rsvp: 4.8.5 @@ -17599,17 +17763,17 @@ snapshots: i18next@23.16.8: dependencies: - '@babel/runtime': 7.26.9 + '@babel/runtime': 7.26.10 - i18next@24.2.2(typescript@5.6.3): + i18next@24.2.3(typescript@5.6.3): dependencies: - '@babel/runtime': 7.26.9 + '@babel/runtime': 7.26.10 optionalDependencies: typescript: 5.6.3 - i18next@24.2.2(typescript@5.8.2): + i18next@24.2.3(typescript@5.8.2): dependencies: - '@babel/runtime': 7.26.9 + '@babel/runtime': 7.26.10 optionalDependencies: typescript: 5.8.2 @@ -17852,7 +18016,7 @@ snapshots: is-typed-array@1.1.15: dependencies: - which-typed-array: 1.1.18 + which-typed-array: 1.1.19 is-valid-glob@1.0.0: {} @@ -17887,8 +18051,8 @@ snapshots: istanbul-lib-instrument@5.2.1: dependencies: - '@babel/core': 7.26.9 - '@babel/parser': 7.26.9 + '@babel/core': 7.26.10 + '@babel/parser': 7.26.10 '@istanbuljs/schema': 0.1.3 istanbul-lib-coverage: 3.2.2 semver: 6.3.1 @@ -17897,8 +18061,8 @@ snapshots: istanbul-lib-instrument@6.0.3: dependencies: - '@babel/core': 7.26.9 - '@babel/parser': 7.26.9 + '@babel/core': 7.26.10 + '@babel/parser': 7.26.10 '@istanbuljs/schema': 0.1.3 istanbul-lib-coverage: 3.2.2 semver: 7.7.1 @@ -17972,7 +18136,7 @@ snapshots: '@jest/expect': 29.7.0 '@jest/test-result': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 22.13.9 + '@types/node': 22.13.10 chalk: 4.1.2 co: 4.6.0 dedent: 1.5.3 @@ -18011,16 +18175,16 @@ snapshots: - supports-color - ts-node - jest-cli@29.7.0(@types/node@20.17.23): + jest-cli@29.7.0(@types/node@20.17.24): dependencies: '@jest/core': 29.7.0 '@jest/test-result': 29.7.0 '@jest/types': 29.6.3 chalk: 4.1.2 - create-jest: 29.7.0(@types/node@20.17.23) + create-jest: 29.7.0(@types/node@20.17.24) exit: 0.1.2 import-local: 3.2.0 - jest-config: 29.7.0(@types/node@20.17.23) + jest-config: 29.7.0(@types/node@20.17.24) jest-util: 29.7.0 jest-validate: 29.7.0 yargs: 17.7.2 @@ -18032,10 +18196,10 @@ snapshots: jest-config@29.7.0(@types/node@16.18.126): dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@jest/test-sequencer': 29.7.0 '@jest/types': 29.6.3 - babel-jest: 29.7.0(@babel/core@7.26.9) + babel-jest: 29.7.0(@babel/core@7.26.10) chalk: 4.1.2 ci-info: 3.9.0 deepmerge: 4.3.1 @@ -18060,12 +18224,12 @@ snapshots: - babel-plugin-macros - supports-color - jest-config@29.7.0(@types/node@20.17.23): + jest-config@29.7.0(@types/node@20.17.24): dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@jest/test-sequencer': 29.7.0 '@jest/types': 29.6.3 - babel-jest: 29.7.0(@babel/core@7.26.9) + babel-jest: 29.7.0(@babel/core@7.26.10) chalk: 4.1.2 ci-info: 3.9.0 deepmerge: 4.3.1 @@ -18085,17 +18249,17 @@ snapshots: slash: 3.0.0 strip-json-comments: 3.1.1 optionalDependencies: - '@types/node': 20.17.23 + '@types/node': 20.17.24 transitivePeerDependencies: - babel-plugin-macros - supports-color - jest-config@29.7.0(@types/node@22.13.9): + jest-config@29.7.0(@types/node@22.13.10): dependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@jest/test-sequencer': 29.7.0 '@jest/types': 29.6.3 - babel-jest: 29.7.0(@babel/core@7.26.9) + babel-jest: 29.7.0(@babel/core@7.26.10) chalk: 4.1.2 ci-info: 3.9.0 deepmerge: 4.3.1 @@ -18115,7 +18279,7 @@ snapshots: slash: 3.0.0 strip-json-comments: 3.1.1 optionalDependencies: - '@types/node': 22.13.9 + '@types/node': 22.13.10 transitivePeerDependencies: - babel-plugin-macros - supports-color @@ -18151,7 +18315,7 @@ snapshots: '@jest/environment': 29.7.0 '@jest/fake-timers': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 22.13.9 + '@types/node': 22.13.10 jest-mock: 29.7.0 jest-util: 29.7.0 @@ -18163,7 +18327,7 @@ snapshots: dependencies: '@jest/types': 29.6.3 '@types/graceful-fs': 4.1.9 - '@types/node': 22.13.9 + '@types/node': 22.13.10 anymatch: 3.1.3 fb-watchman: 2.0.2 graceful-fs: 4.2.11 @@ -18209,7 +18373,7 @@ snapshots: jest-mock@29.7.0: dependencies: '@jest/types': 29.6.3 - '@types/node': 22.13.9 + '@types/node': 22.13.10 jest-util: 29.7.0 jest-pnp-resolver@1.2.3(jest-resolve@29.7.0): @@ -18244,7 +18408,7 @@ snapshots: '@jest/test-result': 29.7.0 '@jest/transform': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 22.13.9 + '@types/node': 22.13.10 chalk: 4.1.2 emittery: 0.13.1 graceful-fs: 4.2.11 @@ -18272,7 +18436,7 @@ snapshots: '@jest/test-result': 29.7.0 '@jest/transform': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 22.13.9 + '@types/node': 22.13.10 chalk: 4.1.2 cjs-module-lexer: 1.4.3 collect-v8-coverage: 1.0.2 @@ -18292,15 +18456,15 @@ snapshots: jest-snapshot@29.7.0: dependencies: - '@babel/core': 7.26.9 - '@babel/generator': 7.26.9 - '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.9) - '@babel/plugin-syntax-typescript': 7.25.9(@babel/core@7.26.9) - '@babel/types': 7.26.9 + '@babel/core': 7.26.10 + '@babel/generator': 7.26.10 + '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.10) + '@babel/plugin-syntax-typescript': 7.25.9(@babel/core@7.26.10) + '@babel/types': 7.26.10 '@jest/expect-utils': 29.7.0 '@jest/transform': 29.7.0 '@jest/types': 29.6.3 - babel-preset-current-node-syntax: 1.1.0(@babel/core@7.26.9) + babel-preset-current-node-syntax: 1.1.0(@babel/core@7.26.10) chalk: 4.1.2 expect: 29.7.0 graceful-fs: 4.2.11 @@ -18337,7 +18501,7 @@ snapshots: dependencies: '@jest/test-result': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 22.13.9 + '@types/node': 22.13.10 ansi-escapes: 4.3.2 chalk: 4.1.2 emittery: 0.13.1 @@ -18346,13 +18510,13 @@ snapshots: jest-worker@27.5.1: dependencies: - '@types/node': 22.13.9 + '@types/node': 22.13.10 merge-stream: 2.0.0 supports-color: 8.1.1 jest-worker@29.7.0: dependencies: - '@types/node': 22.13.9 + '@types/node': 22.13.10 jest-util: 29.7.0 merge-stream: 2.0.0 supports-color: 8.1.1 @@ -18369,12 +18533,12 @@ snapshots: - supports-color - ts-node - jest@29.7.0(@types/node@20.17.23): + jest@29.7.0(@types/node@20.17.24): dependencies: '@jest/core': 29.7.0 '@jest/types': 29.6.3 import-local: 3.2.0 - jest-cli: 29.7.0(@types/node@20.17.23) + jest-cli: 29.7.0(@types/node@20.17.24) transitivePeerDependencies: - '@types/node' - babel-plugin-macros @@ -18385,7 +18549,7 @@ snapshots: jju@1.4.0: {} - jotai@2.12.1(@types/react@17.0.83)(react@17.0.2): + jotai@2.12.2(@types/react@17.0.83)(react@17.0.2): optionalDependencies: '@types/react': 17.0.83 react: 17.0.2 @@ -18407,7 +18571,7 @@ snapshots: jsdom@25.0.1: dependencies: - cssstyle: 4.2.1 + cssstyle: 4.3.0 data-urls: 5.0.0 decimal.js: 10.5.0 form-data: 4.0.2 @@ -18415,7 +18579,7 @@ snapshots: http-proxy-agent: 7.0.2 https-proxy-agent: 7.0.6 is-potential-custom-element-name: 1.0.1 - nwsapi: 2.2.18 + nwsapi: 2.2.19 parse5: 7.2.1 rrweb-cssom: 0.7.1 saxes: 6.0.0 @@ -18425,7 +18589,7 @@ snapshots: webidl-conversions: 7.0.0 whatwg-encoding: 3.1.1 whatwg-mimetype: 4.0.0 - whatwg-url: 14.1.1 + whatwg-url: 14.2.0 ws: 8.18.1 xml-name-validator: 5.0.0 transitivePeerDependencies: @@ -18532,7 +18696,7 @@ snapshots: lines-and-columns@1.2.4: {} - lint-staged@15.4.3: + lint-staged@15.5.0: dependencies: chalk: 5.4.1 commander: 13.1.0 @@ -18563,13 +18727,6 @@ snapshots: pify: 3.0.0 strip-bom: 3.0.0 - load-yaml-file@0.2.0: - dependencies: - graceful-fs: 4.2.11 - js-yaml: 3.14.1 - pify: 4.0.1 - strip-bom: 3.0.0 - loader-runner@4.3.0: {} loader-utils@2.0.4: @@ -18664,8 +18821,8 @@ snapshots: magicast@0.3.5: dependencies: - '@babel/parser': 7.26.9 - '@babel/types': 7.26.9 + '@babel/parser': 7.26.10 + '@babel/types': 7.26.10 source-map-js: 1.2.1 make-dir@4.0.0: @@ -18684,7 +18841,7 @@ snapshots: match-sorter@6.4.0: dependencies: - '@babel/runtime': 7.26.9 + '@babel/runtime': 7.26.10 remove-accents: 0.5.0 matcher-collection@2.0.1: @@ -18725,7 +18882,7 @@ snapshots: dependencies: '@types/mdast': 4.0.4 '@types/unist': 3.0.3 - decode-named-character-reference: 1.0.2 + decode-named-character-reference: 1.1.0 devlop: 1.1.0 mdast-util-to-string: 4.0.0 micromark: 4.0.2 @@ -18881,7 +19038,7 @@ snapshots: memfs@4.17.0: dependencies: - '@jsonjoy.com/json-pack': 1.1.1(tslib@2.8.1) + '@jsonjoy.com/json-pack': 1.2.0(tslib@2.8.1) '@jsonjoy.com/util': 1.5.0(tslib@2.8.1) tree-dump: 1.0.2(tslib@2.8.1) tslib: 2.8.1 @@ -18900,7 +19057,7 @@ snapshots: micromark-core-commonmark@2.0.3: dependencies: - decode-named-character-reference: 1.0.2 + decode-named-character-reference: 1.1.0 devlop: 1.1.0 micromark-factory-destination: 2.0.1 micromark-factory-label: 2.0.1 @@ -19107,7 +19264,7 @@ snapshots: micromark-util-decode-string@2.0.1: dependencies: - decode-named-character-reference: 1.0.2 + decode-named-character-reference: 1.1.0 micromark-util-character: 2.1.1 micromark-util-decode-numeric-character-reference: 2.0.2 micromark-util-symbol: 2.0.1 @@ -19156,7 +19313,7 @@ snapshots: dependencies: '@types/debug': 4.1.12 debug: 4.4.0 - decode-named-character-reference: 1.0.2 + decode-named-character-reference: 1.1.0 devlop: 1.1.0 micromark-core-commonmark: 2.0.3 micromark-factory-space: 2.0.1 @@ -19181,7 +19338,7 @@ snapshots: mime-db@1.52.0: {} - mime-db@1.53.0: {} + mime-db@1.54.0: {} mime-types@2.1.35: dependencies: @@ -19250,11 +19407,11 @@ snapshots: moment@2.30.1: {} - monaco-editor-webpack-plugin@7.1.0(monaco-editor@0.40.0)(webpack@5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4)): + monaco-editor-webpack-plugin@7.1.0(monaco-editor@0.40.0)(webpack@5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4)): dependencies: loader-utils: 2.0.4 monaco-editor: 0.40.0 - webpack: 5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4) + webpack: 5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4) monaco-editor-webpack-plugin@7.1.0(monaco-editor@0.40.0)(webpack@5.98.0(webpack-cli@5.1.4)): dependencies: @@ -19309,7 +19466,7 @@ snapshots: object-assign: 4.1.1 thenify-all: 1.6.0 - nanoid@3.3.8: {} + nanoid@3.3.11: {} napi-build-utils@2.0.0: {} @@ -19398,7 +19555,7 @@ snapshots: dependencies: boolbase: 1.0.0 - nwsapi@2.2.18: {} + nwsapi@2.2.19: {} object-assign@4.1.1: {} @@ -19422,9 +19579,10 @@ snapshots: has-symbols: 1.1.0 object-keys: 1.1.1 - object.entries@1.1.8: + object.entries@1.1.9: dependencies: call-bind: 1.0.8 + call-bound: 1.0.4 define-properties: 1.2.1 es-object-atoms: 1.1.1 @@ -19478,12 +19636,21 @@ snapshots: dependencies: mimic-function: 5.0.1 + oniguruma-parser@0.5.4: {} + oniguruma-to-es@2.3.0: dependencies: emoji-regex-xs: 1.0.0 regex: 5.1.1 regex-recursion: 5.1.1 + oniguruma-to-es@4.1.0: + dependencies: + emoji-regex-xs: 1.0.0 + oniguruma-parser: 0.5.4 + regex: 6.0.1 + regex-recursion: 6.0.2 + open@10.1.0: dependencies: default-browser: 5.2.1 @@ -19525,11 +19692,11 @@ snapshots: p-limit@4.0.0: dependencies: - yocto-queue: 1.1.1 + yocto-queue: 1.2.0 p-limit@6.2.0: dependencies: - yocto-queue: 1.1.1 + yocto-queue: 1.2.0 p-locate@4.1.0: dependencies: @@ -19560,6 +19727,8 @@ snapshots: package-json-from-dist@1.0.1: {} + package-manager-detector@1.1.0: {} + pagefind@1.3.0: optionalDependencies: '@pagefind/darwin-arm64': 1.3.0 @@ -19582,7 +19751,7 @@ snapshots: '@types/unist': 2.0.11 character-entities-legacy: 3.0.0 character-reference-invalid: 2.0.1 - decode-named-character-reference: 1.0.2 + decode-named-character-reference: 1.1.0 is-alphanumerical: 2.0.1 is-decimal: 2.0.1 is-hexadecimal: 2.0.1 @@ -19711,8 +19880,6 @@ snapshots: pify@3.0.0: {} - pify@4.0.1: {} - pirates@4.0.6: {} pkg-dir@4.2.0: @@ -19732,7 +19899,7 @@ snapshots: pkg-types@2.1.0: dependencies: confbox: 0.2.1 - exsolve: 1.0.1 + exsolve: 1.0.4 pathe: 2.0.3 pluralize@8.0.0: {} @@ -19762,14 +19929,14 @@ snapshots: optionalDependencies: postcss: 8.5.3 - postcss-loader@8.1.1(postcss@8.5.3)(typescript@5.8.2)(webpack@5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4)): + postcss-loader@8.1.1(postcss@8.5.3)(typescript@5.8.2)(webpack@5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4)): dependencies: cosmiconfig: 9.0.0(typescript@5.8.2) jiti: 1.21.7 postcss: 8.5.3 semver: 7.7.1 optionalDependencies: - webpack: 5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4) + webpack: 5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4) transitivePeerDependencies: - typescript @@ -19820,7 +19987,7 @@ snapshots: postcss@8.5.3: dependencies: - nanoid: 3.3.8 + nanoid: 3.3.11 picocolors: 1.1.1 source-map-js: 1.2.1 @@ -19839,12 +20006,6 @@ snapshots: tar-fs: 2.1.2 tunnel-agent: 0.6.0 - preferred-pm@4.1.1: - dependencies: - find-up-simple: 1.0.1 - find-yarn-workspace-root2: 1.2.16 - which-pm: 3.0.1 - prelude-ls@1.2.1: {} prettier-linter-helpers@1.0.0: @@ -19853,7 +20014,7 @@ snapshots: prettier-plugin-astro@0.14.1: dependencies: - '@astrojs/compiler': 2.10.4 + '@astrojs/compiler': 2.11.0 prettier: 3.5.3 sass-formatter: 0.7.9 @@ -19894,7 +20055,7 @@ snapshots: clsx: 2.1.1 react: 17.0.2 - prismjs@1.29.0: {} + prismjs@1.30.0: {} process-nextick-args@2.0.1: {} @@ -19939,6 +20100,10 @@ snapshots: dependencies: side-channel: 1.1.0 + qs@6.14.0: + dependencies: + side-channel: 1.1.0 + quansync@0.2.8: {} queue-microtask@1.2.3: {} @@ -19964,11 +20129,11 @@ snapshots: iconv-lite: 0.4.24 unpipe: 1.0.0 - raw-loader@4.0.2(webpack@5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4)): + raw-loader@4.0.2(webpack@5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4)): dependencies: loader-utils: 2.0.4 schema-utils: 3.3.0 - webpack: 5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4) + webpack: 5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4) rc@1.2.8: dependencies: @@ -19993,25 +20158,25 @@ snapshots: dependencies: react: 17.0.2 - react-i18next@15.4.1(i18next@24.2.2(typescript@5.6.3))(react-dom@17.0.2(react@17.0.2))(react@17.0.2): + react-i18next@15.4.1(i18next@24.2.3(typescript@5.6.3))(react-dom@17.0.2(react@17.0.2))(react@17.0.2): dependencies: - '@babel/runtime': 7.26.9 + '@babel/runtime': 7.26.10 html-parse-stringify: 3.0.1 - i18next: 24.2.2(typescript@5.6.3) + i18next: 24.2.3(typescript@5.6.3) react: 17.0.2 optionalDependencies: react-dom: 17.0.2(react@17.0.2) - react-i18next@15.4.1(i18next@24.2.2(typescript@5.8.2))(react-dom@17.0.2(react@17.0.2))(react@17.0.2): + react-i18next@15.4.1(i18next@24.2.3(typescript@5.8.2))(react-dom@17.0.2(react@17.0.2))(react@17.0.2): dependencies: - '@babel/runtime': 7.26.9 + '@babel/runtime': 7.26.10 html-parse-stringify: 3.0.1 - i18next: 24.2.2(typescript@5.8.2) + i18next: 24.2.3(typescript@5.8.2) react: 17.0.2 optionalDependencies: react-dom: 17.0.2(react@17.0.2) - react-intersection-observer@9.15.1(react-dom@17.0.2(react@17.0.2))(react@17.0.2): + react-intersection-observer@9.16.0(react-dom@17.0.2(react@17.0.2))(react@17.0.2): dependencies: react: 17.0.2 optionalDependencies: @@ -20194,7 +20359,7 @@ snapshots: get-proto: 1.0.1 which-builtin-type: 1.2.1 - refractor@4.8.1: + refractor@4.9.0: dependencies: '@types/hast': 2.3.10 '@types/prismjs': 1.26.5 @@ -20213,19 +20378,27 @@ snapshots: regenerator-transform@0.15.2: dependencies: - '@babel/runtime': 7.26.9 + '@babel/runtime': 7.26.10 regex-recursion@5.1.1: dependencies: regex: 5.1.1 regex-utilities: 2.3.0 + regex-recursion@6.0.2: + dependencies: + regex-utilities: 2.3.0 + regex-utilities@2.3.0: {} regex@5.1.1: dependencies: regex-utilities: 2.3.0 + regex@6.0.1: + dependencies: + regex-utilities: 2.3.0 + regexp.prototype.flags@1.5.4: dependencies: call-bind: 1.0.8 @@ -20298,7 +20471,7 @@ snapshots: dependencies: hast-util-to-string: 3.0.1 parse-numeric-range: 1.3.0 - refractor: 4.8.1 + refractor: 4.9.0 rehype-parse: 9.0.1 unist-util-filter: 5.0.1 unist-util-visit: 5.0.0 @@ -20529,35 +20702,49 @@ snapshots: optionalDependencies: fsevents: 2.3.3 - rollup@4.34.9: + rollup@4.36.0: dependencies: '@types/estree': 1.0.6 optionalDependencies: - '@rollup/rollup-android-arm-eabi': 4.34.9 - '@rollup/rollup-android-arm64': 4.34.9 - '@rollup/rollup-darwin-arm64': 4.34.9 - '@rollup/rollup-darwin-x64': 4.34.9 - '@rollup/rollup-freebsd-arm64': 4.34.9 - '@rollup/rollup-freebsd-x64': 4.34.9 - '@rollup/rollup-linux-arm-gnueabihf': 4.34.9 - '@rollup/rollup-linux-arm-musleabihf': 4.34.9 - '@rollup/rollup-linux-arm64-gnu': 4.34.9 - '@rollup/rollup-linux-arm64-musl': 4.34.9 - '@rollup/rollup-linux-loongarch64-gnu': 4.34.9 - '@rollup/rollup-linux-powerpc64le-gnu': 4.34.9 - '@rollup/rollup-linux-riscv64-gnu': 4.34.9 - '@rollup/rollup-linux-s390x-gnu': 4.34.9 - '@rollup/rollup-linux-x64-gnu': 4.34.9 - '@rollup/rollup-linux-x64-musl': 4.34.9 - '@rollup/rollup-win32-arm64-msvc': 4.34.9 - '@rollup/rollup-win32-ia32-msvc': 4.34.9 - '@rollup/rollup-win32-x64-msvc': 4.34.9 + '@rollup/rollup-android-arm-eabi': 4.36.0 + '@rollup/rollup-android-arm64': 4.36.0 + '@rollup/rollup-darwin-arm64': 4.36.0 + '@rollup/rollup-darwin-x64': 4.36.0 + '@rollup/rollup-freebsd-arm64': 4.36.0 + '@rollup/rollup-freebsd-x64': 4.36.0 + '@rollup/rollup-linux-arm-gnueabihf': 4.36.0 + '@rollup/rollup-linux-arm-musleabihf': 4.36.0 + '@rollup/rollup-linux-arm64-gnu': 4.36.0 + '@rollup/rollup-linux-arm64-musl': 4.36.0 + '@rollup/rollup-linux-loongarch64-gnu': 4.36.0 + '@rollup/rollup-linux-powerpc64le-gnu': 4.36.0 + '@rollup/rollup-linux-riscv64-gnu': 4.36.0 + '@rollup/rollup-linux-s390x-gnu': 4.36.0 + '@rollup/rollup-linux-x64-gnu': 4.36.0 + '@rollup/rollup-linux-x64-musl': 4.36.0 + '@rollup/rollup-win32-arm64-msvc': 4.36.0 + '@rollup/rollup-win32-ia32-msvc': 4.36.0 + '@rollup/rollup-win32-x64-msvc': 4.36.0 fsevents: 2.3.3 rrweb-cssom@0.7.1: {} rrweb-cssom@0.8.0: {} + rspack-resolver@1.2.2: + optionalDependencies: + '@unrs/rspack-resolver-binding-darwin-arm64': 1.2.2 + '@unrs/rspack-resolver-binding-darwin-x64': 1.2.2 + '@unrs/rspack-resolver-binding-freebsd-x64': 1.2.2 + '@unrs/rspack-resolver-binding-linux-arm-gnueabihf': 1.2.2 + '@unrs/rspack-resolver-binding-linux-arm64-gnu': 1.2.2 + '@unrs/rspack-resolver-binding-linux-arm64-musl': 1.2.2 + '@unrs/rspack-resolver-binding-linux-x64-gnu': 1.2.2 + '@unrs/rspack-resolver-binding-linux-x64-musl': 1.2.2 + '@unrs/rspack-resolver-binding-wasm32-wasi': 1.2.2 + '@unrs/rspack-resolver-binding-win32-arm64-msvc': 1.2.2 + '@unrs/rspack-resolver-binding-win32-x64-msvc': 1.2.2 + rsvp@3.2.1: {} rsvp@4.8.5: {} @@ -20784,6 +20971,17 @@ snapshots: '@shikijs/vscode-textmate': 10.0.2 '@types/hast': 3.0.4 + shiki@3.2.1: + dependencies: + '@shikijs/core': 3.2.1 + '@shikijs/engine-javascript': 3.2.1 + '@shikijs/engine-oniguruma': 3.2.1 + '@shikijs/langs': 3.2.1 + '@shikijs/themes': 3.2.1 + '@shikijs/types': 3.2.1 + '@shikijs/vscode-textmate': 10.0.2 + '@types/hast': 3.0.4 + side-channel-list@1.0.0: dependencies: es-errors: 1.3.0 @@ -20938,7 +21136,7 @@ snapshots: sprintf-js@1.1.3: {} - stable-hash@0.0.4: {} + stable-hash@0.0.5: {} stack-utils@2.0.6: dependencies: @@ -21115,9 +21313,9 @@ snapshots: prettier: 3.5.3 tinycolor2: 1.6.0 - style-loader@4.0.0(webpack@5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4)): + style-loader@4.0.0(webpack@5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4)): dependencies: - webpack: 5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4) + webpack: 5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4) style-loader@4.0.0(webpack@5.98.0(webpack-cli@5.1.4)): dependencies: @@ -21163,11 +21361,11 @@ snapshots: svg-parser@2.0.4: {} - swc-loader@0.2.6(@swc/core@1.11.7)(webpack@5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4)): + swc-loader@0.2.6(@swc/core@1.11.11)(webpack@5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4)): dependencies: - '@swc/core': 1.11.7 + '@swc/core': 1.11.11 '@swc/counter': 0.1.3 - webpack: 5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4) + webpack: 5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4) symbol-tree@3.2.4: {} @@ -21250,18 +21448,18 @@ snapshots: dependencies: streamx: 2.22.0 - terser-webpack-plugin@5.3.11(@swc/core@1.11.7)(webpack@5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4)): + terser-webpack-plugin@5.3.14(@swc/core@1.11.11)(webpack@5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4)): dependencies: '@jridgewell/trace-mapping': 0.3.25 jest-worker: 27.5.1 schema-utils: 4.3.0 serialize-javascript: 6.0.2 terser: 5.39.0 - webpack: 5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4) + webpack: 5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4) optionalDependencies: - '@swc/core': 1.11.7 + '@swc/core': 1.11.11 - terser-webpack-plugin@5.3.11(webpack@5.98.0(webpack-cli@5.1.4)): + terser-webpack-plugin@5.3.14(webpack@5.98.0(webpack-cli@5.1.4)): dependencies: '@jridgewell/trace-mapping': 0.3.25 jest-worker: 27.5.1 @@ -21338,11 +21536,11 @@ snapshots: tinyspy@3.0.2: {} - tldts-core@6.1.82: {} + tldts-core@6.1.84: {} - tldts@6.1.82: + tldts@6.1.84: dependencies: - tldts-core: 6.1.82 + tldts-core: 6.1.84 tmp@0.0.33: dependencies: @@ -21370,9 +21568,9 @@ snapshots: tough-cookie@5.1.2: dependencies: - tldts: 6.1.82 + tldts: 6.1.84 - tr46@5.0.0: + tr46@5.1.0: dependencies: punycode: 2.3.1 @@ -21398,7 +21596,7 @@ snapshots: ts-interface-checker@0.1.13: {} - ts-jest@29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(jest@29.7.0(@types/node@16.18.126))(typescript@5.8.2): + ts-jest@29.2.6(@babel/core@7.26.10)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.10))(jest@29.7.0(@types/node@16.18.126))(typescript@5.8.2): dependencies: bs-logger: 0.2.6 ejs: 3.1.10 @@ -21412,10 +21610,10 @@ snapshots: typescript: 5.8.2 yargs-parser: 21.1.1 optionalDependencies: - '@babel/core': 7.26.9 + '@babel/core': 7.26.10 '@jest/transform': 29.7.0 '@jest/types': 29.6.3 - babel-jest: 29.7.0(@babel/core@7.26.9) + babel-jest: 29.7.0(@babel/core@7.26.10) ts-loader@9.5.2(typescript@4.9.5)(webpack@5.98.0(webpack-cli@5.1.4)): dependencies: @@ -21504,21 +21702,21 @@ snapshots: dependencies: semver: 7.7.1 - typescript-eslint@8.26.0(eslint@8.57.1)(typescript@5.6.3): + typescript-eslint@8.26.1(eslint@8.57.1)(typescript@5.6.3): dependencies: - '@typescript-eslint/eslint-plugin': 8.26.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3) - '@typescript-eslint/parser': 8.26.0(eslint@8.57.1)(typescript@5.6.3) - '@typescript-eslint/utils': 8.26.0(eslint@8.57.1)(typescript@5.6.3) + '@typescript-eslint/eslint-plugin': 8.26.1(@typescript-eslint/parser@8.26.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3) + '@typescript-eslint/parser': 8.26.1(eslint@8.57.1)(typescript@5.6.3) + '@typescript-eslint/utils': 8.26.1(eslint@8.57.1)(typescript@5.6.3) eslint: 8.57.1 typescript: 5.6.3 transitivePeerDependencies: - supports-color - typescript-eslint@8.26.0(eslint@8.57.1)(typescript@5.8.2): + typescript-eslint@8.26.1(eslint@8.57.1)(typescript@5.8.2): dependencies: - '@typescript-eslint/eslint-plugin': 8.26.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1)(typescript@5.8.2) - '@typescript-eslint/parser': 8.26.0(eslint@8.57.1)(typescript@5.8.2) - '@typescript-eslint/utils': 8.26.0(eslint@8.57.1)(typescript@5.8.2) + '@typescript-eslint/eslint-plugin': 8.26.1(@typescript-eslint/parser@8.26.1(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1)(typescript@5.8.2) + '@typescript-eslint/parser': 8.26.1(eslint@8.57.1)(typescript@5.8.2) + '@typescript-eslint/utils': 8.26.1(eslint@8.57.1)(typescript@5.8.2) eslint: 8.57.1 typescript: 5.8.2 transitivePeerDependencies: @@ -21530,8 +21728,6 @@ snapshots: typescript@5.6.3: {} - typescript@5.7.3: {} - typescript@5.8.2: {} ufo@1.5.4: {} @@ -21556,7 +21752,7 @@ snapshots: undici-types@6.20.0: {} - undici@6.21.1: {} + undici@6.21.2: {} unicode-canonical-property-names-ecmascript@2.0.1: {} @@ -21670,7 +21866,7 @@ snapshots: url@0.11.4: dependencies: punycode: 1.4.1 - qs: 6.13.0 + qs: 6.14.0 use-callback-ref@1.3.3(@types/react@17.0.83)(react@17.0.2): dependencies: @@ -21707,7 +21903,7 @@ snapshots: is-arguments: 1.2.0 is-generator-function: 1.1.0 is-typed-array: 1.1.15 - which-typed-array: 1.1.18 + which-typed-array: 1.1.19 utila@0.4.0: {} @@ -21795,15 +21991,15 @@ snapshots: replace-ext: 2.0.0 teex: 1.0.1 - vite-bundle-analyzer@0.17.1: {} + vite-bundle-analyzer@0.17.3: {} - vite-node@2.1.9(@types/node@22.13.9)(terser@5.39.0): + vite-node@2.1.9(@types/node@22.13.10)(terser@5.39.0): dependencies: cac: 6.7.14 debug: 4.4.0 es-module-lexer: 1.6.0 pathe: 1.1.2 - vite: 5.4.14(@types/node@22.13.9)(terser@5.39.0) + vite: 5.4.14(@types/node@22.13.10)(terser@5.39.0) transitivePeerDependencies: - '@types/node' - less @@ -21815,13 +22011,13 @@ snapshots: - supports-color - terser - vite-node@3.0.7(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0): + vite-node@3.0.9(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0): dependencies: cac: 6.7.14 debug: 4.4.0 es-module-lexer: 1.6.0 pathe: 2.0.3 - vite: 6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + vite: 6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) transitivePeerDependencies: - '@types/node' - jiti @@ -21836,10 +22032,10 @@ snapshots: - tsx - yaml - vite-plugin-dts@3.9.1(@types/node@16.18.126)(rollup@4.34.9)(typescript@4.9.5)(vite@4.5.9(@types/node@16.18.126)(terser@5.39.0)): + vite-plugin-dts@3.9.1(@types/node@16.18.126)(rollup@4.36.0)(typescript@4.9.5)(vite@4.5.9(@types/node@16.18.126)(terser@5.39.0)): dependencies: '@microsoft/api-extractor': 7.43.0(@types/node@16.18.126) - '@rollup/pluginutils': 5.1.4(rollup@4.34.9) + '@rollup/pluginutils': 5.1.4(rollup@4.36.0) '@vue/language-core': 1.8.27(typescript@4.9.5) debug: 4.4.0 kolorist: 1.8.0 @@ -21853,11 +22049,11 @@ snapshots: - rollup - supports-color - vite-plugin-dts@4.5.3(@types/node@16.18.126)(rollup@4.34.9)(typescript@5.8.2)(vite@6.2.0(@types/node@16.18.126)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)): + vite-plugin-dts@4.5.3(@types/node@16.18.126)(rollup@4.36.0)(typescript@5.8.2)(vite@6.2.2(@types/node@16.18.126)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)): dependencies: - '@microsoft/api-extractor': 7.51.1(@types/node@16.18.126) - '@rollup/pluginutils': 5.1.4(rollup@4.34.9) - '@volar/typescript': 2.4.11 + '@microsoft/api-extractor': 7.52.1(@types/node@16.18.126) + '@rollup/pluginutils': 5.1.4(rollup@4.36.0) + '@volar/typescript': 2.4.12 '@vue/language-core': 2.2.0(typescript@5.8.2) compare-versions: 6.1.1 debug: 4.4.0 @@ -21866,17 +22062,17 @@ snapshots: magic-string: 0.30.17 typescript: 5.8.2 optionalDependencies: - vite: 6.2.0(@types/node@16.18.126)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + vite: 6.2.2(@types/node@16.18.126)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) transitivePeerDependencies: - '@types/node' - rollup - supports-color - vite-plugin-dts@4.5.3(@types/node@20.17.23)(rollup@4.34.9)(typescript@5.8.2)(vite@6.2.0(@types/node@20.17.23)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)): + vite-plugin-dts@4.5.3(@types/node@20.17.24)(rollup@4.36.0)(typescript@5.8.2)(vite@6.2.2(@types/node@20.17.24)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)): dependencies: - '@microsoft/api-extractor': 7.51.1(@types/node@20.17.23) - '@rollup/pluginutils': 5.1.4(rollup@4.34.9) - '@volar/typescript': 2.4.11 + '@microsoft/api-extractor': 7.52.1(@types/node@20.17.24) + '@rollup/pluginutils': 5.1.4(rollup@4.36.0) + '@volar/typescript': 2.4.12 '@vue/language-core': 2.2.0(typescript@5.8.2) compare-versions: 6.1.1 debug: 4.4.0 @@ -21885,17 +22081,17 @@ snapshots: magic-string: 0.30.17 typescript: 5.8.2 optionalDependencies: - vite: 6.2.0(@types/node@20.17.23)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + vite: 6.2.2(@types/node@20.17.24)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) transitivePeerDependencies: - '@types/node' - rollup - supports-color - vite-plugin-dts@4.5.3(@types/node@22.13.9)(rollup@4.34.9)(typescript@5.6.3)(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)): + vite-plugin-dts@4.5.3(@types/node@22.13.10)(rollup@4.36.0)(typescript@5.6.3)(vite@6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)): dependencies: - '@microsoft/api-extractor': 7.51.1(@types/node@22.13.9) - '@rollup/pluginutils': 5.1.4(rollup@4.34.9) - '@volar/typescript': 2.4.11 + '@microsoft/api-extractor': 7.52.1(@types/node@22.13.10) + '@rollup/pluginutils': 5.1.4(rollup@4.36.0) + '@volar/typescript': 2.4.12 '@vue/language-core': 2.2.0(typescript@5.6.3) compare-versions: 6.1.1 debug: 4.4.0 @@ -21904,17 +22100,17 @@ snapshots: magic-string: 0.30.17 typescript: 5.6.3 optionalDependencies: - vite: 6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + vite: 6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) transitivePeerDependencies: - '@types/node' - rollup - supports-color - vite-plugin-dts@4.5.3(@types/node@22.13.9)(rollup@4.34.9)(typescript@5.8.2)(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)): + vite-plugin-dts@4.5.3(@types/node@22.13.10)(rollup@4.36.0)(typescript@5.8.2)(vite@6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)): dependencies: - '@microsoft/api-extractor': 7.51.1(@types/node@22.13.9) - '@rollup/pluginutils': 5.1.4(rollup@4.34.9) - '@volar/typescript': 2.4.11 + '@microsoft/api-extractor': 7.52.1(@types/node@22.13.10) + '@rollup/pluginutils': 5.1.4(rollup@4.36.0) + '@volar/typescript': 2.4.12 '@vue/language-core': 2.2.0(typescript@5.8.2) compare-versions: 6.1.1 debug: 4.4.0 @@ -21923,7 +22119,7 @@ snapshots: magic-string: 0.30.17 typescript: 5.8.2 optionalDependencies: - vite: 6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + vite: 6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) transitivePeerDependencies: - '@types/node' - rollup @@ -21933,57 +22129,57 @@ snapshots: dependencies: monaco-editor: 0.40.0 - vite-plugin-svgr@4.3.0(rollup@4.34.9)(typescript@5.6.3)(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)): + vite-plugin-svgr@4.3.0(rollup@4.36.0)(typescript@5.6.3)(vite@6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)): dependencies: - '@rollup/pluginutils': 5.1.4(rollup@4.34.9) + '@rollup/pluginutils': 5.1.4(rollup@4.36.0) '@svgr/core': 8.1.0(typescript@5.6.3) '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(typescript@5.6.3)) - vite: 6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + vite: 6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) transitivePeerDependencies: - rollup - supports-color - typescript - vite-plugin-svgr@4.3.0(rollup@4.34.9)(typescript@5.8.2)(vite@6.2.0(@types/node@16.18.126)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)): + vite-plugin-svgr@4.3.0(rollup@4.36.0)(typescript@5.8.2)(vite@6.2.2(@types/node@16.18.126)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)): dependencies: - '@rollup/pluginutils': 5.1.4(rollup@4.34.9) + '@rollup/pluginutils': 5.1.4(rollup@4.36.0) '@svgr/core': 8.1.0(typescript@5.8.2) '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(typescript@5.8.2)) - vite: 6.2.0(@types/node@16.18.126)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + vite: 6.2.2(@types/node@16.18.126)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) transitivePeerDependencies: - rollup - supports-color - typescript - vite-plugin-svgr@4.3.0(rollup@4.34.9)(typescript@5.8.2)(vite@6.2.0(@types/node@20.17.23)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)): + vite-plugin-svgr@4.3.0(rollup@4.36.0)(typescript@5.8.2)(vite@6.2.2(@types/node@20.17.24)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)): dependencies: - '@rollup/pluginutils': 5.1.4(rollup@4.34.9) + '@rollup/pluginutils': 5.1.4(rollup@4.36.0) '@svgr/core': 8.1.0(typescript@5.8.2) '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(typescript@5.8.2)) - vite: 6.2.0(@types/node@20.17.23)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + vite: 6.2.2(@types/node@20.17.24)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) transitivePeerDependencies: - rollup - supports-color - typescript - vite-plugin-svgr@4.3.0(rollup@4.34.9)(typescript@5.8.2)(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)): + vite-plugin-svgr@4.3.0(rollup@4.36.0)(typescript@5.8.2)(vite@6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)): dependencies: - '@rollup/pluginutils': 5.1.4(rollup@4.34.9) + '@rollup/pluginutils': 5.1.4(rollup@4.36.0) '@svgr/core': 8.1.0(typescript@5.8.2) '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(typescript@5.8.2)) - vite: 6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + vite: 6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) transitivePeerDependencies: - rollup - supports-color - typescript - vite-tsconfig-paths@5.1.4(typescript@5.6.3)(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)): + vite-tsconfig-paths@5.1.4(typescript@5.6.3)(vite@6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)): dependencies: debug: 4.4.0 globrex: 0.1.2 tsconfck: 3.1.5(typescript@5.6.3) optionalDependencies: - vite: 6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + vite: 6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) transitivePeerDependencies: - supports-color - typescript @@ -21998,21 +22194,21 @@ snapshots: fsevents: 2.3.3 terser: 5.39.0 - vite@5.4.14(@types/node@22.13.9)(terser@5.39.0): + vite@5.4.14(@types/node@22.13.10)(terser@5.39.0): dependencies: esbuild: 0.21.5 postcss: 8.5.3 - rollup: 4.34.9 + rollup: 4.36.0 optionalDependencies: - '@types/node': 22.13.9 + '@types/node': 22.13.10 fsevents: 2.3.3 terser: 5.39.0 - vite@6.2.0(@types/node@16.18.126)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0): + vite@6.2.2(@types/node@16.18.126)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0): dependencies: - esbuild: 0.25.0 + esbuild: 0.25.1 postcss: 8.5.3 - rollup: 4.34.9 + rollup: 4.36.0 optionalDependencies: '@types/node': 16.18.126 fsevents: 2.3.3 @@ -22020,38 +22216,38 @@ snapshots: terser: 5.39.0 yaml: 2.7.0 - vite@6.2.0(@types/node@20.17.23)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0): + vite@6.2.2(@types/node@20.17.24)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0): dependencies: - esbuild: 0.25.0 + esbuild: 0.25.1 postcss: 8.5.3 - rollup: 4.34.9 + rollup: 4.36.0 optionalDependencies: - '@types/node': 20.17.23 + '@types/node': 20.17.24 fsevents: 2.3.3 jiti: 1.21.7 terser: 5.39.0 yaml: 2.7.0 - vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0): + vite@6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0): dependencies: - esbuild: 0.25.0 + esbuild: 0.25.1 postcss: 8.5.3 - rollup: 4.34.9 + rollup: 4.36.0 optionalDependencies: - '@types/node': 22.13.9 + '@types/node': 22.13.10 fsevents: 2.3.3 jiti: 1.21.7 terser: 5.39.0 yaml: 2.7.0 - vitefu@1.0.6(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)): + vitefu@1.0.6(vite@6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)): optionalDependencies: - vite: 6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + vite: 6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) - vitest@2.1.9(@types/node@22.13.9)(jsdom@25.0.1)(terser@5.39.0): + vitest@2.1.9(@types/node@22.13.10)(jsdom@25.0.1)(terser@5.39.0): dependencies: '@vitest/expect': 2.1.9 - '@vitest/mocker': 2.1.9(vite@5.4.14(@types/node@22.13.9)(terser@5.39.0)) + '@vitest/mocker': 2.1.9(vite@5.4.14(@types/node@22.13.10)(terser@5.39.0)) '@vitest/pretty-format': 2.1.9 '@vitest/runner': 2.1.9 '@vitest/snapshot': 2.1.9 @@ -22067,11 +22263,11 @@ snapshots: tinyexec: 0.3.2 tinypool: 1.0.2 tinyrainbow: 1.2.0 - vite: 5.4.14(@types/node@22.13.9)(terser@5.39.0) - vite-node: 2.1.9(@types/node@22.13.9)(terser@5.39.0) + vite: 5.4.14(@types/node@22.13.10)(terser@5.39.0) + vite-node: 2.1.9(@types/node@22.13.10)(terser@5.39.0) why-is-node-running: 2.3.0 optionalDependencies: - '@types/node': 22.13.9 + '@types/node': 22.13.10 jsdom: 25.0.1 transitivePeerDependencies: - less @@ -22084,15 +22280,15 @@ snapshots: - supports-color - terser - vitest@3.0.7(@types/debug@4.1.12)(@types/node@22.13.9)(@vitest/ui@3.0.7)(jiti@1.21.7)(jsdom@25.0.1)(terser@5.39.0)(yaml@2.7.0): + vitest@3.0.9(@types/debug@4.1.12)(@types/node@22.13.10)(@vitest/ui@3.0.9)(jiti@1.21.7)(jsdom@25.0.1)(terser@5.39.0)(yaml@2.7.0): dependencies: - '@vitest/expect': 3.0.7 - '@vitest/mocker': 3.0.7(vite@6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) - '@vitest/pretty-format': 3.0.7 - '@vitest/runner': 3.0.7 - '@vitest/snapshot': 3.0.7 - '@vitest/spy': 3.0.7 - '@vitest/utils': 3.0.7 + '@vitest/expect': 3.0.9 + '@vitest/mocker': 3.0.9(vite@6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) + '@vitest/pretty-format': 3.0.9 + '@vitest/runner': 3.0.9 + '@vitest/snapshot': 3.0.9 + '@vitest/spy': 3.0.9 + '@vitest/utils': 3.0.9 chai: 5.2.0 debug: 4.4.0 expect-type: 1.2.0 @@ -22103,13 +22299,13 @@ snapshots: tinyexec: 0.3.2 tinypool: 1.0.2 tinyrainbow: 2.0.0 - vite: 6.2.0(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) - vite-node: 3.0.7(@types/node@22.13.9)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + vite: 6.2.2(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + vite-node: 3.0.9(@types/node@22.13.10)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) why-is-node-running: 2.3.0 optionalDependencies: '@types/debug': 4.1.12 - '@types/node': 22.13.9 - '@vitest/ui': 3.0.7(vitest@3.0.7) + '@types/node': 22.13.10 + '@vitest/ui': 3.0.9(vitest@3.0.9) jsdom: 25.0.1 transitivePeerDependencies: - jiti @@ -22127,45 +22323,45 @@ snapshots: void-elements@3.1.0: {} - volar-service-css@0.0.62(@volar/language-service@2.4.11): + volar-service-css@0.0.62(@volar/language-service@2.4.12): dependencies: vscode-css-languageservice: 6.3.2 vscode-languageserver-textdocument: 1.0.12 vscode-uri: 3.1.0 optionalDependencies: - '@volar/language-service': 2.4.11 + '@volar/language-service': 2.4.12 - volar-service-emmet@0.0.62(@volar/language-service@2.4.11): + volar-service-emmet@0.0.62(@volar/language-service@2.4.12): dependencies: '@emmetio/css-parser': 0.4.0 '@emmetio/html-matcher': 1.3.0 '@vscode/emmet-helper': 2.11.0 vscode-uri: 3.1.0 optionalDependencies: - '@volar/language-service': 2.4.11 + '@volar/language-service': 2.4.12 - volar-service-html@0.0.62(@volar/language-service@2.4.11): + volar-service-html@0.0.62(@volar/language-service@2.4.12): dependencies: vscode-html-languageservice: 5.3.1 vscode-languageserver-textdocument: 1.0.12 vscode-uri: 3.1.0 optionalDependencies: - '@volar/language-service': 2.4.11 + '@volar/language-service': 2.4.12 - volar-service-prettier@0.0.62(@volar/language-service@2.4.11)(prettier@3.5.3): + volar-service-prettier@0.0.62(@volar/language-service@2.4.12)(prettier@3.5.3): dependencies: vscode-uri: 3.1.0 optionalDependencies: - '@volar/language-service': 2.4.11 + '@volar/language-service': 2.4.12 prettier: 3.5.3 - volar-service-typescript-twoslash-queries@0.0.62(@volar/language-service@2.4.11): + volar-service-typescript-twoslash-queries@0.0.62(@volar/language-service@2.4.12): dependencies: vscode-uri: 3.1.0 optionalDependencies: - '@volar/language-service': 2.4.11 + '@volar/language-service': 2.4.12 - volar-service-typescript@0.0.62(@volar/language-service@2.4.11): + volar-service-typescript@0.0.62(@volar/language-service@2.4.12): dependencies: path-browserify: 1.0.1 semver: 7.7.1 @@ -22174,14 +22370,14 @@ snapshots: vscode-nls: 5.2.0 vscode-uri: 3.1.0 optionalDependencies: - '@volar/language-service': 2.4.11 + '@volar/language-service': 2.4.12 - volar-service-yaml@0.0.62(@volar/language-service@2.4.11): + volar-service-yaml@0.0.62(@volar/language-service@2.4.12): dependencies: vscode-uri: 3.1.0 yaml-language-server: 1.15.0 optionalDependencies: - '@volar/language-service': 2.4.11 + '@volar/language-service': 2.4.12 vscode-css-languageservice@6.3.2: dependencies: @@ -22285,9 +22481,9 @@ snapshots: webpack-cli@5.1.4(webpack-dev-server@5.2.0)(webpack@5.98.0): dependencies: '@discoveryjs/json-ext': 0.5.7 - '@webpack-cli/configtest': 2.1.1(webpack-cli@5.1.4(webpack-dev-server@5.2.0)(webpack@5.98.0))(webpack@5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4)) - '@webpack-cli/info': 2.0.2(webpack-cli@5.1.4(webpack-dev-server@5.2.0)(webpack@5.98.0))(webpack@5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4)) - '@webpack-cli/serve': 2.0.5(webpack-cli@5.1.4(webpack-dev-server@5.2.0)(webpack@5.98.0))(webpack-dev-server@5.2.0(webpack-cli@5.1.4)(webpack@5.98.0))(webpack@5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4)) + '@webpack-cli/configtest': 2.1.1(webpack-cli@5.1.4(webpack-dev-server@5.2.0)(webpack@5.98.0))(webpack@5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4)) + '@webpack-cli/info': 2.0.2(webpack-cli@5.1.4(webpack-dev-server@5.2.0)(webpack@5.98.0))(webpack@5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4)) + '@webpack-cli/serve': 2.0.5(webpack-cli@5.1.4(webpack-dev-server@5.2.0)(webpack@5.98.0))(webpack-dev-server@5.2.0(webpack-cli@5.1.4)(webpack@5.98.0))(webpack@5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4)) colorette: 2.0.20 commander: 10.0.1 cross-spawn: 7.0.6 @@ -22296,12 +22492,12 @@ snapshots: import-local: 3.2.0 interpret: 3.1.1 rechoir: 0.8.0 - webpack: 5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4) + webpack: 5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4) webpack-merge: 5.10.0 optionalDependencies: webpack-dev-server: 5.2.0(webpack-cli@5.1.4)(webpack@5.98.0) - webpack-dev-middleware@7.4.2(webpack@5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4)): + webpack-dev-middleware@7.4.2(webpack@5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4)): dependencies: colorette: 2.0.20 memfs: 4.17.0 @@ -22310,7 +22506,7 @@ snapshots: range-parser: 1.2.1 schema-utils: 4.3.0 optionalDependencies: - webpack: 5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4) + webpack: 5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4) webpack-dev-server@5.2.0(webpack-cli@5.1.4)(webpack@5.98.0): dependencies: @@ -22339,10 +22535,10 @@ snapshots: serve-index: 1.9.1 sockjs: 0.3.24 spdy: 4.0.2 - webpack-dev-middleware: 7.4.2(webpack@5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4)) + webpack-dev-middleware: 7.4.2(webpack@5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4)) ws: 8.18.1 optionalDependencies: - webpack: 5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4) + webpack: 5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4) webpack-cli: 5.1.4(webpack-dev-server@5.2.0)(webpack@5.98.0) transitivePeerDependencies: - bufferutil @@ -22358,7 +22554,7 @@ snapshots: webpack-sources@3.2.3: {} - webpack@5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4): + webpack@5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4): dependencies: '@types/eslint-scope': 3.7.7 '@types/estree': 1.0.6 @@ -22380,7 +22576,7 @@ snapshots: neo-async: 2.6.2 schema-utils: 4.3.0 tapable: 2.2.1 - terser-webpack-plugin: 5.3.11(@swc/core@1.11.7)(webpack@5.98.0(@swc/core@1.11.7)(webpack-cli@5.1.4)) + terser-webpack-plugin: 5.3.14(@swc/core@1.11.11)(webpack@5.98.0(@swc/core@1.11.11)(webpack-cli@5.1.4)) watchpack: 2.4.2 webpack-sources: 3.2.3 optionalDependencies: @@ -22412,7 +22608,7 @@ snapshots: neo-async: 2.6.2 schema-utils: 4.3.0 tapable: 2.2.1 - terser-webpack-plugin: 5.3.11(webpack@5.98.0(webpack-cli@5.1.4)) + terser-webpack-plugin: 5.3.14(webpack@5.98.0(webpack-cli@5.1.4)) watchpack: 2.4.2 webpack-sources: 3.2.3 optionalDependencies: @@ -22436,9 +22632,9 @@ snapshots: whatwg-mimetype@4.0.0: {} - whatwg-url@14.1.1: + whatwg-url@14.2.0: dependencies: - tr46: 5.0.0 + tr46: 5.1.0 webidl-conversions: 7.0.0 which-boxed-primitive@1.1.1: @@ -22463,7 +22659,7 @@ snapshots: isarray: 2.0.5 which-boxed-primitive: 1.1.1 which-collection: 1.0.2 - which-typed-array: 1.1.18 + which-typed-array: 1.1.19 which-collection@1.0.2: dependencies: @@ -22474,16 +22670,13 @@ snapshots: which-pm-runs@1.1.0: {} - which-pm@3.0.1: - dependencies: - load-yaml-file: 0.2.0 - - which-typed-array@1.1.18: + which-typed-array@1.1.19: dependencies: available-typed-arrays: 1.0.7 call-bind: 1.0.8 call-bound: 1.0.4 for-each: 0.3.5 + get-proto: 1.0.1 gopd: 1.2.0 has-tostringtag: 1.0.2 @@ -22588,7 +22781,7 @@ snapshots: yocto-queue@0.1.0: {} - yocto-queue@1.1.1: {} + yocto-queue@1.2.0: {} yocto-spinner@0.2.1: dependencies: @@ -22598,7 +22791,7 @@ snapshots: yup@0.29.3: dependencies: - '@babel/runtime': 7.26.9 + '@babel/runtime': 7.26.10 fn-name: 3.0.0 lodash: 4.17.21 lodash-es: 4.17.21 @@ -22614,7 +22807,7 @@ snapshots: optionalDependencies: commander: 9.5.0 - zod-to-json-schema@3.24.3(zod@3.24.2): + zod-to-json-schema@3.24.4(zod@3.24.2): dependencies: zod: 3.24.2